Sliders are used a lot in video games. As a result, we have to display some percentage of the slider to give the player a better visual idea of what he is changing. For example, when the player is tweaking an ability parameter, it could be useful if the amount remaining is displayed as a percentage. The goal of this recipe is to create a script that shows the value of the slider in percentage. As such, we will develop a script that will use both the Slider (Script) and Text (Script) components.
- First of all, we need to create a new UI text to display the value of our slider in percentage. Therefore, we can right-click on the Hierarchy panel and then click on UI | Text. Rename it to Slider Shower. Furthermore, to customize the look or suit our needs, we can change Font and Font Size as well.
- Now, we need a script that receives the value of the slider, as data, which we will learn how to do later, and then show it as a number in percentage. So, let's click on Add Component | New Script, name it ShowSliderValueScript, then click on Create and Add.
- To edit the script, double click on it. Add the
using UnityEngine.UI;statement at the beginning of the script. Before the class, we can also add the following line:[RequireComponent(typeof(Text))](without the semicolon at the end). In this way, we are saying that, in order to use this script, it requires a Text (Script) component attached to the same game object of this script. - We just need a private variable to keep track of the Text (Script) component, without needing to find it every time we have to update its text. So, we can add
private Text uiText;. - Next, we can write a function that takes
floatas a parameter (the value of the slider) and changes it tostringthat represents that number in a percentage. To do this, we multiply the value by 100 and round it off using theMathf.RoundToInt()function. In addition, by doing this, we get to see all percentages with decimals. Finally, add%at the end of the string. We put this string into thetextvariable of theText (Script)component. Therefore, we can write the function in the following way:public void updateValue(float value){ uiText.text = Mathf.RoundToInt (value * 100) + "%"; } - Let's save the script and come back to Unity from MonoDevelop. The next step is to add a slider to our scene. Hence, we can right-click on the Hierarchy panel and then click on UI | Slider. If we want to organize things better in our project, we should rename it as well.
- As you can see from the following screenshot, at the bottom of the Slider (Script) component, there is the On Value Change (Single) panel. Click on the + sign in the bottom-right corner of the panel.
- As result, we have just added an element to the tab. As we can see in the next screenshot, we need to drag Slider Shower into the object variable. Now, the drop-down menu should be enabled. Therefore, we can click on it and select ShowSliderValueScript | updateValue. In fact, there are two of them listed, and we need to select the first one, under Dynamic float. By doing this, when the value of the slider changes, the updateValue() function from our previous script is called and the value of the slider is passed as a parameter.
- Finally, we can press the play button and perform a test to see whether everything works as we have planned, as shown in the following screenshot:
The Slider (Script) component has a variable called value that stores the position of the slider as float between 0 and 1. In order to show this number, we passed it through an event — OnValueChange. This happens every time the player changes the value of the slider, that is, every time the slider is dragged. When this event happens, a value is passed to our script. This first transforms the number into an integer between 0 and 100, and then converts it into a formatted string to show it as a percentage. Finally, this string is shown in the Text (Script) component.