Here, we can go further in providing additional customization for the player. In this case, we are going to implement a slide shower. The player will be able to scroll between pictures using a slider. To achieve this, we will see how to write a script to run this system. Again, we will use the events from the Slider (Script) component.
- To begin, we need to create our slider, which will be the controller of the player, so let's right-click on the Hierarchy panel and then go to UI | Slider. Finally, rename it to SlideShowerSlider.
- Then, select the slider and, in the Inspector, navigate to Add Component | New Script. Name it to SlideShowerScript and then click on Create and Add.
- Now, double-click on the script in order to edit it. Like every other time when we deal with the UI, we have to add the
using UnityEngine.UI;statement at the beginning of the script, since we are going to use some UI classes. - We need two
publicvariables, one to store all the pictures that we want to show, and another to store the Image (Script) component to show all the pictures, so let's write this code:public Sprite[] pictures; public Image img;
- The next step is to create a function that will be called by an event so that when the slider changes its value, it takes its value as a parameter. Since the slider value is a
floatvariable, we need to makevalueafloatvariable. Here is the structure of our function:public void changePicture(float value){ } - In the body of our function, the first thing that we have to do is transform
value, which is afloatvariable, into anint, since array indexes areint. We can achieve this through a cast in this way:int index = (int)value;
- Next, we can simply assign the correct picture as the sprite of the Image (Script) component stored in
imgusingindex, which is found in the previous line:img.sprite = pictures [index];
- Save the script and come back to Unity. Then select SlideShowerSlider. As usual, we have to call our function using an event, so we click on the + sign in the On Value Changed (Single) event tab. Finally, we drag our script into the object variable, and our event tab should be like this:
- Now, in the drop-down menu, select SlideShowerScript.changePicture. Also, be sure that you have selected changePicture in the first set of functions, labeled Dynamic Float, as demonstrated in the following screenshot:
- The next step requires us to assign a value to the
imgvariable in the Inspector. So let's create a new UI image by right-clicking on the Hierarchy panel and then going to UI | Image. Lastly, rename it SlideShower. Again, it is possible to resize it and place it wherever we want in the Canvas. Modifying Source Image is futile, since it will be replaced by our script. Once we are done, we should have something similar to this:
- We can drag SlideShower into the
imgvariable on our SlideShowerScript. - We should add all the pictures that we want onto the
picturesvariable in the Inspector. We can expand the variable by clicking on the little triangle to the left of the name of the variable, and in Size, we enter the number of the pictures that we want. It should appear as a row for each picture, and we can set them with whatever pictures we want. Here is an example of this concept; it uses image elements from previous chapters:
- We cannot use our slide shower yet, since we have to finish setting up SlideShowerSlider. In fact, in the Slider (Script) component, we have to tweak the Min Value and Max Value variables according to the number of pictures we selected in the previous step. So, let's set Min Value to 0 and Max Value to the number of pictures minus one (for instance, if there are four pictures, the number we set will be 3).
- Furthermore, we have to check the Whole numbers variable and set the value of the variable to 0 (this can also be done by dragging the variable slider completely to the left).
- Finally, save the scene. Now, we are ready to click on the play button to see our slide shower in action, like this:
In this recipe, we created a slide shower that is controlled by a slider. We also wrote a script to handle this. Every time the slider changes its value, an event is triggered and it calls the function inside our script. This function just changes the image inside the slide shower accordingly.
The following sections will give us some useful suggestions on how to improve our discrete SlideShower.
Sometimes, we might want to show the player how many pictures are contained within the slider and which picture is currently being viewed. We can do this by adding a text label next to SlideShower and controlling it through our script.
As the first step, right-click on the Hierarchy panel and go to UI | Text. Rename it SlideShowerLabel. Of course, we can resize it and change the font or size of the text as we wish. Finally, place it next to SlideShower.
Now we open our script again and add a new variable to keep track of SlideShowerLabel:
public Text label;
At the bottom of the body of the changePicture() function, we have to update the text of our label in this way:
label.text = (index + 1) + "/" + pictures.Length;
In order to obtain the current number of pictures that are being displayed, we added 1 to index. We did this because it is the current picture, but it starts from zero. Then we obtained the length of the array in order to find out the total number of pictures.
Save the script and then drag SlideShowerLabel in the label variable in the Inspector inside your script. And the trick is done!
Right now, the slider moves in a discrete way, since we have constructed it to be like that. But if, for some reason, it has to be continuous, we can achieve this very easily by simply unchecking the Whole Numbers variable. In fact, we used in our script a float as a parameter and converted it into int in the first line of the changePicture() function. Therefore, we don't have to worry about float conversions.
Each time we have to change the number of pictures of our SlideShower, we also need to update the SlideShowerSlider settings in the Slider (Script) component. We can automatize this process in the script. Therefore, we don't have to worry about this anymore.
To do this, let's add a new function called updateSliderSettings(). This is its body:
private void updateSliderSettings(){
}First of all, we have to retrieve the Slider, like this:
Slider slider = GetComponent<Slider> ();
Then we can start setting its values. The first values are the minValue and maxValue variables. We have to set the former to zero, and the latter equals the number of pictures, which we know through the length of the array:
slider.minValue = 0; slider.maxValue = pictures.Length - 1;
The next values are the WholeNumbers Boolean, for making our slider discrete, and value, for initializing slider at the beginning:
slider.wholeNumbers = true;
slider.value = 0;Next, we have to reset our SlideShower at the beginning as well, by calling the changePicture() function. We do this by passing 0 as the parameter:
changePicture (0);
Finally, in the Start() function, we have to call the updateSliderSettings() function, as follows:
void Start () {
updateSliderSettings ();
}Now, we don't have to take care of changing the slider settings in the steps starting from step 14 anymore because we have automatized the process inside our script.
We may want to change the number of pictures at runtime. We can do this by creating another public function. Therefore, it can be called by other scripts that create a new array. The public variable copies all the values in the new one plus the new picture, and at the end, it calls the updateSliderSettings() function again, so it is updated as well.