إنشاء عدادات HUD

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

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

باستخدام محطة الفضاء الخطرة كنقطة انطلاق و أسس واجهة المستخدم - عداد HUD كمرجع مكتمل، توضح هذه الدروس:

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

تمكين محاكي الأجهزة

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

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

1. افتح قالب محطة الفضاء الخطرة في الاستوديو.

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

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

   

إنشاء حاوية الشاشة

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

لإدراج ScreenGui فارغ:

1. في نافذة استكشاف، ابحث عن حاوية StarterGui.

   

2. مرر فوق الحاوية، انقر على زر ⊕، وأدخل ScreenGui.

   

3. أعد تسمية الحاوية الجديدة إلى HUDContainer لتعكس غرضها.

   

استخدم المناطق الآمنة

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

لضمان رؤية اللاعبين والوصول إلى جميع واجهة المستخدم بدون عوائق، توفر Roblox خاصية ScreenInsets التي تتحكم في المساحات الآمنة لمحتويات ScreenGui. كل كائن واجهة مستخدم تقوم بوضعه داخل ScreenGui يكون نسبيًا لحدود المساحة.

بينما يضمن الإعداد الافتراضي لـ CoreUISafeInsets أن تبقى جميع كائنات واجهة المستخدم بعيدًا عن واجهة Roblox وقطع الأجهزة، قد يكون DeviceSafeInsets خيارًا أفضل للاستفادة من مساحة الشاشة المحدودة، كما هو موضح أدناه.

1. في نافذة استكشاف، اختر HUDContainer.

   

2. في نافذة الخصائص، اضبط خاصية ScreenInsets على DeviceSafeInsets.

   

تعيين الحشوة الجانبية

مع تعيين ScreenInsets إلى DeviceSafeInsets، يمكن الآن تمديد المحتوى مباشرة إلى الحافة العلوية المادية للشاشة. ومع ذلك، يمكن أن تساعد كمية صغيرة من الحشوة على دفع عداد الصحة (وغيرها من العناصر داخل الحاوية) قليلاً بعيدًا عن حواف الشاشة للحصول على مظهر أكثر نظافة ولمنع قصها.

إحدى الطرق لتطبيق الحشوة على حاوية واجهة المستخدم هي من خلال إدراج مُعدّل UIPadding:

1. أدخل مُعدّل UIPadding في HUDContainer.

   

2. مع تحديد كائن UIPadding الجديد، أدخل قيمة 0, 16 لجميع حواف الحاوية (PaddingBottom, PaddingLeft, PaddingRight, PaddingTop). وهذا يطبق حشوة بقدر 16 بكسل حول الحاوية، بغض النظر عن دقة الشاشة.

   

بناء عداد الصحة

مع تكوين حاوية الشاشة، يمكنك البدء في بناء عداد الصحة باستخدام كائنات واجهة مستخدم Roblox مثل الإطارات وعلامة الصورة.

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

على غرار تطبيقات التصميم مثل Figma وPhotoshop، serves Frame في Roblox كحاوية لكائنات واجهة المستخدم الأخرى. في هذا الدرس، سيكون عداد الصحة بالكامل موجودًا في إطار والد واحد، مما يجعل من السهل إعادة وضعه عبر تخطيطات HUD المختلفة.

1. أدخل Frame في HUDContainer. يظهر الإطار الجديد في الزاوية العلوية اليسرى ككوخ أبيض فارغ.

   

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

2. أعد تسمية مثيل الإطار الجديد إلى MeterBar.

   

وضع الإطار

في Roblox، يتم تمثيل موضع كائن واجهة المستخدم بواسطة مجموعة إحداثيات UDim2 تحتوي على قيم Scale وOffset لكل من المحورين X وY:

• تمثل قيم Scale نسبة مئوية من حجم الحاوية على المحور المقابل، مضافة إلى أي قيم Offset.
• تمثل قيم Offset عدد البكسلات لتحريك العنصر على المحور المقابل، مضافة إلى أي قيم Scale.

للوضع كائن واجهة المستخدم في الزاوية العلوية اليمنى من حاوية الشاشة، فإن استخدام Scale هو النهج الأفضل لأن قيمة X تساوي 1 (100%) تمثل الحافة اليمنى من الحاوية، بغض النظر عن حجم وجودة بكسل الشاشة الفعلي. وبالمثل، تمثل قيمة مقياس Y تساوي 0 (0%) الحافة العلوية من الحاوية.

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

