Main Menu Animation

Spicing up the main menu

Now it is time to work on the main menu of the game. This is important as it is the main launch page that every player will see before starting the game, therefore it must be simple, precise and easy to navigate.

Setting up the Scene:

To start we need to create a new scene which will house all the main menu objects.

Since all of our components would be UI elements, we need to start by creating an canvas with an image. This image component would be our background image.

Dividing the background image via Photoshop:

This is an “extra” step which I personally did just to add more dynamic elements in the menu.

I imported the background image provided and splice the yellow person by itself and also the background by itself. The hole which was left behind by omitting the yellow character we filled by painting the whole with the appropriate colors.

separating both the character and background

tip: Make sure you save the new images as PNG files to keep that transparent background, especially for the yellow character.

Back in Unity, import those two new images and make sure that the Texture type is set to Sprite (2D and UI), otherwise you won’t get the Transparency effect.

Setting the transparency for the import images so they can be used as UI components.

Replace the white image with the background image, and add another image component to replace with the yellow character. Do the same setup for the text image.

This is what you should have now.

Since we have individual objects for the character and text, we can now animate them accordingly. I want to have the yellow person slide in from the left side and then have him shift from left to right slowly as a ambient movement, the movement after a while would reset so the yellow person would pan back out of the scene then come back in.

Then I would have the text fade in while slowly panning from the right to left until to reaches the center.

To finish off the main menu, we will add two buttons named “Start” and “Quit” which we will program in the next article.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Simon Truong

Simon Truong

A Designer, an Illustrator and a massive tech geek aspiring to become a professional Unity Developer.