Creating the Main Menu

During the creation of the Unity Ads Initializer we briefly created a scene with a make shift button that allows users to progress to the game scene. Now we are going to spice up the main menu scene by adding images and special effects.

Preparing the Main Menu:

If you are part of the GameDevHQ program, you would be provided with an image for the template background along with the buttons. If you aren’t, you are free to grab one from the internet as long as you have permission and give proper credits to the artist. Or if you are an artist yourself you can even draw your own.

During the planning and layout of my Main Menu scene, I wanted several features to be implemented:

1. I wanted to have some animation to occur during the launch of the scene
2. The buttons that appear should also have a fade in effect
3. The buttons should contain the “Play” button, a “Credits” button and “Quit” Button.
4. I also want some glowing animation coming from the Background image.

Within Adobe Illustrator I mocked up a basic layout for the Main Menu, then I decided to redesign the buttons to match the Game UI.

I wanted the spell circle in the background of the name title to spin and fade in and fade out just before the Title appears, then the buttons would slowly fade in one by one. To the left, I want a simple color fade on the Main Character’s sword.

Importing to Unity

Once I figured out the Menu structure, I imported everything into Unity and rearrange everything to the layout within Illustrator. I made sure to create a brand new UI Panel to house these new components. I also divided the Buttons and the rest of the Menu components into separated folders.

The Background and Buttons are both in separated UI Panels.

Animating

I first animated the spell circle in the background by creating a new animation. Then when I am record mode, I rotated the image by 360 degrees and also adjusted the alpha to change the transparency.

Then I duplicated the same spell circle 3 times and shrunk their size to create the current pattern you see.

For the Buttons, I created the animation within the Buttons UI panel instead of the individual buttons themselves, that way I can control all 3 buttons a the same time.

Following the Buttons I also added a Fade In effect for the Main title, and adjust the timing of the fade in to happen just after the spell circle animation to appear.

Finally, for the Background image I wanted to add the subtle glowing effect on the Knight’s sword. Therefore within Illustrator I traced out the sword shape and imported into Unity. Then I changed the alpha during the animation.

The End result of the Main Menu should look something like this:
edit: I changed the “Menu” Button to “Credits” button since the Menu Button doesn’t provide any function inside the main menu scene.