إنشاء شريط النقاط

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

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

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

إنشاء الإطار

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

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

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

لإعادة إنشاء حاوية الإطار داخل ملف المكان النموذجي Gold Rush:

1. إنشاء كائن ScreenGui لاستيعاب واجهة المستخدم على الشاشة.

   1. في نافذة Explorer، مرر فوق StarterGui وانقر على أيقونة ⊕. سيتم عرض قائمة سياقية.
   2. إدراج ScreenGui.

2. إنشاء حاوية لمكون واجهة المستخدم لشريط النقاط بالكامل.

   1. إدراج Frame في كائن ScreenGui.

      

   2. حدد Frame الجديدة، ثم في نافذة Properties،

      1. اضبط AnchorPoint على 0.5, 0 لتعيين نقطة الأصل الخاصة بالإطار في منتصف الجزء العلوي منه (50% من اليسار إلى اليمين للإطار، و0% من الأعلى إلى الأسفل للإطار).
      2. اضبط BackgroundColor على 0.6 لجعل خلفية الإطار سوداء.
      3. اضبط BackgroundTransparency على 0.6 لجعل خلفية الإطار شبه شفافة.
      4. اضبط Position على {0.5, 0},{0.01, 0} ليكون الإطار بالقرب من منتصف الجزء العلوي من الشاشة (50% من اليسار إلى اليمين للشاشة، و1% من الأعلى إلى الأسفل للشاشة).
      5. اضبط Size على {0.25, 0},{0.08, 0} بحيث يأخذ الإطار جزءًا كبيرًا من منتصف الشاشة لجذب انتباه اللاعب (25% أفقيًا، و8% رأسيًا).
      6. اضبط Name على ScoreBarFrame.

      

3. إضافة قيد إلى الإطار لضمان أن محتوياته قابلة للقراءة دائمًا على شاشات صغيرة.

   1. إدراج كائن UISizeConstraint في ScoreBarFrame.
   2. حدد القيد الجديد، ثم في نافذة Properties، اضبط MinSize على 0, 40 لضمان عدم انكماش الإطار إلى أقل من 40 بكسل رأسيًا.

4. إضافة كائن تخطيط إلى الإطار بحيث يتم ترتيب محتوياته من اليسار إلى اليمين ويتم توسيطها عموديًا داخل محيط الإطار.

   1. إدراج كائن UIListLayout في ScoreBarFrame.
   2. حدد كائن التخطيط الجديد، ثم في نافذة Properties،

      1. اضبط FillDirection على أفقي.
      2. اضبط VerticalAlignment على Centered.

إضافة رمز

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

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

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

1. إدراج كائن ImageLabel في ScoreBarFrame.

   1. في نافذة Explorer، مرر فوق ScoreBarFrame وانقر على أيقونة ⊕. سيتم عرض قائمة سياقية.

   2. إدراج ImageLabel.

      

2. حدد التسمية الجديدة، ثم في نافذة Properties،

   1. اضبط Image على rbxassetid://5673786644 لجعل الرمز تاجًا.

   2. اضبط BackgroundTransparency على 1 لجعل خلفية التسمية شفافة بالكامل.

   3. اضبط LayoutOrder على 1. هذا يضمن بقاء الرمز هو أول GuiObject في الإطار من اليسار إلى اليمين عندما تقوم بإدراج النص في القسم التالي من الدليل.

   4. اضبط Size على {1.25,0},{1,0} لتوسيع منطقة التسمية إلى ما وراء العرض الكامل للإطار.

   5. اضبط SizeConstraint على RelativeYY للحفاظ على نسبة عرض الرمز من خلال تغيير حجم التسمية مع ارتفاع الإطار الأب.

      

إدراج نص النقاط

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

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

لإعادة إنشاء نص النقاط داخل ملف المكان النموذجي Gold Rush:

1. إدراج كائن TextLabel في ScoreBarFrame.

   1. في نافذة Explorer، مرر فوق ScoreBarFrame وانقر على أيقونة ⊕. سيتم عرض قائمة سياقية.

   2. إدراج TextLabel.

      

2. حدد التسمية الجديدة، ثم في نافذة Properties،

   1. اضبط BackgroundTransparency على 1 لجعل خلفية التسمية شفافة بالكامل.

   2. اضبط Size على {1,0},{1,0} لتوسيع التسمية لتغطية كل الإطار (100% أفقيًا و100% رأسيًا من الإطار الأب). تتجاوز التسمية حدود الإطار لأنها تُدفع بواسطة الرمز.

   3. اضبط SizeConstraint على RelativeYY لضمان تغيير حجم التسمية مع ارتفاع الإطار الأب، والحفاظ على نسبة عرض الرمز. هذه الخطوة تجعل أيضًا التسمية مربعة وتحافظ عليها داخل حدود الإطار.

   4. اضبط Font على GothamSSm لتتناسب مع جماليات البيئة.

   5. اضبط Text على 0 ليبدأ النص من الصفر.

   6. اضبط TextColor3 على 255, 200, 100 لتلوين النص بالذهبي.

   7. اضبط TextSize على 30 لجعل النص أكبر على الشاشة.

   8. اضبط TextXAlignment على Left لضمان بقاء نص النقاط بجانب رمز التاج على اليسار بغض النظر عما إذا كانت نقاط اللاعب هي 0، 1,000، أو 1,000,000.

      

اختبار التصميم

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

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

لتمثيل واجهتك على أحجام شاشات متنوعة:

1. من قائمة Test في الاستوديو، قم بتفعيل محاكي الأجهزة.

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

   

3. في قائمة الأجهزة المنسدلة، حدد جهازًا واحدًا على الأقل ضمن أقسام الهاتف، اللوحة، سطح المكتب، والجهاز المنزلي.