محرر الأنماط

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

يمكنك الوصول إلى محرر الأنماط عبر علامة واجهة المستخدم.

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

توكنات الأنماط

تمثل التوكنات، المعرفة من خلال السمات لورقة توكن StyleSheet، متغيرات خصائص واجهة المستخدم التي يمكن استخدامها عبر الأنماط والمكونات؛ على سبيل المثال، قد يكون هناك لون شائع لـ Frame.BackgroundColor3، وTextLabel.TextColor3، وUIStroke.Color. التوكنات قابلة للمقارنة مع متغيرات CSS.

1. إنشاء ورقة توكن جديدة:

   1. في العمود الأيسر من محرر الأنماط، مرر فوق Tokens، انقر على ⊕، واختر New Token StyleSheet.
   2. أعد تسمية الورقة الجديدة إلى TokenSheet.

   

2. مع تحديد ورقة التوكن الجديدة، قم بإنشاء عدة توكنات من خلال النقر على Add a Token… في اللوحة الرئيسية. سيتم استخدام هذه التوكنات في جميع أنحاء هذا الدليل لكل من القواعد والموضوعات.

   

   اسم التوكن	النوع	القيمة
   Gold	Color3	#ffcc00
   Magenta	Color3	#ff0099
   Orange	Color3	#dd6030
   Oswald	Font	Oswald
   Rad20	UDim	0, 20
   RectL	UDim2	0, 300, 0, 160
   SquareL	UDim2	0, 200, 0, 200
   Text24	number	24
   Text32	number	32

   

أوراق التصميم

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

يتم إنشاء ورقة تصميم مسبقة التهيئة تُسمى StyleSheet عبر زر إنشاء تصميم. تحتوي على قواعد الفئة للأشياء الشائعة في واجهة المستخدم مثل Frame وTextLabel. كما تحتوي على حالتين من StyleDerive التي تشتق (ترث) التوكنات والأنماط من ورقة الأنماط الأساسية لاستخدامها في تكوينات التنسيق المخصصة الخاصة بك.

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

1. مرر فوق StarterGui في مستكشف وأدخل ScreenGui.

2. تأكد من ظهور مثيل جديد من StyleLink تحت ScreenGui مع خاصية StyleSheet الخاصة بها مضبوطة على ورقة التصميم StyleSheet.

   

   

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

قواعد الأنماط

تطبق قواعد الأنماط على كل مثيل يتطابق مع تعريف Selector للقواعد لمطابقة الخصائص مثل اسم الفئة، ووسم المثيل، وعلاقات التسلسل الهرمي. على مستوى عالٍ، تعمل مطابقة المثيل والتعديل عبر تعريف Selector للقواعد من خلال:

• محددات فئة Roblox التي تستهدف جميع مثيلات فئة واجهة المستخدم المعطاة، على سبيل المثال Frame، وImageLabel، وTextButton، إلخ.
• محددات وسم المثيل التي تستهدف كائنات واجهة المستخدم المحددة الموسومة من خلال CollectionService.
• معدلات المثيل المطبقة من خلال UIComponents الوهمية مثل UICorner أو UIStroke.
• محددات حالة GuiObject التي تتوافق مع واحدة من قيم Enum.GuiState الأربعة مثل Hover.
• اختيار اسم المثيل وفقًا لقيمة Instance.Name لكائن واجهة المستخدم.

قاعدة الفئة

تستهدف محددات الفئة جميع مثيلات فئة واجهة المستخدم المعطاة. يقوم إعداد القاعدة التالية بتنسيق جميع Frames بلون خلفية وحجم موحد.

1. في العمود الأيسر من محرر الأنماط، حدد Frame في فرع عناصر واجهة المستخدم.

   

2. اربط توكنين تم إنشاؤهما مسبقًا بقواعد الأنماط إلى خاصيتين من Frame:

   الخاصية	توكن النمط
   BackgroundColor3	$Magenta
   Size	$SquareL

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

   

   

3. أدخل Frame جديدة في ScreenGui التي قمت بإنشائها وربطها سابقًا. يجب أن تنطبق الأنماط التي قمت بتعريفها تلقائيًا عليها.

   

قاعدة الوسم

تستهدف محددات الوسم المثيل كائنات واجهة المستخدم المحددة الموسومة من خلال CollectionService. يقوم إعداد القاعدة التالية بتنسيق TextButton الموسوم كـ ButtonPrimary بلون خلفية مخصص، وخط، وحجم نص.

1. في العمود الأيسر من محرر الأنماط، مرر فوق ورقة StyleSheet، انقر على زر ⋮ وانتقل إلى جديد ⟩ وسم.

   

2. أعد تسمية قاعدة الوسم الجديدة إلى .ButtonPrimary (لاحظ النقطة السابقة).

   

3. اربط ثلاثة توكنات تم إنشاؤها مسبقًا بقواعد الأنماط إلى ثلاث خصائص من TextButton:

   الخاصية	توكن النمط
   BackgroundColor3	$Gold
   FontFace	$Oswald
   TextSize	$Text32

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

   

   

4. أدخل TextButton جديدة في ScreenGui التي قمت بإنشائها وربطها سابقًا ووسمها كـ ButtonPrimary. اختصار مريح هو كما يلي:

   1. تأكد من تحديد TextButton الجديدة في مستكشف.
   2. مع تحديد قاعدة الوسم .ButtonPrimary في العمود الأيسر من محرر الأنماط، انقر على تطبيق الوسم في اللوحة الرئيسية. يجب أن تنطبق الأنماط التي قمت بتعريفها تلقائيًا على الزر.

   

   

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

تطبق محددات المعدل على UIComponents الوهمية مثل UICorner أو UIStroke لتنسيق كائن بشكل أكبر. يقوم إعداد القاعدة التالية بتنسيق TextLabel بحجم نص مخصص وزوايا مستديرة.

1. في العمود الأيسر من محرر الأنماط، حدد TextLabel في فرع عناصر واجهة المستخدم.

   

2. اربط توكن تم إنشاؤه مسبقًا بقواعد الأنماط إلى خاصية TextSize:

   1. انقر على إضافة خاصية… في اللوحة الرئيسية واختر خاصية TextSize. تذكر أنه يمكنك كتابة كلمات رئيسية للعثور على الخصائص بشكل أسرع في قائمة السحب.
   2. بدلاً من إدخال قيمة ثابتة، انقر على زر ⋮ واختر ربط التوكن.
   3. انقر على $ الذي يظهر في حقل القيمة واختر توكن $Text32.

   

   

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

1. في العمود الأيسر، مرر فوق TextLabel، انقر على زر ⋮ وانتقل إلى جديد ⟩ مثيل زائف ⟩ UICorner.

   

   يظهر مثيل UICorner زائف جديد تحت عنصر TextLabel في العمود الأيسر.

   

2. مع تحديد مثيل UICorner الجديد في العمود الأيسر، اربط توكن تم إنشاؤه مسبقًا بقواعد الأنماط إلى خاصية CornerRadius:

   1. انقر على إضافة خاصية… في اللوحة الرئيسية واختر خاصية CornerRadius.
   2. بدلاً من إدخال قيمة ثابتة، انقر على زر ⋮ واختر ربط التوكن.
   3. انقر على $ الذي يظهر في حقل القيمة واختر توكن $Rad20.

   

3. أدخل TextLabel جديدة في ScreenGui التي قمت بإنشائها وربطها سابقًا. يجب أن تنطبق الأنماط التي قمت بتعريفها تلقائيًا عليها.

   

قاعدة الحالة

تتوافق محددات حالة GuiObject مع واحدة من قيم GuiState الأربعة مثل Hover، مما يتيح لك تكوين تغييرات الأنماط تلقائيًا لحالات التفاعل. يقوم إعداد القاعدة التالية بإنشاء حالة تمرير بتدوير قدره -4 درجات لجميع ImageButtons.