1. في نافذة استكشاف، اختر إطار MeterBar الذي أدخلته سابقًا.

   

2. في نافذة الخصائص، أدخل 1, 0, 0, 0 لـ Position واضغط Enter. سيضيف الاستوديو تلقائيًا الأقواس لتشكيل UDim2 لـ {1, 0},{0, 0}.

3. أدخل 1, 0 للخاصية AnchorPoint. يجب الآن أن يكون الإطار موضعيًا في الزاوية العليا اليمنى من منطقة الأمان الخاصة بالجهاز، مما يجعله بعيدًا قليلًا عن الحافة نتيجة لـ الحشوة.

   

تغيير حجم الإطار

مثل الموضع، يتم تمثيل Size لكائن واجهة المستخدم بواسطة مجموعة إحداثيات UDim2 تحتوي على قيم Scale و Offset لكل من المحورين X وY.

بشكل افتراضي، يكون حجم الإطار الجديد {0, 100},{0, 100}، مما يعني 100 بكسل في كلٍ من العرض (X) والارتفاع (Y). بينما تعتبر قيمة بكسل صارمة مفيدة في بعض الحالات، إلا أن العديد من عناصر واجهة المستخدم تتفاعل بشكل أكثر استجابة عبر شاشات متعددة عند تعيينها كنسبة مئوية من حجم حاوية الشاشة الإجمالية.

1. مع تحديد إطار MeterBar، انتقل إلى نافذة الخصائص واذهب إلى خاصية Size.

2. أدخل قيمة 0.35, 0, 0.05, 0 لتعيين حجم نسبي قدره 35% عرضًا و5% ارتفاعًا بدون أي تباينات بكسل مضافة.

   

تنسيق الإطار

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

1. مع اختيار إطار MeterBar، أدخل 0 في خاصية BackgroundColor3. سيقوم الاستوديو بتحويله تلقائيًا إلى قيمة RGB [0, 0, 0].

2. أدخل 0.75 في خاصية BackgroundTransparency. في Roblox، تتراوح الشفافية من 0 للشفافية الكاملة إلى 1 للشفافية الكاملة، وبالتالي، 0.75 تعادل 25% من الشفافية في تطبيقات أخرى مثل Figma أو Photoshop.

   

3. أدخل كائن UIStroke، وهو مُعدل قوي لواجهة المستخدم يضيف خطًا قابلًا للتعديل إلى الإطار.

   

4. مع تحديد UIStroke الجديد، اضبط الخصائص التالية:

   • Thickness = 3
   • Transparency = 0.25 (75% غير شفاف)

   

لإكمال تنسيق إطار العداد، يمكنك جعل الزوايا مستديرة لتكون على شكل "حبة" بدلاً من مستطيل حاد.

1. أدخل مثيل UICorner في إطار MeterBar.

   

2. مع تحديد مُعدل UICorner الجديد، اضبط CornerRadius إلى 0.5, 0. استخدم قيمة القياس بقيمة 0.5 (50%) بدلاً من قيمة بكسل لكونها مريحة بشكل خاص لشريط العداد لأنها تضمن منحنى مستدير تمامًا بغض النظر عن ارتفاع أو عرض الحاوية.

   

إنشاء الملء الداخلي

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

1. أدخل Frame كطفل في إطار MeterBar.

2. أعد تسمية مثيل الإطار الجديد إلى InnerFill.

   

3. مع اختيار InnerFill، اضبط الخصائص التالية:

   • AnchorPoint = 0, 0.5 (حافة اليسار والمحور العمودي في المنتصف)
   • Position = 0, 0, 0.5, 0
   • Size = 1, 0, 1, 0

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

   

4. لمطابقة الشكل "الحبة" للإطار الوالد، أدخل UICorner إضافي في InnerFill.

   

5. مع تحديد مُعدل UICorner الجديد، اضبط خاصية CornerRadius إلى 0.5, 0 لتطابق الشكل "الحبة" للإطار الوالد MeterBar.

   

