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

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

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

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

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

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

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

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

**أيقونة البازوكا المتعددة**
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 على Objective.
3. اختياري
  أدخل UIAspectRatioConstraint في Objective لضمان بقاء نسبة العرض إلى الارتفاع للتسمية كما هي بغض النظر عن حجم شاشة اللاعب. يضبط النموذج خاصية UIAspectRatioConstraint.AspectRatio على 7.
أنشئ حاوية لمكونات تلميحات الهدف.
1. أدخل إطارًا في Objective.
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 على ObjectiveDisplay.
أنشئ عناصر العنوان.
1. أدخل ImageLabel في ObjectiveDisplay.
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. اختر التسمية الجديدة، ثم في نافذة الخصائص،
  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 في ObjectiveDisplay.
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. اختر التسمية الجديدة، ثم في نافذة الخصائص،
  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. أدخل إطارًا في Objective.
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 على أفقي بحيث يتم عرض كل عداد فريق بجانب الآخر.
  3. اضبط HorizontalAlignment على مركز بحيث يتماشى كل عداد فريق مع الآخر في المنتصف.
أنشئ عناصر عداد الفريق الأخضر.
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. في نافذة الخصائص، انتقل إلى قسم Attributes، ثم انقر على أيقونة الزائد. تظهر نافذة منبثقة.
  2. في حقل Name، أدخل teamColor.
  3. في قائمة Type المنسدلة، اختر BrickColor.
  4. انقر على زر حفظ.
  5. اضبط سمة teamColor الجديدة على Mint.
4. أدخل TextLabel في TeamACounter لعرض تلميح.
5. اختر التسمية الجديدة، ثم في نافذة الخصائص،
  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 على يمين.
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 على يسار.
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)

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

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

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

الهدف

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

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

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

أدخل 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 على Crosshair.
5. اضبط Position على {0.5,0},{0.5,0} لتعيين التسمية في منتصف الشاشة.
6. اضبط ScaleType على Fit بحيث تناسب الصورة داخل حاويتها ولا تتمدد على أحجام الشاشات المختلفة.
اختياري
أدخل UIAspectRatioConstraint في Crosshair لضمان بقاء نسبة العرض إلى الارتفاع للتسمية كما هي بغض النظر عن حجم شاشة اللاعب. يضبط النموذج خاصية 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 داخل ملف مكان Laser Tag النموذجي التي تعرض علامة الضرب برمجيًا عندما يؤثر الانفجار على لاعب في الفريق المعادي.

يتطلب السكربت التالي مجموعة من السكربتات الوحدوية التي تعمل معًا لإعداد العرض الرئيسي (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 على Component.
3. اختياري
  أدخل UIAspectRatioConstraint في Component لضمان بقاء نسبة العرض إلى الارتفاع للإطار وعناصر واجهة المستخدم الفرعية كما هي بغض النظر عن حجم شاشة اللاعب. يضبط النموذج خاصية UIAspectRatioConstraint.AspectRatio على 5.
أنشئ حاوية لتخزين مجموعات عناصر واجهة المستخدم.
1. أدخل إطارًا في Component.
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. اختر التسمية الجديدة، ثم في نافذة الخصائص،
  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. حدد التسمية الجديدة، ثم في نافذة Properties،
  1. قم بإزالة قيمة Image الافتراضية.
  2. اضبط AnchorPoint على 0.5, 1 لتعيين نقطة الأصل للتسمية في أسفل منتصفها (50% من اليسار إلى اليمين للتسمية، و100% من الأعلى إلى الأسفل للتسمية).
  3. اضبط BackgroundColor على 0, 0, 0 لجعل التسمية سوداء.
  4. اضبط BackgroundTransparency على 0.3 لتقليل شفافية التسمية بنسبة 30%، ومطابقة جميع عناصر واجهة المستخدم السوداء في اللعبة.
  5. اضبط Position على {0.5, 0},{1, 0} لتعيين التسمية في أسفل منتصف الإطار (50% من اليسار إلى اليمين للإطار الأب، و100% من الأعلى إلى الأسفل للإطار الأب).
  6. اضبط Size على {1, 0},{0.77, 0} لتوسيع منطقة التسمية إلى المساحة أسفل الموجه (100% أفقيًا و77% عموديًا من الإطار الأب).
3. قم بتدوير زوايا الحاوية.
  1. أدخل كائن UICorner في التسمية.
  2. حدد كائن الزاوية الجديد، ثم في نافذة Properties، اضبط CornerRadius على 0.075, 0 لتدوير الزوايا.
أنشئ الحاوية لأزرار البازوكا الخاصة بك.
1. أدخل Frame في التسمية من الخطوة 4.
2. حدد الإطار الجديد، ثم في نافذة Properties،
  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.
أنشئ حشوة لجميع أزرار البازوكا المستقبلية.
1. أدخل كائن UIListLayout في الإطار من الخطوة 5.
2. حدد كائن التخطيط الجديد، ثم في نافذة Properties،
  1. اضبط Padding على 0.035, 0 لتوفير مساحة بين جميع الأزرار المستقبلية.
  2. اضبط FillDirection على Horizontal بحيث يتم عرض كل زر بجانب الآخر.
  3. اضبط كل من HorizontalAlignment وVerticalAlignment على Center بحيث يتماشى كل زر مع منتصف الآخر.
أنشئ زر التنقل الأيسر.
1. أدخل كائن ImageButton في ImageLabel من الخطوة 4.
2. حدد الزر الجديد، ثم في نافذة Properties،
  1. قم بإزالة قيمة Image الافتراضية.
  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. حدد كائن الزاوية الجديد، ثم في نافذة Properties، اضبط CornerRadius على 0.1, 0 لتدوير الزوايا.
4. أدخل كائن ImageLabel في الزر.
5. حدد التسمية الجديدة، ثم في نافذة Properties،
  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. حدد الزر المكرر، ثم في نافذة Properties،
  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. حدد الزر الجديد، ثم في نافذة Properties،
  1. قم بإزالة قيمة Image الافتراضية.
  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. حدد كائن الزاوية الجديد، ثم في نافذة Properties، اضبط CornerRadius على 0.2, 0 لتدوير الزوايا.
4. أدخل كائن TextLabel في الزر حتى تتمكن من عرض دعوة للعمل.
5. حدد التسمية الجديدة، ثم في نافذة Properties،
  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. حدد الزر الجديد، ثم في نافذة Properties،
  1. قم بإزالة قيمة Image الافتراضية.
  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، ثم في نافذة Properties، اضبط CornerRadius على 0.05, 0 لتدوير الزوايا.
6. أدخل ImageLabel في BlasterButtonPrefab.
7. حدد التسمية الجديدة، ثم في نافذة Properties،
  1. قم بإزالة معرف الأصل الافتراضي داخل خاصية Image. تقوم البرامج النصية في الخطوة 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.
في نافذة العرض، انقل الزر إلى حيث يستقر إبهام اللاعب بشكل طبيعي حتى تتمكن من الحصول على إحساس بصري بما سيبدو عليه الزر على جهاز اللاعب، ثم في نافذة Properties،
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.
حدد Frame الجديد، ثم في نافذة Properties،
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. حدد التسمية الجديدة، ثم في نافذة Properties،
  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. حدد القيد الجديد، ثم في نافذة Properties، اضبط AspectRatio على 13.78.
أنشئ الصندوق لصورة اللاعب.
1. أدخل ImageLabel في PlayerDisplay.
2. حدد التسمية الجديدة، ثم في نافذة Properties،
  1. قم بإزالة معرف الأصل الافتراضي داخل خاصية Image. تقوم البرامج النصية في الخطوة 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، ثم في نافذة Properties، اضبط CornerRadius على 0.05, 0 لتدوير الزوايا قليلاً.
أنشئ التسمية النصية لاسم اللاعب.
1. أدخل كائن TextLabel في PlayerDisplay.
2. حدد التسمية الجديدة، ثم في نافذة Properties،
  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. حدد التسمية الجديدة، ثم في نافذة Properties،
    
    اضبط 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.
    
    في نافذة Properties، انتقل إلى قسم Attributes، ثم انقر على أيقونة الزائد. تظهر نافذة منبثقة.
    
    في حقل Name، أدخل teamColor.
    
    في قائمة Type المنسدلة، اختر BrickColor.
    
    انقر على زر Save.
    
    اضبط سمة teamColor الجديدة على Mint.
  2. أدخل UIAspectRatioConstraint في TeamAIcon لضمان بقاء نسبة عرض إلى ارتفاع التسمية وعناصر واجهة المستخدم الفرعية كما هي بغض النظر عن حجم شاشة اللاعب.
  3. أنشئ الأيقونة.
    
    أدخل ImageLabel في TeamAIcon.
    
    حدد التسمية الجديدة، ثم في نافذة Properties،
    
    اضبط 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 المكرر، ثم في نافذة Properties،
    
    اضبط BackgroundColor3 على 255, 170, 255 لتعيين لون خلفية التسمية إلى الوردي.
    
    اضبط Name على TeamBIcon.
    
    اضبط سمة teamColor على Carnation Pink.
    
    حدد الطفل المكرر Icon من TeamBIcon، ثم في نافذة Properties، اضبط 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)

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

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

