إنشاء واجهة مستخدم (UI) عن طريق Unreal Engine 4

في هذا البرنامج التعليمي سوف نستعرض كيفية إنشاء وعرض وتحديث واجهة المستخدم وما يسمى شاشة العرض الرأسية (HUD).

حيث يستخدم مصممو ألعاب الفيديو، الرسومات والنصوص لعرض المعلومات المتعلقة باللاعب مثل الصحة أو النتيجة، وهو ما يُعرف بواجهة المستخدم (UI).

ويمكن إنشاء واجهة مستخدم (UI) في الإصدار الرابع من أنريل إينجن (Unreal Engine 4) باستخدام رسوم متحركة افتراضية Unreal Motion Graphics (UMG).

وتتيح (UMG) إنشاء واجهة مستخدم بسهولة عن طريق سحب عناصر واجهة المستخدم وإفلاتها (مثل الأزرار والتسميات النصية).

وسنتعلم في هذا البرنامج التعليمي كيفية:

  1. إنشاء شاشة عرض (HUD) تعرض عداد ومؤقت
  2. عرض شاشة (HUD)
  3. تحديث العداد والمؤقت لعرض القيم المتغيرة

ومن الجدير بالذكر أنه سوف يتم استخدام المخططات (Blueprints) في هذا البرنامج التعليمي، فإذا كنت بحاجة إلى تجديد معلوماتك، راجع البرنامج التعليمي الخاص بالمخططات (Blueprints).

البداية

قم بتنزيل مشروع البداية وفك ضغطه، وانتقل إلى مجلد المشروع وافتح GeometryCatcher.uproject.

ملاحظة: إذا تلقيت رسالة تفيد بأن المشروع قد تم إنشاؤه باستخدام إصدار سابق من محرر أنريل (Unreal editor)، فلا بأس بذلك (يتم تحديث المحرك بشكل متكرر)، ويمكنك إما اختيار خيار فتح نسخة (open a copy)، أو خيار التحويل في المكان (convert in place).

اضغط على (Play) للتحكم في مكعب أبيض وحاول التقاط الأشكال المتساقطة، ويمكنك تحريك الماسك أفقياً عن طريق تحريك الماوس، وبعد عشر ثوانٍ، ستتوقف الأشكال عن التكاثر.

 جمع أشكال

أول شيء سيتم إنشاءه هو شاشة عرض تعرض شيئين:

  1. عداد يتتبع عدد الأشكال التي جمعها اللاعب.
  2. جهاز توقيت يعرض عدد الثواني المتبقية حتى تتوقف الأشكال عن التكاثر.

ولإنشاء كل هذه، تحتاج إلى استخدام الأدوات (widgets).

لمحة عن الودجات (About Widgets)

الويدجات (widgets) هي عناصر واجهة المستخدم (UI) والتي توفر نوعاً من الوظائف المرئية لواجهة المستخدم على سبيل المثال، توفر أداة الزر (Button) عنصراً يمكن للمستخدم رؤيته والنقر عليه.

أدوات - زر

ومن الجدير بالذكر أنه ليس من الضروري أن تكون الأداة نفسها مرئية، على سبيل المثال، تقسم أداة لوحة الشبكة (Grid Panel) مساحتها بالتساوي بين محتوياتها، ولا يمكن للمستخدم رؤية لوحة الشبكة ولكن يمكنه رؤية تأثيرها.

أشكال - أدوات

ويمكن أن تحتوي الأدوات أيضاً على عناصر لأدوات أخرى، وفيما يلي مثال على أداة مخصصة تحتوي على أداة نص (Text) (تحديد الاسم) وأداة نص (Text Box):

أدوات - نص

ويمكن أيضاً إنشاء أداة لتكون واجهة كاملة مثل شاشة القائمة، ويوجد أدناه مثال لأداة تم إنشاؤها لتبدو وكأنها شاشة عنوان.

وجميع العناصر هي أيضاً أداوت ومضمنة في أداة شاشة العنوان.

شاشة

الآن بعد أن عرفت ما هي الأدوات، حان الوقت لإنشاء واحدة لـ HUD.

إنشاء أداة (Creating a Widget)