1. في العمود الأيسر من محرر الأنماط، حدد ImageButton في فرع عناصر واجهة المستخدم.

   

2. انقر على زر ⋮ وانتقل إلى جديد ⟩ GuiState ⟩ Hover.

   

   يظهر مثيل Hover جديد تحت عنصر ImageButton في العمود الأيسر.

   

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

4. أدخل -4 في حقل قيمة الخاصية.

   

5. أدخل ImageButton جديدة في ScreenGui التي قمت بإنشائها وربطها سابقًا. عندما تمرر فوق الزر في واجهة العرض، يجب أن يدور 4 درجات عكس اتجاه عقارب الساعة.

   

استعلامات الأنماط

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

الاستعلامات المدمجة

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

توضح الخطوات التالية كيفية إنشاء استعلامات مدمجة لـ TextLabel للتعامل مع أحجام عرض Small، وMedium، وLarge.

1. في العمود الأيسر من محرر الأنماط، مرر فوق TextLabel، انقر على زر ⋮ وانتقل إلى جديد ⟩ StyleQuery ⟩ Builtin ⟩ ViewportDisplaySize.

   

   ينشئ هذا مجلد استعلامات تحت قاعدة TextLabel تحتوي على ثلاث قواعد استعلام:

   • @ViewportDisplaySizeLarge — تحديد الخصائص التي تنطبق عندما يكون العرض Large.
   • @ViewportDisplaySizeMedium — تحديد الخصائص التي تنطبق عندما يكون العرض Medium.
   • @ViewportDisplaySizeSmall — تحديد الخصائص التي تنطبق عندما يكون العرض Small.

   

2. انقر على إضافة خاصية… تحت كل قاعدة استعلام واضبط سلسلة Text المحددة التي يجب عرضها عندما يكون هذا الاستعلام نشطًا:

   قاعدة الاستعلام	الخاصية	القيمة
   @ViewportDisplaySizeLarge	Text	نص كبير
   @ViewportDisplaySizeMedium	Text	نص متوسط
   @ViewportDisplaySizeSmall	Text	نص صغير

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

   1. أدخل TextLabel جديدة في ScreenGui.

   2. غير الجهاز في محاكي الجهاز لرؤية النص يتغير في الوقت الحقيقي.

      الحجم	أمثلة المحاكاة
      Large	PS5، PS4، Xbox One
      Medium	متوسط لابتوب، HD 720
      Small	iPhone XR، iPad الجيل السابع

استعلام مخصص

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

1. في العمود الأيسر من محرر الأنماط، مرر فوق TextLabel، انقر على زر ⋮ وانتقل إلى جديد ⟩ StyleQuery ⟩ Custom.

   

   تؤدي هذه الخطوة إلى إنشاء مجلد استعلامات تحت قاعدة TextLabel تحتوي على عنصرين مرتبطين:

   • قاعدة ::StyleQuery المثيلة حيث تحدد الشروط.
   • قاعدة @StyleQuery حيث تحدد الخصائص التي يجب تطبيقها عندما يتم استيفاء تلك الشروط.

   

2. حدد قاعدة TextLabel الأصلية في اللوحة الرئيسية وحدد الخصائص الافتراضية التالية:

   الخاصية	القيمة
   BackgroundColor3	$Magenta
   Text	نص افتراضي

3. حدد قاعدة ::StyleQuery في اللوحة الرئيسية، انقر على إضافة شرط…، وقم بتكوين ما يلي:

   الشرط	القيمة
   MinSize	400, 0

   راجع StyleQuery.IsActive كمرجع للشروط الأخرى المتاحة من خلال قاعدة ::StyleQuery.

4. حدد قاعدة @StyleQuery في اللوحة الرئيسية واضبط الخصائص التي يجب تطبيقها عندما يكون الاستعلام نشطًا:

   الخاصية	القيمة
   BackgroundColor3	$Gold
   Text	نص كبير

للتحقق من الاستعلام، يمكنك تغيير حجم TextLabel يدويًا في واجهة العرض.

