This is a post explaining how I implemented the menu transition visuals seen in this video:

In This Post:

• What my process was in implementing these visuals, and how I converted the original idea to reality
• Explanation of the complex 3D math involved in the menu visuals
• Breakdowns of the menu transitions and idle animations
• Brief videos showcasing both of the above
• Possible improvements that could be made / features that could be added

Let’s get right into it!

Part 1: The Idea

My vision for Synthrally’s visuals is to invoke the feeling of a futuristic arcade machine.  Since the very beginning of my visual overhaul, I wanted the menus to have presence; as if they were actually there on a physical machine, and not just UI that were sprites just billboarded to the screen. To that effect, I had this idea of the buttons being embedded into this background grid that had horizontal wipes whenever there were menu changes, as if the buttons were being created and destroyed as the menu switched.

I was inspired a bit by the transitions in Heroes of the Storm; when you get to the hero select screen in that game, a shockwave travels through a grid from the bottom of the screen to the middle, and the tiny bases that the heroes stand on flip over in that direction as they materialize on the grid. I felt that this gave those stands and the background pieces around them a degree of physicality, since you can see that they are clearly 3d objects and not just an infinite plane with a tiling texture on it. Realizing that I could merge this concept with the hexagon lattice I had experimented with as a level background, I took some time to break down the separate features that I would need to accomplish this into separate items on Trello cards, seen below:

With the feature broken down into parts, I immediately started work on getting the base parts functioning first. Read More…