Home / Legacy / Lesson 12: The Main Menu

Lesson 12: The Main Menu

/
/
/
461 Views
This entry is part 15 of 15 in the series Unity 3d Fundamentals Course

In this lesson we will create the Main Menu. We will explore the Unity 3d Animation system as well as the iTween Plugin. This will be the final product of this lesson:

Lesson Outline

Create the Main Menu

First we will need to create a new scene for our Main Menu. But since we want to create an environment overview let’s just save the current game scene with a different name and prepare it for being the menu scene. In my case I’ve enabled all the stage beacons and left only a couple of targets per stage. I’ve done this to give some “life” to the environment during the overview. Dont’ forget to delete the First Person Controller but first remove its Main Camera and place it on the environment.

Lesson 12: The Main Menu Unity 3d Animation

Now the important part is to create the Main Menu system. We will use a different approach from the last lesson and instead of using the GUI system we will build our menu using GameObjects. Since we will be using Quads for the logo and the buttons we need to create a second Camera with an ortographic projection.

Lesson 12: The Main Menu Unity 3d Animation
The menu camera will be rendered on top of the main perspective camera (similar to the camera weapon that we used before) so don’t forget to change the Clear Flags to Depth Only and the Depth to 1. Antoher important aspect to consider is placing the camera on top of your terrain – you don’t need to worry about using different layers so the camera don’t see the menu – and also decrease the far clip plane because there is no use for a so large value.

Now each element in our Menu will be a Quad with the corresponding texture. Let’s start by creating the logo texture for our menu. So create a new Quad and place it as a child of your Menu Camera – just for organization purposes.

Lesson 12: The Main Menu Unity 3d Animation

Now apply the Logo texture that we used in the last lesson or use one of your own. Correctly position your Quad on the scene – I’ve used (0, 3.5, 5).  Scale the Quad properly so the texture is not stretched – I’ve used (10, 2.5, 1) for the scale vector. If your image is stretched check for the texture dimensions and apply the same ratio to your quad scale.

To make sure you are using a safe size for your object – it fits all screen aspects – change the Game View Aspect to 5:4. If it fits in this view it will fit all the other aspect ratios since they all of them are wider. But nevertheless always test with the different screen aspects.

Lesson 12: The Main Menu Unity 3d Animation

Now lets create the Start and Exit Buttons. In a similar way to the GUI system we will also change the button texture on the different states: Normal; Hover; Pressed. So first download the following textures.

ButtonStart-NormalButtonStart-HoverButtonStart-PressedButtonExit-NormalButtonExit-HoverButtonExit-PressedNow that we have the textures in our project let’s create the two buttons and place them on the screen. Do the same process as with the Logo object.

Lesson 12: The Main Menu Unity 3d AnimationThe last element we need in the Menu is the background. We will use the same background texture from the GUI menu. The important thing to remember when creating the background is that it must stay behind all the other menu objects or otherwise it will cover them. But at the same time it needs to stay within the Menu Camera Clip Planes – the camera is able to see 10 units farther.

So just position the background object on the center of the camera and scale it until it fills the entire frustum (you can even make it bigger then the frustum). Then position it in the back but still inside the camera frustum, for example at z = 9 – all the other elements are at z=5 so they will appear on top of the background.

Lesson 12: The Main Menu Unity 3d Animation

Now that we have our buttons in place let’s add the necessary behaviours. Create a script called MenuButton.cs. To detect the Input on the buttons we need to declare four different methods:

  • OnMouseEnter() – when the mouse is over the button;
  • OnMouseExit() – when the mouse exits the button area;
  • OnMouseDown() – when the user presses the button;
  • OnMouseUp() – when the user releases the button over the object.

To detect the Input on the menu buttons we need to declare these methods on our script and make sure the button has a Collider component.

Now we will use these methods to change the button texture at runtime creating the same effect we achieved with the GUISkin component. Create the public references to store all the necessary textures.

Apply the correct texture on each mouse event.

Lesson 12: The Main Menu Unity 3d Animation

The menu is ready. Now lets add some animation usin the Unity 3d Animation System.

Working with the Unity 3d Animation System

Unity has an integrated Animation system that allows us to add simple animations to our objects right on the editor. We will use this system to create some basic animations for the menu elements.

To add a new Animation to a GameObject you need first of all, to add an Animation Component to the object.

Always add an Animation Component to the GameObject before creating the Animation clip. If the GameObject does not have this Component the Animation system will apply an Animator and a different kind of Animation clip will be created.