1. أدخل TextLabel جديدة في ScreenGui.

2. اضبط عرضها لرؤية تبديل النمط في الوقت الحقيقي.

   عرض 0–400 بكسلعرض أكثر من 400 بكسل

   بينما يكون عرض TextLabel أصغر، لا يتم استيفاء شرط MinSize ويستخدم التسمية لون الخلفية الافتراضي والنص.

   

انتقالات الأنماط

تتيح انتقالات الأنماط، القابلة للمقارنة مع انتقالات CSS، لك أن تقوم بتغيير قيم الخصائص على مدى فترة محددة.

الافتراضي

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

1. حدد TextButton في فرع عناصر واجهة المستخدم ثم، في اللوحة الرئيسية، أضف ثلاث خصائص جديدة بالقيم التالية:

   الخاصية	القيمة
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

2. مرر فوق صف TextButton الأصل، انقر على زر ⋮ وانتقل إلى إدراج ⟩ انتقال.

   

   يتم إدراج انتقال افتراضي قدره 1, Quad, Out, 0 مباشرة تحت قاعدة TextButton، مما يشير إلى انتقال مدته 1 ثانية، أسلوب التخفيف Quad، اتجاه التخفيف Out، ولا تأخير.

   

3. مرر فوق صف TextButton الأصل، انقر على زر ⋮ وانتقل إلى جديد ⟩ GuiState ⟩ Hover.

   

4. بالنسبة للمعدل الجديد Hover، أضف خاصيتين جديدتين كـ أهداف لحالة التمرير.

   الخاصية	القيمة
   BackgroundColor3	#33AAFF
   Rotation	-5

   

5. أدخل TextButton جديدة في ScreenGui التي قمت بإنشائها وربطها سابقًا. عندما تمرر فوق الزر في واجهة العرض، يجب أن يزداد سطوعه تدريجيًا ويدور 5 درجات عكس اتجاه عقارب الساعة.

   

مرتبط بالتوكن

لإعادة استخدام سلوكيات الانتقال عبر قواعد متعددة، يمكنك تعريف توكنات تمثل نوع البيانات TweenInfo. يقوم إعداد القاعدة التالية بإنشاء حالة تمرير لتغيير جميع TextButtons من وإلى دوران قدره -5 درجات ولون خلفية أفتح.

1. إذا لم تكن قد قمت بذلك بالفعل، أنشئ ورقة توكن تُسمى TokenSheet.

   

2. مع تحديد ورقة التوكن الجديدة، أنشئ توكنين جديدين من خلال النقر على إضافة توكن… في اللوحة الرئيسية.

   اسم التوكن	النوع	معلمات التخفيف
   CubicOut	TweenInfo	Duration = 1.25 EasingStyle = Cubic EasingDirection = Out Delay = 0
   QuadInOut	TweenInfo	Duration = 0.5 EasingStyle = Quad EasingDirection = InOut Delay = 0

   

3. حدد TextButton في فرع عناصر واجهة المستخدم ثم، في اللوحة الرئيسية، أضف ثلاث خصائص جديدة بالقيم التالية:

   الخاصية	القيمة
   AutoButtonColor	false
   BackgroundColor3	#335FFF
   Rotation	0

   

4. بالنسبة لكل خاصية جديدة باستثناء AutoButtonColor، مرر فوق صفها، انقر على زر ⋮ واختر إدراج ⟩ انتقال.

   

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

   

   انتقال الخاصية	توكن الانتقال
   BackgroundColor3	$CubicOut
   Size	$QuadInOut

   

6. مرر فوق صف TextButton الأصل، انقر على زر ⋮ وانتقل إلى جديد ⟩ GuiState ⟩ Hover.

   

7. بالنسبة للمعدل الجديد Hover، أضف خاصيتين جديدتين كـ أهداف لحالة التمرير.

   الخاصية	القيمة
   BackgroundColor3	#33AAFF
   Rotation	-5

   