6. لتمثيل أن العداد الكامل يدل على صحة جيدة، اختر InnerFill واضبط خاصية BackgroundColor3 إلى [0, 225, 50] (في مهمة لاحقة، سوف تكتب هذا اللون ليتغير بناءً على الصحة الفعلية).

   

إضافة الأيقونة

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

1. أدخل ImageLabel في إطار MeterBar. تتيح لك هذه الكائن تطبيق رفع صورة ثنائية الأبعاد تم تحميلها كزخرفة إلى Roblox.

2. أعد تسمية المثيل الجديد إلى Icon.

   

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

   

4. ابحث عن خاصية Image للأيقونة وأدخل rbxassetid://91715286435585، المرجع لصورة قلب تم تحميلها مسبقًا (إذا رغبت، يمكنك استيراد صورتك الخاصة واستخدام معرف الأصل الخاص بها).

   

5. لضمان بقاء الأيقونة ImageLabel دائمًا بنسبة عرض إلى ارتفاع 1:1، أدخل مُعدل UIAspectRatioConstraint. على الرغم من أن هذه القيود تحتوي على خصائص قابلة للتعديل للتحكم في نسبة العرض إلى الارتفاع، يمكنك ترك القيم الافتراضية كما هي.

   

6. مع اختيار Icon، قم بإنهاء المظهر والموضع بتغيير الخصائص التالية:

   • AnchorPoint = 0.5, 0.5 (ثبات مركزي)
   • BackgroundTransparency = 1 (شفافية 100%)
   • Position = 0, 0, 0.5, 0 (الجانب الأيسر من العداد والمركز العمودي)
   • Size = 2, 0, 2, 0 (200% من الحجم العام لإطار MeterBar، مقيد إلى 1:1 بواسطة UIAspectRatioConstraint)

   

قيود الحجم

بينما يبدو ارتفاع المقياس 0.05 (5%) جيدًا على شاشات الهواتف الحديثة وشاشات الألعاب التي نسبة العرض إلى الارتفاع 16:9 أو أوسع، قد يبدو العداد مرتفعًا قليلاً جدًا على شاشات الأجهزة اللوحية والهواتف القديمة. يمكنك التحقق من ذلك من خلال محاكي جهاز لوحي مثل آيباد الجيل السابع من محاكي الأجهزة.

للحفاظ على ارتفاع شريط العداد أكثر اتساقًا مع الشاشات الأوسع، يمكنك تطبيق UISizeConstraint لوقف الارتفاع الأقصى للبكسل.

1. أدخل UISizeConstraint في إطار MeterBar.

   

2. مع تحديد القيود الجديدة، اضبط خاصية MaxSize على inf, 20 لتقييد ارتفاعه إلى 20 بكسل بينما لا تفرض قيودًا على العرض.

   

الآن، يحتفظ شريط العداد بارتفاع أكثر اتساقًا بين الشاشات العريضة والطويلة.

استبدال عداد الصحة الافتراضي

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

تعطيل العداد الافتراضي

لإيقاف العداد الافتراضي للصحة، ستحتاج إلى استخدام سكريبت عميل (LocalScript) داخل StarterPlayerScripts الذي يستدعي StarterGui:SetCoreGuiEnabled().

1. في نافذة استكشاف، قم بتوسيع الحاوية StarterPlayer وابحث عن حاوية StarterPlayerScripts داخلها.

   

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

   

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

   ألصق الكود التالي داخل سكريبت HideDefaultHealthMeter:

   HideDefaultHealthMeter
   local StarterGui = game:GetService("StarterGui")
   
   -- إخفاء عداد الصحة الافتراضي
   StarterGui:SetCoreGuiEnabled(Enum.CoreGuiType.Health, false)

   تفسير الكود

   الخط	الغرض
   1	يحصل على مرجع لخدمة أساسية الخدمة، StarterGui، التي تمثل نفس الحاوية حيث قمت بإنشاء عداد الصحة المخصص، والتي يتم نسخ محتوياتها إلى حاوية PlayerGui لكل لاعب ينضم إلى التجربة.
   4	يستدعي طريقة الخدمة SetCoreGuiEnabled() ويأمر بإيقاف العد الافتراضي للصحة (false).

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

الاستماع لتغييرات الصحة

