The week I decided to add some UI to my game. I decided that I wanted to keep all my UI in the style of the hexagon grid, so I decided to use hexagons throughout the app. This will also help to reduce the final build size as I will be reusing the same sprites.
The first part of my UI that I created was my in-game UI. For this I just used a couple of hexagons and text to let the user know what level they are on and how many bombs are remaining in the level. In the corner I added a button to access the settings, remove ads and provide feedback. I create a nice animation for this where the UI seems to fall from the settings button.
Here is my menu open animation: https://gyazo.com/22322a1ec37396fba98f052a4482b3f2
Here is my settings animation: https://gyazo.com/c96415beff871c41c18b95f1b8920a0f
After I created the game UI, I wanted to add a level selection. I decided to keep the same hexagon theme and create a level selection that connected hexagons together to form a path. I generated this path on runtime using some predefined dimensions of the hexagons. The hardest part of this was to get the transitions between each level to correctly line up in the centre of the hexagons.
Here is my level selection: https://gyazo.com/f820c80c84efd189f1df34b019a55edf?token=43b040d711a3912f609bcefa9ac37a35
Next, I created the start screens and the popup system. The start screen was just a simple screen that allows the user to navigate to the level selection screen or to access the settings. For my popup system, I used a popup base class to create my popups from, so they all have the same styles/animations. I was then able to show a popup using the Popup Manager class from anywhere throughout the app.
Start screen: https://gyazo.com/8314adcc36da37b02bedce2da24cc094
Feedback popup: https://gyazo.com/a0f28e30192eea03c690a0e66e6ce474
The final thing I did for my UI was my UI animations. I decided that I wanted every aspect of the app to flow nicely so I created some animations that look like the UI all just flowed together. I did all my UI animations using LeanTween, so I was able to animate elements between two values using a curve to create a nice animation.
Start screen -> level selection -> level: https://gyazo.com/ff356296d6cbbfb40fa4e52faf7fe301
Level -> level selection: https://gyazo.com/03f99a6706c06ab32989287826110c3a
Here is a screenshot of my GameUI:
This is what my level selection looks like now: