Animating Menu

In this article, I will show you how to animate the Menu Elements.

Erik Juico avatar
Written by Erik Juico
Updated over a week ago

Let us start off by animating the Main Menu. To do this let us click the Menu Editor and double click Main Menu UI. 

At the buttom of the window is where we will find the option to animate menu elements.

Let us try an animate our game title. What I want is for the title to come from left going to the middle when we start our game. 

Since we want to animate when we open our game, first thing to do is to click open then click the title.

I clicked the record button and used the mouse scroll to zoom out and created a space so I can move the title off the screen. Remember to hold the shift button after you click your object so it moves in a straight line.

Then I will move the orange frame bar to where I want to record the next position point and move the title back to where it should be placed.

After that, I stopped recording and previewed it to see if it did what I want it to do.

Now let us try to animate the Start button. I want it to move the like the title but from the opposite side.

So I started by moving the picture to the left side so I have a space where I can put the start button.
Then I pressed record and moved the orange frame bar to 0 and moved the start button off the screen.
I moved the orange frame bar to frame 30 and and moved the start button to where I wanted it to be.

Let us see how it looks like when we preview it.

Now let us get into the Idle animation sequence by animating the Start button by giving it a little shake.

First I clicked the Idle button, then I dragged the orange frame bar to 0.

Now I pressed record, moved the orange frame bar to 10 and clicked rotation field and press enter to record a position point.

Then I moved the orange frame bar from 10 to 12 and enter -2(make sure to press enter to record the position point) in the rotation field to start the shake animation.

Moved the orange frame bar to 14, typed 2 in the rotation field and pressed enter.

Now I moved the orange frame bar from 14 to 16 and typed -3 in the rotation field and pressed enter.

Moving to frame 18 and 3 in the rotation field and pressed enter.

Moved the orange frame bar to 20, typed 0 in rotation field and the last step is to press the loop button so it keeps on moving while idle.

Here's what it should look like when you are done.

We can also use opacity to animate our menu elements. Its very easy to do.

While on Idle, I pressed record and I moved the orange frame bar to 40 and click the opacity field then I pressed enter to create a position point. 

I then moved the orange frame bar to 0 and changed the opacity to 0.2.

Here is what it does.

Now let us try to animate our Game Over UI. Let us click the Menu Editor button and double click the node for Game Over UI.

Once inside, lets animate the buttons just like what we did with the above.

After making sure that Open is selected, I pressed record and moved the buttons off the screen.

Then I moved the orange frame bar from 0 to 30 and moved the buttons back to its original positions.

While still on record, I selected the Idle button and moved the orange frame bar to 0.

Then I clicked on the scale field and pressed enter to record the position point.

Now I moved the orange frame bar from 0 to 20 and enlarged the game over title.

Then I moved the orange frame bar to 40, entered 1 in both scale field and pressed the loop button.

Now here is what our game looks like with the animated menus.

Did this answer your question?