Screenshot of the Tankmanious main menu scene version 1

Flipping UI canvas system

For the Tankmanious main menu screen I wanted to develop a UI system that uses Unity’s ‘world space’ canvas system, because I love the idea of information screens magically floating around having a position in 3D space instead of being flat and right in front of the ‘lens’. I also love the idea of a card that shows a different side every time it is being turned over, like some kind of four dimensional object.

The way that the system works is that on the exact amount of degrees of rotation around the Z-axis, where the flat side of the UI canvas points directly to the camera, it switches the front canvas to inactive and which ever back facing canvas that is needed by the button to active, like a magicians card trick!

The way that I found this to be relatively easy to set up was by using four animation clips for the four states; closed, half open, open and half closed. The clips only have two keyframes, one for the rotation, and one that sets the canvas to active or inactive. The smooth rotation is being done by the animator that transitions between the four states.

I’m very pleased with the way it works and how it looks, but I’m already working on a version two for the main menu screen because I want to create a more interesting background scene, and to be honest, I kind of stole the idea for this background composition.:)

More soon!