This is the 20th day of my participation in the November Gwen Challenge. Check out the 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

Hello everyone, I am a Buddhist engineer ☆ quiet small magic dragon ☆, update Unity development skills from time to time, think useful remember one key three link oh.

One, foreword

The attributes and usage methods of each UGUI component, such as Text, Button, Image, Toggle, InputField, ScrollView, etc.

Then share some principles of UGUI, such as UGUI rendering mode, UGUI zoom calculation, UGUI tracing point positioning, UGUI automatic layout and so on.

I believe you will have a more comprehensive understanding of UGUI after reading.

Next, I’ll share an example of the UGUI UI component being applied.

This is the second article in a series: 【Unity3D-UGUI Application 】 (1) Use Text to achieve progress waiting animation (2) Use Image to achieve progress bar animation (unity3D-UGUI application) (3) Use UGUI to achieve hierarchy menu 【 UNity3D-UGUI Application 】 (6) Screen adaptation (multi-allocation rate adaptation) 【Unity3D-UGUI Application Chapter 】 (7) UGUI window free drag and drop (8) Image to draw lines, draw triangles, draw squares, draw circles

Ii. Introduction and schematic diagram

Share a UGUI picture to achieve progress bar animation method, with asynchronous loading of resources, can be loaded as a scene animation.

Here’s a look at the effect:Photo resources:

Project resources: download.csdn.net/download/q7…

Three, implementation,

1. Set up the interface first 2. Set the Image propertiesIt is mainly to control the Fill Amount to realize the progress of the progress bar

3. Write code loading.cs

using UnityEngine;
using UnityEngine.UI;

public class Loading : MonoBehaviour
{
	// Progress bar image
    public Image m_Image;
    // Displays 100% progress text
    public Text m_Text;
    // Control the schedule
    float m_CurProgressValue = 0;
    float m_ProgressValue = 100;

    void Update()
    {
        if (m_CurProgressValue < m_ProgressValue)
        {
            m_CurProgressValue++;
        }
        // Real-time update progress percentage text display
        m_Text.text = m_CurProgressValue + "%";
        // Update the fillAmount value of the sliding progress image in real time
        m_Image.GetComponent<Image>().fillAmount = m_CurProgressValue / 100f;
        if (m_CurProgressValue == 100)
        {
            m_Text.text = "OK";
            // This section can be used to write the scene loading script}}}Copy the code

4. Drag it into the slot

OK, press Play to see the effect