تنفيذ التصاميم في الاستوديو | المراجع

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

باستخدام تجربة لعبة الليزر النموذجية .rbxl كمرجع، تُظهر لك هذه القسم من منهج تصميم واجهة المستخدم كيفية تحويل تخطيط واجهتك إلى حياة، بما في ذلك إرشادات حول:

استرداد معرّفات الأصول من مكتبة أصول واجهة المستخدم حتى تتمكن من إعادة إنشاء مكونات واجهة لعبة الليزر النموذجية.
محاكاة الأجهزة المختلفة مباشرة في الاستوديو لرؤية كيف تعرض واجهتك على شاشات وأبعاد مختلفة.
إنشاء أشياء من نوع ScreenGui و SurfaceGui و BillboardGui لعرض واجهتك على شاشات اللاعبين، وأسطح الأجزاء، وداخل الفضاء ثلاثي الأبعاد، على التوالي.

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

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

الحصول على مكتبة الأصول

مكتبات الأصول هي مجموعات من الأصول يمكنك إضافتها إلى مخزونك لسهولة الوصول والاستخدام مرة أخرى. المكتبة التي ستستخدمها لمشروعك من متجر المبدعين تشمل تسعة عناصر 2D فردية من واجهة المستخدم، والنسخ النهائية من مكونات الهدف، محدد البازوكا، ومعلومات اللاعب التي تقوم بإنشائها في هذا القسم من البرنامج التعليمي.

**أيقونة متعدد البازوكا**
rbxassetid://14309094777

**أيقونة بازوكا واحدة**
rbxassetid://14309094641

**أيقونة الفريق الوردي**
rbxassetid://14309678581

**شبه منحرف مقلوب**
rbxassetid://14304827304

**أيقونة الفريق الأخضر**
rbxassetid://14309678701

**تلاشي متعدد الاتجاهات**
rbxassetid://14304827147

**أيقونة زر الانفجار - افتراضي**
rbxassetid://18308375067

**أيقونة زر الانفجار - مضغوط**
rbxassetid://18308372597

**أيقونة الهدف**
rbxassetid://14400935532

أيقونة علامة الضرب
rbxassetid://14401148777

**أيقونة سهم الاختيار**
rbxassetid://14309187282

**تلاشي الحدود**
rbxassetid://14309518632

للحصول على مكتبة الأصول من مخزونك إلى تجربتك:

أضف مكتبة الأصول إلى مخزونك.
1. انتقل إلى صفحة تفاصيل مكتبة الأصول على متجر المبدعين.
2. في الزاوية العلوية اليمنى، انقر على زر الحصول على النموذج. أصبحت مكتبة الأصول الآن في مخزونك، ويمكنك إعادة استخدام هذه الأصول في أي مشروع على المنصة.
في الاستوديو، انتقل إلى علامة التبويب الرئيسية، ثم انقر على زر صندوق الأدوات. ستفتح نافذة صندوق الأدوات.
في نافذة صندوق الأدوات، انقر على علامة التبويب المخزن. تُعرض فئة نماذجي.
انقر على قائمة السحب لأسفل، ثم اختر فئة حزمتي.
انقر على مربع مكونات واجهة الشاشة النهائية، ثم في نافذة المستكشف، اختر المكونات المكتملة، ثم اسحبها إلى خدمة StarterGui. يمكنك الآن تمكين أي من المكونات النهائية للإشارة إلى تصميمها.

محاكاة الأجهزة

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

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

لمحاكاة واجهتك على أحجام الشاشات المختلفة:

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

إنشاء أشياء ScreenGui

لعرض عناصر واجهة المستخدم على شاشة كل لاعب، يمكنك إنشاء كائن ScreenGui في خدمة StarterGui. تعد كائنات ScreenGui الحاويات الرئيسية لواجهة المستخدم على الشاشة، وتنسخ خدمة StarterGui محتوياتها إلى حاوية PlayerGui لكل لاعب عندما يدخل تجربة.

يمكنك إنشاء عدة كائنات ScreenGui لتنظيم وعرض مجموعات من عناصر واجهة المستخدم سياقيًا طوال فترة اللعب. على سبيل المثال، يتضمن تجربة لعبة الليزر النموذجية خمسة كائنات ScreenGui منفصلة التي تكون معطلة في البداية حتى يحقق اللاعبون شروطًا مختلفة خلال تدفق المستخدم الرئيسي للتجربة:

HUDGui - يعرض معلومات رئيسية حول طريقة اللعب للتجربة عندما يكون اللاعبون نشطين في جولة، مثل الهدف وإجمالي نقاط كل فريق.
PickABlasterGui - يعرض جميع اختيارات البازوكا عندما يبدأ اللاعبون أو يعيدون الانضمام إلى جولة.
ForceFieldGui - يعرض شبكة سداسية عندما يختار اللاعبون بازوكا وعندما يكونون مؤقتًا غير معرضين للضرب.
OutStateGui - يعرض حدود داكنة حول الشاشة عندما يتم وضع علامة على اللاعبين.
RoundResultsGui - يعرض طبقة داكنة فوق الشاشة مع معلومات حول الفريق الذي فاز بالجولة.

بعد إنشاء كائن ScreenGui، يمكنك إنشاء وتخصيص عناصر GuiObjects التابعة له وفقًا لهدف كل حاوية. لتوضيح ذلك، في الأقسام التالية، سوف تتعلم كيفية تنفيذ عناصر واجهة المستخدم من أجل ثلاث فئات من المعلومات يحتاج اللاعبون إلى معرفتها لتحقيق النجاح في تجربة لعبة الليزر النموذجية. يمكنك ضبط أي جزء من العملية لتلبية مواصفات تجربتك الخاصة.

لإنشاء كائن ScreenGui:

في نافذة المستكشف، مرر فوق خدمة StarterGui، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
أضف ScreenGui.
أعد تسمية ScreenGui وفقًا لسياق عناصر واجهتها التابعة.
كرر هذه العملية لكل مجموعة من عناصر واجهة المستخدم تحتاج إلى عرضها على شاشة كل لاعب.

واجهة الهدف

تماشيًا مع أفضل الممارسات في التسلسل المرئي من تصميم التخطيطات الخاصة بك، يُعلّمك هذا القسم كيفية تنفيذ جميع عناصر واجهة المستخدم على الشاشة المتعلقة بهدف التجربة. هذه المجموعة من عناصر واجهة المستخدم تكون بالقرب من الجزء العلوي من الشاشة لأن الهدف وإجمالي نقاط كل فريق لهما الأهمية الأكبر في كيفية الفوز باللعبة.

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

لإعادة إنشاء واجهة الهدف بدقة ضمن نموذج لعبة الليزر:

أنشئ حاوية لكل المكون بالكامل.
1. أضف إطارًا إلى كائن HUDGui ScreenGui.
  1. في نافذة المستكشف، انتقل إلى خدمة StarterGui.
  2. مر على كائنها الفرعي HUDGui، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
  3. من القائمة السياقية، أضف إطارًا.
2. حدد الإطار الجديد، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 0 لتعيين نقطة الأصل للإطار في الجزء العلوي الأوسط منه (50% من اليسار إلى اليمين من الإطار، و0% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0.03, 0} لتحديد موقع الإطار بالقرب من الجزء العلوي الأوسط من الشاشة (50% من اليسار إلى اليمين من الشاشة، و3% من الأعلى إلى الأسفل من الشاشة بحيث يوجد بعض الهوامش).
  4. اضبط Size إلى {0.5, 0},{0.13, 0} لكي تأخذ عناصر الإطار جزءًا كبيرًا من الجزء العلوي من الشاشة لجذب انتباه اللاعبين (50% أفقيًا، و13% عموديًا).
  5. اضبط Name إلى الهدف.
3. (اختياري) أضف UIAspectRatioConstraint إلى الهدف لضمان أن تظل نسبة العرض إلى الارتفاع للعلاقة كما هي بغض النظر عن حجم شاشة اللاعب. يضبط النموذج خاصية UIAspectRatioConstraint.AspectRatio إلى 7.
أنشئ حاوية لأغراض التحذير المتعلقة بالهدف.
1. أضف إطارًا إلى الهدف.
2. حدد الإطار الجديد، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 0 لتعيين نقطة الأصل للإطار في الجزء العلوي الأوسط منه (50% من اليسار إلى اليمين من الإطار، و0% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0, 0} لتعيين الإطار في منتصف الحاوية (50% من اليسار إلى اليمين من الإطار الأب، و0% من أعلى الإطار الأب إلى أسفله).
  4. اضبط Size إلى {1, 0},{0.67, 0} حتى تأخذ مكونات واجهة المستخدم للعرض أكثر من نصف الحاوية من الأعلى إلى الأسفل (100% أفقيًا و67% عموديًا من الإطار الأب).
  5. اضبط Name إلى عرض الهدف.