تحتوي جميع نماذج الشخصيات الافتراضية في Roblox على فئة Humanoid التي توفر سلوكًا ووظائف خاصة للشخصية، مثل تعيين سرعة المشي/الجري الخاصة بها وإدارة صحتها. تتغير Health على الخادم تتكرر لكل عميل اللاعب ويمكنك اكتشاف هذه التغييرات لتحديث كل من حجم ولون عداد الصحة المخصص.

1. في نافذة استكشاف، ابحث عن حاوية StarterCharacterScripts داخل StarterPlayer.

   

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

   

3. داخل محرر السكريبت لسكريبت UpdateCustomMeter، ألصق الكود التالي:

   UpdateCustomMeter
   local Players = game:GetService("Players")
   
   -- مرجع للاعب المحلي، والشخصية، والإنسان
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- مرجع إلى إطار ملء العداد
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- ألوان تدرج التسلسل (أحمر، برتقالي، أصفر، ليموني، أخضر)
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- دالة للحصول على اللون في تسلسل التدرج من نقطة كسر
   local function getColorFromSequence(fraction: number): Color3
   	-- تعريف لون كل جزء في التدرج يمكن أن يكون بداية و/أو نهاية قسم
   	local numSections = #gradient - 1
   
   	-- يمثل كل جزء قسمًا من 1
   	local sectionSize = 1 / numSections
   
   	-- حدد أي قسم ينتمي إليه الكسر المطلوب
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- احصل على الألوان في بداية ونهاية القسم
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- قم بتطبيع الكسر ليكون رقمًا من 0 إلى 1 داخل القسم
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- تداخل بين البداية والنهاية بناءً على النسبة الطبيعية
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- احسب الصحة الجديدة كنسبة مئوية من الحد الأقصى
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- تعيين العداد إلى أهداف الحجم/اللون الجديدة
   	meterBarInner.Size = UDim2.new(healthFraction, 0, 1, 0)
   	meterBarInner.BackgroundColor3 = getColorFromSequence(healthFraction)
   end
   
   -- استمع لتغييرات صحة الإنسان
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- تحديد (أو إعادة ضبط) حجم/لون العداد وفقًا للصحة الحالية
   onHealthChanged()

   تفسير الكود

   الخطوط	الغرض
   4‑6	يحصل على مراجع لـ Player المحلي، نموذج Character الخاص بهم، وفئة Humanoid داخلها.
   9‑10	يحصل على مرجع إلى كائن ملء العدَّاء InnerFill الذي يجب إعادة تغيير حجمه وإعادة تلوينه عند التغييرات الصحية للشخصية.
   13‑19	يُعلن عن مصفوفة تتكون من خمسة ألوان (أحمر، برتقالي، أصفر، ليموني، أخضر) لإعادة تلوين العداد في نقاط مختلفة؛ على سبيل المثال، الأخضر للصحة 100%، الأصفر 50%، الأحمر 0%، أو يمزج في أي كسر بين النقاط الأساسية.
   22‑41	دالة مساعدة تعيد خلط الألوان بين أي من نقاط لون التدرج.
   43‑50	دالة تتعامل مع أي تغييرات في الصحة. هنا، تحسب الصحة الجديدة كنسبة من MaxHealth للشخصية، وتعيد الحجم InnerFill لتلك النسبة من المقياس، وتعيد تلوينها باللون الذي تم إرجاعه من دالة getColorFromSequence().
   53	الاتصال الرئيسي لحدث الذي يكشف عن تغييرات Health المكررة من الخادم وينادي على دالة onHealthChanged().
   56	لتحديد (أو إعادة ضبط) الحجم/اللون وفقًا للصحة الحالية، يتم استدعاء دالة onHealthChanged() أولًا (عند ظهور الشخصية أو إعادة ظهورها). عادةً، سيكون هذا هو العرض الكامل باللون الأخضر.

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

تحريك شريط العداد

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

1. اذهب إلى علامة التبويب محرر السكريبت لسكريبت UpdateCustomMeter الذي قمت بتعديله سابقًا.

