Adding main menu buttons

Now that we have the text displaying correctly, let's add in the ability to move from the main menu into the game and quit the game.

  1. Start off by going to the top menu bar and then selecting GameObject | UI | Button.

    At this point, you will see a new child object to the Canvas called Button and if you were to extend that object, you'd see that it has a Text child as well.

  2. Next, let's learn a new way that we can position objects. From the Hierarchy tab, select the Button object and open up the Anchors Preset menu and from there select the bottom-stretch option.
    Adding main menu buttons

    Notice now that Pos X and Width have been replaced with a Left and Right value. When we use the stretch option, it will scale the object either horizontally or vertically depending on your choice. The Left and Right values are how far to the left or right in pixels that the center of the object will be based.

  3. Change the Left and Right values to 300 to center the object with 300 pixels on each side. Then, change Pivot Y to 0 to base our positions to offset via the top and then change the Pos Y value to 100 to move the object 100 pixels above the bottom of the screen.
  4. From the Hierarchy tab, expand the Button object and change the button's text child's text value to Start Game.
  5. Now that our button exists and is positioned correctly, let's customize how it looks. Change Font to OSP-DIN and change Font Size to 25.
  6. Now that we have the text customized, let's customize the button's visibility. From Hierarchy, select the Button object and from Inspector scroll down to the Button component. From there, you'll see a number of colors and a target graphic that will be tinted when you mouseover or click on the button (try playing the game and interacting with the button to see the default behaviour).
  7. We'll be replacing this default behavior so that instead of using colors, we will be changing the image used. To do that, go into the Example Code folder and bring the contents of the Art Assets folder for Chapter 2 into the Sprites folder from our Project tab.
  8. After that, change Transition to Sprite Swap and then for Highlighted Sprite put in buttonYellow, Pressed Sprite to buttonGreen, and Disabled Sprite to buttonDisabled.
  9. Finally, in the Image component under Source Image, put in buttonBlue. Afterward, change Image Type to Sliced. You'll notice that there is an error saying it doesn't have a border, and that's true.
  10. From the Project tab, open up the Sprites folder and then select the buttonBlue sprite. From Inspector, you'll see the properties for Sprite and a button called Sprite Editor. Click on it and you'll be able to see properties for how the sprite will be drawn. It's also used for animations, but in this case we are going to establish a border. For L (left), R (right), T (top), and B (bottom) put in 10 and then click on the Apply button.
    Adding main menu buttons

    What this will do is anytime we create a sprite using the Sliced type and change the width and height, the four non-cardinal corners will not scale but the others will, allowing us to create boxes of whatever size we want. Pretty nifty, huh?

  11. Create the same borders for the other button sprites.
  12. Now, let's create our Exit Game button. From the Hierarchy tab, select the Button object and press Ctrl + D. Change the object's name to Exit Game and Pos Y to 50. Back in Hierarchy, open up the Exit Game object and change the Text's text to Exit Game.
    Adding main menu buttons

    We now have two customized buttons that look great, but aren't functional. Let's fix that now.

  13. To have functionality when we click the button, we will need to have a method to call, and for us to be able to set it up via Inspector that means we need to have a game object that has that function as part of it. So with that in mind, let's create a new empty game object by going to GameObject | Create Empty. Change this new object's name to MainMenuBehaviour and drag it up to the top of your Hierarchy for easy access.
  14. Now that we have an object, let's give it a script to contain the functionality that we want. Select the Main Menu Behaviour object and click on the Add Component button from Inspector. From there, give it a name of MainMenuBehaviour, make sure the language is set to C#, and then select Create and Add. This will create a new script and attach it for us automatically. This is created in the Assets folder, so go ahead into the Project tab and move the script into the Scripts folder and then double-click on it to enter your IDE of course.
  15. Once your IDE has opened, use the following code:
    using UnityEngine;
using UnityEngine.SceneManagement;

public class MainMenuBehaviour : MonoBehaviour 
{

    public void LoadLevel(string levelName)
    {
  SceneManager.LoadScene(levelName);
    }

    public void QuitGame()
    {
        #if UNITY_EDITOR
            UnityEditor.EditorApplication.isPlaying=false;
        #else
            Application.Quit();
        #endif
    }
}

    The LoadScene function will load a level based on a name that we provide to it and the QuitGame function will either set the editor to no longer play if we are in the Unity Editor, and will quit the game if we are playing an exported version.

  16. Save the script and go back to the Unity editor. Currently, our gameplay level is named Chapter_1, but that's not terribly descriptive. From the Project tab, open the Scenes folder and rename the level to Gameplay by selecting it and then clicking on its name.
  17. Select your Start Game button and from there go to the Inspector tab and scroll down to the Button component. From there, in the On Click () section, click on + to add something for our button to do.
  18. From there, drag and drop the Main Menu Behaviour object from the Hierarchy tab to the area that currently says None (Object) that's just been added to the list.
  19. Click on the dropdown that currently says No Function and then select MainMenuBehaviour | LoadLevel. Then in the textbox that appeared below, type in Gameplay.
    Adding main menu buttons
  20. Next, select the Exit Game object and then add an OnClick action just like we did before, except this time call MainMenuBehaviour | Quit Game.
  21. Lastly, open up our Build Settings like before by going to File | Build Settings and add our Main_Menu to your list at index 0 by selecting Add Open Scenes and then dragging the Main_Menu level to the top so it will be the level that starts off when we start the game.
  22. Save your project and scene and hit the Play button.
    Adding main menu buttons
  23. At this point, our main menu is working perfectly!
..................Content has been hidden....................

You can't read the all page of ebook, please click here login for view all page.
Reset