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

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

Sharp Coder مشغل فديوهات

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

خطوات

سنحتاج إلى شكل دائري 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 وحرك شريط تمرير تقدم التحميل. لاحظ ملء الصورة أثناء التحميل تدريجيًا:

Unity3D واجهة المستخدم البرنامج التعليمي دائري دائرة تصميم نصائح سير العمل HP الصحة التحميل الأحمر النسبة المئوية