• Register
Post news RSS DevBlog 19 - Making a Main Menu Out of Moving Lasers

A from-scratch C++ dynamic 3D animating UI system using spatial hash grid and lasers!

Posted by on

A from-scratch C++ dynamic 3D animating UI system using spatial hash grid!
I've defined my game's main menu using this system.
Buttons are constructed from shared "lasers".
That is, when we go a screen, the buttons request lasers to make up their shape.
These lasers are requested from a pool, and are interpolated to position from offscreen.
This means that the UI can form in slightly different ways each time, based on previous interactions with the pool (eg sometimes the top border of a button can come from the right, but other times it can come from the bottom).

sa vid19 mainmenu

The text is also animated by hand.
Previously, I created an efficient rendering digital clock font system.
That digital clock system used bitvectors to turn on and off specific quads.
To animate the text, I bitshift the bitvector that determines which quads are turned on/off.
This gives the effect of scrambling the text.
Eventually the bitvector becomes all zeros, which means no text is rendered.
So, to turn the text off, we bitshift away from the correct vector.
To turn the text on, we bitshift towards the correct bitvector.

I have created a Campaign screen used linear single player experience.
I took inspiration from star fox n64 where you could choose your path between planets.
You start off with 3 planet choices to choose from.
Each planet has some limited number of outgoing connections.
If you play and complete that level successfully, then you unlock that planet's outgoing connections.
When levels unlock, their planet gains color and is selectable.
This is how you can create a custom path to the final level.

I have created a "campaign config" which is a json that defines the layout of these levels, and their outgoing connections.

There is also a "save game config" which a json file saved that defines the levels you have completed.

I also created a skirmish screen.
Here, you can set up a custom match with custom parameters, for quick play.

sa vid19 skirmish screen

I've also created a dedicated screen for mods!
The entire game is built so that you can add custom models.

I also went ahead and created a game settings page.
While there are not many setting yet, I want to get a place that they can be easily added to.
I built a slider using the custom laser/text ui system.
I used vector math, which projects a vector from-the-corner-to-your-mouse onto the slider line vector.

The entire UI system is build in 3D.
I leveraged my spatial hash system to build it.
All widgets are assigned to cells.
When the mouse moves, it does a cell-ray-cast to determine the populated cells that are under mouse cursor.
It then tests against the cells to find if any widgets are under the mouse cursor, and fires the appropriate virtuals if so (eg OnHovered).
There are some potential optimizations left to be done with that system.

And lastly, I added an exit screen.
It has about as many features as you would imagine for an exit screen.
"Exit" or "Cancel".

I consider most of the work for the main menu UI system to be complete at this point.

Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.