انتقل إلى مستعرض المحتوى (Content Browser) وانتقل إلى مجلد واجهة المستخدم (UI folder)، وانقر فوق إضافة جديد (Add New) وحدد User Interface \ Widget Blueprint، وأعد تسمية الأصل الجديد إلى WBP_HUD.

إنشاء أداة

انقر نقراً مزدوجاً فوق WBP_HUD لفتحه في UMG UI Designer.

مصمم الرسوم المتحركة في واجهة المستخدم (The UMG UI Designer)

يتكون UMG UI Designer من سبعة عناصر رئيسية:

UMG UI Designer

  1. المصمم (Designer): تحتوي هذه المنطقة على تمثيل مرئي للأدوات الخاصة بك، قم بالتحريك بالضغط بزر الماوس الأيمن وتحريك الماوس، وقم بالتكبير عن طريق تمرير عجلة الماوس.
  2. التفاصيل (Details): سيتم عرض خصائص أي أداة تختاره هنا.
  3. لوحة (Palette): قائمة بجميع الأدوات التي يمكنك استخدامها، وستظهر الأدوات التي أنشأها أي مستخدم هنا أيضاً.
  4. التسلسل الهرمي (Hierarchy): قائمة بجميع الأدوات التي تستخدمها حالياً.
  5. الرسوم المتحركة (Animations): يمكن أن تحتوي الأدوات على خصائص معينة متحركة مثل الموضع والحجم، وتسرد هذه اللوحة جميع الرسوم المتحركة الخاصة بك.
  6. الخط الزمني (Timeline): عندما تحدد رسماً متحركاً، ستعرض هذه اللوحة الخصائص المتحركة وإطارات المفاتيح.
  7. وضع المحرر (Editor Mode): هنا، يمكنك التبديل بين وضعي المصمم والرسم البياني، ويتطابق وضع الرسم البياني تقريباً مع رسم بياني لحدث المخطط.

إنشاء أداة نص (Creating a Text Widget)

تعد أدوات النص مثالية لعرض المعلومات الرقمية مثل العداد والمؤقت.

انتقل إلى اللوحة (Palette) وابحث عن أداة النص (Text)، وأضف الأداة عن طريق النقر بزر الماوس الأيسر مع الاستمرار وسحبها إلى لوحة المصمم (Designer panel).

إنشاء أداة نص

ولا تقلق بشأن محتوى النص في الوقت الحالي، فسوف تقوم باستبداله لاحقاً.

أعد تسمية الأداة إلى (CounterText)، ويمكنك القيام بذلك عن طريق تحديد أداة النص والانتقال إلى لوحة التفاصيل (Details panel)، واكتب CounterText في مربع النص الموجود في الجزء العلوي.

إعادة تسمية

يمكنك نقل الأدوات بالنقر بزر الماوس الأيسر وسحب الأدوات داخل لوحة المصمم (Designer).

نقل الأداوت

ويمكن أيضاً تغيير حجم الأدوات عن طريق النقر بزر الماوس الأيسر وسحب المقابض، ويسمح لك تغيير الحجم بتعيين حدود الأداة، وأنريل (Unreal) لن يقدم أي شيء خارج الحدود.

تعديل حجم الأدوات

ويمكن تعديل الموضع والحجم بطريقة أخرى، من خلال تعديل القيم في لوحة التفاصيل (Details panel), وقم بتعيين الخصائص والقيم التالية لـ CounterText:

  • الموضع X: 200
  • الموضع Y: 50
  • الحجم X: 500
  • الحجم Y: 100

تعديل الحجم والموضع

في الوقت الحالي، لا يحتل النص سوى جزء صغير من المربع.

حجم النص

يمكنك زيادة حجم الخط بالانتقال إلى لوحة التفاصيل (Details panel) والانتقال إلى قسم المظهر (Appearance)، وفي أقصى يمين خاصية الخط، يوجد مربع نص لتعيين حجم الخط.

تعديل قيمة حجم النص

اضبط حجم الخط على 68.

ضبط حجم الخط

ومن أجل منح العداد مظهر جميل سنضيف رمز بجواره.

إنشاء أداة الصورة (Creating an Image Widget)

تعد أدوات الصور طريقة سهلة لعرض الرسومات في واجهة المستخدم (UI) الخاصة بك مثل الرموز.

