Canvas والنص

جزء من قسم بناء ألعاب حقيقية في رحلة Unity على Coddy. الدرس 1 من 56.

تعرض Unity النصوص والأزرار والأشرطة على الشاشة باستخدام نظام واجهة المستخدم الخاص بها. في Unity 6، يضيف الخيار GameObject > UI > Text - TextMeshPro عنصرًا نصيًا باسم Text (TMP)؛ وفي المرة الأولى، تطلب Unity استيراد TMP Essentials، التي يحتاج إليها النص لخطه. إذا لم يكن في المشهد Canvas بعد، تنشئ Unity واحدًا وتضع النص بداخله، بالإضافة إلى EventSystem الذي تمر عبره نقرات واجهة المستخدم. تعرض Canvas عناصرها الفرعية فوق صورة الكاميرا، في موضع ثابت على الشاشة أينما كانت الكاميرا تتجه. اضبط Canvas Scaler على Scale With Screen Size، و1920 x 1080، وMatch 0.5، كما تفعل كل المشاهد في هذه الدورة، وسيحافظ التخطيط على تناسبه مع أي حجم للشاشة.

مكوّن النص هو TextMeshPro - Text (UI). تحتفظ البرامج النصية به في حقل من نوعه الأساسي TMP_Text، من مساحة الأسماء TMPro، وتغيّر ما يعرضه عبر خاصية text، وهي سلسلة نصية. يسمّي هذا البرنامج النصي المستوى عند بدء تشغيله:

using UnityEngine;
using TMPro;

public class LevelIntro : MonoBehaviour
{
    public TMP_Text titleText;

    void Start()
    {
        titleText.text = "World 2: Ice Caves";
    }
}

اسحب العنصر Text (TMP) من نافذة Hierarchy إلى خانة Title Text في Inspector، وستضع Unity مكوّن النص الخاص به في الحقل. من دون using TMPro;، يكون الاسم TMP_Text غير معروف ولا يُترجم البرنامج النصي (CS0246). إذا تركت الخانة فارغة، فسيؤدي أول titleText.text إلى طرح UnassignedReferenceException. يستبدل ما يكتبه البرنامج النصي نص Text Input الذي أُدخِل في Inspector، وهو New Text في النص الجديد.

التحدي

سهل

يتجوّل المستكشف في الجزيرة باستخدام السهمين الأيسر والأيمن، كما يفعل Explorer.cs بالفعل. اعرض موقعه في ZoneText أعلى الشاشة، حيث لا يزال يظهر النص New Text:

أضف using TMPro; وحقلًا عامًا من النوع TMP_Text باسم zoneText. يربط المشهد ZoneText بحقل يحمل هذا الاسم بالضبط.
في كل إطار، يعرض النص Zone: Beach عندما تكون قيمة x للمستكشف أقل من 2، وZone: Jungle ابتداءً من 2.

اضغط على Play، وامشِ إلى العشب ثم عُد، وبعد ذلك اضغط على Check.

جرّب بنفسك

using UnityEngine;

public class Explorer : MonoBehaviour
{
    public float speed = 4f;

    void Update()
    {
        float move = Input.GetAxisRaw("Horizontal");
        transform.Translate(move * speed * Time.deltaTime, 0f, 0f);

        // اعرض المنطقة في ZoneText: المنطقة: الشاطئ عندما تكون x أقل من 2، والمنطقة: الغابة بدءًا من 2
    }
}