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.
using UnityEngine.UI;
statement at the beginning of the script, since we are going to use the Image
class. 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.public
, so it can be set in the Inspector with the new color, and the other one is private
, in order to keep the original color of the Image (Script) component stored. Then, we also need a private
variable to store the reference to the Image (Script) component that is attached to this script, and a third private
variable - a bool
variable, 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;
Start()
function, where we will store the initial values for our private
variables. So, let's take the reference to the Image (Script) component using the GetComponent<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; }
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 it onClick()
and, set the new or the original color, according to our bool variable, through an if
statement to differentiate the two cases. Finally, update the bool
value by inverting it. So, our function will look like this:public void onClick(){ if (b) img.color = color; else img.color = originalColor; b = !b; }
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.
3.147.79.84