In this recipe, we will see the first basic customization that we can allow the player to do. This customization will allow him to change the color of a button by clicking on it, and then switch between two colors. In this way, you will learn how it is possible to use events to customize buttons when the player interacts with them.
- In the first step, we have to create our UI button. Right-click on the Hierarchy panel, then go to UI | Button, and rename it to ChangeColorButton. Of course, it is possible to resize the button, change Source Image, the text, and place it as we wish in Canvas.
- Now, it's already time to write our script to handle the whole process. Select ChangeColorButton and, in the Inspector, navigate to Add Component | New Script. Name it ChangeColorButtonScript, and then click on Create and Add.
- Double-click on the script in order to edit it. Next, we have to add the
using UnityEngine.UI;statement at the beginning of the script, since we are going to use theImageclass. Before the beginning of the class, we can also add this line:[RequireComponent(typeof(Image))](without the semicolon at the end). In this way, the script requires an Image (Script) component attached to the same game object of it. - We need two variables to store the two colors. The first variable is
public, so it can be set in the Inspector with the new color, and the other one isprivate, in order to keep the original color of the Image (Script) component stored. Then, we also need aprivatevariable to store the reference to the Image (Script) component that is attached to this script, and a thirdprivatevariable - aboolvariable, is needed to determine whether our script has to change the color or restore the original. So let's write this code:public Color color; private Color originalColor; private Image img; private bool b;
- The next step is to write the
Start()function, where we will store the initial values for ourprivatevariables. So, let's take the reference to the Image (Script) component using theGetComponent<Image>()function and use it to obtain the original color and store it in the other variable. Therefore, we can write the following:void Start () { img = GetComponent<Image> (); originalColor = img.color; } - Now, we don't need an
Update()function but a function that can be triggered by some events instead, for instance, when our button is pressed. In order to do so, we need to make it public as well. Let's call itonClick()and, set the new or the original color, according to our bool variable, through anifstatement to differentiate the two cases. Finally, update theboolvalue by inverting it. So, our function will look like this:public void onClick(){ if (b) img.color = color; else img.color = originalColor; b = !b; } - Our script is now ready. We can save it and come back to Unity. The next step is to trigger our script through an event and - as we have done in a few other recipes from other chapters - we do the following: select ChangeColorButton, look inside the Button (Script) component, and click on the small + sign on the On Click () event tab in the bottom-right corner.
- Drag the script inside the object variable, and in the drop-down menu, navigate to ChangeColorButtonScript | onClick(). The final result should be like this:
- As the final step, we ensure that the color variable in our script is changed to display another color. Finally, we can test whether what we have done works as we planned.
Here, we created a function that switches between two colors. This system is created using a bool variable to determine whether we are going to change to the new color or restore the original one. In fact, every time we have an operation, we reverse the value of this variable. Then, we assigned our function to the On Click () event on the Button (Script) component so that it is called every time the player clicks on the button.
Maybe we want the button to change another image instead of itself. The next section will explain to us, how we can achieve this.
If we want the button to affect another image instead of itself, we can slightly modify our script. In fact, we have to make the img variable public so that it can be set in the Inspector:
private Image img;
Then, we can erase this line from the Start() function, since we set img on our own:
img = GetComponent<Image> ();
Finally, set the img variable from the Inspector, and we are done. Of course, if we want to test it, we can create, for instance, a panel and drag and drop it into the img variable.
Furthermore, it would be good to remove the [RequireComponent(typeof(Image))] statement so that we can place this script on other game objects as well.
- If you need a gradual change between colors, you can refer to the next recipe, Creating a slider that changes colors gradually.
- However, in the last recipe of this chapter, there is another way to call events without touching the events in the Inspector. In fact, this could be achieved by using the handlers inside the script. More information is available in the Changing the cursor at runtime recipe.