As I described in a couple of posts ago, I am about to get started with the Garden App. I am going through and figuring out how to do things in Unity and thought it would be great fun to document some of those things. So first on deck is the Unity Menu Button Tutorial.
There are a billion ways to do this in Unity. So if you don’t like what I do then pick someone else as there are a bunch of people. With all that said, lets dig into it.
Unity Menu Button
Open up Unity Hub and create a new project.
This takes a while so get a glass of water or let the dog out or something. When it is done, you will get something like this.
In the Hierachy tab, click on the Create button. Select UI->Image. This will create a Canvas object with an image nested in it.
With that done, we need to name the image something useful.
Since a menu is generally a 2D thing, we need to switch the view to 2D. You do this with the 2D button.
Then start zooming out in the Scene tab screen with your mouse scroll wheel. This can take a while.
Make sure you have your image, in my case I renamed it MenuButton, selected. In the Inspector tab add a new component.
We want a button component. Use the search to find the button.
There are several kinds of buttons. The color tint will allow your Unity Menu Buttons to exhibit changes in the various states listed that will be determined by color. For instance you can have the Highlighted Color change from white to purple by setting it the color to purple.
Sprite Swap allows you to take a second sprite like we loaded earlier and swap it out. If you remember my Outpost ramblings from a previous post, this would be what is used when you take a robodozer and apply it to a terrain. The terrain sprite would disappear and be replaced with the robodozer’s sprite.
We are doing neither. We are using animation so select animation.
Since we have animation selected, we will need to generate a bunch of animations which Unity makes easy. Press the Auto Generate Animation button.
This will prompt you for a location to save the animator controller.
Create a new folder to store them. I did something stupid and named mine scripts. Don’t do that. Name it Animations. I do correct this as a later step so you can follow along complete with screw ups if you want.
Make sure to navigate to your new menu. Then you are good to keep the default name and press Save.
Now to correct my screw up. Select the script and rename with right clicking on it, just like Windows.
Lets create a new folder correctly this time for the sprite. Do the same thing as before and name the folder Sprites.
Making sure you have Sprites directory selected. Drag you sprite into the folder. In my case, I just took a screen shot of a button. Selected only the button in paint. Saved it in its own image and called it a button. Make sure it is a jpg and you are good to go. If you want, you can absolutely use Photoshop or GIMP to create your buttons. I will be using GIMP because it will allow me to use an alpha channel so I can have a transparent background. All that is out of scope for this tutorial. Worse comes to worse grab a button from the internet that has a license that allows it.
The jpg is not a sprite so there is another couple of things we need to do. First we need to select Sprite (2d and UI) from the Texture Type menu, when you select the button in the Project tab.
With that done, press apply. If you get a warning about compression, don’t worry about it. You can follow the directions on the image sizing and re-import if it bothers you.
For the next steps in create a Unity menu button, we need to select the MenuButton in the Hierarchy tab.
In the Inspector tab, we want to see the Image (Script) component. We need to assign our sprite to the image source. We can do that with drag and drop from the Project tab to the Inspector or we can hit the little circle thing next to the Source Image textbox. You will get a dialog and select the appropriate image.
Now adjust the image size to something nice and then reset the control back to origin(0,0,0).
With all that fun done we need to deal with animation
Button Animations
Because we selected animation in our button and saved an animation controller, we have to define some animations. Unity makes this pretty straightforward. First open the Animation tab. Mine is already open so I am going to switch to it. If it is not present then use the menu, Window->Animation->Animation to bring it up. Feel free to drag and drop anywhere you want in your editor. I stuck mine next to the Game tab. This will bring up your dope sheet.
There is a little box that says Normal in it. If you select it, you will get a drop down of available actions to animate. I will select Pressed.
Then press the record button. If for some reason things are not showing up for you. Make sure you have the animation tab open and not the animator. Also make sure you have the MenuButton selected in the hierarchy tab.
Every action you do to the control or any nested controls will be recorded. The dope sheet works like a timer. The white line tells you where in time the animation is located. In this case we are at 0:00 which means at second 0 or the start.
Lets select the 0:20 second mark with the white line. Just drag on the red line where you want it to go.
We are going to change the scale of the button by changing the x and y scale, since it is 2D there is no z coordinate to worry about, to .9 and the image color to a reddish color.
Look at all that red stuff we changed.
Select the Game tab, in my case next to my Animation tab and press play.
It feels a bit unresponsive doesn’t it? We can fix that select your Animator tab. If it is not open then Window->Animation->Animator and stick it where you want it.
If you don’t see the image make sure you have the MenuButton Selected.
We are pressing the button so all the wiring is tied to the Pressed items. The magic of automagically. Anyway, we need to tweet the transition speed. To do this. Make sure you press on the line between the AnyState and Pressed. Like in the picture above. You will get the weird thing in the inspector window for the transition.
We want to open the settings.
We want to change the transition duration to something smaller. Try .1 or .05.
So give it a go. It should be a bunch more responsive. You can also add on click event to the button to get a script attached but that is a simple skill and outside this tutorial.
Hopefully you enjoyed that tutorial. I tried to make sure it was a basic as I could.