Unity 4.6 - Create A Dynamic / Responsive Menu

Unity 4.6 beta version has been released, Yay! The one which I was eagerly waiting for. And, guess what it's worth the wait. Perhaps, the users of Unity wouldn't have expected such a leap in the ease with which the UI can be built, and trust me it's not only about the ease, it's extremely powerful as well.
If you are yet to download the beta version of Unity 4.6, I highly recommend you to download it. It can be downloaded here

I am still exploring the vast range of features that this beast has, and I thought it is a good time to post on how to make a simple and fully functional Menu using the all new unity 4.6.

The Result





1. To begin with, open Unity. Create a New Project, name it as whatever you like, I'm naming mine as LearnUnity4.6. We'll keep the Setup Defaults to 3D and hit on Create.


 2. Before we start adding any components to our scene, we will save it (ctrl+s in windows or cmd+s in mac) Name the scene as Main Menu. If you want to be tidy, just like me, you can place this scene in a folder named Scenes, which of course, needs to be created under the Assets folder.


3. We are now ready to add the UI elements to our scene. There are many ways to add the UI elements. I will show you all of them while adding different UI components to the scene.
The first way is to add the UI component by navigating to Gameobject->UI->Panel. 




If you notice in the hierarchy panel, Unity has automatically placed this Panel element within the Canvas object. We will perhaps see what a Canvas is, some other time in the future, but as of now, you remember that, whatever UI element you add needs to be the child of Canvas element. There is another game object named EventSystem, also added by Unity automatically. Event System is basically used to trigger things in code from your UI. We, as of now won't focus on it, we will keep it aside for another day, perhaps.

4. You can add a background image to this Panel. Copy any image you like, to your project. I've made a new folder named Sprites for placing the sprites within it.
You might need to change the Texture type to Sprite to use it as the Source Image of the Panel.


5. Now, you can simply add this to the Source image of Panel by simple dragging and dropping just like in the gif below.


6. If the image looks too dull for your liking, you can the Alpha value. How to do that? Well, the gif below to your rescue.


7. We will add another UI element to our scene. This time it will be a Button


This is another way in which you can add a UI element to the scene.

8. The background image which I have chosen doesn't make it easy to make out the button added. So we will change it's color. We will also adjust the adjust the anchors of the button to resize it automatically based on the screen size and resolution. How to do this? Well, the gif will help you.
Try changing the Aspect Ratios and notice that the button resizes automatically.
9. Place the button wherever you like, make sure you drag the anchor points as well. If you don't drag the anchor points, the button will not be placed where we need it to be placed.

10. If you want the font size to be dynamic as well, then you can tick the Best Fit flag of the Text. Also, give the max and min font size you would like.


11. Add however many buttons you would like for your menu, place them howsoever you like.But, remember to place the anchors around the edges of the button to make your menu responsive.
You can change the Colors on highlighted, pressed and disabled based on your needs.


12. You can change the Text that is displayed on the Button as you wish.


13.  Save the present scene and create a New Scene named Play. Add both the scenes to the Build.



14. Switch back to the Main Menu Scene. Create a New Folder named Scripts. Add a new C# Script, name it as MenuScript. Attach it to the Main Camera. 
Open the script and add the below code to it.

using UnityEngine;
using System.Collections;

public class MenuScript : MonoBehaviour {

 public void OnClickPlay(){
  Application.LoadLevel("Play");
 }
}

The script has a simple function which loads the level named Play. Save the script and return to Unity. But, how is this function called by the Play button?

15. With the Play button selected in the Hierarchy, add an item to the OnClick List by clicking the + sign. Add the Main Camera, Ah, just follow the gif below.


You can follow the same procedure for the other buttons as well. Make sure the access modifier of these function is Public.
Once you have added all the functions and linked them to their respective buttons, you are ready to test the menu.


And there you go, you have a fully Functional Responsive/Dynamic Menu.

See you around.

Unity 4.6: Create A Health Bar Heads Up Display (HUD)
Unity 4.6 - Create A Level Select Scroll Menu
Unity 4.6 GUI - Create An Animated 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

18 comments:

  1. Awesome tutorial man! Simply awesome...

    ReplyDelete
    Replies
    1. Thanks! Glad that you liked this post.. Keep visiting :)

      Delete
  2. Who needs a video tutorial when someone can write a tutorial as clear as you have done? Seriously, very clear and useful. Thanks so much....

    ReplyDelete
    Replies
    1. We had requests asking us to make video tutorials, however, we believe written posts are more useful than watching videos.. So, yea thanks for stopping by and appreciating our efforts :)

      Delete
  3. Replies
    1. Umm.. If you have followed the post, I don't see any reason why it shouldn't. Btw, what exactly is the problem that you are facing?

      Delete
  4. Hi, i want my app to be responsive in both Portrait & Landscape mode. Is there any easy way to do it....?..
    TY in advance...

    ReplyDelete
  5. Found this very easy to follow thanks

    ReplyDelete
  6. where is wrong with my button? when i click the play button, i can't go to "Play" scene (=-=') help?

    ReplyDelete
  7. where is wrong with my button? when i click the play button, i can't go to "Play" scene (=-=') help?

    ReplyDelete
  8. I am having trouble setting Text and Image gameobjects to all screen resolutions. Can you make a small tutorial where you set both of them for all resolutions. I have tried nearly everything i could. :(

    ReplyDelete
  9. Developers keep working on plugins to deliver better results make quickly and without any hesitation. psd to html

    ReplyDelete
  10. Create a Responsive Unity UI Layout....
    https://youtu.be/5cZ1N2LQlU0

    ReplyDelete
  11. http://freesoftsfiles.com additionally Photoshop, or .psd

    ReplyDelete
  12. Cool post. I found it very useful. You may also view this page to know about spy app to catch a cheater.

    ReplyDelete