أنشئ عناصر العنوان.
1. أضف ImageLabel إلى عرض الهدف.
2. حدد ImageLabel، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 1 لتعيين نقطة الأصل للإطار في الجزء السفلي الأوسط منه (50% من اليسار إلى اليمين من الإطار، و100% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط LayoutOrder إلى -1.
  4. اضبط Position إلى {0.5, 0},{0.34, 0} لتضع الإطار بالقرب من الجزء العلوي الأوسط من الإطار (50% من اليسار إلى اليمين من الإطار الأب، و34% من أعلى الإطار الأب إلى أسفله).
  5. اضبط Size إلى {0.46, 0},{0.34, 0} لتوسيع مساحة التحذير إلى ما يقرب من نصف الإطار (46% أفقيًا و34% عموديًا من الإطار الأب).
  6. اضبط Name إلى Header.
  7. اضبط Image إلى rbxassetid://14304828123 لعرض شبه منحرف.
  8. اضبط ImageTransparency إلى 0.15 لجعل الرأس شبه شفاف.
3. (اختياري) أضف UIAspectRatioConstraint إلى ImageLabel لضمان أن تظل نسبة العرض إلى الارتفاع للإطار كما هي بغض النظر عن حجم شاشة اللاعب. يضبط النموذج خاصية UIAspectRatioConstraint.AspectRatio إلى 13.781.
4. أضف TextLabel إلى Header لعرض عنوان.
5. حدد TextLabel الجديدة، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للإطار الجديدة في منتصفها (50% من اليسار إلى اليمين من الإطار، و50% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0.5, 0} لنقل الإطار إلى منتصف الإطار الأب (50% من اليسار إلى اليمين من الإطار الأب، و50% من أعلى الإطار الأب إلى أسفله).
  4. اضبط Size إلى {0.62, 0},{0.55, 0} لتوسيع مساحة النص إلى أكثر من نصف الإطار الأب (62% أفقيًا و55% عموديًا من الإطار الأب).
  5. اضبط Name إلى HeaderTextLabel.
  6. اضبط FontFace إلى Montserrat لتتناسب مع الجمالية المستقبلية.
  7. اضبط Weight إلى Medium لتيمان الوزن.
  8. اضبط Text إلى الهدف.
  9. قم بتفعيل TextScaled.
أنشئ عناصر التحذير.
1. أضف ImageLabel إلى عرض الهدف.
2. حدد ImageLabel، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 1 لتعيين نقطة الأصل للإطار في الجزء السفلي الأوسط منه (50% من اليسار إلى اليمين من الإطار، و100% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{1, 0} لنقل الإطار إلى الجزء السفلي الأوسط من الإطار الأب (50% من اليسار إلى اليمين من الإطار الأب، و100% من أعلى الإطار الأب إلى أسفله).
  4. اضبط Size إلى {0.89, 0},{0.66, 0} لتوسيع مساحة النص إلى ما يقرب من العرض الكامل من الإطار الأب (89% أفقيًا و66% عموديًا من الإطار الأب).
  5. اضبط Name إلى Body.
  6. اضبط Image إلى rbxassetid://14304827265 لعرض شبه منحرف مقلوب.
  7. اضبط ImageColor3 إلى 0, 0, 0 لتلوين الصورة باللون الأسود.
  8. اضبط ImageTransparency إلى 0.3 لجعل الرأس شبه شفاف.
3. (اختياري) أضف UIAspectRatioConstraint إلى ImageLabel لضمان أن تظل نسبة العرض إلى الارتفاع حسب التصميم كما هي بغض النظر عن حجم شاشة اللاعب. يضبط النموذج خاصية UIAspectRatioConstraint.AspectRatio إلى 13.781.
4. أضف TextLabel إلى Body لعرض مطلب.
5. حدد TextLabel الجديدة، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للإطار الجديدة في منتصفها (50% من اليسار إلى اليمين من الإطار، و50% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0.5, 0} لنقل الإطار إلى منتصف الإطار الأب (50% من اليسار إلى اليمين من الإطار الأب، و50% من أعلى الإطار الأب إلى أسفله).
  4. اضبط Size إلى {0.85, 0},{0.39, 0} لتوسيع مساحة النص إلى أكثر من نصف الإطار الأب (85% أفقيًا و39% عموديًا من الإطار الأب).
  5. اضبط Name إلى BodyTextLabel.
  6. اضبط FontFace إلى Montserrat لتناسب الجمالية المستقبلية.
  7. اضبط Weight إلى Medium لزيادة وزن الخط.
  8. اضبط TextColor3 إلى 255, 255, 255 لجعل النص أبيض ضد الخلفية الداكنة.
  9. اضبط Text إلى قم بوضع علامة على اللاعبين المعارضين لكسب النقاط! الفريق الأول الذي يصل إلى %d نقطة يفوز..
  10. قم بتفعيل TextScaled.
أنشئ حاوية لعدادات نقاط الفريق.
1. أضف إطارًا إلى الهدف.
2. حدد الإطار الجديد، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 1 لتعيين نقطة الأصل للإطار في الجزء السفلي الأوسط منه (50% من اليسار إلى اليمين من الإطار، و100% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{1, 0} لتعيين الإطار في الجزء السفلي الأوسط من الحاوية (50% من اليسار إلى اليمين من الإطار الأب، و100% من أعلى الإطار الأب إلى أسفله).
  4. اضبط Size إلى {0.44, 0},{0.27, 0} حتى تأخذ مكونات واجهة المستخدم للعرض أقل من نصف الحاوية من اليسار إلى اليمين (44% أفقيًا و27% عموديًا من الإطار الأب).
  5. اضبط Name إلى TeamPointCounter.
أنشئ مساحة بين عدادات الفرق.
1. أضف UIListLayout إلى الإطار من الخطوة 5.
2. حدد كائن UIListLayout، ثم في نافذة الخصائص،
  1. اضبط Padding إلى 0.025, 0 لتوفير مساحة بين العدادات المستقبلية.
  2. اضبط FillDirection إلى Horizontal حتى يعرض كل عداد نقاط بجانب بعضه البعض.
  3. اضبط HorizontalAlignment إلى Center حتى يتماشى كل عداد نقاط في المنتصف مع الآخر.
أنشئ عناصر عداد الفريق الأخضر.
1. أضف ImageLabel إلى TeamPointCounter.
2. حدد ImageLabel، ثم في نافذة الخصائص،
  1. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  2. اضبط Position إلى {0.5, 0},{1, 0} لنقل الإطار إلى الجزء السفلي الأوسط من الإطار الأب (50% من اليسار إلى اليمين من الإطار الأب، و100% من أعلى الإطار الأب إلى أسفله).
  3. اضبط Size إلى {0.5, 0},{1, 0} لتوسيع الإطار إلى نصف عرض الإطار الأب (50% أفقيًا و100% عموديًا من الإطار الأب).
  4. اضبط Name إلى TeamACounter.
  5. اضبط Image إلى rbxassetid://14304826831 لعرض تلاشي اتجاهي.
  6. اضبط ImageColor3 إلى 88, 218, 171 لتلوين الصورة باللون الأخضر النعناعي.
3. قم بتكوين سمة مخصصة لتتبع أن هذا الإطار ينتمي إلى الفريق الأخضر.
  1. في نافذة الخصائص، انتقل إلى قسم السمات، ثم انقر على أيقونة زائد. ستظهر مربع حوار.
  2. في حقل Name، أدخل teamColor.
  3. في قائمة نوع Type المنسدلة، اختر BrickColor.
  4. انقر على زر حفظ.
  5. اضبط السمة الجديدة teamColor إلى Mint.
4. أضف TextLabel إلى TeamACounter لعرض مطلب.
5. حدد TextLabel الجديدة، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 1, 0.5 لتعيين نقطة الأصل للإطار الجديدة في منتصف الجانب الأيمن (100% من اليسار إلى اليمين من الإطار، و50% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.95, 0},{0.5, 0} لنقل الإطار إلى اليمين من الإطار الأب (95% من اليسار إلى اليمين من الإطار الأب، و50% من أعلى الإطار الأب إلى أسفله).
  4. اضبط Size إلى {0.85, 0},{0.39, 0} لتوسيع مساحة النص إلى أكثر من نصف الإطار الأب (85% أفقيًا و39% عموديًا من الإطار الأب).
  5. اضبط FontFace إلى Montserrat لتناسب الجمالية المستقبلية.
  6. اضبط Weight إلى Bold لزيادة وزن الخط.
  7. اضبط TextColor3 إلى 255, 255, 255 لجعل النص أبيض ضد الخلفية الداكنة.
  8. اضبط Text إلى -.
  9. قم بتفعيل TextScaled.
  10. اضبط TextXAlignment إلى Right.
6. أضف كائن UIStroke إلى TextLabel، ثم في نافذة الخصائص، اضبط Color إلى 8, 78, 52 ليحيط الخط مع حافة داكنة خضراء.
أنشئ عناصر عداد الفريق الوردي.
1. قم بتكرار TeamAICounter وأطفاله.
2. حدد TeamACounter المكررة، ثم في نافذة الخصائص،
  1. اضبط Name إلى TeamBCounter.
  2. اضبط Image إلى rbxassetid://14305849451 لعرض تلاشي اتجاهي في الاتجاه المعاكس.
  3. اضبط ImageColor3 إلى 255, 170, 255 لتلوين الصورة باللون الوردي.
  4. اضبط السمة teamColor إلى Carnation Pink.
3. حدد الطفل المكرر TextLabel من TeamBCounter، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0, 0.5 لتعيين نقطة الأصل للإطار الجديدة في منتصف الجانب الأيسر (0% من اليسار إلى اليمين من الإطار، و50% من أعلى الإطار إلى أسفله).
  2. اضبط Position إلى {0.05, 0},{0.5, 0} لنقل الإطار إلى اليسار من الإطار الأب (5% من اليسار إلى اليمين من الإطار الأب، و50% من أعلى الإطار الأب إلى أسفله).
  3. اضبط TextXAlignment إلى Left.
4. حدد الطفل المكرر UIStroke من TeamBCounter، ثم في نافذة الخصائص، اضبط Color إلى 158, 18, 94 ليحيط الخط مع حافة داكنة وردية.
ارجع إلى النصوص الموجودة في ReplicatedStorage داخل نموذج Laser Tag التي تقوم بتحديث التحذير الناتج وتتبع نقاط الفريق.

النص البرمجي التالي يتطلب مجموعة من النصوص برمجية الموديول التي تعمل معًا لإعداد واجهة العرض الرئيسية (HUD)، بما في ذلك setObjective و startSyncingTeamPoints. بعد انضمام اللاعب إلى جولة واختيار بازوكته، يضمن هذا النص البرمجي عرض جميع عناصر واجهة HUD بشكل مناسب لحالة اللاعب وجهازه وحالة فريقه.


local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

الآن، بعد أن يختار اللاعب بازوكته، تظهر واجهة الهدف في الجزء العلوي من شاشتهم، وتقوم بتتبع نقاط كل فريق.

واجهة البازوكا

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

الهدف

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

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

لإعادة إنشاء الهدف بدقة ضمن نموذج لعبة الليزر:

أضف ImageLabel إلى كائن HUDGui ScreenGui.
1. في نافذة المستكشف، انتقل إلى خدمة StarterGui.
2. مرر على كائن HUDGui الخاص به، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
3. من القائمة السياقية، أضف ImageLabel.
حدد ImageLabel الجديدة، ثم في نافذة الخصائص،
1. اضبط Image إلى rbxassetid://14400935446.
2. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للإطار في منتصفه (50% من اليسار إلى اليمين من الإطار، و50% من أعلى الإطار إلى أسفله).
3. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
4. اضبط Name إلى الهدف.
5. اضبط Position إلى {0.5,0},{0.5,0} لتعيين الإطار في منتصف الشاشة.
6. اضبط ScaleType إلى Fit بحيث يناسب الصورة داخل حاويتها ولا تمتد على أحجام الشاشة المختلفة.
(اختياري) أضف UIAspectRatioConstraint إلى الهدف لضمان أن تظل نسبة العرض إلى الارتفاع للإطار كما هي بغض النظر عن حجم الشاشة الخاصة باللاعب. يضبط النموذج خاصية UIAspectRatioConstraint.AspectRatio إلى 0.895.

علامة الضرب

علامة الضرب هي عنصر واجهة مستخدم يُعرض فقط عندما تصطدم قذيفة بجين لاعب آخر في الفريق الغير معني. مثل الهدف، تُعتبر هذه العنصر مطلبًا حيويًا في ألعاب إطلاق النار من منظور الشخص الأول لأنه يوفر ردود فعل بصرية تدل على متى يكون اللاعبون ناجحين في الـتوجيه وفقًا خصومهم.

لإعادة إنشاء علامة الضرب بدقة ضمن نموذج لعبة الليزر:

أضف ImageLabel إلى كائن Crosshair ImageLabel.
1. في نافذة المستكشف، انتقل إلى خدمة StarterGui.
2. مرر على كائن Crosshair الخاص به، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
3. من القائمة السياقية، أضف ImageLabel.
حدد ImageLabel الجديدة، ثم في نافذة الخصائص،
1. اضبط Image إلى rbxassetid://14401148736 لعرض أيقونة علامة الضرب المستطيلة.
2. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للإطار في منتصفه.
3. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
4. اضبط Position إلى {0.5,0},{0.5,0} لتعيين الإطار في منتصف الشاشة.
5. اضبط Name إلى Hitmarker.
6. اضبط Size إلى {0.6, 0},{0.06, 0} لتقليل حجم المستطيلات حول منتصف الهدف.
7. اضبط ImageTransparency إلى 1 لجعل علامة الضرب شفافة تمامًا. النصوص في الخطوة التالية تعيد الشفافية إلى 0 كلما اتصلت قذيفة لاعب بلاعب آخر في الفريق المعاكس.
ارجع إلى النصوص الموجودة في ReplicatedStorage داخل نموذج لعبة الليزر التي تُعرض علامة الضرب برمجيًا عندما تعمل القذيفة مع لاعب في الفريق الآخر.

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


local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

الآن، كلما قام لاعب بإطلاق بازوكته وأصابت القذيفة لاعبًا آخر، تظهر علامة الضرب للحظة.

محدد البازوكا

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

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

تسمح لك هذه الإعدادات بإنشاء تحقيقات Configuration إضافية لأكثر من نوع من البازوكا والتي يتم عرضها بشكل صحيح تلقائيًا ضمن محدد البازوكا دون الحاجة إلى إنشاء أزرار فردية داخل StarterGui.PickABlasterGui.

لإعادة إنشاء محدد البازوكا بدقة ضمن نموذج لعبة الليزر:

أنشئ حاوية للمكون بالكامل.
1. أضف إطارًا إلى كائن PickABlaster ScreenGui.
  1. في نافذة المستكشف، انتقل إلى خدمة StarterGui.
  2. مرر على كائن PickABlaster الخاص به، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
  3. من القائمة السياقية، أضف إطارًا.
2. حدد الإطار الجديد، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 1 لتعيين نقطة الأصل للإطار في الجزء السفلي الأوسط منه (50% من اليسار إلى اليمين من الإطار، و100% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0.9, 0} لتعيين الإطار بالقرب من الجزء السفلي الأوسط من الشاشة (50% من اليسار إلى اليمين من الشاشة، و92.4% من أعلى الشاشة إلى أسفلها).
  4. اضبط Size إلى {0.8, 0},{0.25, 0} حتى تأخذ مكونات واجهة محدد البازوكا حصة كبيرة من الشاشة لجذب انتباه اللاعبين (80% أفقيًا و25% عموديًا).
  5. اضبط Name إلى مكون.
3. (اختياري) أضف UIAspectRatioConstraint إلى المكون لضمان أن تبقى نسبة العرض إلى الارتفاع للإطار و عناصر واجهتها كما هي بغض النظر عن حجم شاشة اللاعب. يضبط النموذج خاصية UIAspectRatioConstraint.AspectRatio إلى 5.
أنشئ حاوية لتخزين مجموعات عناصر واجهة المستخدم.
1. أضف إطارًا إلى المكون.
2. حدد الإطار الجديد، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للإطار في وسطه (50% من اليسار إلى اليمين من الإطار، و50% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0.375, 0} لتعيين الإطار قرب منتصف الجزء العلوي من الحاوية (50% من اليسار إلى اليمين من الإطار الأب، و37.5% من أعلى الإطار الأب إلى أسفله).
  4. اضبط Size إلى {1, 0},{0.75, 0} حتى تأخذ مكونات واجهة الاختيار 3/4 من الحاوية (100% أفقيًا و75% عموديًا من الإطار الأب).
  5. اضبط Name إلى SelectionFrame.
أنشئ تحذير لمحدد البازوكا.
1. أضف ImageLabel إلى SelectionFrame.
2. حدد الإطار الجديد، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 1 لتعيين نقطة الأصل للإطار في الجزء السفلي الأوسط منه (50% من اليسار إلى اليمين من الإطار، و100% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط LayoutOrder إلى -1.
  4. اضبط Position إلى {0.5, 0},{0.22, 0} لتعيين الإطار بالقرب من الجزء العلوي من الإطار (50% من اليسار إلى اليمين من الإطار الأب، و22% من أعلى الإطار الأب إلى أسفله).
  5. اضبط Size إلى {0.45, 0},{0.22, 0} لتوسيع منطقة التحذير إلى ما يقرب من نصف الإطار (45% أفقيًا و22% عموديًا من الإطار الأب).
  6. اضبط Name إلى Header.
  7. اضبط Image إلى rbxassetid://14304828123 لعرض شبه منحرف.
  8. اضبط ImageTransparency إلى 0.15 لجعل التحذير شبه شفاف.
3. (اختياري) أضف UIAspectRatioConstraint إلى الإطار لضمان أن تظل نسبة العرض إلى الارتفاع للمستند كما هو بغض النظر عن حجم شاشة اللاعب. يضبط النموذج خاصية UIAspectRatioConstraint.AspectRatio إلى 13.78.
4. أضف TextLabel إلى Header لعرض التحذير.
5. حدد TextLabel الجديدة، ثم في نافذة الخصائص،
  1. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للإطار الجديدة في وسطه (50% من اليسار إلى اليمين من الإطار، و50% من أعلى الإطار إلى أسفله).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0.5, 0} لنقل الإطار إلى منتصف الإطار الأب (50% من اليسار إلى اليمين من الإطار الأب، و50% من أعلى الإطار الأب إلى أسفله).
  4. اضبط Size إلى {0.6, 0},{0.55, 0} لتوسيع مساحة النص إلى أكثر من نصف الإطار الأب (60% أفقيًا و55% عموديًا من الإطار الأب).
  5. اضبط Name إلى HeaderTextLabel.
  6. اضبط FontFace إلى Montserrat ليتماشى مع الجمالية المستقبلية.
  7. اضبط Weight إلى Medium لزيادة وزن الخط.
  8. اضبط Text إلى اختر بازوكة.
  9. قم بتفعيل TextScaled.
أنشئ حاوية لزر احتواء البازوكة وعلامات الاختيار.
1. أضف ImageLabel إلى SelectionFrame.
2. حدد ImageLabel الجديدة، ثم في نافذة الخصائص،1. إزالة القيمة الافتراضية الصورة.
  1. تعيين AnchorPoint إلى 0.5, 1 لتعيين نقطة الأصل للتسمية في منتصف قاعها (50% من اليسار إلى اليمين للتسمية، و100% من الأعلى إلى الأسفل للتسمية).
  2. تعيين BackgroundColor إلى 0, 0, 0 لجعل التسمية باللون الأسود.
  3. تعيين BackgroundTransparency إلى 0.3 لتقليل الشفافية للتسمية بنسبة 30%، ومطابقة جميع عناصر واجهة المستخدم السوداء في التجربة.
  4. تعيين Position إلى {0.5, 0},{1, 0} لوضع التسمية في منتصف قاع الإطار (50% من اليسار إلى اليمين للإطار الأب، و100% من الأعلى إلى الأسفل للإطار الأب).
  5. تعيين Size إلى {1, 0},{0.77, 0} لتوسيع مساحة التسمية إلى المساحة تحت التسمية (100% أفقيًا و77% عموديًا من الإطار الأب).
3. قم بتدوير زوايا الحاوية.
  1. إدراج كائن UICorner في التسمية.
  2. تحديد كائن الزاوية الجديد، ثم في نافذة الخصائص، تعيين CornerRadius إلى 0.075, 0 لتدوير الزوايا.
إنشاء الحاوية لزButtons مبدل.
1. إدراج كائن Frame في التسمية من الخطوة 4.
2. تحديد الإطار الجديد، ثم في نافذة الخصائص،
  1. تعيين AnchorPoint إلى 0.5, 0.5 لتحديد نقطة الأصل للإطار الجديد في منتصفه (50% من اليسار إلى اليمين للإطار، و50% من الأعلى إلى الأسفل للإطار).
  2. تعيين BackgroundTransparency إلى 1 لجعل خلفية الإطار شفافة تمامًا.
  3. تعيين Position إلى {0.5, 0},{0.5, 0} لوضع الإطار في منتصف تسميته (50% من اليسار إلى اليمين للإطار الأب، و50% من الأعلى إلى الأسفل للإطار الأب).
  4. تعيين Size إلى {0.85, 0},{0.77, 0} لتوسيع منطقة الإطار لمعظم التسمية (85% أفقيًا و77% عموديًا من التسمية الأب).
  5. تعيين Name إلى Container.
إنشاء حشو لزButtons مبدل مستقبلية.
1. إدراج كائن UIListLayout في الإطار من الخطوة 5.
2. تحديد كائن التنسيق الجديد، ثم في نافذة الخصائص،
  1. تعيين Padding إلى 0.035, 0 لتوفير مساحة بين جميع الأزرار المستقبلية.
  2. تعيين FillDirection إلى Horizontal بحيث تظهر كل زر بجوار الآخر.
  3. تعيين كل من HorizontalAlignment وVerticalAlignment إلى Center بحيث يتماشى كل زر في منتصف الآخرين.
إنشاء زر التنقل الأيسر.
1. إدراج كائن ImageButton في ImageLabel من الخطوة 4.
2. تحديد الزر الجديد، ثم في نافذة الخصائص،
  1. إزالة القيمة الافتراضية الصورة.
  2. تعيين AnchorPoint إلى 0, 0.5 لتعيين نقطة الأصل للزر الجديد في منتصف اليسار (0% من اليسار إلى اليمين للزر، و50% من الأعلى إلى الأسفل للزر).
  3. تعيين BackgroundTransparency إلى 0.15 لتوفير ردود فعل مرئية عند التمرير فوقها تشير إلى أن الزر قابل للاختيار.
  4. تعيين Position إلى {0.02, 0},{0.5, 0} لتوفير حشو إلى يسار الزر من الحاوية الأب (2% من اليسار إلى اليمين للتسمية الأب، و50% من الأعلى إلى الأسفل للتسمية الأب).
  5. تعيين Size إلى {0.04, 0},{0.33, 0} لجعل زر الاختيار أصغر بكثير من أزرار المبدل (4% أفقيًا و33% عموديًا من الإطار الأب).
  6. تعيين Name إلى NavigationButtonLeft.
3. قم بتدوير زوايا الزر.
  1. إدراج كائن UICorner في الزر.
  2. تحديد كائن الزاوية الجديد، ثم في نافذة الخصائص، تعيين CornerRadius إلى 0.1, 0 لتدوير الزوايا.
4. إدراج كائن ImageLabel في الزر.
5. تحديد التسمية الجديدة، ثم في نافذة الخصائص،
  1. تعيين AnchorPoint إلى 0.5, 0.5 لتحديد نقطة الأصل للتسمية الجديدة في منتصفها (50% من اليسار إلى اليمين للتسمية، و50% من الأعلى إلى الأسفل للتسمية).
  2. تعيين Position إلى {0.45, 0},{0.5, 0} لوضع التسمية بالقرب من منتصف الزر الأب (45% من اليسار إلى اليمين للزر الأب، و50% من الأعلى إلى الأسفل للزر الأب). هذه القيمة ليست في المنتصف لأن السهم لا يبدو بصريًا وكأنه في منتصف الزر عند {0.5, 0},{0.5, 0}.
  3. تعيين Size إلى {0.8, 0},{0.8, 0} لتوسيع مساحة التسمية إلى الفضاء تحت الموجه (80% أفقيًا و80% عموديًا من الإطار الأب).
  4. تعيين BackgroundTransparency إلى 1 لجعل خلفية الصورة شفافة تمامًا.
  5. تعيين Image إلى rbxassetid://14309187238.
  6. تعيين ScaleType إلى Fit.
إنشاء زر التنقل الأيمن.
1. نسخ NavigationButtonLeft.
2. تحديد الزر المكرر، ثم في نافذة الخصائص،
  1. تعيين AnchorPoint إلى 1, 0.5 لتعيين نقطة الأصل للزر الجديد في منتصف اليمين (100% من اليسار إلى اليمين للزر، و50% من الأعلى إلى الأسفل للزر).
  2. تعيين Position إلى {0.98, 0},{0.5, 0} لتوفير حشو إلى يمين الزر من الحاوية الأب (98% من اليسار إلى اليمين للتسمية الأب، و50% من الأعلى إلى الأسفل للتسمية الأب).
  3. تعيين Name إلى NavigationButtonRight.
3. تحديد كائن ImageLabel التابع له.
  1. تعيين Rotation إلى 180 لقلب الصورة.
  2. تعيين Position إلى {0.55, 0},{0.5, 0} لتحديد التسمية بالقرب من منتصف الزر الأب (55% من اليسار إلى اليمين للزر الأب، و50% من الأعلى إلى الأسفل للزر الأب). هذه القيمة ليست في المنتصف لأن السهم لا يبدو بصريًا وكأنه في منتصف الزر عند {0.5, 0},{0.5, 0}.
إنشاء زر SELECT.
1. إدراج كائن ImageButton في Component. لاحظ كيف أن هذه العملية تبقي زر التحديد منفصلًا عن SelectionFrame بحيث يمكنك إضافة حشو بين الجزء الرئيسي من المكون وزر التحديد.
2. تحديد الزر الجديد، ثم في نافذة الخصائص،
  1. إزالة القيمة الافتراضية الصورة.
  2. تعيين AnchorPoint إلى 0.5, 1 لتعيين نقطة الأصل للزر الجديد في منتصف قاعه (50% من اليسار إلى اليمين للزر، و100% من الأعلى إلى الأسفل للزر).
  3. تعيين BackgroundTransparency إلى 0.15 لتوفير ردود فعل مرئية عند التمرير فوقها تشير إلى أن الزر قابل للاختيار.
  4. تعيين Position إلى {0.5, 0},{0.99, 0} لوضع الزر بالقرب من منتصف القاع لحاويته (50% من اليسار إلى اليمين للإطار الأب، و99% من الأعلى إلى الأسفل للإطار الأب).
  5. تعيين Size إلى {0.17, 0},{0.18, 0} لطول الزر أسفل أزرار المبدل (17% أفقيًا و18% عموديًا من الإطار الأب).
  6. تعيين Name إلى SelectButton.
3. قم بتدوير زوايا الزر.
  1. إدراج كائن UICorner في الزر.
  2. تحديد كائن الزاوية الجديد، ثم في نافذة الخصائص، تعيين CornerRadius إلى 0.2, 0 لتدوير الزوايا.
4. إدراج كائن TextLabel في الزر حتى تتمكن من عرض دعوة للعمل.
5. تحديد التسمية الجديدة، ثم في نافذة الخصائص،
  1. تعيين AnchorPoint إلى 0.5, 0.5 لتحديد نقطة الأصل للتسمية الجديدة في منتصفها (50% من اليسار إلى اليمين للتسمية، و50% من الأعلى إلى الأسفل للتسمية).
  2. تعيين BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
  3. تعيين Position إلى {0.5, 0},{0.5, 0} لنقل التسمية إلى منتصف الزر (50% من اليسار إلى اليمين للزر الأب، و50% من الأعلى إلى الأسفل للزر الأب).
  4. تعيين Size إلى {0.9, 0},{0.55, 0} لتوسيع مساحة النص لتأخذ تقريبًا كل عرض التسمية الأب (90% أفقيًا و55% عموديًا من التسمية الأب).
  5. تعيين Name إلى SelectTextLabel.
  6. تعيين FontFace إلى Montserrat لتناسب الجمالية المستقبلية.
  7. تعيين Weight إلى Medium لتكثيف الخط.
  8. تعيين Text إلى SELECT.
  9. تمكين TextScaled.
إنشاء نموذج زر مبدل.
1. في خدمة ReplicatedStorage، إنشاء هيكل مجلد لتنظيم كائنات واجهة المستخدم الخاصة بك. يستخدم النموذج مجلد Instances مع مجلد فرعي Guis.
2. إدراج كائن ImageButton في مجلد Guis.
3. تحديد الزر الجديد، ثم في نافذة الخصائص،
  1. إزالة القيمة الافتراضية الصورة.
  2. تعيين AnchorPoint إلى 0.5, 0.5 لتحديد نقطة الأصل للزر الجديد في منتصفه (50% من اليسار إلى اليمين للزر، و50% من الأعلى إلى الأسفل للزر).
  3. تعيين BackgroundTransparency إلى 0.65 لتوفير ردود فعل مرئية على أن الزر ليس في التركيز. توفر البرامج النصية في الخطوة 12 ردود فعل مرئية برمجية عندما يكون الزر في التركيز.
  4. تعيين LayoutOrder إلى 2.
  5. تعيين Name إلى BlasterButtonPrefab.
  6. تعيين Size إلى {0.8, 0},{0.8, 0}.
  7. تعيين ImageTransparency إلى 1 لجعل الصورة شفافة تمامًا.
4. إدراج كائن UIAspectRatioConstraint في BlasterButtonPrefab لضمان بقاء نسبة عرض إلى ارتفاع الزر كما هي ضمن المكون بغض النظر عن حجم شاشة اللاعب.
5. قم بتدوير زوايا الزر.
  1. إدراج كائن UICorner في BlasterButtonPrefab.
  2. تحديد UICorner، ثم في نافذة الخصائص، تعيين CornerRadius إلى 0.05, 0 لتدوير الزوايا.
6. إدراج كائن ImageLabel في BlasterButtonPrefab.
7. تحديد التسمية الجديدة، ثم في نافذة الخصائص،
  1. إزالة معرف الصورة المؤقت ضمن خاصية الصورة. تقوم البرامج النصية في الخطوة 7 بإدراج صورة اللاعب برمجيًا في التسمية.
  2. تعيين AnchorPoint إلى 0.5, 0.5 لتحديد نقطة الأصل للتسمية الجديدة في منتصفها (50% من اليسار إلى اليمين للتسمية، و50% من الأعلى إلى الأسفل للتسمية).
  3. تعيين BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
  4. تعيين Position إلى {0.52, 0},{0.497, 0} لتحديد التسمية بالقرب من منتصف الزر الأب (52% من اليسار إلى اليمين للزر الأب، و49.7% من الأعلى إلى الأسفل للزر الأب). هذه القيمة ليست في المنتصف لأن المبدل لا يبدو بصريًا وكأنه في منتصف الزر عند {0.5, 0},{0.5, 0}.
  5. تعيين Size إلى {1.20, 0},{0.9, 0} لتوسيع منطقة التسمية خارج الزر (120% أفقيًا و90% عموديًا من الزر الأب).
  6. تعيين ScaleType إلى Fit.
يشار إلى البرامج النصية التالية من ReplicatedStorage ضمن ملف المكان النموذجي Laser Tag الذي يعرض برمجيًا الأزرار لكل مبدل، ويقيس الأزرار عندما يختار اللاعب زرًا ليس في التركيز، ويربط اختيار مبدل اللاعب إلى صورة رمزين.

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


local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local GuiAttribute = require(ReplicatedStorage.GuiAttribute)
local setupBlasterButtons = require(script.setupBlasterButtons)
local connectResetSelectionOnEnabled = require(script.connectResetSelectionOnEnabled)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("PickABlasterGui")

setupBlasterButtons(gui)
connectResetSelectionOnEnabled(gui)
gui:SetAttribute(GuiAttribute.selectedIndex, 1)

الآن، كلما دخل لاعب التجربة أو استعاد وعيه مرة أخرى في جولة بعد أن تصل صحته إلى الصفر، تظهر واجهة مستخدم محدد المبدل، ويمكنهم اتخاذ اختيار، وتعمل كل زر كما هو متوقع.

زر الانفجار

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

لإعادة إنشاء زر الانفجار بالضبط ضمن تجربة Laser Tag:

إدراج كائن ImageButton في HUDGui ScreenGui object.
1. في نافذة Explorer، انتقل إلى خدمة StarterGui.
2. مرر فوق كائنها الفرعي HUDGui، ثم انقر على أيقونة ⊕. تظهر قائمة سياقية.
3. من القائمة السياقية، قم بإدراج ImageButton.
في عارض المشهد، قم بنقل الزر إلى المكان الذي تستقر فيه إصبع اللاعب بشكل طبيعي حتى تتمكن من الحصول على إحساس مرئي بما سيبدو عليه الزر على جهاز اللاعب، ثم في نافذة الخصائص،
1. تعيين Image إلى rbxassetid://18308375035 لعرض أيقونة زر الانفجار.
2. تعيين PressedImage إلى rbxassetid://18308372558 لعرض إصدار مقلوب من أيقونة زر الانفجار عند الضغط على الزر.
3. تعيين BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
4. تعيين Name إلى BlastButton.
5. تعيين ScaleType إلى Fit حتى تتناسب الصورة داخل حاويتها ولا تتمدد على أحجام الشاشات المختلفة.
6. تعيين ImageTransparency إلى 0.3 لتقليل شغف التسمية بحيث تتناسب مع جميع عناصر واجهة المستخدم السوداء في التجربة.
إدراج كائن UIAspectRatioConstraint في BlastButton لضمان بقاء نسبة العرض إلى الارتفاع للزر كما هي بغض النظر عن حجم شاشة اللاعب.
يشار إلى البرامج النصية التالية من ReplicatedStorage ضمن ملف المكان النموذجي Laser Tag الذي يعرض برمجيًا زر الانفجار عندما يستخدم اللاعب إدخال اللمس على جهاز يقبل عناصر التحكم اللمسية.

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


local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

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

واجهة المستخدم للاعب

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

مؤشر اللاعب

مؤشر اللاعب هو مكون واجهة مستخدم يشير إليه اللاعبون لفهم فريقهم بسرعة عند ظهورهم في منطقة عودة فريقهم. يوفر نموذج تجربة الليزر تاج نسختين من مؤشر اللاعب اعتمادًا على ما إذا كان اللاعب في فريق أخضر أو وردي.

تتبع التوجيهات من Select a Color Theme، تجمع كلتا النسختين من مؤشر اللاعب بين لون الفريق مع أيقونة فريدة وبسيطة بأدنى حد من التفاصيل بحيث تظل قابلة للقراءة على الشاشات الصغيرة. يعد توفير شكلين من ردود الفعل المرئية أمرًا مهمًا لأنه يساعد على الحفاظ على تصميم يمكن الوصول إليه للاعبين الذين يعانون من عمى الألوان.

لإعادة إنشاء مؤشر اللاعب بالضبط في تجربة Laser Tag:

إدراج Frame في HUDGui ScreenGui object.
1. في نافذة Explorer، انتقل إلى خدمة StarterGui.
2. مرر فوق كائنها الفرعي HUDGui، ثم انقر على أيقونة ⊕. تظهر قائمة سياقية.
3. من القائمة السياقية، قم بإدراج Frame.
تحديد الإطار الجديد، ثم في نافذة الخصائص،
1. تعيين AnchorPoint إلى 0، 1 لتحديد نقطة الأصل للإطار في منتصف أسفلها (0% من اليسار إلى اليمين للإطار، و100% من الأعلى إلى الأسفل للإطار).
2. تعيين BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
3. تعيين Name إلى PlayerDisplay.
4. تعيين Position إلى {0.02، 0},{0.97، 0} لوضع الإطار بالقرب من أسفل يسار الشاشة.
5. تعيين Size إلى {0.23، 0},{0.08، 0} لقص الإطار على العرض والارتفاع.
6. تمكين ClipsDescendants لتقليم كائنات واجهة المستخدم الفرعية التي تتجاوز الإطار.
إنشاء الشكل المتعدد الأضلاع.
1. إدراج كائن ImageLabel ضمن PlayerDisplay.
2. تحديد التسمية الجديدة، ثم في نافذة الخصائص،
  1. تعيين Image إلى rbxassetid://14304828123 لعرض أيقونة شبه المنحرف.
  2. تعيين AnchorPoint إلى 1، 1 لتحديد نقطة الأصل للتسمية في أسفل يمينها (100% من اليسار إلى اليمين للتسمية، و100% من الأعلى إلى الأسفل للتسمية).
  3. تعيين BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
  4. تعيين Name إلى Block.
  5. تعيين Position إلى {1،0},{1،0} لوضع التسمية في جانب الإطار الأيمن.
  6. تعيين Size إلى {1.858، 0},{0.581، 0} لتوسيع التسمية خارج الإطار، وتقليصها إلى ما يزيد قليلاً عن نصف طول الإطار.
  7. تعيين ImageTransparency إلى 0.15 لجعل التسمية شبه شفافة.
  8. تعيين ScaleType إلى Fit حتى تتناسب الصورة داخل حاويتها ولا تتمدد على أحجام الشاشات المختلفة.
  1. إدراج كائن UIAspectRatioConstraint في Block لضمان بقاء نسبة العرض إلى الارتفاع التسمية وعناصر واجهة المستخدم الفرعية كما هي بغض النظر عن حجم شاشة اللاعب.
  2. تحديد القيود الجديدة، ثم في نافذة الخصائص، تعيين AspectRatio إلى 13.78.
إنشاء الصندوق لصورة اللاعب.
1. إدراج كائن ImageLabel ضمن PlayerDisplay.
2. تحديد التسمية الجديدة، ثم في نافذة الخصائص،
  1. إزالة معرف الصورة المؤقت في خاصية الصورة. تقوم البرامج النصية في الخطوة 7 بإدراج صورة اللاعب برمجيًا في التسمية.
  2. تعيين AnchorPoint إلى 0، 1 لتحديد نقطة الأصل للتسمية في أسفل يسارها (0% من اليسار إلى اليمين للتسمية، و100% من الأعلى إلى الأسفل للتسمية).
  3. تعيين BackgroundColor3 إلى 0، 0، 0 لتعيين لون خلفية التسمية إلى الأسود.
  4. تعيين BackgroundTransparency إلى 0.3 لتقليل شفافية التسمية بنسبة 30%، ومطابقة جميع عناصر واجهة المستخدم السوداء في التجربة.
  5. تعيين Name إلى PlayerPortrait.
  6. تعيين Position إلى {0.11، 0},{1، 0} لوضع التسمية إلى الجانب الأيسر من الشكل المتعدد الأضلاع.
  7. تعيين Size إلى {0.23، 0},{1، 0} لتقليص التسمية.
  8. تعيين ImageTransparency إلى 0.15 لجعل التسمية شبه شفافة.
  9. تعيين ScaleType إلى Fit حتى تتناسب الصورة داخل حاويتها ولا تتمدد على أحجام الشاشات المختلفة.
  1. إدراج كائن UIAspectRatioConstraint في PlayerPortrait لضمان بقاء نسبة العرض إلى الارتفاع التسمية وعناصر واجهة المستخدم الفرعية كما هي بغض النظر عن حجم شاشة اللاعب.
  2. إدراج كائن UICorner في PlayerPortrait، ثم في نافذة الخصائص، تعيين CornerRadius إلى 0.05، 0 لتدوير الزوايا قليلاً.
إنشاء نص التسمية للاسم اللاعب.
1. إدراج كائن TextLabel ضمن PlayerDisplay.
2. تحديد التسمية الجديدة، ثم في نافذة الخصائص،
  1. تعيين AnchorPoint إلى 0، 0.5 لتحديد نقطة الأصل للتسمية الجديدة في منتصفها (0% من اليسار إلى اليمين للتسمية، و50% من الأعلى إلى الأسفل للتسمية).
  2. تعيين BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
  3. تعيين Name إلى PlayerNameTextLabel.
  4. تعيين Position إلى {0.35، 0},{0.72، 0} لتحديد التسمية إلى الجانب الأيمن من حاويتها (35% من اليسار إلى اليمين للتسمية الأب، و72% من الأعلى إلى الأسفل للتسمية الأب).
  5. تعيين Size إلى {0.52، 0},{0.3، 0} ليكون النص قادرًا على أخذ معظم مساحة الشكل المتعدد الأضلاع (52% أفقيًا و30% عموديًا من الإطار الأب).
  6. تعيين FontFace إلى Montserrat لتتناسب مع الجمالية المستقبلية.
  7. تعيين Weight إلى Bold لتكثيف الخط.
  8. إزالة النص المؤقت في خاصية Text. تقوم البرامج النصية في الخطوة 7 بإدراج اسم اللاعب برمجيًا في التسمية.
  9. تمكين TextScaled.
  10. تعيين TextXAlignment إلى Left.
إنشاء أيقونات الفريق والألوان التي تعرض إلى اليسار من صورة اللاعب.
1. إدراج Folder في PlayerDisplay، ثم إعادة تسميته إلى TeamIcons.
2. إنشاء الأيقونة والفريق الأخضر.
  1. إدراج كائن ImageLabel في TeamIcons.
  2. تحديد التسمية الجديدة، ثم في نافذة الخصائص،
    
    تعيين AnchorPoint إلى 0، 1 لتحديد نقطة الأصل للتسمية في أسفل يسارها (0% من اليسار إلى اليمين للتسمية، و100% من الأعلى إلى الأسفل للتسمية).
    
    تعيين BackgroundColor3 إلى 88، 218، 171 لتعيين لون خلفية التسمية إلى الأخضر النعناعي.
    
    تعيين Name إلى TeamAIcon.
    
    تعيين Position إلى {0، 0},{1، 0} لتحديد التسمية إلى الجانب الأيسر من الإطار.
    
    تعيين Size إلى {0.135، 0},{0.58، 0} لتقليص التسمية إلى الجانب الأيسر من صورة اللاعب.
    
    تعيين ImageTransparency إلى 1 لجعل التسمية شفافة.
  1. تكوين سمة مخصصة لتتبع أن هذه التسمية مخصصة للفريق الأخضر. هذه الخطوة مهمة جدًا للبرامج النصية في الخطوة 7.
    
    في نافذة الخصائص، انتقل إلى قسم السمات، ثم انقر على أيقونة الزائد. تظهر حوار منبثق.
    
    في حقل الاسم، أدخل teamColor.
    
    في قائمة Type المنسدلة، اختر BrickColor.
    
    انقر على زر Save.
    
    تعيين سمة teamColor الجديدة إلى Mint.
  2. إدراج كائن UIAspectRatioConstraint في TeamAIcon لضمان بقاء نسبة العرض إلى الارتفاع التسمية وعناصر واجهة المستخدم الفرعية كما هي بغض النظر عن حجم شاشة اللاعب.
  3. إنشاء الأيقونة.
    
    إدراج كائن ImageLabel في TeamAIcon.
    
    تحديد التسمية الجديدة، ثم في نافذة الخصائص،
    
    تعيين Image إلى rbxassetid://14309678670 لعرض أيقونة الفريق الأخضر.
    
    تعيين AnchorPoint إلى 0.5، 0.5 لتحديد نقطة الأصل للتسمية في منتصفها (50% من اليسار إلى اليمين للتسمية، و50% من الأعلى إلى الأسفل للتسمية).
    
    تعيين BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
    
    تعيين Name إلى Icon.
    
    تعيين Position إلى {0.5، 0},{0.5، 0} لتحديد التسمية في منتصف التسمية الأم.
    
    تعيين Size إلى {0.7، 0},{0.6، 0} لتقليص التسمية.
    
    تعيين ScaleType إلى Fit حتى تتناسب الصورة داخل حاويتها ولا تتمدد على أحجام الشاشات المختلفة.
3. إنشاء الأيقونة والفريق الوردي.
  1. نسخ TeamAIcon وأطفاله.
  2. تحديد TeamAIcon المكرر، ثم في نافذة الخصائص،
    
    تعيين BackgroundColor3 إلى 255، 170، 255 لتعيين لون خلفية التسمية إلى الوردي القطني.
    
    تعيين Name إلى TeamBIcon.
    
    تعيين سمة teamColor إلى Carnation Pink.
    
    تحديد الطفل المكرر Icon من TeamBIcon، ثم في نافذة الخصائص، تعيين Image إلى rbxassetid://14309678549 لعرض أيقونة الفريق الوردي.
يشير إلى البرامج النصية التالية من ReplicatedStorage ضمن ملف المكان النموذجي Laser Tag الذي يعرض برمجيًا مؤشر اللاعب باللون والأيقونة المناسبة للفريق أثناء نشطة اللاعب في جولة.

يتطلب البرنامج النصي التالي مجموعة من البرامج النصية التي تعمل معًا لإعداد واجهة العرض الرئيسية (HUD)، بما في ذلك startSyncingTeamColor وsetPlayerName وsetPlayerPortrait. بعد انضمام لاعب إلى جولة واختيار مبدله، يضمن هذا البرنامج النصي عرض جميع عناصر واجهة HUD بشكل مناسب لحالة اللاعب والجهاز وحالة الفريق.


local Players = game:GetService("Players")

local setPlayerPortrait = require(script.setPlayerPortrait)
local setPlayerName = require(script.setPlayerName)
local startSyncingTeamColor = require(script.startSyncingTeamColor)
local setObjective = require(script.setObjective)
local setupTouchButtonAsync = require(script.setupTouchButtonAsync)
local startSyncingTeamPoints = require(script.startSyncingTeamPoints)
local disableMouseWhileGuiEnabled = require(script.disableMouseWhileGuiEnabled)
local setupHitmarker = require(script.setupHitmarker)

local localPlayer = Players.LocalPlayer
local gui = localPlayer.PlayerGui:WaitForChild("HUDGui")

setPlayerPortrait(gui)
setPlayerName(gui)
startSyncingTeamColor(gui)
setObjective(gui)
startSyncingTeamPoints(gui)
disableMouseWhileGuiEnabled(gui)
setupHitmarker(gui)
setupTouchButtonAsync(gui)

الآن، كلما انضم لاعب أو انضم مرة أخرى إلى الجولة بعد استعادة وعيه، يظهر مؤشر اللاعب في أسفل يسار شاشته.

شاشة الحقل القوي

شاشة الحقل القوي هي عنصر واجهة مستخدم يتراكب على عمق الرؤية لإعلام اللاعبين بأنهم آمنون من نيران الفريقين الأعداء أثناء الانضمام إلى الجولة أو الانضمام مرة أخرى. تتبع تجربة الليزر تاج خطوة جمالية للأيقونات من choose-an-art-style، يستخدم نمطًا سداسيًا شبه شفاف لرمز حقل القوة. لا يعزز هذا القرار التصميم الجمالي المستقبلي لجميع واجهة المستخدم في التجربة فحسب، بل إنه أيضًا ينقل حالة اللاعب دون أي نص أو توجيه إضافي.

لإعادة إنشاء شاشة الحقل القوي بالضبط ضمن تجربة Laser Tag:1. قم بإدراج ImageLabel في كائن ForceFieldGui ScreenGui.

في نافذة Explorer، انتقل إلى خدمة StarterGui.
مرر فوق كائن ForceFieldGui، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
من القائمة السياقية، قم بإدراج ImageLabel.
اختر التسمية الجديدة، ثم في نافذة Properties،
1. اضبط Image إلى rbxassetid://14462567888.
2. اضبط BackgroundTransparency على 0.8 لجعل مجال القوة شفافًا.
3. اضبط Size إلى {1, 0},{1, 0} لجعل الصورة تملأ الشاشة بالكامل (100% أفقيًا و100% عموديًا من ScreenGui الأب).
4. اضبط ScaleType على Tile لجعل الشكل السداسي يتكرر عبر الشاشة بالكامل.
5. اضبط TileSize إلى {0, 104},{0, 180}.
قم بإدراج كائن UIGradient في التسمية.
اختر كائن التدرج الجديد، ثم في نافذة Properties،
1. اضبط Color إلى تسلسل لوني يبدأ بالأزرق، ثم يتحول إلى الأبيض، ثم يعود إلى الأزرق مرة أخرى.
  1. اضبط Color إلى 120, 192, 250 لتطبيق لون أزرق فاتح على جميع الأشكال السداسية.
  2. انقر على خاصية Color، ثم انقر على زر ⋯. ستظهر نافذة منبثقة لتسلسل الألوان.
    
    كل مثلث على المحور السفلي لتسلسل الألوان هو نقطة رئيسية تحدد قيمة اللون للخاصية في تلك النقطة من الصورة من اليسار إلى اليمين.
  3. انقر واسحب على تسلسل الألوان حتى تصل إلى قيمة Time تساوي 0.05، ثم انقر على المربع الصغير بجوار Color لفتح نافذة منبثقة Colors.
  4. اختر لونًا أبيض مشرق، ثم أغلق نافذة المنبثقة.
  5. انقر واسحب على تسلسل الألوان حتى تصل إلى قيمة Time تساوي 0.95، ثم افتح نافذة المنبثة Colors مرة أخرى، واختر نفس اللون الأبيض كما من قبل.
2. اضبط Rotation إلى 225 لجعل الجزء الأزرق من تسلسل الألوان يظهر في الزوايا العليا اليسرى والسفلى اليمنى.
3. اضبط Transparency إلى تسلسل رقمي يجعل مجال القوة يبدو وكأنه يتلألأ.
  1. انقر على خاصية Transparency، ثم انقر على زر ⋯. ستظهر نافذة منبثقة لتسلسل الأرقام. كل مربع في بداية ونهاية تسلسل الأرقام هو نقطة رئيسية تحدد قيمة الشفافية للخاصية في ذلك النقطة من الصورة من اليسار إلى اليمين.
  2. اضبط خصائص الوقت والقيمة التالية عبر تسلسل الأرقام:
  - Time = 0، Value = 0.25
  - Time = .101، Value = 0.875
  - Time = .183، Value = 0
  - Time = .3، Value = 1
  - Time = .7، Value = 1
  - Time = 1، Value = 0.9
قم بإنشاء نسخة من ImageLabel من الخطوة 2.
اختر كائن UIGradient داخل التسمية المكررة، ثم في نافذة Properties،
1. اضبط Rotation إلى -45 لعكس الصورة بحيث تكاد تعكس بعضها على طول محور Y.
2. عدل Transparency لجعل التلألؤ يبدو أكثر طبيعية.
  1. انقر على خاصية Transparency، ثم انقر على زر ⋯. ستظهر نافذة منبثقة لتسلسل الأرقام.
  2. اختر الإطار الرئيسي الثالث، ثم انقر على زر Delete.
ارجع إلى النصوص التالية ضمن ReplicatedStorage داخل ملف عينة Laser Tag الذي يعرض برمجيًا شاشة مجال القوة أثناء انضمام لاعب أو انضمامه مرة أخرى إلى جولة.

النص البرمجي التالي ReplicatedStorage.ForceFieldClientVisuals يبدل العرض الافتراضي لـ ForceField بـ StarterGui.ForceFieldGui. عندما يدخل اللاعبون إلى تجربة وينتقلون إلى SpawnLocation مع خاصية Duration أكبر من 0، فإن السلوك الافتراضي في كل تجربة هو توفير كرة زرقاء واقية لشخصياتهم تمنعهم مؤقتًا من فقدان الصحة.

يبدأ هذا السكربت بالاستماع إلى متى تتم إضافة ForceField إلى شخصية، ويعطل رسومات مجال القوة الافتراضية، ثم يمكّن كائن ForceFieldGui ScreenGui. لاحظ أن هذا لا يؤثر على الرسوميات ثلاثية الأبعاد عند نظر اللاعبين إلى الآخرين الذين يعودون إلى التجربة.

الرسومات الافتراضية لمجال القوة في منظور الشخص الأول تتضمن شبكة سداسية مستقبلية حول محيط الشاشة. — الرسومات الافتراضية لمجال القوة في منظور الشخص الأول

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


local Players = game:GetService("Players")

local localPlayer = Players.LocalPlayer

local function onCharacterAddedAsync(character: Model)
	local forceField = character:WaitForChild("ForceField", 3)
	if not forceField then
		-- إذا كان اللاعب يظهر في نقطة ظهور مع تعطيل مجال القوة
		return
	end

	forceField.Visible = false
	localPlayer.PlayerGui:WaitForChild("ForceFieldGui").Enabled = true
	forceField.Destroying:Wait()
	localPlayer.PlayerGui.ForceFieldGui.Enabled = false
end

if localPlayer.Character then
	onCharacterAddedAsync(localPlayer.Character)
end

localPlayer.CharacterAdded:Connect(onCharacterAddedAsync)

الآن، كلما انضم لاعب أو انضم مرة أخرى إلى الجولة بعد إعادة الظهور، تظهر واجهة المستخدم الجديدة لمجال القوة بدلاً من الرسومات الافتراضية لمجال Class.ForceField في منظور الشخص الأول.

شاشة إعادة الظهور

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

لمزيد من المعلومات حول سلوك إعادة الظهور المخصص في تجربة علامة الليزر العينة، انظر Respawn Characters من منهج برمجة اللعبة.

لإعادة إنشاء شاشة إعادة الظهور بدقة في تجربة Laser Tag العينة:

إنشاء اللافتة المرجعية في المركز.
1. أدخل ImageLabel في كائن OutStateGui ScreenGui.
  1. في نافذة Explorer، انتقل إلى خدمة StarterGui.
  2. مرر فوق كائن OutStateGui، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
  3. من القائمة السياقية، أدخل ImageLabel.
2. اختر التسمية الجديدة، ثم في نافذة Properties،
  1. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للزر الجديد في منتصفه (50% من اليسار إلى اليمين من التسمية، و50% من الأعلى إلى الأسفل من التسمية).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0.5, 0} لتعيين التسمية في منتصف حاويتها (50% من اليسار إلى اليمين من ScreenGui الأب، و50% من الأعلى إلى الأسفل من ScreenGui الأب).
  4. اضبط Size إلى {0.48, 0},{0.06, 0} لتوسيع التسمية (48% أفقيًا و6% عموديًا من ScreenGui الأب).
  5. اضبط Name إلى Block.
  6. اضبط Image إلى rbxassetid://14304827265 لجعل الصورة شكل شبه منحرف.
  7. اضبط ImageColor إلى 0,0,0 لجعل الشكل شبه المنحرف باللون الأسود.
  8. اضبط ImageTransparency إلى 0.3 لتقليل شفافية التسمية بنسبة 30%، ومطابقة جميع عناصر واجهة المستخدم السوداء في التجربة.
3. أدخل UIAspectRatioConstraint في Block للتأكد من أن نسبة العرض إلى الارتفاع للتسمية وعناصر واجهة المستخدم الفرعية تظل كما هي بغض النظر عن حجم شاشة اللاعب.
4. اختر القيد الجديد، ثم في نافذة Properties، اضبط AspectRatio إلى 13.78.
5. أدخل TextLabel في Block للنص التوجيهي.
6. اختر التسمية الجديدة، ثم في نافذة Properties،
  1. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للتسمية في منتصفها (50% من اليسار إلى اليمين من التسمية، و50% من الأعلى إلى الأسفل من التسمية).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0.5, 0} لتعيين التسمية في منتصف التسمية الأم (50% من اليسار إلى اليمين من التسمية الأم، و50% من الأعلى إلى الأسفل من التسمية الأم).
  4. اضبط Size إلى {.85, 0},{0.55, 0} حتى يمكن للنص أن يشغل معظم مساحة شبه المنحرف (85% أفقيًا و55% عموديًا من التسمية الأم).
  5. اضبط Name إلى BodyTextLabel.
  6. اضبط FontFace إلى Montserrat لتناسب الجمالية المستقبلية.
  7. اضبط Weight إلى Bold لتثخين الخط.
  8. اضبط Text إلى Respawning….
  9. اضبط TextColor3 إلى 255, 255, 255 لجعل النص باللون الأبيض.
  10. تمكين TextScaled.
إنشاء الرأس.
1. أدخل ImageLabel في Block.
2. اختر التسمية الجديدة، ثم في نافذة Properties،
  1. اضبط AnchorPoint إلى 0.5, 1 لتعيين نقطة الأصل للتسمية في أسفل المنتصف (50% من اليسار إلى اليمين من التسمية، و100% من الأعلى إلى الأسفل من التسمية).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0, 0} لتعيين التسمية في الجزء الأعلى الأوسط من التسمية الأم (50% من اليسار إلى اليمين من التسمية الأم، و0% من الأعلى إلى الأسفل من التسمية الأم).
  4. اضبط Size إلى {0.46, 0},{0.56, 0} لتوسيع التسمية (46% أفقيًا و56% عموديًا من التسمية الأم).
  5. اضبط Name إلى Header.
  6. اضبط Image إلى rbxassetid://14304826985 لجعل الصورة تتلاشى في اتجاهات متعددة.
  7. اضبط ImageColor إلى 245, 46, 46 لجعل التلاشي أحمر للإشارة إلى أن اللاعب غير نشط مؤقتًا أثناء الإشارة إليه خارج الجولة.
3. أدخل TextLabel في Header للنص التوجيهي.
4. اختر التسمية الجديدة، ثم في نافذة Properties،
  1. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للتسمية في منتصفها (50% من اليسار إلى اليمين من التسمية، و50% من الأعلى إلى الأسفل من التسمية).
  2. اضبط BackgroundTransparency إلى 1 لجعل خلفية التسمية شفافة تمامًا.
  3. اضبط Position إلى {0.5, 0},{0.5, 0} لتعيين التسمية في منتصف التسمية الأم (50% من اليسار إلى اليمين من التسمية الأم، و50% من الأعلى إلى الأسفل من التسمية الأم).
  4. اضبط Size إلى {.85, 0},{0.55, 0} حتى يمكن للنص أن يشغل معظم مساحة التلاشي (85% أفقيًا و55% عموديًا من التسمية الأم).
  5. اضبط Name إلى HeaderTextLabel.
  6. اضبط FontFace إلى Montserrat لتناسب الجمالية المستقبلية.
  7. اضبط Weight إلى Black لتثخين الخط.
  8. اضبط Text إلى TAGGED - YOU'RE OUT!
  9. اضبط TextColor3 إلى 255, 255, 255 لجعل النص باللون الأبيض.
  10. تمكين TextScaled.
إنشاء التلاشي حول حدود الشاشة.
1. أدخل ImageLabel في OutStateGui.
2. اختر التسمية الجديدة، ثم في نافذة Properties،
  1. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للتسمية في منتصفها (50% من اليسار إلى اليمين من التسمية، و50% من الأعلى إلى الأسفل من التسمية).
  2. اضبط BackgroundColor3 إلى 0,0,0 لتعيين لون خلفية التسمية إلى الأسود.
  3. اضبط BackgroundTransparency إلى 0.5 لجعل خلفية التسمية نصف شفافة.
  4. اضبط Position إلى {0.5, 0},{0.5, 0} لتعيين التسمية في منتصف حاويتها (50% من اليسار إلى اليمين من ScreenGui الأب، و50% من الأعلى إلى الأسفل من ScreenGui الأب).
  5. اضبط Size إلى {1, 0},{1, 0} لتوسيع التسمية لتغطي الشاشة بالكامل (100% أفقيًا و100% عموديًا من ScreenGui الأب).
  6. اضبط ZIndex إلى -1 لعرض التلاشي خلف عناصر واجهة المستخدم الأخرى.
  7. اضبط Name إلى Header.
  8. اضبط Image إلى rbxassetid://14309518613 لجعل الصورة تتلاشى على الحدود.
  9. اضبط ImageTransparency إلى 0.1 لجعل التلاشي شفافًا إلى حد ما.