لإعادة إنشاء شاشة حقل القوة بدقة داخل لعبة الليزر التجريبية:

أدخل ImageLabel في كائن ForceFieldGui ScreenGui.
1. في نافذة Explorer، انتقل إلى خدمة StarterGui.
2. مرر فوق كائن ForceFieldGui الفرعي، ثم انقر على أيقونة ⊕. تظهر قائمة سياقية.
3. من القائمة السياقية، أدخل 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)

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

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

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

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

لإعادة إنشاء شاشة إعادة الظهور بدقة داخل لعبة الليزر التجريبية:

أنشئ لافتة معلومات مركزية.
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 على إعادة الظهور....
  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 على تم وضع علامة - أنت خارج!.
  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 بشكل حصري، مما يعطل تلقائيًا شاشة إعادة الظهور. لمزيد من المعلومات حول هذه الشروط، راجع التعامل مع حالة العميل من منهج برمجة اللعب.

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)

	-- إخفاء جميع واجهات المستخدم أثناء وجودهم في اللوبي
	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 وفقًا لسياق عناصر واجهتها الفرعية.
كرر هذه العملية لكل عنصر واجهة تحتاج إلى عرضه على سطح جزء في الفضاء ثلاثي الأبعاد.

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

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

لإعادة إنشاء مقياس التبريد بدقة داخل لعبة الليزر التجريبية:

أنشئ جزءًا ليحتوي على كائن 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 in 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
		-- تحديث إلى CFrame الخاص بالنموذج بالنسبة لموقع الكاميرا و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 وفقًا لسياق عناصر واجهتها الفرعية.
كرر هذه العملية لكل عنصر واجهة تحتاج إلى عرضه فوق رؤوس اللاعبين.

مؤشر الفريق

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

لإعادة إنشاء مؤشر الفريق بدقة داخل لعبة الليزر التجريبية:

أدخل كائن BillboardGui في نموذج مؤقت.
1. من علامة التبويب Home أو Avatar في شريط الأدوات، انقر على Character.
2. اختر من الخيارات المتاحة. تستخدم العينة نوع نموذج R15، وشكل جسم أنثوي، وشخصية Rthro. يظهر النموذج في كل من عرض 3D وفي نافذة 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.
ارجع إلى البرنامج النصي التالي في 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()

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

مؤشر وضع علامة

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

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

أدخل كائن BillboardGui في نموذج مؤقت حتى تتمكن من تصور التغييرات في كل خطوة من العملية.
1. من علامة التبويب Home أو Avatar في شريط الأدوات، انقر على Character.
2. اختر من الخيارات المتاحة. تستخدم العينة نوع نموذج R15، وشكل جسم ذكوري، وشخصية Rthro. يظهر النموذج في كل من عرض 3D وفي نافذة Explorer تحت اسم Rig.
3. في نافذة Explorer، انتقل إلى كائن Head الفرعي للنموذج، ثم انقر على أيقونة ⊕. تظهر قائمة سياقية.
4. من القائمة السياقية، أدخل كائن BillboardGui.
  
  1. اختر BillboardGui الجديدة، ثم في نافذة الخصائص،
5. اضبط LightInfluence على 0 لمنع الضوء البيئي من التأثير على لون المؤشر.
6. اضبط Name على TaggedOutIndicatorGuiPrefab.
7. اضبط Size على {3, 0},{0.5, 0} لتوسيع المساحة لعلامة.
8. اضبط StudsOffset على 0, 3.25, 0 لوضعها فوق رأس اللاعب.
أدخل كائن ImageLabel في TaggedOutIndicatorGuiPrefab.
اختر العلامة الجديدة، ثم في نافذة الخصائص،
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.
اختر العلامة الجديدة، ثم في نافذة الخصائص،
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. قم بتمكين 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)

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

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