Embed Size (px)
Citation preview
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.
NOTE: That is actually a GIF animated image .... (so it is compressed & uploaded seprately)
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:
NOTE: That is actually a GIF animated image .... (so it is compressed & uploaded seprately)
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:
NOTE: That is actually a GIF animated image .... (so it is compressed & uploaded seprately)
13.Create an Animation named MainMenuFadeIn to Fade in the Main Menu as in the gif below:
NOTE: That is actually a GIF animated image .... (so it is compressed & uploaded seprately)
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.
Thankx for your support....And Don’t forget to download Compressed File (having animated GIF images)
Regards:
Email: [email protected]
Phone: 0332 7323432
Blog: https://owaiscomsian.wordpress.com/
Facebook: https://www.facebook.com/owais.comsats