2. حدد جميع الأسطر (CtrlA أو ⌘A) ثم ألصق فوقها (CtrlV أو ⌘V) مع الكود التالي:

   UpdateCustomMeter
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- مرجع للاعب المحلي، الشخصية، والإنسان
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- خصائص الحركة
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- مرجع إلى إطار ملء العداد
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- ألوان تدرج التسلسل (أحمر، برتقالي، أصفر، ليموني، أخضر)
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- دالة للحصول على اللون في تسلسل التدرج من نقطة كسر
   local function getColorFromSequence(fraction: number): Color3
   	-- كل لون في التدرج يحدد بداية و/أو نهاية قسم
   	local numSections = #gradient - 1
   
   	-- كل قسم يمثل جزءًا من 1
   	local sectionSize = 1 / numSections
   
   	-- حدد أي قسم ينتمي إليه الكسر المطلوب
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- احصل على الألوان في بداية ونهاية القسم
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- قم بتطبيع الكسر ليكون رقمًا من 0 إلى 1 داخل القسم
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- تداخل بين البداية والنهاية بناءً على النسبة الطبيعية
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- احسب الصحة الجديدة كنسبة مئوية من الحد الأقصى
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- تحريك شريط العداد إلى أهداف الحجم/اللون الجديدة
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   end
   
   -- استمع لتغييرات صحة الإنسان
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- تحديد (أو إعادة ضبط) حجم/لون العداد وفقًا للصحة الحالية
   onHealthChanged()

   الإضافات/التغييرات الرئيسية

   الخطوط	الغرض
   2	يحصل على مرجع لـ TweenService لتنفيذ وظيفة التحريك داخل السكريبت.
   10	ينشئ منشئ TweenInfo الذي يحدد مدة التحريك، نمط التحريك، و اتجاه التحريك.
   52‑57	بدلاً من تعيين حجم ولون شريط العداد ببساطة كما في الإصدار السابق، يتم إعلان جدول tweenGoal مع الحجم/اللون المستهدف، إنشاء تحريك جديد باستخدام المعلمات tweenInfo و tweenGoal، وتشغيل التحريك الجديد.

إذا قمت بتجربة اللعب الآن، ستلاحظ أن العداد المخصص ينتقل بين كل تغيير في الصحة:

إضافة تأثير الضرر

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

1. افتح محرر السكريبت لسكريبت UpdateCustomMeter الذي قمت بتعديله سابقًا.