8. أدخل TextButton جديدة في ScreenGui التي قمت بإنشائها وربطها سابقًا. عندما تمرر فوق الزر في واجهة العرض، يجب أن يزداد سطوعه تدريجيًا ويدور 5 درجات عكس اتجاه عقارب الساعة.

   

موضوعات الأنماط

تتكون موضوعات الأنماط من مجموعات من التوكنات المحددة التي يمكن تبديلها، على سبيل المثال، توكنات الألوان التي تحدد "موضوع فاتح" و"موضوع داكن".

إنشاء الموضوع

للتوسع، يتم تنظيم الموضوعات في مجلدات. بينما قد يكفي مجلد واحد لمعظم الأغراض، يمكنك تنظيم الموضوعات في مجلدات مثل "الألوان" أو "الخطوط" إذا رغبت في ذلك.

1. إنشاء مجلد موضوع جديد:

   1. في العمود الأيسر من محرر الأنماط، مرر فوق Themes، انقر على ⊕، واختر New Theme.
   2. أعد تسمية عنصر المجلد الجديد إلى عام.

   

2. إنشاء ورقة نمط موضوع جديدة:

   1. مرر فوق المجلد عام الجديد، انقر على زر ⋮ واختر New Theme StyleSheet.
   2. أعد تسميتها إلى ThemeA.

   

توكنات الموضوع

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

مع تحديد ThemeA في العمود الأيسر من محرر الأنماط:

1. اربط ثلاثة توكنات تم إنشاؤها مسبقًا بقواعد الأنماط إلى ثلاثة توكنات جديدة للموضوع:

   توكن الموضوع	توكن النمط
   BackColor	$Gold
   ButtonFont	$Oswald
   ButtonTextSize	$Text32

   1. انقر على إضافة توكن… في اللوحة الرئيسية وأدخل اسم توكن الموضوع.
   2. انقر على $ الذي يظهر في حقل القيمة واختر توكن النمط المرتبط.

   

2. في العمود الأيسر من محرر الأنماط، حدد TextButton في فرع عناصر واجهة المستخدم.

   

3. اربط توكنات الموضوع إلى ثلاث خصائص جديدة من TextButton:

   الخاصية	توكن الموضوع
   BackgroundColor3	$BackColor
   FontFace	$ButtonFont
   TextSize	$ButtonTextSize

   1. انقر على إضافة خاصية… في اللوحة الرئيسية واختر الخاصية اللازمة.
   2. بدلاً من إدخال قيمة ثابتة، انقر على زر ⋮ واختر ربط التوكن.
   3. انقر على $ الذي يظهر في حقل القيمة واختر توكن الموضوع المناسب.

   

   عند ربط توكنات الموضوع، ابحث عن $[Token] in ThemeA في التمرير العلوي لمعرفة أن التوكن قادم من الموضوع وليس من ورقة التوكن العالمية (تذكر أن الموضوع يستمد بالفعل التوكنات العالمية).

   

تكرار الموضوع

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

1. في العمود الأيسر من محرر الأنماط، مرر فوق موضوع ThemeA، انقر على زر ⋮ واختر تكرار.

2. أعد تسمية الموضوع المكرر إلى ThemeB.

   

3. اربط اثنين من توكنات الموضوع إلى توكنات نمط مختلفة:

   توكن الموضوع	توكن النمط
   BackColor	$Magenta
   ButtonTextSize	$Text24

   1. إلى يمين حقل قيمة الخاصية، انقر على زر ⋮ واختر فصل التوكن.
   2. انقر على ⋮ مرة أخرى واختر ربط التوكن.
   3. في حقل قيمته، انقر على $ واختر توكن نمط المرتبط الجديد.

   

تبديل الموضوع

بمجرد أن يكون لديك مواضيع متعددة، يمكنك التبديل بينها عبر مجلد الموضوع، أو عبر نص كما هو موضح في SetDerives().

1. في العمود الأيسر من محرر الأنماط، حدد المجلد عام في فرع الموضوعات.

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

   ThemeAThemeB