[DESIGN] Graphics Planning

[np-eazy]

This issue is a scratchpad for planning transitions, animations, particle effects, etc. to make the game more appealing.

1. Cell Graphics/Coloring

• Color: There are 13 different blocks, figure out 13 base colors; flipping a piece will invert the hue. Symmetric pieces have no hue: T, U, X, and I-blocks will be on the (blue-leaning) grayscale
• Glow/bleed: Have a variable amount of glow/bleed into

2. Different types of cells

• Cell.type == 0: Dark gray, blue-leaning background, with slightly brighter borders. Don't use 100% solid borders, only render +'s at the corners so it doesn't look cliche as a grid.
• Cell.type == 1: colored border, inside is colored X
• Cell.type == 2: colored border, inside is colored +
• Cell.type == 3: colored border, inside is colored outline diamond
• Cell.type == 4: colored border, inside is two concentric colored outline squares.

3. Gameplay Cues: An important set of graphic features to have is visual cues to make the game easier to play. This would include:

• The column/row of tiles that the piece will sweep as it is falling
• Arrowed tiles pointing in that direction
• Mini arrow cues in the direction of mouse movement

4. Idle Animations:

• Field/wave effects for filled cells; maybe even recycle that diffusion animation I have on my personal site at joey-j-zhu.github.io
• There are 4 different types of cells. Give each one a scalar "transient" parameter and a transient animation which takes in that parameter. This parameter will come from whatever algorithm we use to "diffuse" the board

5. Active Animations:

• When a piece is dropped, it adds to a global shake factor

• When a row/block is filled, start from the center and set blocks to shrink/disappear. When disappearing, they turn to particles that represent score

• Add a gravity/falling offset to blocks "above"

  • When a block finishes "falling" to its new location, it adds to a global shake factor that decays overtime and globally offsets the render
  • When an explosion occurs, add to a global flash factor and spawn high-velocity particles

6. Particles:
   • Color: Take a random sample of the colors of the parent objects that spawn this particle
   • Blend: try to see if Canvas can do linear dodge
   • Size/shape: squares for now, nothing too hard
   • Particles spawn with small velocity when lines are cleared or when pieces are dropped
   • Particles spawn with high velocity when explosions occur
   • Trajectory: particles fall in the direction of gravity, which has a gradual transition rotation between each block placement

[np-eazy]

As of PR #48 merge I'll just recomment things to be implemented for convenience.

• Add glow/bleed between neighbors, and have GameState make random selections/diffusions a few times each turn

• Global board offset for shaking animations

• To animate row clears, we can give a Cell a shadow Cell which is rendered without offset until the main cell's xOffset and yOffset are sufficiently low.

• Add a set of glidingColors on top of the ColorSuite; each tick the glidingColors interpolate towards the ColorSuite as a target. glidingColors can be used to implement flashes just by setting them on one frame and letting them update in the next ones.

• Try to get a fade-out effect when converting a normal to an empty cell so it isn't as abrupt.

• (not needed anymore) Different types of cells seem set in stone for now, balance out good design with minimal graphics

• (not needed anymore) it's pretty self-explanatory now which direction the piece is falling, arrows and dxn not needed

• (not needed anymore) For sake of keeping this in JS we can ditch the particles; there is still so much room for cool graphics without them.