Lesson 12: The Main Menu Unity 3d Animation

Then you can open the Animation Tab from the Window Menu.

Lesson 12: The Main Menu Unity 3d Animation

The Animation window is just like any other Unity Editor Window. You can move it and dock it as you prefer.

On the Animation Window you start by creating a new Animation Clip.

Lesson 12: The Main Menu Unity 3d Animation

Next select where to save the Animation File and its name.

Lesson 12: The Main Menu Unity 3d Animation

Now that we are working on the new Animation File we need to choose what property to animate. So press Add Curve.

Lesson 12: The Main Menu Unity 3d Animation

In this case we will animate our button entering in the screen. So press the plus button near the position property.

Lesson 12: The Main Menu Unity 3d Animation

When animating any property you will have a timeline and two sets of keyframes that represents where the animation starts and ends. You have a global keyframe for the property you are animating – Position – and then several keyframes for each individual axis – X, Y, Z.

The time in between is the duration of your animation. By default every animation have a duration of 1 second but you can move the start or end keyframes to adjust it as you need. Lets make this animation last for a third of a second (0.3). Let’s make this animation last for a third of a second (0.3).

Lesson 12: The Main Menu Unity 3d Animation

Now since our button is already on the end position we need to modify where it is starting. So drag the red line to the start keyframe. When we are editing the keyframes you can see that the position values on the Transform Component become red. This means that we are in Edit mode and any modification we make to the object position will be set to the keyframe.

Lesson 12: The Main Menu Unity 3d Animation

You can change the object position using the Transform Component, the values inside the Animation View or even by dragging the object on the scene view.

Lesson 12: The Main Menu Unity 3d Animation

You can now preview the Animation by using the Play button or by just dragging the red line along the Timeline.

Lesson 12: The Main Menu Unity 3d Animation

By default the Animation system creates a linear interpolation between the values of the keyframes. But if you want you can create a different kind of behaviour using the Curves window.

Lesson 12: The Main Menu Unity 3d Animation

On the Curves Window you can add more keyframes by double cliking on the line, to shape the kind of interpolation you need. If you rigth click on the keyframe you can choose different kinds that may give you some deeper control over the curve shape.

Lesson 12: The Main Menu Unity 3d Animation

Lesson 12: The Main Menu Unity 3d Animation

I’ll leave mine to the default linear interpolation. Now create enter animations to the remaining objects: Exit Button and the Logo. On the Exit Button I’ll make a similar animation as the Start Button but with a small delay so the buttons don’t move together qhen entering in the screen. The Logo will enter the screen from the top.

Lesson 12: The Main Menu Unity 3d Animation

By default the Animation Component has the Play Automatically set to true so you can easily test your animations just by running the scene.

For the background we will apply a Fade In/Fade Out effect. But unfortunately the Animation system does not work correctly fwhen creating such animations. We will use the iTweeen plugin for this.

In case you forgot to add first the Animation Component…

If you forgot to add the Animation Component before creating your Animations this will be the end result:

Lesson 12: The Main Menu Unity 3d Animation

And even if you replace this Component with the correct one the Animation file that was created won’t work because it’s a different kinf of Animation.

But your work is not lost. It is possible to change the type of the Animation file after being created and then use it on a regular Animation Component. Check the following steps.

Lesson 12: The Main Menu Unity 3d Animation Lesson 12: The Main Menu Unity 3d Animation Lesson 12: The Main Menu Unity 3d Animation Lesson 12: The Main Menu Unity 3d Animation Lesson 12: The Main Menu Unity 3d Animation

Create the Environment Overview

To create the environment overview we will use the Visual Editor created for the iTween Plugin from PixelPlacement.

“iTween is a simple, powerful and easy to use animation system for Unity.”

Basically this plugin allows us to create from simple animations like moving, rotating, scaling etc to more complex ones such as following paths. The visual editor is a great addon since it allows us to configure the animation without writing a single line of code. So first download and integrate the iTween Visual Editor.

Lesson 12: The Main Menu Unity 3d Animation

Before starting with the path lets try to create a more simple animation such as the Fade Effect for our Menu background. To create a new animation you need to add the GameObject the iTween Event Component.

Lesson 12: The Main Menu Unity 3d Animation

This component may seem complex at the beginning but you will see how easy it is to configure a new animation.

The first thing to do is to select the Event Type that we want. In this case we will want a Fade To Event.

