Here, we will make a few buttons, rename them, and assign them to the functions of our LaunchBall class:

1. Look at the Hierarchy view and search for the Button child of Canvas:

2. Click on the arrow next to the Button object to expand it, and select the child of Button labeled Text:

3. Now, take a look in the Inspector at the Text component. Here, we have a wide variety of ways to change the text that is on the button:

4. Select the word Button in the Text box. Press the Delete key and type Change Color.
5. Back in the Hierarchy view, select Button.
6. In the Inspector, change the object's name to ChangeColorBtn:

Now, we will wire a function to this button. Earlier in the chapter, we added the public keyword to the class methods to make this work. With that keyword, the following step would not work.

Take a look at the following Button component. Make a note of all the options that you see. We will go over some of these soon. For now, we will use the On Click () box to assign our function to our object:

1. In the On Click () box, click on the + symbol:

2. Now, the On Click () box should look like this:

3. In the Hierarchy view, select the Ball object and drag it to the None (Object) slot.
4. Click on the drop-down bar labeled No Function. Move down to LaunchBall and select ChangeColor() from the list:

5. In the Button component, click on the highlighted color and select color-picker box. Change the RGB values to 0, 255, and 12. This will produce a neon green mouse-over affect that will help you see that you have the button selected.

Great work!

Now, run the application by clicking on the Play button. Again, the ball should now be seen in center itself; in addition, we now have a button that says Change Color. Go ahead; and click on it:

 For each click, you will see a new color:

Now that we have finished one button, we will make two more and give them each different functions. After that, to keep them in a uniform pattern, we will use a Layout group.

Let's perform the following steps:

1. Right-click on the ChangeColorBtn object in the Hierarchy view.
2. Select Duplicate from the menu.
3. Select the new Button, ChangeColorBtn(1), and change the name to ResetBallBtn.
4. Duplicate ResetBallBtn and change the name to LaunchBallJumpBtn:

Now we have three buttons. Now that we have duplicated the button, we need to change the On Click () box for the two new buttons to correspond to their names:

Teleport BallBtn's OnClick function will be LaunchBall.TeleportBall(), and LaunchBallJumpBtn will be LaunchBall.LaunchBallJump(). When going through this process, remember to open the Text element and change the displayed name to something similar.

As you can see in the Scene view, we only see one button. Let's fix that with Layout groups. These canvas components automatically and evenly space out UI elements on a canvas. These are the center of how the new Unity UI system can work uniformly from platform to platform:

1. Select the Canvas object in the Hierarchy view.
2. From the Inspector, click on the Add Component button.
3. Select the Layout subcategory.
4. Select Vertical Layout Group from the list.

Now we have three buttons taking up the entire view:

1. In the Right input field, change it from 0 to 800:

2. In the Spacing box, change it from 0 to 100:

Now we have something that looks very different; it's time to press Play and check it out:

As before, Change Color will do exactly that, with the addition of the LaunchBallJump and the ResetBall functions.