Making 3D Flip Blocks Fit into the 2D World of Blockwick 2

blockwick_2_flip_blocksBlockwick 2 is rendered completely with 2D sprites except for one special block type, the Flip Block. With so many possible arrangements of colors and animations, using 2D sprites would have been far too complicated and tedious to implement. Using a 3D asset made the most sense as we need to be able to select a color for all six sides and animate the block flipping over as it rolls around the board. The animation is especially important as it allows the player to understand that with each move the block is rolling rather than sliding.

First, our designer, David, modeled the 3D asset in Blender. Once in Unity, we needed to rotate the Flip Block around the X-axis to match our the angle of three dimensional illusion from our 2D sprite.

blockwick_2_flip_blocks_in_unity

Since our 2D tile grid is non-square, even with the flip block rotated, it still lines up perfectly with all the 2D sprites. Now we light the Flip Block(s) with a single directional light rotated an angle based upon the length of the block shadows. It’s a good start, but our shading if far too dark and not at matching the style of the rest of the scene. So we crank our ambient light color all the way to pure white and adjust the intensity of our directional light. This is now essentially mimicking the screen shader used to render the normal Color Block sprites. Finally, we adjust the specular colors for materials that are applied to the faces of the Flip Block for a bit of fine tuning.

/img/blockwick_2_flip_block_in_unity_2.png

There you go, a 3D-lit object mimicking the style of the 2D game. Check out blockwick.com to see it in action.