Canvas والنص

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

يرسم 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 في النص الجديد.

التحدي

سهل

اعرض المنطقة التي يوجد فيها المستكشف في ZoneText بالأعلى.

في Explorer.cs، أضف using TMPro; والحقل public TMP_Text zoneText;. يربط المشهد ZoneText بهذا الاسم.
في Update()، أسفل التعليق، اجعل zoneText.text يساوي Zone: Beach عندما تكون قيمة transform.position.x أقل من 2، واجعله يساوي Zone: Jungle فيما عدا ذلك.

اضغط على «العب» وامشِ إلى اليمين حتى تصل إلى العشب: سيتحول النص إلى Jungle. ثم اضغط على «تحقق».

جرّب بنفسك

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: Zone: Beach عندما تكون x أقل من 2، وZone: Jungle بدءًا من 2
    }
}