من GIF إلى صفيحة شخصيات متحركة: دع الذكاء الاصطناعي يفحص كل إطار قبل الاستيراد

ما يحتاجه محرك اللعبة من ملف GIF

ثلاثة أشياء: الإطارات بحجمها الأصلي، مرتبة في خانات متساوية؛ وحجم الإطار وعدد الإطارات؛ ومدة كل إطار. والحجم الأصلي هو الحجم الذي رسمه الفنان. وكثير من ملفات GIF لفن البكسل تُصدَّر بتكبير 4× أو 6× أو 8× لتبدو جيدة على وسائل التواصل الاجتماعي، واستيرادها بذلك الحجم يهدر الذاكرة ويسبب الضبابية عند التحجيم.

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

ملف GIF الذي اختبرناه: قفزة كائن هلامي من لعبة منصات متخيَّلة

صنعنا ملف GIF صغيراً للاختبار للعبة Tumblebrook، وهي لعبة منصات متخيَّلة: كائن هلامي أخضر ينضغط ويقفز ويهبط. مقاسه 192 × 192 بكسل، وفيه 7 إطارات و4 ألوان، وهو في الحقيقة رسم بمقاس 32 × 32 مُصدَّر بتكبير 6× بالضبط. وتتراوح التأخيرات من 80 إلى 200 ملّي ثانية، كما يحدث كثيراً.

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

ملف GIF هذا هو رسم القفزة المتحرك للعبة Tumblebrook، وهي لعبة منصات صغيرة أصنعها في Godot. من فضلك حوّله إلى صفيحة شخصيات متحركة أستطيع استيرادها: صف واحد، وخانات متساوية، وخلفية شفافة، بحجم بكسلات الرسم الأصلي (لا بتكبير التصدير 6x). قبل أن تبنيها، انظر إلى كل إطار وأخبرني بعدد الإطارات، وتأخير كل إطار، وأي شيء سيبدو خطأً حين تدور الحلقة. احفظ الصفيحة وملف JSON فيه حجم الإطار والمدد على اللوحة.

ما وجده الوكيل في 7 إطارات

تحقق الوكيل من أن 192 تقبل القسمة على 6 بالضبط، وأكد الحجم الأصلي 32 × 32، وبنى صفيحة بمقاس 224 × 32: سبع خانات في صف واحد، بخلفية شفافة ودون بكسلات حافة ممزوجة. وسرد التأخيرات: 120 و80 و80 و80 و200 و80 و140 ملّي ثانية.

ثم أبلغ عن ثلاث مشكلات، وكانت الثلاث حقيقية. كان الإطار الأخير “pixel-for-pixel the same as frame 0” (مطابقاً للإطار 0 بكسلاً ببكسل)، لذلك تبقى وضعية الراحة على الشاشة 260 ms و“the hop will seem to stall at the landing” (ستبدو القفزة كأنها تتوقف عند الهبوط). وكان الإطار 5 نسخة من الإطار 3 “moved 1 px right and 2 px down” (منقولة 1 px إلى اليمين و2 px إلى الأسفل)، ومركزها عند x = 17 بدلاً من 16، فيرتعش الكائن الهلامي جانبياً. كما أعاد الإطار 5 استخدام وضعية الصعود في طريق النزول، فتقفز الحافة السفلية 4 بكسلات إلى إطار الهبوط.

وقال أيضاً ما لم يستطع فعله: اللوحة لا تقبل إلا الصور والفيديو، لذلك لم يستطع أن يحفظ ملف .json عليها. وعرض أن يلصق JSON في المحادثة بدلاً من ذلك.

أصلح الحلقة، ثم صدّر

طلبنا صفيحة مُصلحة. وقبل أن يرسم أي شيء، درس الوكيل الإطارات الموجودة ليتعلم قواعدها في الخط المحيط والزوايا والتظليل والضوء اللامع. بل صحّح نفسه (“Highlight sits one pixel further in than I assumed”، أي أن الضوء اللامع يقع إلى الداخل ببكسل واحد أكثر مما افترض)، وأثبت القواعد بإعادة بناء ثلاثة إطارات أصلية بكسلاً ببكسل.

في الصفيحة المُصلحة ستة إطارات. اختفى الإطار المكرر، وصار مركز كل إطار عند x = 16، ووضعية سقوط جديدة ممدودة بمقاس 13 × 19 بكسل تنزل 3 بكسلات إلى إطار الهبوط بدلاً من القفز 4. وتستغرق الحلقة الكاملة الآن 640 ms، ونبّه الوكيل إلى أن وضعية الراحة صارت أقصر (120 ms بدلاً من 260 ms) في حال بدت القفزة متعجلة. ولم يُنفَق أي رصيد.

نعم من فضلك: اصنع الصفيحة المُصلحة. احذف الإطار المكرر، وأعد الإطار 5 إلى المركز، وأعطِ الهبوط وضعية سقوط ممدودة حقيقية بدلاً من وضعية الصعود المعاد استخدامها. احتفظ بالألوان الـ 4 نفسها وبالخانات 32x32. ثم الصق هنا JSON جاهزاً لـ Godot (حجم الإطار، وعدد الإطارات، ومدة كل إطار)، واحفظ معاينة GIF بتكبير 6x للحلقة المُصلحة كي أشاهدها.

ملف JSON وإعدادات Godot

لصق الوكيل كتلة JSON فيها اسم الصورة، وحجم الصفيحة (192 × 32)، وحجم الإطار (32 × 32)، وستة إطارات في صف واحد، ومنطقة كل إطار ومدته بالملّي ثانية، ومدة نسبية لـ Godot. ولأن كل تأخير مضاعف لـ 40 ms، اقترح رسماً متحركاً من نوع SpriteFrames بسرعة 25 إطاراً في الثانية بمدد نسبية 3 و2 و2 و2 و5 و2، مع تصفية الجار الأقرب كي تبقى البكسلات حادة.

احفظ ملف JSON بجانب ملف PNG في مشروعك. وإذا كان محركك يستخدم صيغة مختلفة، فاطلب تلك الصيغة باسمها؛ فقائمة الإطارات هي الجزء المهم.

خمسة فحوص قبل أن تستورد أي صفيحة

سواء جاءت الصفيحة من الذكاء الاصطناعي أو من أداة تحويل أو من تصديرك أنت، فهذه الفحوص تلتقط المشكلات المعتادة. ويعرض عمودنا الأخير صفيحة Tumblebrook المُصلحة.

الخطوات التالية لرسوم لعبتك

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

• اصنع صفيحة شخصيات متحركة من وصف نصي
• ارسم شخصية من أربعة اتجاهات
• حرّك فن البكسل في فيديو
• هل يستطيع Claude Opus 5.5 صنع فن البكسل؟