Create An Animated Menu - Unity 4.6

There is a saying which says, "Do not judge a book by it's cover". Most of the times this is true, but a good book with a good cover is just like "icing on the cake". In this post, we will learn how to create an Animated Main Menu in Unity 4.6 GUI.

The Animated Menu





1. Assuming you have created a project and a scene for the Animated Menu. We will add a New Panel to our scene by navigating to GameObject->UI->Panel. You will notice that, unity has automatically created a Canvas element and the Panel is made a child of this Canvas. Also an EventSystem object is created which, as of now is not in the scope of this post.
Rename the Panel as MainMenu. Change the color of the Panel Image(Script) as per your needs.
Once you have done that, you should have something like the image below:


2. Click on Canvas in the Hierarchy. In the Inspector, change the Render Mode of the Canvas to Screen Space - Camera. Check the Pixel Perfect checkbox. Drag and drop the Main Camera to the Render Camera field of the Render Mode of Canvas.


3. Click on the MainMenu in the Hierarchy and press ctrl+D to duplicate the Panel. Rename it to LevelSelect. Make sure LevelSelect is above MainMenu.



4. Create a button under the MainMenu Panel by right clicking on MainMenu->UI->Button. Name it as Play. Reposition it as in the image below or as per your needs. Also, place the anchor points around the edges of the button.
Change the text of the Button text to PLAY. Change the color of the Image(Script) of the Play button to any color of your choice.
Change the Text color too if you want to.
Tick the Best Fit checkbox of the Text(Script) to make the Font Size dynamic.


5. Add a Text component inside the MainMenu Panel to display the game name or any text you like. Change the font to any custom font you like. Once you are done with that, you will have something like the image below.


6. Duplicate the Play button and rename it to Level1. Change the Text of the button to LEVEL 1.
Move this button inside the LevelSelect Panel.



7. Repeat the same process above for the Text as well, if you have created one. The button and the text of the LevelSelect will not be visible as the priority of the MainMenu panel is higher than the LevelSelect panel.

8. Add an Animator component to the MainMenu panel by clicking on Add Component->Miscellaneous->Animator in the Inspector of the MainMenu Panel. Uncheck it as we don't need it on start of the scene.

9. Open the Animation window and pin it besides the Game window as in the GIF below


10. Create a folder named Animations under the Assets folder in the Project tab.

11. With MainMenu selected in the Hierarchy. Switch to the Animation window and click on the Play button (not the Play button we created, the Play button in the Animation window)
On clicking, you will get a pop up box asking you to give a name for the Animation to be created. Name the animation as MainMenuFadeOut. Once you Save the Animation, click on Play button again to stop the Recording.

12. Now, we create an Animation where in the scale of the Panel decreases gradually from 1 to 0 in one second. Refer the gif below


13. Create an Animation named MainMenuFadeIn to Fade in the Main Menu as in the gif below


14.  Uncheck the Loop Time checkbox of both the Animations created.


15. Double click on the MainMenu Animator that was created after you created your first animation i.e., MainMeuFadeOut.
Make sure it looks like the image below:


The MainMenuFadeOut should be the default Animation, i.e., it's color should be Orange.

16. Select the Play button of the MainMenu panel in the Hierarchy. In the Inspector, click on the + sign to add a function.


17. Drag and drop the MainMenu panel in the Object field and select Animator->bool enabled in the Function field. Check the checkbox once you add this. What this does is enables the animator component on clicking the Play button and plays the default animation i.e., MainMenuFadeOut once


18. If you test the scene by pressing ctrl+p, on clicking Play button, you will notice that the Menu changes from MainMenu to LevelSelect.  

19. Now, we will add a script to play the MainMenuFadeIn animation when the LevelSelect panel is displayed and escape key is pressed. Create a script named MenuNavigationScript, attach it to the MainCamera and add the below code to it.

using UnityEngine;
using System.Collections;
using UnityEngine.UI;

public class MenuNavigationScript : MonoBehaviour {

 public RectTransform mainMenuPanel;    //reference for MainMenupanel
 public Animator mainMenuAnimator;   //Animator reference

 // Update is called once per frame
 void Update () {
  if(Input.GetKey(KeyCode.Escape)){   //check if escape key is pressed
   if((int)mainMenuPanel.localScale.x==0){ //check if scale of MainMenu Panel is 0
    mainMenuAnimator.Play("MainMenuFadeIn"); //play fade in animation
   }
  }
 }
}


20. Save the script and return to Unity. Add the fields with their respective components.


Test the scene to see that our menu is fully animated now. You can create different animations based on your requirements and apply them wherever needed.

See you around.

Also check out,
Unity 4.6 GUI - Create A Dynamic Menu With The New UI
Unity 4.6 GUI - Create A Health Bar HUD
Unity 4.6 GUI - Create A Level Select Scroll Menu
Unity 4.6 GUI - Create A Level Lock/Unlock System
Unity 4.6 GUI - Add Fade Between Scenes
Unity 4.6 GUI - Add A Loading Scene / Splash Screen
Unity 4.6 GUI - Create A Sliding Pause Menu
Share on Google+

About Sujit Horakeri

Sujit Horakeri is a game freak just like any other next door guy you would come across. He is a Web Developer by Profession, Game Developer by Choice.
Connect with him on:
    Blogger
    Facebook

6 comments:

  1. Replies
    1. We are glad that you liked our post.. :) Keep visiting

      Delete
  2. Thanks man! You just earned a new frequent visitor to your site. The posts here are really helpful. Keep them coming :)

    ReplyDelete
    Replies
    1. Glad you liked our site... yes we will keep them coming as long as guys like you keep us going... ;)

      Delete
  3. searching for tuto on Gui animate and found your blog..tq

    ReplyDelete
  4. Thank you it was very helpful!
    But if i want to return to main menu by a button in the level select what should I do ??
    Can you post a script describing what I want ?

    ReplyDelete