لتحسين الأداء، يمكنك تخطي الأصل الرقمي واستخدام كائن UIGradient بدلاً من ذلك مع تسلسل شفافية رقمي مخصص. لمعرفة المزيد حول هذه التقنية للتلاشي، انظر تعديل مظهر واجهة المستخدم - تدرج.
ارجع إلى النص البرمجي التالي ضمن ReplicatedStorage داخل ملف عينة Laser Tag الذي يعرض برمجيًا شاشة إعادة الظهور عندما تصل صحة اللاعب إلى الصفر، وهم في عملية إعادة الظهور إلى منطقة ظهور فريقهم.

النص البرمجي التالي ReplicatedStorage.PlayerStateHandler يحتوي على وظائف تقوم بتفعيل أنواع مختلفة من السلوك وفقًا للخاصية playerState. جميع استجابات الأحداث مجمعة منطقيًا في هذا البرنامج النصي لأنها تتطلب سلوكًا مشابهًا في تمكين أو تعطيل تحكمات اللاعب، حركة الكاميرا، وواجهة المستخدم التي تكون مرئية.

عندما تصل صحة اللاعب إلى الصفر، تصبح خاصية playerState الخاصة بهم TaggedOut، مما يُفعّل دالة onTaggedOut(). تقوم onTaggedOut() بالتفعيل الفوري للسلوك التالي:

لا يمكن للاعب الحركة في الساحة.
لا يمكن للاعب تحريك كاميراته.
لا يمكن للاعب استخدام بندقيته.
تصبح StarterGui.OutStateGui مفعّلة فقط.

عند إعادة ظهور اللاعب، تصبح خاصية playerState الخاصة بهم SelectingBlaster، مما يُفعّل دالة onSelectingBlaster(). تقوم onSelectingBlaster() بعد ذلك بتمكين StarterGui.PickABlasterGui بشكل حصري، مما يعطل تلقائيًا شاشة إعادة الظهور. لمزيد من المعلومات حول هذه الشروط، انظر Handle Client State من منهج برمجة اللعبة.


local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Players = game:GetService("Players")

local PlayerState = require(ReplicatedStorage.PlayerState)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local BlasterState = require(ReplicatedStorage.Blaster.BlasterState)
local togglePlayerMovement = require(script.togglePlayerMovement)
local togglePlayerCamera = require(script.togglePlayerCamera)
local scheduleDestroyForceField = require(ReplicatedStorage.scheduleDestroyForceField)

local localPlayer = Players.LocalPlayer

local playerGui = localPlayer.PlayerGui
local guiLayers = {
	playerGui:WaitForChild("HUDGui"),
	playerGui:WaitForChild("OutStateGui"),
	playerGui:WaitForChild("PickABlasterGui"),
}