Lesson 12: The Main Menu Unity 3d Animation

Next we need to configure the necessary properties. In this case configure the following ones:

  • Alpha: 1 (to what alpha value we should animate to);
  • Time: 1 (number of seconds the event lasts);
  • Ease Type: Linear (the type of animation curve we want);

Lesson 12: The Main Menu Unity 3d AnimationBy default the iTween Event has the Play Automatically flag selected so you just need to run the scene and test the effect. First put the alpha value of your texture to zero.

Lesson 12: The Main Menu Unity 3d Animation

So creating a iTween Event is as simple as this. Now lets take a look at creating the camera overview of our environment.

For the overview we will create an iTween Path for the camera to follow. Create an empty GameObject and add an iTween Path Component.

Lesson 12: The Main Menu Unity 3d Animation

Once you create a new path it will always create the nodes at the origin of the scene (0, 0, 0). Since it is the camera that will be following the path I advise you to put the first and the last node at the camera position. If you dont put the node exactly on the position of the camera you have an option that tells the camera to jump instantly or tomove to the node position when starting the event.

iTween Path Facts:

  • Maximum of 10 nodes;
  • No Undo when changing the nodes position;
  • All positions are in World Coordinates (no local positions);
  • A little cumbersome but the final effect does worth it.

This is my the final path I used for this demo. The first and the last node are exactly on the same position of the Main Camera.

Lesson 12: The Main Menu Unity 3d Animation

After creating your own path you need to add an iTween Event Component to the object that will be following it, in this case the Main Camera.

Lesson 12: The Main Menu Unity 3d Animation

So the Event Type is Move To and select the Path option. You will have a list with all the paths that exist in your scene (if you have several rembember to name them accordingly).

The option lookTarget makes the object that is following the path to focus on a certain point or object. In this case I chose the StageBeaconThree since it is near the middle of the terrain. The animation will last for 7 seconds and uses a linear interpolation between the points.

If you leave the Play Automativally you can test your path right away.

All working together

To finish this lesson we need to put all these elements to work together.

  • The Camera starts following the path immediately;
  • The Menu starts only with the background image with full opacity and Fades Out at the beginning;
  • The rest of the Menu elements will enter the screen when the Camera Animation is Done while the background image Fades In.

First lets put all Menu elements (logo and buttons) on their initial places (the place where the animation begins) and disable the Play Automatically.

In the background object change its opacity to the maximum and leave the Play Automatically enabled.

To know the exact position select the object open the Animation Window and select the initial keyframes.

Lesson 12: The Main Menu Unity 3d Animation

Now if you run your scene the background will Fade Out and the Camera will follow the path but nothing else happens. We need to know when the camera reaches the end of the path. To know this we will use the onComplete property of the iTweenEvent. This property allows us to call a public method on any script applied to same the GameObject.

So lets create a new script called MenuCameraTween.cs. Inside the script create a new public method called AnimationIsDone.

Apply this script to the Main Camera GameObject and define the name of the method on the onComplete parameter of the iTween Event.

Lesson 12: The Main Menu Unity 3d Animation

Now when the camera reaches the end of the path it will call this method. We need to activate all Menu elements when this happens.

Lets create a new MenuController.cs to deal with this. Inside this new script create public references to all menu elements.

Create a public method called Activate and play the animations of each object.
Attach this script to the Menu Camera and assign all public references.

Lesson 12: The Main Menu Unity 3d AnimationNow the MenuCameraTween needs to call this method when the animation is done. Add a public reference to it and call the method.

Now it should all be working but with a small problem. The background fade animation only works the first time because when we are calling it again from inside the Menu Controller we need it to Fade In.

So lets create a new iTweenEvent for the background object but to make it Fade In. Disable the Play Automatically and call it Fade In.

Lesson 12: The Main Menu Unity 3d Animation

On the Main Controller we will find this event with the method iTweenEvent.GetEvent. This method is able to find any event by name on a specified GameObject, this case the event “Fade In” on the background GameObject.

Full Codes

<MenuButton>

 <MenuCameraTween>

 <MenuController>

Names to keep…

What’s next…

On the next lesson we will implement the navigation between the Menu and the Game scenes.

Series Navigation<< Lesson 11: The UI Manager (Unity 3d GUI)
  • Facebook
  • Twitter
  • Google+
  • Linkedin
  • Pinterest
  • Reddit

Leave a Comment

Your email address will not be published. Required fields are marked *