قم بإنشاء أداة صورة وقم بتسميتها (CounterIcon)، واضبط الموضع X على 75 والموضع Y على 50. سيضعه هذا بجوار (CounterText).

إنشاء أداة الصورة

ولتعيين صورة، انتقل إلى لوحة التفاصيل (Details panel) وانتقل إلى قسم المظهر (Appearance)، وقم بتوسيع خاصية (Brush) ثم انقر فوق القائمة المنسدلة للصورة، وحدد T_Counter.

تعيين صورة

ستبدو الصورة ممتدة لأن الأداة لها حجم مختلف عن الصورة.

صورة ممتدة

وبدلاً من تغيير حجم الأداة، يمكنك استخدام خيار الحجم إلى المحتوى (Size To Content)، وسيقوم هذا الخيار تلقائياً بتغيير حجم الأداة ليتناسب مع محتوياتها.

أثناء وجودك في لوحة التفاصيل (Details panel)، انتقل إلى قسم Slot (Canvas Panel Slot)، وحدد مربع الاختيار بجوار الحجم إلى المحتوى (Size To Content).

تعديل الحجم حسب المحتوى

وبهذه العملية سوف تقوم الأداة بتغيير حجم نفسها لتناسب الصورة.

تعديل الحجم حسب المحتوى 2

عند لعب اللعبة بأحجام شاشة مختلفة، تحتاج واجهة المستخدم (UI) إلى نقل أدواتها وفقاً لذلك، وللحفاظ على تخطيط واجهة المستخدم الخاصة بك، يمكنك استخدام ما يسمى المرتكزات (anchors).

المرتكزات (Anchors)

تحدد نقطة التمركز مكان وجود الأداة، ويتم بشكل افتراضي، يتم تعيين نقطة التمركز الخاصة بالأدوات في الجزء العلوي الأيسر من العنصر الرئيسي.

ولذلك، عندما تقوم بتعيين موضع الأداة، فأنت تقوم بالفعل بتعيين موضعها بالنسبة لنقطة التمركز هذه.

وفي المثال أدناه، يتم ربط كل صورة بنقطة واحدة (الزاوية الأقرب).

المرتكزات

لاحظ كيف تحافظ كل صورة على موضعها بالنسبة إلى نقطة الارتكاز الخاصة بها، وباستخدام أدوات التثبيت، يمكنك التأكد من أن واجهة المستخدم (UI) الخاصة بك لها نفس التخطيط عبر أحجام الشاشات المختلفة.

ويمكنك أيضاً استخدام المرتكزات لتغيير حجم الأدوات تلقائياً، وعند تحديد تمركز نقطتين أو أكثر، فإن الأداة ستغير حجمها للحفاظ على الحجم النسبي.

في المثال أدناه، تم تحديد تمركز الشريط في الزاويتين العلويتين اليسرى واليمنى.

بيانات المرتكزات

لاحظ أن الشريط يتحرك عمودياً، ولكن لا يتم تغيير حجمه، وهذا لأنه يحتوي على نقطة تمركز واحدة فقط على المحور Y (الجزء العلوي).

ومع ذلك، يتم تغيير حجم الشريط أفقياً لأنه يحتوي على نقطتي تمركز على المحور X.

تمثل ميدالية المرتكز (Anchor Medallion) موقع المرتكزات الخاص بك، وسيظهر كلما حددت عنصر واجهة مستخدم.

ميدالية المرتكز

نقاط التمركز الخاصة بـ CounterText و CounterIcon موجودة بالفعل في الموضع الصحيح، لذا لا تحتاج إلى تعيينها.

بعد ذلك، ستقوم بإنشاء أداة نص وصورة للمؤقت، وهذه المرة سوف تضعهم على الجانب الأيمن.

إنشاء المؤقت (Creating the Timer)

قم بإنشاء أداة نص وتسميتها TimerText، وقم بتعيين الخصائص التالية:

  • الموضع X: 1225
  • الموضع Y: 50
  • الحجم X: 500
  • الحجم Y: 100
  • حجم الخط: 68
  • الضبط: محاذاة النص إلى اليمين (سيؤدي هذا إلى محاذاة النص إلى الجانب الأيمن من الأداة).

إنشاء المؤقت

