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

A HUD or Heads-Up Display is a set of UI elements that are always visible or accessible during gameplay, such as score displays, health meters, and menu buttons. Including a HUD is essential for most games because it displays information that helps players to be successful in their gameplay objectives.

A common HUD element is a health meter with an icon on the left which can be adapted into a timer bar, progress bar, or similar.

Using Hazardous Space Station as a starting place and UI Fundamentals - HUD Meter as a finished reference place, this tutorial demonstrates:

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

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

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

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

1. افتح قالب Hazardous Space Station في الاستوديو.

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

3. من الشريط مباشرة فوق نافذة العرض الرئيسية، اختر محاكاة هاتف مثل iPhone X أو Samsung Galaxy 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.

   

تعيين حواف padding

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

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

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

   

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

   

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

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

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

مماثل لتطبيقات التصميم مثل Figma وPhotoshop، يعمل 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. يجب الآن أن يكون الإطار في الزاوية العلوية اليمنى من منطقة الأمان الخاصة بالجهاز، مع انحراف طفيف عن الحافة نتيجة لـ padding.

   

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

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

للحفاظ على ارتفاع شريط العداد أكثر اتساقًا مع الشاشات الأوسع، يمكنك تطبيق 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	يحصل على مرجع إلى خدمة أساسية service، 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	يحصل على مراجع للاعب المحلي، نموذج Character الخاص به، وفئة Humanoid داخلها.
   9‑10	يحصل على مرجع لكائن InnerFill الخاص بالعداد الذي يجب تغيير حجمه وإعادة تلوينه مع تغير صحة الشخصية.
   13‑19	يعلن عن مصفوفة من خمسة ألوان (أحمر، برتقالي، أصفر، ليموني، أخضر) لإعادة تلوين العداد في نقاط مختلفة؛ على سبيل المثال، الأخضر لصحة 100%، الأصفر لـ 50%، الأحمر لـ 0%، أو مزيج في أي كسر بين النقاط الرئيسية.
   22‑41	دالة مساعدة تعيد اللون الممزوج بين أي من نقاط اللون الرئيسية في التدرج.
   43‑50	دالة تتعامل مع أي تغييرات في الصحة. هنا، تحسب الصحة الجديدة كنسبة مئوية من MaxHealth للشخصية، وتعيد حجم InnerFill إلى تلك النسبة، وتعيد تلوينها إلى اللون الذي تم إرجاعه من دالة getColorFromSequence().
   53	الاتصال الرئيسي للحدث الذي يكشف عن تغييرات Health المكررة من الخادم ويستدعي دالة onHealthChanged().
   56	يستدعي في البداية (عند ظهور الشخصية أو إعادة ظهورها) دالة onHealthChanged() لتعيين حجم ولون InnerFill إلى النسبة الصحيحة. عادةً ما سيكون هذا هو العرض الكامل والأخضر.

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

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

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

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	عند ظهور الشخصية الأولية، ينشئ تأثير تصحيح لون جديد داخل Camera الخاصة باللاعب، أو يحصل على مرجع لنفس المثيل عند إعادة الظهور لاحقًا. من خلال ربط هذا التأثير بعد المعالجة بكاميرا اللاعب، فإنه يطبق فقط على شاشته المحلية، وليس على شاشة كل لاعب على الخادم.
   68‑83	أولاً، يقوم بإجراء فحص شرطي للتأكد من أن تغيير الصحة أقل من قيمة cachedHealth، مما يشير إلى الضرر؛ إذا كان الأمر كذلك، فإنه يحدد cachedHealth إلى القيمة الجديدة. بعد ذلك، يحدد لون تصحيح اللون إلى [255, 25, 25] (أحمر) مع تشبع أعلى، ثم يحرك التلوين إلى الافتراضي من الأبيض المحايد ([255, 255, 255]) بدون تشبع.

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