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