بعد ذلك، ستقوم بتعيين المرتكز في أعلى اليمين، ويمكنك القيام بذلك عن طريق النقر بزر الماوس الأيسر وسحب الدائرة على Anchor Medallion، وانقل Anchor Medallion إلى الزاوية العلوية اليمنى.

المؤقت

لاحظ كيف تم تحديث الموضع ليكون مرتبطاً بالمرتكز.

موضع المؤقت

قم بإنشاء أداة صورة وقم بتسميته TimerIcon، وقم بتعيين الخصائص التالية:

  • الموضع X: 1750
  • الموضع Y: 50
  • تغيير الحجم إلى المحتوى: تم الفحص
  • فرشاة \ صورة: T_Timer

صورة المؤقت

بدلاً من ضبط المرتكز باستخدام Anchor Medallion، يمكنك استخدام الإعدادات المسبقة، وانتقل إلى لوحة التفاصيل (Details panel) وانقر فوق القائمة المنسدلة بجوار المرتكزات لعرض الإعدادات المسبقة، وحدد الإعداد المسبق الثالث (الذي يحتوي على مربع في أعلى اليمين).

ضبط المرتكز

اكتمل الآن تخطيط واجهة المستخدم، ويمكنك رؤية المرتكزات تعمل عن طريق محاكاة أحجام مختلفة للشاشة، انتقل إلى لوحة المصمم (Designer panel) وانقر فوق القائمة المنسدلة حجم الشاشة (Screen Size).

أداوت2

سيؤدي تحديد خيار إلى تغيير حجم WBP_HUD لمطابقة الخيار، وفيما يلي كيف سيبدو HUD على iPad Air، لاحظ كيف تكون الأدوات أقرب معاً.

تخطيط واجهة المستخدم

في القسم التالي، ستتعلم كيفية عرض أداة WBP_HUD.

عرض الشاشة الرأسية (Displaying the HUD)

انقر فوق (Compile) ثم ارجع إلى المحرر الرئيسي، وانتقل إلى مجلد المخططات (Blueprints) وانقر نقراً مزدوجاً على BP_GameManager لفتحه.

يجب أن تكون شاشة HUD مرئية بمجرد بدء اللعبة، ويمكنك استخدام عقدة (Event BeginPlay) للقيام بذلك.

ابحث عن عقدة (Event BeginPlay) ثم أضف عقدة (Create Widget) إلى نهاية سلسلة العقد، وستنشئ هذه العقدة مثيلاً للأداة المحددة.

Displaying the HUD

انقر فوق القائمة المنسدلة بجوار الفئة (Class) وحدد WBP_HUD.

عقدة شاشة

لعرض شاشة HUD، تحتاج إلى استخدام عقدة (Add to Viewport)، وانقر بزر الماوس الأيسر واسحب دبوس قيمة الإرجاع لعقدة (Create Widget)، وحرر النقر بزر الماوس الأيسر على مساحة فارغة لإظهار قائمة السياق، وأضف عقدة (Add to Viewport).

HUD

لنستعرض ترتيب الأحداث:

  1. بمجرد أن يقوم أنريل (Unreal) يتوليد BP_GameManager، سيتم تنفيذ التوابع (Restart) و (SetUpCamera)، وتقوم هذه التوابع بإعداد بعض المتغيرات والكاميرا، وإذا كنت لا تعرف ما هي التوابع، فلا تقلق، سيغطيهم البرنامج التعليمي لاحقاً.
  2. تنشئ عقدة Create Widget مثيلاً لـ WBP_HUD.
  3. تعرض العقدة Add to Viewport WBP_HUD.

انقر فوق (Compile) ثم ارجع إلى المحرر الرئيسي، واضغط على (Play) لتشغيل اللعبة باستخدام شاشة HUD الجديدة.

واجهة متحركة

لعرض قيم العداد والمؤقت، ستحتاج إلى المتغيرات التي تحتفظ بهذه المعلومات، ويمكنك العثور على هذه المتغيرات في (BP_GameManager).

قيمة العداد والمؤقت

لاستخدام هذه المتغيرات، تحتاج إلى طريقة للوصول إلى BP_GameManager من WBP_HUD، ويمكنك القيام بذلك عن طريق تخزين مرجع إلى BP_GameManager في متغير.

تخزين المراجع (Storing References)

