[Video][Unity StateMachine Tutorial 1] UI Handling Part I

[Part II]

Good day everyone! I haven’t written a tutorial in a while, so here we are with a much requested tutorial series. These couple of tutorials will be helping everyone build their very own state machines. For the first one, we’ll take a look at how to build a UI system based upon a State Machine.

 

Follow me on these tutorials and you’ll have a way to build a UI system that’s effective and easy to do.

Now, let’s start by setting up our Views or Screens.

 

          Setup and Main Menu Creation:

  1. Build a new project. I named mine StateMachineTutorial for ease of work.
  2. Create a Prefabs Folder in which we’ll store several prefabs to work on them later.
  3. Save your Scene with any name. I picked the name “1” for simplicity.
  4. Create a new Canvas by right clicking on your hierarchy, going to the UI menu, and picking Canvas. Rename this canvas to whatever you desire. I named mine “Main Menu”.
  5. Inside this MainMenu Canvas, create a Panel (it’ll act as our background). Change its source image to “InputFieldBackground”, it’ll make it a solid white color instead of the faded one we have by default. Also, change the “A” in the color slider to 255 so it’s completely solid.
  6. Inside the MainMenu Canvas, create 3 buttons. One of their texts will be renamed to “Options”, the other will be called “Single Player Menu”, the final one will be a Quit button. These are, of course, placeholders because we’re not building a full game yet.
  7. We’re also going to add some text on top to make our State Machine Scene have personality. So right click again, go to UI, Text, and in the text set “Horizontal Overflow” and “Vertical Overflow” to Overflow, change the text to State Machine Tutorial and then text size to about 37.
  8. If you’d like, you can rename your Objects as I did.

Following these instructions should result on something akin to this:

1

 

Now that we have a Main Menu set up, we will need to go set up an Options Menu. This View will contain basic options and buttons just to show functionality. If you want to work on this View, I’d recommend dragging the Main Menu to our Prefabs Folder and then just deleting it. We’ll call it again as needed.

 

Setup the Options Menu:

  1. Create a new Canvas the same way you made the Main Menu Canvas, rename it to OptionsMenu.
  2. Create a Panel and adjust it the same way as before.
  3. Create 2 buttons, one will be the Back button, the other one will be a Mute button.
  4. Create a text that reads Options just as we created the Main Menu text previously.
  5. If you’d like, you can rename your Objects as I did. This next image will show you.
Options View

Options View

 

All right, with the Main Menu and the Options Menu set up, I’m going to go ahead and create a simple Single Player Menu.

 

Setup the Single Player Menu:

 

  1. Create a new Canvas the same way you made the Main Menu Canvas, rename it to SinglePlayerMenu.
  2. Create a Panel and adjust it the same way as before.
  3. Create 2 buttons, one will be the Back button, the other one will be a Ready button.
  4. Create a text that reads Single Player Ready? just as we created the Main Menu text previously.
  5. If you’d like, you can rename your Objects as I did.

 

Single Player Menu

Single Player Menu

 

 

And with this, we have the prefabs ready for our next tutorial. I need to record the video for it so I can release it, but here’s the basic setup of 3 views for it. It’ll be really interesting, so stay tuned!

Share

Trackbacks & Pings

Leave a Reply

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