القائمة الرئيسية للبرنامج التعليمي للوحدة

تجمع واجهة المستخدم (UI) بين الرسومات والنصوص والأزرار وتلعب دورًا حاسمًا في توفير تجربة لعب ممتعة.

تعد القائمة الرئيسية واحدة من أبرز أجزاء واجهة المستخدم لأنها عادة ما تكون أول ما يراه اللاعبون عند تحميل اللعبة.

في هذا البرنامج التعليمي، سأوضح كيفية إنشاء قائمة رئيسية في Unity باستخدام UI Canvas.

الخطوة 1: تصميم القائمة الرئيسية

• قم بإنشاء لوحة قماشية جديدة (GameObject -> UI -> Canvas)

• قم بإنشاء صورة جديدة عن طريق النقر بزر الماوس الأيمن على Canvas -> UI -> Image (ستكون هذه خلفية القائمة)

• تعيين الملمس لصورة تم إنشاؤها حديثًا. يمكنك استخدام الصورة أدناه (انقر بزر الماوس الأيمن -> حفظ باسم...)، وتأكد من ضبط نوع المادة على 'Sprite (2D and UI)' في إعدادات الاستيراد:

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

SC_BackgroundScaler.cs

using UnityEngine;
using UnityEngine.UI;

[ExecuteInEditMode]
public class SC_BackgroundScaler : MonoBehaviour
{
    Image backgroundImage;
    RectTransform rt;
    float ratio;

    // Start is called before the first frame update
    void Start()
    {
        backgroundImage = GetComponent<Image>();
        rt = backgroundImage.rectTransform;
        ratio = backgroundImage.sprite.bounds.size.x / backgroundImage.sprite.bounds.size.y;
    }

    // Update is called once per frame
    void Update()
    {
        if (!rt)
            return;

        //Scale image proportionally to fit the screen dimensions, while preserving aspect ratio
        if(Screen.height * ratio >= Screen.width)
        {
            rt.sizeDelta = new Vector2(Screen.height * ratio, Screen.height);
        }
        else
        {
            rt.sizeDelta = new Vector2(Screen.width, Screen.width / ratio);
        }
    }
}

• قم بإرفاق البرنامج النصي SC_BackgroundScaler بالصورة التي تم إنشاؤها حديثًا. (عند الإرفاق، سيقوم البرنامج النصي تلقائيًا بتغيير حجم صورة الخلفية لتناسب الشاشة):

إنشاء أزرار القائمة:

• انقر بزر الماوس الأيمن على Canvas -> Create Empty ثم أعد تسميته إلى "MainMenu". سيحتوي هذا الكائن على عناصر واجهة المستخدم للقائمة الرئيسية.
• أنشئ نصًا جديدًا بالنقر بزر الماوس الأيمن على الكائن "MainMenu" -> واجهة المستخدم -> النص. سيكون هذا نص العنوان.
• قم بتغيير النص إلى اسم لعبتك (في حالتي سيكون "Game Title"):

• تغيير محاذاة الفقرة إلى الوسط الأوسط واللون إلى الأبيض:

• وأخيرًا، قم بتغيير حجم الخط إلى شيء أكبر (على سبيل المثال 30) ونمط الخط إلى غامق.

ومع ذلك، ستلاحظ اختفاء النص، وذلك لأن أبعاد التحويل المستطيل صغيرة جدًا. قم بتغييرها إلى شيء أكبر (على سبيل المثال العرض: 400 الارتفاع: 100)، وقم أيضًا بتحريكه للأعلى قليلاً عن طريق تغيير موضع Y إلى 50:

• أنشئ 3 أزرار (انقر بزر الماوس الأيمن على الكائن "MainMenu" -> واجهة المستخدم -> الزر 3 مرات) وحرك كل زر لأسفل بمقدار 30 بكسل.
• قم بتغيير نص كل زر إلى "Play Now" و "Credits" و "Quit" على التوالي:

• قم بتكرار الكائن "MainMenu" وأعد تسميته إلى "CreditsMenu"، وقم بإزالة جميع الأزرار الموجودة بداخله باستثناء الزر "Quit"، وقم بتغيير النص الخاص به إلى "Back".
• قم بتغيير حجم خط العنوان النص الموجود في "CreditsMenu" إلى شيء أصغر (على سبيل المثال 14)، وقم بتغيير Pos Y إلى 0، واكتب نص الاعتمادات.

الخطوة 2: برمجة أزرار القائمة

نحتاج الآن إلى جعل الأزرار تعمل عن طريق إنشاء برنامج نصي.

• أنشئ سكريبت جديد وسميه SC_MainMenu ثم الصق الكود أدناه بداخله:

SC_MainMenu.cs

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

public class SC_MainMenu : MonoBehaviour
{
    public GameObject MainMenu;
    public GameObject CreditsMenu;

    // Start is called before the first frame update
    void Start()
    {
        MainMenuButton();
    }

    public void PlayNowButton()
    {
        // Play Now Button has been pressed, here you can initialize your game (For example Load a Scene called GameLevel etc.)
        UnityEngine.SceneManagement.SceneManager.LoadScene("GameLevel");
    }

    public void CreditsButton()
    {
        // Show Credits Menu
        MainMenu.SetActive(false);
        CreditsMenu.SetActive(true);
    }

    public void MainMenuButton()
    {
        // Show Main Menu
        MainMenu.SetActive(true);
        CreditsMenu.SetActive(false);
    }

    public void QuitButton()
    {
        // Quit Game
        Application.Quit();
    }
}

• قم بإرفاق SC_MainMenu بكائن Canvas
• قم بتعيين الكائن "MainMenu" لمتغير القائمة الرئيسية
• قم بتعيين الكائن "CreditsMenu" إلى متغير قائمة الاعتمادات

الخطوة الأخيرة هي ربط وظائف SC_MainMenu بكل زر.

• حدد الزر وفي "On Click ()" انقر فوق (+) لإضافة متغير عنصر جديد:

• قم بتعيين الكائن باستخدام البرنامج النصي SC_MainMenu (قماش) للزر "On Click ()" وحدد الوظيفة التي تتوافق مع الزر ("PlayNowButton()" لزر التشغيل الآن، "CreditsButton()" لزر الاعتمادات، "QuitButton()" لزر الإنهاء و "MainMenuButton()" إلى زر الرجوع في قائمة الاعتمادات).

القائمة الرئيسية جاهزة الآن.

ملاحظة: ستحاول وظيفة PlayNowButton() في SC_MainMenu.cs تحميل مشهد يسمى "GameLevel". لذا تأكد من أن لديك مشهدًا بالاسم "GameLevel"، والذي تمت إضافته أيضًا إلى إعدادات البناء (بدلاً من ذلك، يمكنك تغيير الاسم في هذا السطر ليتوافق مع اسم المشهد الذي تريد تحميله).

هل أنت مهتم بمعرفة المزيد حول إنشاء واجهة المستخدم؟ راجع البرنامج التعليمي الخاص بنا حول كيفية إنشاء عناصر تحكم باللمس على الهاتف المحمول في Unity.