يعد تخزين مرجع مفيداً لأنه يعني أنه يمكنك الوصول إلى مثيل معين بسهولة.

تخيل أن لديك صندوقاً واحداً به كرة، وإذا أردت العثور على الكرة وفحصها، فسيكون ذلك سهلاً لأن هناك صندوقاً واحد فقط.

تخزين المراجع 1

الآن، تخيل أن لديك مائة صندوق ولكن واحداً فقط يحتوي على كرة، وسيكون عليك البحث في كل صندوق للعثور على الذي يحتوي على الكرة.

تخزين المراجع 2

عندما تريد فحص الكرة، يجب أن تقوم بهذه العملية، وهذا من شأنه أن يؤدي بسرعة إلى مشاكل في الأداء.

وباستخدام المراجع، يمكنك تتبع الصندوق الذي يحتوي على الكرة، وبهذه الطريقة، لن تضطر إلى تحديد كل صندوق.

تخزين المراجع 3

إنشاء المتغير (Creating the Variable)

افتح WBP_HUD وانتقل إلى وضع الرسم البياني بالانتقال إلى وضع المحرر وتحديد الرسم البياني.

إنشاء المتغير

انتقل إلى علامة التبويب (My Blueprint) وأنشئ متغيراً جديداً يسمى (GameManager).

انتقل إلى لوحة التفاصيل وانقر فوق القائمة المنسدلة بجوار نوع المتغير، ابحث عن BP_GameManager وحدد BP Game Manager \ مرجع الكائن.

إنشاء المتغير 2

تحديد المرجع (Setting the Reference)

انقر فوق (Compile) ثم افتح BP_GameManager.

حدد موقع عقدة (Create Widget) ثم انقر بزر الماوس الأيسر واسحب دبوس (Return Value)، وحرر زر الماوس الأيسر فوق مساحة فارغة ثم حدد (Set Game Manager) من القائمة.

بعد ذلك، قم بربط عقدة (Add to Viewport) بعقدة (Set Game Manager).

تحديد المرجع

ملاحظة: يمكنك إعادة توجيه الأسلاك بالنقر المزدوج عليها لإنشاء عقدة إعادة توجيه، انقر بزر الماوس الأيسر واسحب عقدة إعادة التوجيه لإعادة توجيه السلك.

بعد ذلك، قم بإنشاء عقدة ذاتية (Self) وقم بتوصيلها بالدبوس الأيسر لعقدة (Set Game Manager)، وسيتم إدراج العقدة الذاتية (Self) على أنها (Get a reference to self).

عقدة ذاتية

الآن، عندما يتم إنشاء WBP_HUD، سيكون له مرجع إلى BP_GameManager.

في القسم التالي، ستتعلم كيفية تحديث الأدوات بمساعدة التوابع.

التوابع (Functions)

في المخططات (Blueprints)، تعتبر التوابع (functions) رسوم بيانية مشابهة للرسم البياني للأحداث (Event Graph).

وعلى عكس مخطط الأحداث (Event Graph)، يمكنك استدعاء التابع باستخدام عقدة، ولكن لماذا تريد أن تفعل هذا؟

شكل تعبيري

التنظيم (Organization)

أحد أسباب استخدام التوابع هو التنظيم، وباستخدام التوابع، يمكنك طي عدة عقد في عقدة واحدة.

ألق نظرة على قسم (Event BeginPlay) في BP_GameManager، ستجد هناك نوعان من التوابع: إعادة التشغيل (Restart) وضبط الكاميرا (SetUpCamera).

التنظيم

إليك ما سيبدو عليه هذا القسم بدون التوابع:

عدم التنظيم

كما ترى، يبدو مرتب جداً باستخدام الوظائف.

إعادة الاستخدام (Reusability)

سبب آخر لاستخدام الوظائف هو إعادة الاستخدام (Reusability)، على سبيل المثال، إذا كنت تريد إعادة تعيين العداد والمؤقت، فيمكنك القيام بذلك بسهولة باستخدام تابع إعادة التشغيل (Restart function).

إعادة الاستخدام

وهذا يوفر عليك الحاجة إلى إعادة إنشاء العقد في كل مرة تريد فيها إعادة تعيين تلك المتغيرات.

الآن بعد أن تعرفت على التوابع، ستستخدم واحد منها لتحديث أداة (CounterText).

