فن البكسل · مُختبَر
اصنع مجموعة واجهة لعبة بفن البكسل بالذكاء الاصطناعي: أزرار وشريط صحة ولوحة 9-slice
لواجهة اللعبة قواعد لا تعرفها الصورة. فمربع الحوار يُمطّ ليتسع لكل سطر نص، لذلك يجب أن تبقى زواياه سليمة بينما تتكرر حوافه. والزر يتبدّل بين الحالة العادية وحالة التمرير وحالة الضغط، لذلك يجب أن تكون الحالات الثلاث بالحجم نفسه تماماً. وإن لم تكن كذلك، ظهرت خطوط الوصل في مربع النص وقفز الزر.
في 29 سبتمبر 2026 طلبنا من Ciyo Agent (وكيل Ciyo) مجموعة واجهة صغيرة للعبة Mossfall، وهي لعبة غابات متخيَّلة، وقسناها وفق تلك القواعد. بدت الورقة الأولى مكتملة وفشلت في قاعدتين منها. ونجحت الثانية.
اطلب القطع والقواعد معاً
طلبنا أربع قطع بأسلوب واحد: لوحة حوار، وزراً بثلاث حالات، وشريط صحة، وخانة مخزون. وكتبنا قواعد المحرّك في الموجز أيضاً: زوايا متطابقة لتقسيم 9-slice (التقسيم إلى تسع قطع)، وحالة ضغط أدنى ببكسل واحد، ولوحة ألوان محدودة، ودون نص.
صنع الوكيل ورقة واحدة بمقاس 1,152 × 864 باستخدام GPT Image 2.5 Flare مقابل 2 رصيد. وكان في الملف الخام 25,696 لوناً، فاختصرها الوكيل إلى 16 دون تنقيط (dithering) ووضع النسختين كلتيهما على اللوحة.
للعبتي Mossfall بفن البكسل من منظور علوي (أجواء غابة: أخضر الطحالب، وبنّي الخشب الدافئ، ورقّ كريمي)، اصنع مجموعة واجهة بفن البكسل على ورقة واحدة: 1) لوحة مربع حوار بإطار خشبي ورقّ في داخلها، بزوايا مربعة، مصممة لتقسيم 9-slice (الزوايا الأربع كلها متطابقة، وحواف تتكرر بانتظام)؛ 2) زر واحد بثلاث حالات جنباً إلى جنب: عادي، وتمرير (أفتح)، وضغط (منخفض بكسلاً واحداً)؛ 3) إطار شريط صحة أفقي بتعبئة حمراء عند نحو الثلثين؛ 4) خانة مخزون مربعة صغيرة. الأسلوب: بكسلات حادة واضحة على شبكة بكسل صارمة، دون تنعيم للحواف، ودون ضبابية، ودون تدرجات، و16 لوناً على الأكثر، وخلفية داكنة مسطحة. لا نص ولا حروف على أي عنصر.ما الذي قسناه في الورقة الأولى
كان أمر واحد صحيحاً وآخر قريباً من الصحة. غطّت التعبئة الحمراء لشريط الصحة 68.9% من مساره، وهذا قريب من الثلثين اللذين طلبناهما. وكان وجه الزر المضغوط أدنى من العادي بـ 7 بكسلات من بكسلات المصدر؛ وبالمعدل الذي قاسه الوكيل لاحقاً، أي نحو 3.5 بكسل مصدر لكل بكسل لعبة، فهذا نحو بكسلَي لعبة، لا بكسل واحد.
وأمران آخران كانا سيتعطلان في اللعبة. كان عرض حالات الزر الثلاث 273 و266 و271 بكسل، فسيقفز الزر حين تتغير حالته. ولم تكن زوايا لوحة الحوار نسخاً بعضها من بعض: عند المقارنة بالزاوية العلوية اليسرى معكوسةً، اختلفت 13% من بكسلات الزاوية العلوية اليمنى، و23% و25% من بكسلات الزاويتين السفليتين.
| القاعدة | المطلوب | ما حصلنا عليه |
|---|---|---|
| حالات الزر | الحجم نفسه | بعرض 273 و266 و271 px |
| زوايا اللوحة | أربع زوايا متطابقة | تختلف 13–25% من البكسلات |
| حالة الضغط | أدنى ببكسل واحد | الوجه أدنى بـ 7 px (نحو بكسلَي لعبة) |
| تعبئة الصحة | نحو الثلثين | 68.9% |
| الألوان | 16 على الأكثر | 25,696 في الخام؛ 16 بعد الاختصار |
لماذا تهم الزوايا والأحجام أكثر من المظهر
يقطع تقسيم 9-slice اللوحة إلى شبكة 3 × 3. تُرسم الزوايا الأربع مرة واحدة ولا تُمطّ أبداً. وتتكرر الحواف الأربع على طولها، ويملأ المركز الباقي. فإذا اختلفت الزوايا، ظهرت خطوط الوصل في كل حجم، وإذا لم يتكرر نمط الحافة بانتظام، ظهر موضع التقاء واضح في كل مرة يتكرر فيها.
وتتبع الأزرار قاعدة مشابهة. يبدّل المحرّك صورة بأخرى في المكان نفسه، لذلك فإن أي اختلاف في الحجم يحرّك إطار الزر حين يلمسه اللاعب.
أخبر الوكيل بما فشل وبما يحتاجه المحرّك
أرسلنا قياساتنا وطلبنا مجموعة جاهزة للعبة. وجد الوكيل أن بكسلات النموذج ليست بحجم واحد: نحو 4.0 × 3.5 بكسل مصدر لكل بكسل لعبة في الأزرار والشريط والخانة، ونحو 6.3 × 5.6 في اللوحة. لم تكن هناك شبكة نظيفة يمكن الضبط عليها.
لذلك فعل شيئاً يستحق أن تعرفه: احتفظ بالتصميم وأعاد رسمه بدقة بالكود، فبنى كل إطار من زاوية واحدة وقطعة حافة واحدة بعروق الخشب تتكرر كل 16 بكسل. لذلك فالمجموعة النهائية إعادة بناء دقيقة لتصميم النموذج، لا بكسلات النموذج نفسه، وعروق الخشب فيها أبسط مما في اللوحة المرسومة.
قست الورقة ذات الـ 16 لوناً: عرض حالات الزر الثلاث 273 و266 و271 px، فلا يمكن تبديلها في مكانها، وتختلف الزوايا الأربع للوحة الحوار بعضها عن بعض بنسبة 13 إلى 25% من بكسلاتها، فسيُظهر تقسيم 9-slice خطوط وصل. من فضلك اجعلها جاهزة للعبة: قِس الحجم الحقيقي لبكسل اللعبة واضبط الصورة على تلك الشبكة؛ واجعل حالات الزر الثلاث بالحجم نفسه تماماً؛ واجعل زوايا اللوحة الأربع نسخاً معكوسة من زاوية واحدة؛ واقطع كل عنصر في ملف PNG خاص به بخلفية شفافة؛ وأضف اختبار 9-slice يمطّ اللوحة إلى ضعف عرضها و60% من ارتفاعها. أخبرني بحجم الشبكة وبالأحجام النهائية للعناصر.اختبار 9-slice
قطع الوكيل اللوحة ذات المقاس 142 × 46 إلى تسع قطع وأعاد بناءها بمقاس 284 × 28، أي ضعف العرض و60% من الارتفاع. بقيت الزوايا سليمة واستمرت عروق الخشب دون انقطاع. ونبّه أيضاً إلى أنه عند هذا الارتفاع لا يبقى إلا 14 صفاً من الرق بين الحدود، وهذا يخبرك بأصغر لوحة يستطيع نصك أن يستخدمها.
وفحصنا الملفات أيضاً. كل زر من الأزرار الثلاثة بمقاس 68 × 36، وإطاراتها ذات الـ 5 بكسلات متطابقة بكسلاً ببكسل، ووجه الزر المضغوط أدنى من الآخرين ببكسل واحد بالضبط. وزوايا اللوحة الأربع بمقاس 7 × 7 انعكاسات دقيقة بعضها لبعض. وتستخدم المجموعة 13 لوناً.
ما يعد به بائعو حزم الواجهات
تسرد حزم الواجهات المدفوعة القواعد نفسها ميزاتٍ للبيع، وهذه علامة جيدة على أنها القواعد التي يجب اختبارها. استخدمها قائمة فحص لك سواء اشتريت حزمة أم صنعت واحدة.
نُشر في 2026-09-27. تعلن TaleTone عن حزمتها المدفوعة “UI Window Frame Mega Pack” (حزمة ضخمة لإطارات نوافذ الواجهة) لألعاب الفانتازيا، بصيغتي SVG وPNG، في 16 نوعاً و12 لوناً، “optimized for 9-slice layouts and resizing.” (محسّنة لتخطيطات 9-slice ولتغيير الحجم). إنه ترويج البائع لمنتجه الخاص ولا صلة له بـ Ciyo؛ ونستشهد به من أجل قائمة الفحص، لا بوصفه توصية.
قائمة فحص قبل الاستيراد
تحقق من أن كل حالات عنصر التحكم بالحجم نفسه، وأن زوايا أي شيء تمطّه نسخ معكوسة، وأن أنماط الحواف تتكرر في بلاطات كاملة، وأن أصغر لوحة ما زالت تتسع لسطر واحد من نصك. ثم صدّر كل عنصر وحده ببكسل ملف واحد لكل بكسل لعبة.
واجهة الألعاب بفن البكسل
هل يستطيع نموذج صور بالذكاء الاصطناعي صنع لوحة 9-slice؟
يستطيع أن يرسم لوحة تبدو صحيحة، لكن في اختبارنا في 29 سبتمبر 2026 اختلفت الزوايا الأربع بنسبة 13–25% من بكسلاتها. فطلبنا من Ciyo Agent أن يعيد بناء اللوحة من زاوية واحدة معكوسة، وعندها تمطّط تقسيم 9-slice بنظافة.
لماذا تختلف أحجام حالات أزراري؟
يرسم النموذج كل حالة صورةً مستقلة. وخرج عرض حالاتنا 273 و266 و271 بكسل. اطلب حجماً مشتركاً واحداً وافحصه قبل الاستيراد.
ما أحجام المجموعة النهائية؟
لوحة الحوار 142 × 46، والأزرار 68 × 36، وشريط الصحة 174 × 32، وخانة المخزون 32 × 32، وكلها ببكسل ملف واحد لكل بكسل لعبة.
كم كانت التكلفة؟
كلّفت الورقة 2 رصيد. وجرى القياس وإعادة البناء في مساحة عمل الوكيل ولم يضيفا أي رسوم صور في اختبارنا.
ابنِ مجموعة واجهتك في Ciyo
صِف أسلوب لعبتك وقواعد محرّكك، ثم افحص المجموعة وأعد بناءها مع Ciyo Agent على لوحة واحدة.