-- تعطيل جميع طبقات واجهة المستخدم باستثناء الاستثناء المعطى
local function setGuiExclusivelyEnabled(enabledGui: ScreenGui?)
	-- guiLayers تحتوي على قائمة من واجهات المستخدم التي يجب تعيينها حصرياً.
	for _, screenGui in guiLayers do
		screenGui.Enabled = screenGui == enabledGui
	end
end

local function onSelectingBlaster()
	-- تمكين الكاميرا حتى يتمكن اللاعبون من النظر حولهم أثناء اختيار بندقية
	togglePlayerCamera(true)
	togglePlayerMovement(false)
	setGuiExclusivelyEnabled(playerGui.PickABlasterGui)

	-- تعطيل المسدس أثناء اختيار مسدس
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlaying()
	-- تمكين حركة اللاعب بعد اختيار المسدس
	togglePlayerMovement(true)
	setGuiExclusivelyEnabled(playerGui.HUDGui)

	-- تمكين البندقية أثناء اللعب
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Ready)

	-- جدولة منطق تدمير مجال القوة عندما يبدأ اللاعب في اللعب
	scheduleDestroyForceField()
end

local function onTaggedOut()
	-- تعطيل التحكمات أثناء الإشارة إلى الخارج
	togglePlayerMovement(false)
	togglePlayerCamera(false)
	setGuiExclusivelyEnabled(playerGui.OutStateGui)

	-- تعطيل المسدس أثناء الإشارة إلى الخارج
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onInLobby()
	-- تمكين التحكمات أثناء وجودهم في الردهة
	togglePlayerMovement(true)
	togglePlayerCamera(true)

	-- إخفاء جميع HUD أثناء وجودهم في الردهة
	setGuiExclusivelyEnabled(nil)

	-- تعطيل المسدس أثناء وجودهم في الردهة
	localPlayer:SetAttribute(PlayerAttribute.blasterStateClient, BlasterState.Disabled)
end

local function onPlayerStateChanged(newPlayerState: string)
	if newPlayerState == PlayerState.SelectingBlaster then
		onSelectingBlaster()
	elseif newPlayerState == PlayerState.Playing then
		onPlaying()
	elseif newPlayerState == PlayerState.TaggedOut then
		onTaggedOut()
	elseif newPlayerState == PlayerState.InLobby then
		onInLobby()
	else
		warn(`الحالة الجديدة للاعب غير صالحة ({newPlayerState})`)
	end
end

-- التعامل مع الحالة الأولية للاعب إذا تم تعيينها
local initialPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
onPlayerStateChanged(initialPlayerState)

local function updateFromPlayerState()
	onPlayerStateChanged(localPlayer:GetAttribute(PlayerAttribute.playerState))
end

-- التعامل مع تحديثات الحالة المستقبلية للاعب
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(updateFromPlayerState)

-- تأكد من أن التغييرات لا تزال سارية بعد إعادة الظهور
localPlayer.CharacterAdded:Connect(updateFromPlayerState)

الآن، كلما انخفضت صحة اللاعب إلى الصفر، تظهر شاشة إعادة الظهور حتى يعاد اللاعب إلى منطقة ظهوره مرة أخرى.

الآن بعد أن أصبحت مألوفًا بعناصر GuiObjects الشائعة لواجهة المستخدم على الشاشة، حاول إعادة إنشاء كائن RoundResultsGui ScreenGui وجميع أبنائه لعرض الواجهة التي تُظهر عندما يفوز اللاعبون أو يخسرون مباراة. يمكنك استخدام ملف عينة تجربة علامة الليزر .rbxl كمرجع، أو تعديل القيم لتلبية متطلبات اللعب لتجربتك الخاصة.

إنشاء كائنات SurfaceGui

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

تحتوي كائنات SurfaceGui على جميع GuiObjects التي تعرض على سطح جزء في الفضاء ثلاثي الأبعاد. تحتوي تجربة علامة الليزر العينة فقط على مثيل واحد من كائن SurfaceGui: مقياس التبريد الذي يظهر فوق بندقية كل لاعب. يحتاج هذا الكائن إلى منطق برمجي لكل لاعب لأنه يستجيب بنشاط لإدخال كل لاعب فردي، ويقدم ردود فعل مرئية عندما يمكنهم إطلاق بندقيتهم مرة أخرى.

لإنشاء كائن SurfaceGui:

في نافذة Explorer، مرر فوق خدمة ReplicatedStorage، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
من القائمة السياقية، قم بإدراج كائن Part.
أدخل كائن ScreenGui في الجزء.
أعد تسمية SurfaceGui حسب سياق عناصر واجهتها الفرعية.
كرر هذه العملية لكل عنصر واجهة تريد عرضها على سطح جزء في الفضاء ثلاثي الأبعاد.

مقياس التبريد

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

لإعادة إنشاء مقياس التبريد بدقة ضمن تجربة Laser Tag العينة:

قم بإنشاء جزء لحمل كائن SurfaceGui الخاص بك.
1. في نافذة Explorer، مرر فوق Workspace، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
2. من القائمة السياقية، أدخل جزء block. هذا هو موقع مؤقت للجزء حتى تتمكن من تصور التغييرات في كل خطوة من العملية.
ضع الجزء ووجهه حول موضع يحمل فيه شخصية اللاعب بندقيته، ثم في نافذة Properties،
1. اضبط Transparency إلى 1 لجعل الجزء شفافًا تمامًا.
2. اضبط Name إلى CooldownBarPrefab.
3. اضبط Size إلى 0.169, 0.027, 2.537 لتكبير الجزء إلى حجم يقارب طول البندقية.
4. قم بتعطيل CanCollide وCanQuery.
أدخل SurfaceGui في CooldownBarPrefab.
اختر SurfaceGui الجديد، ثم في نافذة Properties،
1. اضبط Face إلى Top حتى تعرض واجهة المستخدم للأعلى.
2. اضبط LightInfluence وMaxDistance إلى 0.
3. اضبط PixelsPerStud إلى 200.
أنشئ الشريط الأسود.
1. أدخل ImageLabel في SurfaceGui.
2. اختر التسمية الجديدة، ثم في نافذة Properties،
  1. أزل قيمة Image الافتراضية.
  2. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للتسمية في منتصفها (50% من اليسار إلى اليمين من التسمية، و50% من الأعلى إلى الأسفل من التسمية).
  3. اضبط BackgroundColor3 إلى 0,0,0 لتعيين لون خلفية التسمية إلى الأسود.
  4. اضبط BackgroundTransparency إلى 0.4 لجعل خلفية التسمية شبه شفافة.
  5. اضبط Position إلى {0.5, 0},{0.5, 0} لتعيين التسمية في منتصف حاويتها (50% من اليسار إلى اليمين من SurfaceGui الأب، و50% من الأعلى إلى الأسفل من SurfaceGui الأب).
  6. اضبط Size إلى {1, 0},{1, 0} لتوسيع التسمية إلى الجزء بالكامل (100% أفقيًا و100% عموديًا من SurfaceGui الأب).
  7. اضبط Name إلى Container.
قم بتدوير زوايا الحاوية.
1. أدخل كائن UICorner في Container.
2. اختر UICorner، ثم في نافذة Properties، اضبط CornerRadius إلى 0.15, 0 لتدوير الزوايا قليلاً.
أنشئ الشريط الأحمر.
1. أدخل ImageLabel في Container.
2. اختر التسمية الجديدة، ثم في نافذة Properties،
  1. أزل قيمة Image الافتراضية.
  2. اضبط AnchorPoint إلى 1, 0.5 لتحديد نقطة الأصل للتسمية في حيث يمين-الوسط (100% من اليسار إلى اليمين من التسمية، و50% من الأعلى إلى الأسفل من التسمية).
  3. اضبط BackgroundColor3 إلى 172, 13, 13 لتعيين لون خلفية التسمية إلى أحمر داكن.
  4. اضبط BackgroundTransparency إلى 0.2 لجعل خلفية التسمية شفافة قليلاً.
  5. اضبط Name إلى Bar.
  6. اضبط Position إلى {1, 0},{0.5, 0} لتعيين التسمية في اليمين-الوسط من الحاوية (100% من اليسار إلى اليمين من التسمية الأم، و50% من الأعلى إلى الأسفل من التسمية الأم).
  7. اضبط Size إلى {0, 0},{1, 0} لتمديد التسمية إلى أعلى التسمية الأم (0% أفقيًا و100% عموديًا من التسمية الأم). هذه الخطوة أيضًا مفيدة للسلوك التفاعلي الذي يحدث في السكربتات في الخطوة 8.
تدوير زوايا التسمية.
1. أدخل كائن UICorner في Bar.
2. اختر UICorner، ثم في نافذة Properties، اضبط CornerRadius إلى 0.15, 0 لتدوير الزوايا قليلاً.
انقل CooldownBarPrefab إلى ReplicatedStorage.
1. أنشئ بنية مجلد لتنظيم كائنات واجهة المستخدم الخاصة بك. تستخدم العينة مجلد Instances مع مجلد فرعي اسمه Guis.
2. انقل CooldownBarPrefab إلى Guis.
ارجع إلى السكربتات التالية ضمن ReplicatedStorage داخل ملف عينة Laser Tag التي تربط برمجيًا مقياس التبريد إلى بندقية اللاعب، ثم تقوم بتحريك الشريط الأحمر بعد أن يقوم اللاعب بإطلاق بندقيته.

النص البرمجي التالي ReplicatedStorage.FirstPersonBlasterVisuals يدير جميع المنطق المرئي لبندقية اللاعب في منظور الشخص الأول. يتطلب مجموعة من سكربتات الوحدة التي تعمل معًا لإعداد رسومات البندقية التي تشعر بأنها أكثر واقعية لتجربة لعبة علامة الليزر، بما في ذلك FirstPersonBlasterVisuals.addCooldownBar وFirstPersonBlasterVisuals.runCooldownBarEffect.


local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")
local Workspace = game:GetService("Workspace")
local RunService = game:GetService("RunService")

local BlastData = require(ReplicatedStorage.Blaster.BlastData)
local PlayerAttribute = require(ReplicatedStorage.PlayerAttribute)
local PlayerState = require(ReplicatedStorage.PlayerState)
local getBlasterConfig = require(ReplicatedStorage.Blaster.getBlasterConfig)

local runBlastVisuals = require(script.runBlastVisuals)
local setupAnimations = require(script.setupAnimations)
local addCooldownBar = require(script.addCooldownBar)
local runCooldownBarEffect = require(script.runCooldownBarEffect)

local laserBlastedBindableEvent = ReplicatedStorage.Instances.LaserBlastedBindableEvent

local RIG_OFFSET_FROM_CAMERA = CFrame.new(2, -2, -3) * CFrame.Angles(math.rad(0.25), math.rad(95.25), 0)

local localPlayer = Players.LocalPlayer
local currentCamera = Workspace.CurrentCamera

local rigModel = nil
local cooldownBar = nil
local animations = {}

local function addFirstPersonVisuals()
	local blasterConfig = getBlasterConfig()

	-- إضافة نموذج الشخصية في منظور الشخص الأول
	rigModel = blasterConfig.RigModel:Clone()
	rigModel.Parent = Workspace

	-- إضافة مقياس التبريد
	cooldownBar = addCooldownBar(rigModel.PrimaryPart.CooldownBarAttachment)

	animations = setupAnimations(blasterConfig, rigModel)
end

local function removeFirstPersonVisuals()
	for _, animation في animations do
		animation:Stop()
		animation:Destroy()
		animation = nil
	end
	if rigModel then
		-- هذا يدمر أيضًا مقياس التبريد لأنه مرتبط بالنموذج
		rigModel:Destroy()
		rigModel = nil
	end
end

-- تشغيل التأثيرات المرئية عندما يحدث انفجار
laserBlastedBindableEvent.Event:Connect(function(blastData: BlastData.Type)
	runBlastVisuals(rigModel.PrimaryPart.TipAttachment, blastData, animations.blastAnimation)
	runCooldownBarEffect(cooldownBar)
end)

-- ربط النموذج بالكاميرا إذا كان موجودًا
RunService.RenderStepped:Connect(function()
	if rigModel then
		-- تحديث وضع النموذج بالنسبة لموقع الكاميرا وRIG_OFFSET_FROM_CAMERA
		rigModel:PivotTo(currentCamera.CFrame * RIG_OFFSET_FROM_CAMERA)
	end
end)

-- التعامل مع تغيير الرسوميات عندما يتغير نوع البندقية أثناء اللعب
localPlayer:GetAttributeChangedSignal(PlayerAttribute.blasterType):Connect(function()
	local playerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	if playerState == PlayerState.Playing then
		removeFirstPersonVisuals()
		addFirstPersonVisuals()
	end
end)

-- التعامل مع تغيير الرسوميات عندما تتغير حالة اللاعب
localPlayer:GetAttributeChangedSignal(PlayerAttribute.playerState):Connect(function()
	local newPlayerState = localPlayer:GetAttribute(PlayerAttribute.playerState)
	-- إزالة الرسوميات عندما يختار اللاعب بندقية أو في الردهة
	if newPlayerState == PlayerState.SelectingBlaster or newPlayerState == PlayerState.InLobby then
		removeFirstPersonVisuals()
	-- إضافة الرسوميات مرة أخرى عندما ينتهي اللاعب من اختيار البندقية.
	elseif newPlayerState == PlayerState.Playing then
		addFirstPersonVisuals()
	end
end)

الآن، كلما قام اللاعب بإطلاق بندقيته، يتحرك شريط التبريد للتواصل عندما يمكن للاعب الإطلاق مرة أخرى.

إنشاء كائنات BillboardGui

لإظهار عناصر واجهة المستخدم داخل الفضاء ثلاثي الأبعاد التي تستجيب لمنطق البرمجة وتواجه دومًا كاميرا كل لاعب بغض النظر عن زاوية رؤيتهم، مثل أسماء اللاعبين أو علامات الخرائط، يمكنك إنشاء كائن BillboardGui كطفل لـ BasePart أو Attachment الذي يفترض في الفضاء ثلاثي الأبعاد.

تتضمن تجربة علامة الليزر العينة كائنين منفصلين من BillboardGui داخل ReplicatedStorage:

OtherPlayerIndicatorGuiPrefab - تعرض دائرة وردية أو خضراء فوق رأس كل لاعب نشيط في الجولة.
TaggedOutIndicatorGuiPrefab - تظهر فوق رأس اللاعب عند الإشارة إليه خارج الجولة.

بعد أن تقوم بإنشاء كائن BillboardGui، يمكنك إنشاء وتخصيص عناصر GuiObjects الفرعية وفقًا لغرض كل حاوية. لإظهار ذلك، في الأقسام الفورية التالية، ستتعلم كيفية تنفيذ عناصر واجهة المستخدم لكلي نوعي المؤشرات في تجربة علامة الليزر العينة. يمكنك تعديل أي جزء من العملية لتلبية المواصفات الخاصة بتجربتك.

لإنشاء كائن BillboardGui:

في نافذة Explorer، مرر فوق BasePart أو Attachment، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
من القائمة السياقية، قم بإدراج كائن BillboardGui.
أعد تسمية BillboardGui وفقًا لسياق عناصر واجهتها الفرعية.
كرر هذه العملية لكل عنصر واجهة تحتاج إلى إظهاره بصورة سياقية فوق رؤوس اللاعبين.

مؤشر الفريق

مؤشر الفريق هو عنصر واجهة يُطلع اللاعبين على الفريق الذي ينتمي إليه اللاعبون الآخرون في الجولة حتى يتمكنوا من التفريق بسهولة بين حلفائهم وأعضاء الفريق المعادي. هذه المعلومات مهمة لأن طريقة اللعب في تجربة إطلاق النار من منظور الشخص الأول تتطلب من اللاعبين اتخاذ قرارات استراتيجية سريعة أثناء وجودهم في مناطق القتال حتى لا يتم الإشارة إليهم وفقدان المباراة.

لإعادة إنشاء مؤشر الفريق بدقة ضمن تجربة Laser Tag العينة:

أدخل كائن BillboardGui في هيكل مؤقت.
1. من علامة Home أو Avatar في شريط الأدوات، انقر على Character.
2. اختر من الخيارات المتاحة. تستخدم العينة نوع هيكل R15، شكل جسدي مؤنث، وأفاتار Rthro. يعرض الهيكل في كل من العرض ثلاثي الأبعاد وفي نافذة Explorer تحت اسم Rig.
3. في نافذة Explorer, انتقل إلى كتلة Head الفرعية للهيكل، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
4. من القائمة السياقية، أدخل BillboardGui.
اختر BillboardGui الجديدة، ثم في نافذة Properties،
1. اضبط LightInfluence إلى 0 لمنع الضوء البيئي من التأثير على لون المؤشر.
2. اضبط Name إلى OtherPlayerIndicatorPrefab.
3. اضبط Size إلى {0, 10},{0, 10} ليصبح السجل أصغر بشكل كبير.
4. اضبط StudsOffsetWorldSpace إلى 0, 4, 0 لوضعه فوق رأس الهيكل.
أدخل كائن Frame في OtherPlayerIndicatorPrefab.
اختر الإطار الجديد، ثم في نافذة Properties،
1. اضبط AnchorPoint إلى 0.5, 0.5 لتعيين نقطة الأصل للإطار في منتصفه (50% من اليسار إلى اليمين من الإطار، و50% من الأعلى إلى الأسفل من الإطار).
2. اضبط BackgroundColor3 إلى 255, 3, 0 لتعيين لون خلفية الإطار إلى الأحمر كلون غير حقيقي.
3. اضبط Position إلى {0.5, 0},{0.5, 0} لتعيين الإطار في منتصف حاويته (50% من اليسار إلى اليمين من BillboardGui، و50% من الأعلى إلى الأسفل من BillboardGui).
4. اضبط Size إلى {1, -2},{1, -2} لتقصير الإطار ليغطي منطقة سطح BillboardGui.
أدخل كائن UICorner في Frame لجعل الزوايا مدورة تمامًا.
أدخل كائن UIStroke في Frame لإطارة دائرة المؤشر.
انقل OtherPlayerIndicatorPrefab إلى ReplicatedStorage.
ارجع إلى النص البرمجي التالي ضمن ملف عينة Laser Tag 1A الذي يعرض برمجيًا مؤشر الفريق لكل لاعب في جولة نشطة ما لم يكونوا في الفريق المعادي وتم حجبهم.

يعمل النص البرمجي التالي ReplicatedStorage.OtherPlayerIndicatorGuiSetup عند ظهور اللاعبين في الساحة لجولة نشطة. يقوم بإرفاق مؤشر الفريق من خلال استدعاء دالة addIndicatorToCharacter()، والتي تحدد كائن Head لكل شخصية لاعب تشارك في الجولة. إذا لم يكن لديهم بالفعل مؤشر فريق، يقوم السكربت بعد ذلك بنسخ وإضافة واجهة otherPlayerIndicatorPrefab إلى كائن Head، ويضبط لون مؤشر الفريق إلى لون فريقهم.

إذا كانت شخصيات أخرى في نفس الفريق، يظهر مؤشر الفريق دائمًا، حتى إذا كانوا يختبئون خلف كائنات في الفضاء ثلاثي الأبعاد؛ إذا كانت شخصيات أخرى في الفريق المعادي، يظهر مؤشر الفريق فقط إذا لم يكن هناك كائن في الفضاء ثلاثي الأبعاد ليمنعهم.


local Players = game:GetService("Players")
local ReplicatedStorage = game:GetService("ReplicatedStorage")

local localPlayer = Players.LocalPlayer
local otherPlayerIndicatorPrefab = ReplicatedStorage.Instances.Guis.OtherPlayerIndicatorPrefab

local characterSpawnConnectionsByPlayer: { [Player]: RBXScriptConnection } = {}
local playerAddedConnection: RBXScriptConnection?

local function removeIndicatorFromPlayer(player: Player)
	if not player.Character then
		return
	end

	local head = player.Character:WaitForChild("Head", 3)
	if not head then
		return
	end

	local gui = head:FindFirstChild(otherPlayerIndicatorPrefab.Name)
	if gui then
		gui:Destroy()
	end
end

local function addIndicatorToCharacter(otherCharacter: Model?)
	local otherPlayer = Players:GetPlayerFromCharacter(otherCharacter)
	if not otherPlayer then
		return
	end

	task.spawn(function()
		local otherHead = otherCharacter:WaitForChild("Head", 3)
		if not otherHead then
			return
		end

		-- إضافة مؤشرات فقط إلى اللاعبين المشاركين في الجولة
		if not otherPlayer.Team then
			return
		end

		-- تجنب إضافة مؤشرات مكررة، وإنشاء واحدة جديدة فقط إذا لم تكن موجودة
		local gui = otherHead:FindFirstChild(otherPlayerIndicatorPrefab.Name)
		if not gui then
			gui = otherPlayerIndicatorPrefab:Clone()
			gui.Frame.BackgroundColor3 = otherPlayer.TeamColor.Color
			gui.Parent = otherHead
		end

		-- تظل المؤشر دائمًا على القمة فقط إذا كان اللاعب مجردة

		local isFriendly = otherPlayer.Team == localPlayer.Team
		gui.AlwaysOnTop = isFriendly
	end)
end

local function addIndicatorWhenCharacterSpawns(player: Player)
	if characterSpawnConnectionsByPlayer[player] then
		return
	end
	local connection = player.CharacterAdded:Connect(addIndicatorToCharacter)
	characterSpawnConnectionsByPlayer[player] = connection
end

local function stopSyncingIndicators()
	for _, connection in characterSpawnConnectionsByPlayer do
		connection:Disconnect()
	end
	table.clear(characterSpawnConnectionsByPlayer)

	if playerAddedConnection then
		playerAddedConnection:Disconnect()
		playerAddedConnection = nil
	end

	for _, player in Players:GetPlayers() do
		removeIndicatorFromPlayer(player)
	end
end

local function addIndicatorToPlayer(player: Player)
	if player == localPlayer then
		return
	end

	addIndicatorToCharacter(player.Character)
	addIndicatorWhenCharacterSpawns(player)
end

local function startSyncingIndicators()
	for _, player in Players:GetPlayers() do
		addIndicatorToPlayer(player)
	end

	if not playerAddedConnection then
		playerAddedConnection = Players.PlayerAdded:Connect(addIndicatorToPlayer)
	end
end

local function onLocalTeamChanged()
	local localTeam = localPlayer.Team
	if localTeam then
		startSyncingIndicators()
	else
		stopSyncingIndicators()
	end
end

localPlayer:GetPropertyChangedSignal("Team"):Connect(onLocalTeamChanged)
onLocalTeamChanged()

الآن، كلما كان اللاعب نشطًا في الجولة، تظهر مؤشرات الفريق فوق رؤوس اللاعبين الآخرين ما لم يكونوا في الفريق المعادي وخلف كائن.

مؤشر الإشارة

مؤشر الإشارة هو عنصر واجهة يُعلم اللاعبين عندما لم يعد اللاعبون الآخرون نشطين في الجولة وهم في عملية إعادة الظهور إلى منطقة ظهورهم. هذه المعلومات مهمة لأن طريقة اللعب في تجربة إطلاق النار من منظور الشخص الأول تتطلب من اللاعبين الانتقال إلى هدفهم التالي فورما يشيرون إلى لاعب حتى لا يصبحوا ضعفاء في الساحة من خلال اللعب في نفس الموقع لفترة طويلة.

لإعادة إنشاء مؤشر الإشارة بدقة ضمن تجربة Laser Tag العينة:

أدخل كائن BillboardGui في هيكل مؤقت حتى تتمكن من تصور التغييرات في كل خطوة من العملية.
1. من علامة Home أو Avatar في شريط الأدوات، انقر على Character.
2. اختر من الخيارات المتاحة. تستخدم العينة نوع هيكل R15، شكل جسدي مذكر، وأفاتار Rthro. يعرض الهيكل في كل من العرض ثلاثي الأبعاد وفي نافذة Explorer تحت اسم Rig.
3. في نافذة Explorer، انتقل إلى كتلة Head الفرعية للهيكل، ثم انقر على أيقونة ⊕. ستظهر قائمة سياقية.
4. من القائمة السياقية، أدخل BillboardGui.
اختر BillboardGui الجديدة، ثم في نافذة Properties،
1. اضبط LightInfluence إلى 0 لمنع الضوء البيئي من التأثير على لون المؤشر.
2. اضبط Name إلى TaggedOutIndicatorGuiPrefab.
3. اضبط Size إلى {3, 0},{0.5, 0} لتوسيع المساحة لتسمية.
4. اضبط StudsOffset إلى 0, 3.25, 0 لوضعها فوق رأس اللاعب.
  
  1. أدخل كائن ImageLabel في TaggedOutIndicatorGuiPrefab.
حدد العلامة الجديدة، ثم في نافذة Properties،
1. اضبط AnchorPoint على 0.5, 0.5 لتعيين نقطة الأصل للعلامة في وسطها (50% من اليسار إلى اليمين للعلامة، و50% من الأعلى إلى الأسفل للعلامة).
2. اضبط BackgroundTransparency على 1 لجعل خلفية العلامة شفافة تمامًا.
3. اضبط Name على Frame.
4. اضبط Position على {0.5, 0},{0.5, 0} لتعيين العلامة في وسط حاويتها (50% من اليسار إلى اليمين لـ BillboardGui الأب، و50% من الأعلى إلى الأسفل لـ BillboardGui الأب).
5. اضبط Size على {1, 0},{1, 0} لتوسيع العلامة لتغطية كامل BillboardGui (100% أفقياً و100% رأسياً لـ BillboardGui الأب).
6. اضبط Image على rbxassetid://14304826985 لجعل الصورة تتلاشى في جميع الاتجاهات.
7. اضبط ImageColor على 245, 46, 46 لتلوين العلامة باللون الأحمر.
لتحسين الأداء، يمكنك تخطي أصل الصورة واستخدام كائن UIGradient بدلاً من ذلك مع تسلسل أرقام الشفافية مخصص. لمعرفة المزيد عن هذه التقنية، راجع UI Appearance Modifiers - Gradient.
أدخل كائن TextLabel في Frame.
حدد العلامة الجديدة، ثم في نافذة Properties،
1. اضبط AnchorPoint على 0.5, 0.5 لتعيين نقطة الأصل للعلامة في وسطها (50% من اليسار إلى اليمين للعلامة، و50% من الأعلى إلى الأسفل للعلامة).
2. اضبط BackgroundTransparency على 1 لجعل خلفية العلامة شفافة تمامًا.
3. اضبط Name على BodyTextLabel.
4. اضبط Position على {0.5, 0},{0.5, 0} لتعيين العلامة في وسط حاويتها (50% من اليسار إلى اليمين للعلامة الأب، و50% من الأعلى إلى الأسفل للعلامة الأب).
5. اضبط Size على {0.85, 0},{0.7, 0} حتى يمكن للنص أن يأخذ معظم منطقة التلاشي (85% أفقياً و70% رأسياً للعلامة الصورة الأب).
6. اضبط FontFace على Montserrat ليناسب المظهر المستقبلي.
7. اضبط Weight على Bold لزيادة سمك الخط.
8. اضبط Text على TAGGED.
9. اضبط TextColor3 على 255, 255, 255 لجعل النص أبيض.
10. قم بتمكين TextScaled.
حرك TaggedOutIndicatorGuiPrefab إلى ReplicatedStorage.
ارجع إلى نصوص ServerScriptService التالية داخل ملف مكان Laser Tag 1A الذي يعرض بشكل برمجي مؤشر الخروج أثناء استجابة اللاعب مرة أخرى إلى منطقة ولادته.

تشغيل نص ServerScriptService.SetupHumanoid التالي بمجرد تحميل اللاعب للتجربة. يضمن أنه في كل مرة يتم فيها إضافة شخصية اللاعب إلى نموذج البيانات، يتم استدعاء setupHumanoidAsync مع Humanoid الخاص بهم.


local Players = game:GetService("Players")

local setupHumanoidAsync = require(script.setupHumanoidAsync)

local function onCharacterAdded(player: Player, character: Model)
	local humanoid = character:WaitForChild("Humanoid")
	setupHumanoidAsync(player, humanoid)
end

local function onPlayerAdded(player: Player)
	-- استدعِ onCharacterAdded إذا كانت لدى اللاعب شخصية بالفعل
	if player.Character then
		onCharacterAdded(player, player.Character)
	end
	-- استدعِ onCharacterAdded لجميع عمليات استنساخ الشخصيات المستقبلية لهذا اللاعب
	player.CharacterAdded:Connect(function(character: Model)
		onCharacterAdded(player, character)
	end)
end

-- استدعِ onPlayerAdded لأي لاعبين موجودين بالفعل في اللعبة
for _, player in Players:GetPlayers() do
	onPlayerAdded(player)
end
-- استدعِ onPlayerAdded لجميع اللاعبين المستقبليين
Players.PlayerAdded:Connect(onPlayerAdded)

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

تهانينا على إكمال منهج تصميم واجهة المستخدم! الآن بعد أن أصبحت لديك خبرة في إنشاء نمط فني، وإنشاء تخطيطاتك، وتنفيذ تصميماتك في الاستوديو من البداية إلى النهاية، يمكنك توسيع مشروعك بواجهة جديدة ووظائف، أو متابعة مناهج تعليمية إضافية، مثل منهج برمجة اللعب الذي يعلمك عن التنظيم العام وتفاصيل التنفيذ الرئيسية لتجربة علامة الليزر النموذجية. استمتع بالإبداع!