تحديث الأداة (Updating a Widget)

افتراضياً، لا يمكن الوصول إلى أدوات النص من المخططات (Blueprints)، وهذا يعني أنك لن تكون قادراً على تعيين خاصية النص الخاصة بهم، ولحسن الحظ، هناك حل سهل.

انقر فوق (Compile) ثم افتح (WBP_HUD)، وقم بالتبديل إلى وضع المصمم (Designer mode).

حدد (CounterText) ثم انتقل إلى لوحة التفاصيل (Details panel)، وحدد خانة الاختيار (Is Variable) الموجودة في الجزء العلوي.

تحديث الأداة

الآن، ستتمكن من تحديث (CounterText)، والخطوة التالية هي إنشاء تابع لتحديث النص.

إنشاء تابع التحديث (Creating the Update Function)

عُد إلى وضع الرسم البياني ثم انتقل إلى علامة التبويب (My Blueprint)، وانقر فوق علامة (+) الموجودة على يمين قسم التوابع (Functions section).

إنشاء تابع التحديث

سيؤدي هذا إلى إنشاء تابع جديد ويأخذك إلى الرسم البياني الخاص به، أعد تسمية التابع إلى UpdateCounterText.

سيحتوي الرسم البياني بشكل افتراضي على عقدة دخول (Entry node)، وعندما يتم تنفيذ التابع، سيكون هذا هو المكان الذي سيبدأ فيه.

عقدة الدخول

لجعل (CounterText) يعرض المتغير (ShapesCollected)، ستحتاج إلى ربطهما.

اسحب المتغير (GameManager) إلى الرسم البياني، وانقر بزر الماوس الأيسر واسحب الدبوس الخاص به ثم حرر النقر بزر الماوس الأيسر على مساحة فارغة، ومن القائمة، حدد الحصول على الأشكال التي تم جمعها (Get Shapes Collected).

ربط

لتعيين النص، ستستخدم عقدة (SetText) (نص)، اسحب المتغير (CounterText) إلى الرسم البياني، وانقر بزر الماوس الأيسر واسحب الدبوس الخاص به ثم حرر النقر بزر الماوس الأيسر على مساحة فارغة، ومن القائمة، أضف عقدة (SetText) (نص).

تعيين النص

يقبل SetText (Text) إدخالاً من نوع Text فقط، ومع ذلك، فإن المتغير ShapesCollected هو عدد صحيح، ولحسن الحظ، سيقوم أنريل (Unreal) بالتحويل تلقائياً عندما تحاول توصيل عدد صحيح بإدخال نص.

قم بتوصيل المتغير ShapesCollected بدبوس In Text لعقدة Set Text (Text)، وسيقوم أنريل (Unreal) تلقائياً بإنشاء عقدة ToText (int) لك.

تعديل النص وعرضه

لإكمال التابع، قم بتوصيل عقدة الإدخال (Entry node) بالعقدة Set Text (Text).

إكمال التابع

ترتيب الأحداث:

  1. عند استدعاء UpdateCounterText، سيحصل التابع على المتغير ShapesCollected من BP_GameManager.
  2. تحول عقدة ToText (int) قيمة ShapesCollected إلى نوع نص.
  3. سيقوم SetText (Text) بتعيين نص CounterText إلى القيمة من ToText (int).

الشيء التالي الذي يجب فعله هو استدعاء UpdateCounterText عندما يجمع اللاعب شكلاً.

استدعاء تابع التحديث (Calling the Update Function)

أفضل مكان لاستدعاء UpdateCounterText هو مباشرة بعد زيادة ShapesCollected في اللعبة.

ولقد أنشأت تابع تسمى IncrementShapesCollected يزيد من العداد نيابة عنك، وتستدعي الأشكال هذه التابع كلما تداخلت مع المشغل.

استدعاء تابع التحديث

انقر فوق (Compile) ثم ارجع إلى BP_GameManager.

قبل أن تتمكن من الاتصال بـ UpdateCounterText، تحتاج إلى مرجع إلى WBP_HUD.

وبمجرد إنشاء المتغير، أعد تسميته إلى HUDWidget.

سلسلة عقد 1

بعد ذلك، اسحب الدبوس الأيمن من عقدة Set HUDWidget وحرره في مساحة فارغة، وقم بإضافة عقدة UpdateCounterText.

وسيؤدي هذا إلى التأكد من أن CounterText يعرض قيمة ShapesCollected عند بدء اللعبة.

تحديث

بعد ذلك، انتقل إلى لوحة My Blueprint وانتقل إلى قسم التوابع، انقر نقراً مزدوجاً فوق IncrementShapesCollected لفتح الرسم البياني الخاص بها.

عقد 3

اسحب متغير HUDWidget إلى الرسم البياني، وانقر بزر الفأرة الأيسر واسحب دبوسها وحرره في مساحة فارغة، وأضف عقدة UpdateCounterText وقم بتوصيلها كما يلي:

توصيل

الآن، عندما يتم تنفيذ IncrementShapesCollected، فإنه سيزيد ShapesCollected ثم استدعاء UpdateCounterText.

وسيقوم هذا التابع بعد ذلك بتحديث CounterText إلى قيمة ShapesCollected.

انقر فوق (Compile) ثم قم بإغلاق BP_GameManager, واضغط على (Play) وجمع بعض الأشكال لمشاهدة تحديث أداة CounterText.

تشغيل العداد

بعد ذلك، ستقوم بتحديث أداة TimerText باستخدام طريقة مختلفة تسمى الربط.

الروابط (Bindings)

تسمح لك الروابط بتحديث بعض خصائص الأداة تلقائياً، ولكي تكون قابلة للربط، يجب أن تحتوي الخاصية على القائمة المنسدلة ربط (Bind drop-down).

الروابط

يمكنك ربط الخصائص بتابع أو متغير موجود في الأداة، وسيحصل الربط باستمرار على قيمة من التابع أو المتغير، وسيقوم بعد ذلك بتعيين الخاصية المرتبطة إلى تلك القيمة.

آلية عمل الروابط

وقد تتساءل لماذا لا يجب عليك فقط استخدام الروابط طوال الوقت، الارتباطات غير فعالة لأنها يتم تحديثها باستمرار، وهذا يعني أن اللعبة تضيع الوقت في تحديث الخاصية حتى لو لم تكن هناك أية معلومات جديدة.

قارنها بالطريقة السابقة حيث يتم تحديث الأداة فقط عندما تحتاج إلى ذلك.

مع ذلك، تعتبر الارتباطات رائعة للأدوات التي تتغير بشكل متكرر مثل المؤقت، ودعنا نتابع وننشئ ارتباط لـ TimerText.

إنشاء الروابط (Creating a Binding)

افتح WBP_HUD وانتقل إلى وضع المصمم (Designer mode).

حدد TimerText ثم انتقل إلى قسم المحتوى في لوحة التفاصيل، وسترى أن خاصية Text قابلة للربط، وانقر فوق القائمة المنسدلة ربط وحدد إنشاء ربط (Create Binding).

إنشاء الروابط

سيؤدي هذا إلى إنشاء تابع جديد ويأخذك إلى الرسم البياني الخاص به، أعد تسمية التابع إلى UpdateTimerText.

سيكون للتابع عقدة إرجاع مع دبوس قيمة الإرجاع من نوع نص، وسيعرض TimerText أي نص تقوم بإدخاله في هذا الدبوس.

عقدة العودة

اسحب GameManager إلى الرسم البياني ثم احصل على متغير TimeRemaining منه.

قم بتوصيل متغير TimeRemaining بقيمة الإرجاع لعقدة الإرجاع، كما هو الحال في المرة السابقة، سيضيف أنريل (Unreal) تلقائياً عقدة تحويل.

روابط نهائي

ملخص:

  1. سيستدعي الربط التابع UpdateTimerText باستمرار.
  2. سيحصل التابع على متغير TimeRemaining من BP_GameManager.
  3. ستقوم عقدة ToText (float) بتحويل القيمة من TimeRemaining إلى نوع Text.
  4. ثم يتم إخراج القيمة المحولة إلى عقدة الإرجاع.

اكتمل HUD أخيراً، انقر فوق Compile ثم أغلق WBP_HUD، واضغط (Play) لرؤية النتائج النهائية.

نهائي

 

المصدر
هنا

مقالات ذات صلة

اترك تعليقاً

لن يتم نشر عنوان بريدك الإلكتروني.