قم بإنشاء شريط تقدم شعاعي / دائري في Unity

في هذا البرنامج التعليمي، سأوضح كيفية إنشاء شريط تقدم دائري/قطري (والذي يمكن استخدامه أيضًا كشريط HP، وما إلى ذلك) في Unity.

لذلك دعونا نبدأ!

خطوات

سنحتاج إلى شكل دائري image بخلفية شفافة.

• قم باستيراد الصورة إلى مشروعك وقم بتغيير نوع النسيج الخاص بها إلى "Sprite (2D and UI)"

• قم بإنشاء لوحة قماشية جديدة (GameObject -> UI -> Canvas)
• انقر بزر الماوس الأيمن على كائن Canvas -> واجهة المستخدم -> الصورة
• قم بتعيين كائن دائري للصورة المصدر وقم بتغيير لونه إلى اللون الأحمر
• قم بتغيير نوع الصورة إلى "Filled" وطريقة التعبئة إلى "Radial 360" (سيظهر هذا متغيرًا آخر يسمى "Fill Amount" والذي يتحكم في مقدار الصورة المرئية على طول الدائرة)

• قم بتكرار الصورة وتغيير لونها إلى الأبيض ونوع الصورة إلى "Simple"
• انقل الصورة المكررة داخل الصورة الأولى
• قم بتغيير حجم الصورة الأولى (التي تحتوي على نوع الصورة المعبأة) إلى شيء أكبر (على سبيل المثال العرض: 135 الارتفاع: 135)

• إنشاء نص جديد (انقر بزر الماوس الأيمن على اللوحة القماشية -> واجهة المستخدم -> النص)
• قم بتغيير محاذاته إلى الوسط الأوسط

• قم بتغيير ارتفاع النص إلى 60 لتتمكن من ملاءمة نص التحميل

وأخيرًا، سنقوم بإنشاء برنامج نصي يطبق قيمة التقدم على الصورة

• قم بإنشاء سكريبت جديد، وأطلق عليه اسم "SC_CircularLoading" والصق الكود أدناه داخله:

SC_CircularLoading.cs

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

public class SC_CircularLoading : MonoBehaviour
{
    public Image loadingImage;
    public Text loadingText;
    [Range(0, 1)]
    public float loadingProgress = 0;

    // Update is called once per frame
    void Update()
    {
        loadingImage.fillAmount = loadingProgress;
        if(loadingProgress < 1)
        {
            loadingText.text = Mathf.RoundToInt(loadingProgress * 100) + "%\nLoading...";
        }
        else
        {
            loadingText.text = "Done.";
        }
    }
}

• قم بإرفاق البرنامج النصي SC_CircularLoading لأي كائن وتعيين متغيراته (يجب أن يكون تحميل الصورة هو الصورة ذات نوع التعبئة الشعاعية ويجب أن يكون تحميل النص نصًا يُظهر قيمة التقدم)

• اضغط على Play وحرك شريط تمرير تقدم التحميل. لاحظ ملء الصورة أثناء التحميل تدريجيًا: