This is the 10th day of my participation in the November Gwen Challenge. Check out the event details: The last Gwen Challenge 2021

Recommended reading

  • CSDN home page
  • GitHub open source address
  • Unity3D plugin sharing
  • Jane’s address book
  • My personal blog
  • QQ group: 1040082875

One, foreword

First, introduce a UGUI, NGUI is the predecessor of UGUI, Unity development team took NGUI development team under their own development team, and developed UGUI from this. The UGUI system has only been integrated into the Unity editor since Version 4.6.

UGUI features:

  • flexible
  • fast
  • visualization

There are many advantages for developers, such as:

  • High efficiency
  • Achieve good results
  • Easy to use and expand
  • High compatibility with the Unity editor

Second, Slider component introduction

Slider is a Slider assembly used to create health bars or progress bars.

Sliders and scrollbars are both Slider components, so what’s the difference between them?

Sliders are more likely to be used to change a value, such as a health bar or progress bar, or to change the size of a sound.

The Scrollbar is a component that changes the target scale, a percentage of 0-100%, such as changing the display area of the scrolling view.

Let’s create a Slider and look at its properties:

Go to Unity’s Hierarchy and select “Create→UI→Slider” to Create a Slider component:The Hierarchy result of Slider in Hierarchy view is as follows:

object introduce
Slider The Slider component
Background background
Fill Area Filled areas
Fill Fill the object
Handle Slider Area The slider slides over the area
Handle slider

Let’s take a closer look at the properties of the Slider component.

3. Slider component properties

The Slider component has no Image component, and the Background is set in a child object called Background.

Let’s look at the detail properties:

attribute introduce
Fill Rect Direction of slider and the minimum of filled areas to use filled, if the role of the slider is used to change the specified value, then this option suggest empty, compared the Scrollbar is extra attributes is mainly used for logo from the minimum changes to the current value by the change of the area, if used as a progress bar (display task schedule), This property is an advantage over the Scrollbar.
Handle Rect The current value is in the display range proportional to the minimum and maximum value, that is, the maximum control range of the entire slider.
Direction = Direction The direction of the slider, left to right, top to bottom or whatever.
Min Value(minimum Value) The minimum variable value of the slider.
Max Value The maximum variable value of the slider.
Whole Numbers If checked, drag the slider to change the specified value as an integer (minimum: 1).
The Value (Value) The value of the current slider.
On Value Changed The message is triggered when the value changes.

4. Create a progress bar using Slider

First, create a new Slider component and modify the Background and fill block Handle:Then create a new Text component to display progress.

Write code:

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SliderTest : MonoBehaviour
{
    private Slider m_Slider;/ / the Slider object
    private Text m_Text;    / / the Text object
    private float m_Value;  // Control the schedule

    void Start()
    {
        m_Slider = GameObject.Find("Slider").GetComponent<Slider>();
        m_Slider.value = 0;
        m_Text = GameObject.Find("Text").GetComponent<Text>();
        m_Text.text = "";
    }

    void Update()
    {
        if (m_Value < 100)
        {
            m_Value++;
            // Real-time update progress percentage text display
            m_Text.text = m_Value + "%";
            m_Slider.value = m_Value / 100;
        }
        else
        {
            m_Text.text = "OK"; }}}Copy the code

Running results: