Create A Level Select Scroll Menu - Unity 4.6

There will be times when we want to add a Scroll Menu to our game, for instance, we use it for a Level Selection Menu. We will be learning how to achieve this with the all new Unity 4.6 uGUI.

Need an inspiration to follow this post?



If you're inspired and want to learn, then, let's start the learning.

1. To begin, we need to create a Unity Project, if one is not existing already. Create a New Scene named Level Select.

2. Create a Canvas by navigating to Create->UI->Canvas in the Hierarchy.


3. Create an Empty GameObject and rename it as ScrollView. Make it the child object of the Canvas.


4. With the ScrollView selected in the Hierarchy, move to the Inspector panel and click on Add Component->UI->Scroll Rect to add a Scroll Rect script to the ScrollView object.
Once you do it, modify the configurations as in the image below.


- We have unchecked the Horizontal checkbox, as we do not want the horizontal movement.
- The Deceleration Rate is set to a very low value of 0.0001 for the rate at which the ScrollView decelerates. Lower the value, lesser the movement on release of the cursor / touch.

5. Add a Text component within the Canvas we created earlier and name it TextSelectlevel.
- Change the Text to be displayed in the Text (Script) as SELECT LEVEL.
- Check the Best Fit checkbox. Set the Min Size to 10 and Max Size to 50 (or any value you like, for that matter).
- Place the Text somewhere near the top to make it look like a Menu Heading. Position the four anchor points at the edges of the Text. 
(Take a look at the image below)


6. Select the Rect Transform tool from the tools section and resize the ScrollView as in the GIF below



7. Right Click on the ScrollView in the Hierarchy and create a Panel. Resize the panel as shown in the gif below to add our Level buttons.


Note: In case you want the Scroll Rect to Resize dynamically, place the anchor point of it's to the corners as in the image below



8. Create a Button inside the Panel. Rename it as Level1 and set it's Text component to LEVEL 1.
Position it near the top end of the Panel. Resize it as per your needs and place the anchor points to it's edges to resize the button dynamically.
Check the Best Fit checkbox of the Text component to resize the Text.


9. Duplicate the Button by pressing ctrl+D while the Level1 button is selected. Rename and reposition the button according to your needs. Also, reposition the anchors of each button to their edges. The below image shows a sample arrangement of the buttons.


10. Drag and drop the Panel into the Content field of the Scroll Rect script component of the ScrollView object. Once you do that you can scroll the menu to see the level buttons which was not possible earlier.


11. If the Select Level text is not center aligned, you can do so as in the image below


12. You can add an Image to be displayed behind the Select Level Text so that it looks aesthetic. You can try various color combinations and design your menu as you like. 
I have never been a good designer, but I have managed to design one for this, might not be as good as you people might do though. The reason behind doing this was to demonstrate how powerful the new Unity UI system is.

   
13. If you add a background image for the Select Level Text, remember to place it above the Text in the inspector, as the one with lower position is placed over the above objects in the Hierarchy.


You can download the Unity package of this post from the link below:

See you around.

Also check out,
Unity4.6: Create A Dynamic Menu With The New UI
Unity4.6: Create A Health Bar HUD
Unity 4.6 GUI - Create An Animated 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
Unity 4.6 GUI - Create A Star Rating / Reward System
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

23 comments:

  1. Excellent tutorial! Thanks a lot!

    ReplyDelete
    Replies
    1. ¿ pero donde esta scroll rect para descargar y text script ?

      Delete
  2. This comment has been removed by the author.

    ReplyDelete
  3. On the computer everything perfect but when I export to android, the scroll does not work.
    How do I fix it?
    Any solution?

    ReplyDelete
    Replies
    1. It works all fine here..Make sure you have an EventSystem object in your Hierarchy...Also make sure it has Touch Input Module (Script) attached to it...

      Delete
    2. Yes, I have the EventSystem in my Hierarchy and it has a component touch input module (script), also has a component transform Event system and Standalone input module.

      Delete
    3. I have updated the post with the link to the unity package that i used to build the scroll menu for android.. Check it out

      Delete
  4. Thanks for the tutorial! I was very helpful. I used your tutorial to create a horizontal scroll-based level menu. However, I can't figure out how to make it stop and center the closest item in the ScrollView. Do you know how to make it stop on item center?

    ReplyDelete
    Replies
    1. Hi Sujit

      I am also looking for the same feature to implement in my game. Please help.

      Delete
    2. Hi.. Kindly be precise as to what help you need...

      Delete
    3. I believe what they mean is the list of levels would 'jolt' to each level as you scroll up and down, however this tutorial was to demonstrate how to access numerous buttons with your mouse that are outside the screen rather than a level select as such.

      For the requested selection snapping (or lerping) method I would not suggest scrollrect personally but rather a series of buttons that move up or down with the arrow keys (or preferred axis method).
      When the y axis of a button is off the screen have its y axis jump to the opposite end so that it loops back round to below (or above if scrolling down) your last item in the list, this is if you wish for an infinite loop of the menu items or have the list simply not allow to move once it has reached the end item of a list.

      There are numerous methods to achieve a scrolling menu but this tutorial is intended for demonstrating scroll rect to access items you can then use your mouse to click on (or fingertip for android) and indeed achieves this effectively.

      Delete
  5. thankyou in advance..
    i have try this tutorial. and i create like this.. http://s24.postimg.org/eikvlyjud/slider.gif but actually, i want to make menu like this.. http://postimg.org/image/kt9xxf7sr/ where the menu is like have magnet if menu on center position like the picture number two. i want to make thats using scroll rect, but how can i make like that using unity 4.6 ? thankyou.

    ReplyDelete
    Replies
    1. Okay... You ask and we deliver. We are short in time and hence we cannot post a tutorial on it. However, you can download the unity package for the same. I won't be able to guide you any further than giving the working package. The code is not commented, but should be very academic.
      You can download the package here
      https://drive.google.com/file/d/0B6d_Gzsv_WSwRmxWT3NPNVVjdTQ/view?usp=sharing

      Delete
  6. I was wondering what would be needed to change if I wanted to make scroll view start after the select level text, so it would not scroll under it ,I know it can be made to look like it by setting a image behind the text but I was wondering just for learning's sake how to do it, because I tried a few possibilities that I could think of and couldn't make it work like that. I hope my question makes sense, if not I can try to clarify it more.

    ReplyDelete
  7. Great tutorials is it possible to have the continue button take me straight into the last unlocked level rather than go via the level select?

    ReplyDelete
  8. Hi, if level is unlock, how to make level is locked again ?

    ReplyDelete
  9. I've watched a video for 10minutes without making it work ... but with your tuto I did it in 5 ! Thanks a lot! (These gifs are a good idea)

    ReplyDelete