محرر الأنماط

محرر الأنماط المدمج هو أداة شاملة تتيح لك إنشاء وإدارة وتطبيق أنماط واجهة المستخدم لألعاب 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 عبر زر Create Design. تحتوي على قواعد الفئة للأشياء الشائعة في واجهة المستخدم مثل Frame وTextLabel. كما تحتوي على حالتين من StyleDerive والتي ترث (تشتق) التوكنات والأنماط من ورقة الأنماط الأساسية لاستخدامها في تكوينات الأنماط المخصصة الخاصة بك.

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

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

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

   

   

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

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

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

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

قاعدة الفئة

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

1. في العمود الأيسر من محرر الأنماط، حدد Frame في فرع UI Elements.

   

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

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

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

   

   

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

   

قاعدة الوسم

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

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

   

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

   

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

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

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

   

   

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

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

   

   

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

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

1. في العمود الأيسر من محرر الأنماط، حدد TextLabel في فرع UI Elements.

   

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

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

   

   

قاعدة الحالة

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

1. في العمود الأيسر من محرر الأنماط، حدد ImageButton في فرع UI Elements.

   

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

   

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

   

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

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

   

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

   

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

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

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

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

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

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

   

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

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

   

2. انقر على Add a Property… تحت كل قاعدة استعلام وقم بتعيين سلسلة Text المحددة التي يجب أن تظهر عندما يكون ذلك الاستعلام نشطًا:

   قاعدة الاستعلام	خاصية	القيمة
   @ViewportDisplaySizeLarge	Text	Large Text
   @ViewportDisplaySizeMedium	Text	Medium Text
   @ViewportDisplaySizeSmall	Text	Small Text

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

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

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

      الحجم	امثله لمحاكاة
      Large	PS5، PS4، Xbox One
      Medium	الكمبيوتر المحمول العادي، HD 720
      Small	آيفون XR، آيباد الجيل السابع

استعلام مخصص

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

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

   

   ينشئ ذلك مجلدات Queries تحت قاعدة TextLabel تحتوي على عنصرين مرتبطين:

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

   

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

   خاصية	القيمة
   BackgroundColor3	$Magenta
   Text	Default Text

3. حدد قاعدة ::StyleQuery في اللوحة الرئيسية، انقر على Add a Condition…، ثم قم بتكوين ما يلي:

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

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

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

   خاصية	القيمة
   BackgroundColor3	$Gold
   Text	Large Text

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

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

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

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

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

   

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

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

الافتراضي

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

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

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

   

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

   

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

   

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

   

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

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

   

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

   

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

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

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

   

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

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

   

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

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

   

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

   

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

   

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

   

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

   

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

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

   

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

   

تيمات الأنماط

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

إنشاء سمة

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

1. إنشاء مجلد سمة جديدة:

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

   

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

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

   

توكنات السمة

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

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

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

   توكن السمة	توكن النمط
   BackColor	$Gold
   ButtonFont	$Oswald
   ButtonTextSize	$Text32

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

   

2. في العمود الأيسر من محرر الأنماط، حدد TextButton في فرع UI Elements.

   

3. اربط توكنات السمة بثلاث خصائص جديدة لـ TextButton:

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

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

   

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

   

تكرار السمة

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

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

2. أعد تسمية السمة المنسوخة إلى ThemeB.

   

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

   توكن السمة	توكن النمط
   BackColor	$Magenta
   ButtonTextSize	$Text24

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

   

تبديل التيمات

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

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

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

   ThemeAThemeB