2. حدد جميع الأسطر والصق فوقها بالكود التالي:

   UpdateCustomMeter
   local Workspace = game:GetService("Workspace")
   local Players = game:GetService("Players")
   local TweenService = game:GetService("TweenService")
   
   -- مرجع للاعب المحلي، الشخصية، والإنسان
   local player = Players.LocalPlayer
   local character = player.Character
   local humanoid = character:WaitForChild("Humanoid")
   
   -- خصائص الحركة
   local tweenInfo = TweenInfo.new(0.5, Enum.EasingStyle.Exponential, Enum.EasingDirection.Out)
   
   -- متغير لتخزين/تخزين صحة الشخصية
   local cachedHealth = humanoid.Health / humanoid.MaxHealth
   
   -- احصل (أو أنشئ) تأثير تصحيح اللون داخل كاميرا اللاعب
   local colorCorrection = Workspace.CurrentCamera:FindFirstChildWhichIsA("ColorCorrectionEffect") or Instance.new("ColorCorrectionEffect", Workspace.CurrentCamera)
   colorCorrection.Name = "DamageColorEffect"
   
   -- مرجع إلى إطار ملء العداد
   local playerGui = player:WaitForChild("PlayerGui")
   local meterBarInner = playerGui.HUDContainer.MeterBar.InnerFill
   
   -- ألوان تدرج التسلسل (أحمر، برتقالي، أصفر، ليموني، أخضر)
   local gradient = {
   	Color3.fromRGB(225, 50, 0),
   	Color3.fromRGB(255, 100, 0),
   	Color3.fromRGB(255, 200, 0),
   	Color3.fromRGB(150, 225, 0),
   	Color3.fromRGB(0, 225, 50)
   }
   
   -- دالة للحصول على اللون في تسلسل التدرج من نقطة كسر
   local function getColorFromSequence(fraction: number): Color3
   	-- كل لون في التدرج يحدد بداية و/أو نهاية قسم
   	local numSections = #gradient - 1
   
   	-- كل قسم يمثل جزءًا من 1
   	local sectionSize = 1 / numSections
   
   	-- حدد أي قسم ينتمي إليه الكسر المطلوب
   	local sectionStartIndex = 1 + math.clamp(fraction, 0, 1) // sectionSize
   
   	-- احصل على الألوان في بداية ونهاية القسم
   	local sectionColorStart = gradient[sectionStartIndex]
   	local sectionColorEnd = gradient[sectionStartIndex + 1] or sectionColorStart
   
   	-- قم بتطبيع الكسر ليكون رقمًا من 0 إلى 1 داخل القسم
   	local fractionOfSection = math.clamp(fraction, 0, 1) % sectionSize / sectionSize
   
   	-- تداخل بين البداية والنهاية بناءً على النسبة الطبيعية
   	return sectionColorStart:Lerp(sectionColorEnd, fractionOfSection)
   end
   
   local function onHealthChanged()
   	-- احسب الصحة الجديدة كنسبة مئوية من الحد الأقصى
   	local healthFraction = math.max(0, humanoid.Health / humanoid.MaxHealth)
   
   	-- تحريك شريط العداد إلى أهداف الحجم/اللون الجديدة
   	local tweenGoal = {
   		Size = UDim2.new(healthFraction, 0, 1, 0),
   		BackgroundColor3 = getColorFromSequence(healthFraction)
   	}
   	local meterBarTween = TweenService:Create(meterBarInner, tweenInfo, tweenGoal)
   	meterBarTween:Play()
   
   	-- عرض تأثير الضرر إذا كانت الصحة الجديدة أقل من الصحة المخزنة
   	if healthFraction < cachedHealth then
   		-- خزِّن قيمة الصحة الجديدة
   		cachedHealth = healthFraction
   
   		-- قم بضبط تصحيح اللون إلى الأحمر كنقطة بداية قبل التحريك
   		colorCorrection.TintColor = Color3.fromRGB(255, 25, 25)
   		colorCorrection.Saturation = 2.5
   
   		-- أحرك عدو اللون إلى الخلف إلى الأبيض (محايد ولا تغيير لون من الطبيعي)
   		local colorCorrectionTweenGoal = {
   			TintColor = Color3.fromRGB(255, 255, 255),
   			Saturation = 0
   		}
   		local colorCorrectionTween = TweenService:Create(colorCorrection, tweenInfo, colorCorrectionTweenGoal)
   		colorCorrectionTween:Play()
   	end
   end
   
   -- استمع لتغييرات صحة الإنسان
   humanoid.HealthChanged:Connect(onHealthChanged)
   
   -- تحديد (أو إعادة ضبط) حجم/لون العداد وفقًا للصحة الحالية
   onHealthChanged()

   الإضافات/التغييرات الرئيسية

   الخطوط	الغرض
   14	تعيين مرجع مكان مؤقت (cachedHealth) لتتبع مستوى صحة الشخصية بين التغييرات، حتى تتمكن من مقارنة ما إذا كان التغيير أقل (ضرر).
   17‑18	عند ظهور الشخصية الأولية، ينشئ تأثير تصحيح اللون (Class.ColorCorrectionEffect) داخل Camera للاعب، أو يحصل على مرجع لهذه النسخة في إعادة الظهورات التالية. من خلال جعل تأثير معالجة ما بعد العملية تابعًا لكاميرا اللاعب، فإنه ينطبق فقط على شاشتهم المحلية، وليس على كل شاشة لاعب في الخادم.
   68‑83	يبدأ بالتحقق الشرطي للتأكد من أن تغيير الصحة أقل من قيمة cachedHealth، مما يشير إلى الضرر؛ إذا كان الأمر كذلك، يتم ضبط cachedHealth على القيم الجديدة. بعد ذلك، يقوم بضبط تصحيح اللون إلى [255, 25, 25] (باللون الأحمر) مع لون أعلى، ثم يمزج لون الجديد إلى المحايد الأبيض ([255, 255, 255]) من دون أي لون.

إذا قمت بتجربة اللعب الآن، ستلاحظ أن الشاشة تومض باللون الأحمر لفترة قصيرة كلما تعرضت الشخصية للضرر: