ما هو مولّد صفحات السبرايت؟

يجمع مولّد ورقة العفاريت عدة صور منفردة في ورقة عفاريت واحدة محسّنة. ارفع إطاراتك أو أيقوناتك، أو أفلِت ملف GIF متحركًا ليُستخرج كل إطار تلقائيًا، ثم اختر تخطيطًا (شبكة، شريط أفقي، شريط رأسي، أو متراص)، وحدّد خلفية شفافة أو لونًا صلبًا، وصدّر الصورة المجمّعة مع بيانات المواضع بصيغة JSON أو مصفوفة JSON أو XML TextureAtlas أو CSS.

يرتّب وضع الشبكة كل شيء في تخطيط منتظم بحجم N×M، وهو مثالي لدورات الحركة التي يكون فيها كل إطار بالحجم نفسه. ويصفّ الشريطان الأفقي والرأسي الإطارات في صف واحد أو عمود واحد، وهو التخطيط المعتاد لحركات محركات الألعاب ثنائية الأبعاد البسيطة. ويجري الوضع المتراص عملية تعبئة صناديق لتتلاءم الأيقونات المتفاوتة الأحجام بأقل قدر من الهدر. أفلِت ملف GIF متحركًا فيُفكّ ترميز كل إطار داخل الورقة، فلا حاجة لتصدير الإطارات أولًا. يحتفظ الناتج بخلفية شفافة افتراضيًا، أو يمكنك اختيار لون صلب كحشوة مفتاح لوني. وتأتي البيانات الوصفية بأربع صيغ — هاش JSON، ومصفوفة JSON، وXML TextureAtlas، وCSS — لتدرجها مباشرة في Phaser أو PixiJS أو Unity أو Godot أو background-position في CSS. وتتيح لك معاينة الحركة تصفّح الإطارات بمعدل من 1 إلى 60 إطارًا في الثانية لضبط التوقيت قبل التنزيل. يمكنك التنقّل بين الإطارات إطارًا تلو الآخر لرصد أي عنصر غير محاذٍ، وقصّ الحافة الشفافة حول كل إطار ليبقى الجدول مدمجًا، وتنزيل التسلسل كصورة GIF متحركة لمشاركة النتيجة دون الحاجة إلى محرّك ألعاب.

كيفية الاستخدام

1. ارفع الصور الفردية التي تريد دمجها في صفحة سبرايت.
2. اختر التخطيط (شبكة أو أفقي أو عمودي أو مضغوط)، عدّل التباعد، واضبط الخلفية شفافة أو بلون ثابت.
3. حمّل صورة صفحة السبرايت مع بيانات المواضع بصيغة CSS أو JSON.

متى تستخدم

• تجميع دورة مشي شخصية أو حركة انفجار في صورة واحدة لمحرك الألعاب.
• دمج مجموعة أيقونات واجهة في أصل واحد فيقوم الموقع بطلب HTTP واحد بدل أربعين.
• تجهيز سبرايتات الـtilemap بحاشية ثابتة لمنع تسرّب لون البلاطة المجاورة.

النتيجة

يرفع مطوّر ألعاب 16 إطار حركة لشخصية (64×64 لكل منها). تنظّمها الأداة في شبكة 4×4، وتنتج صفحة سبرايت بحجم 256×256 مع إحداثيات الإطارات بصيغة JSON لمحرك اللعبة.

الأسئلة الشائعة

متى أختار التخطيط المضغوط بدل الشبكة؟

استخدم الشبكة حين تتساوى أحجام الإطارات، مثل حركة شخصية 32×32. استخدم الشريط الأفقي أو العمودي لتسلسل من صف أو عمود واحد، وهو الأبسط ليفهمه معظم المحركات. استخدم المضغوط حين تتباين أحجام الأيقونات، مثل مجموعة واجهة فيها 16×16 و48×48 معاً؛ يعطي أصغر صفحة لكن قراءة بياناتها يدوياً أصعب.

ما فائدة إعداد الحاشية (padding)؟

الحاشية تضيف بكسلات شفافة حول كل إطار. بدونها يمكن لراسم يستخدم تنعيماً خطّياً أن يدخل ألوان الإطارات المجاورة على حواف الإطار المرسوم. بكسل أو اثنان من الحاشية يكفيان لمنع هذا التداخل.

أي صيغة بيانات وصفية ينبغي أن أصدّرها؟

صيغة JSON (هاش) هي تنسيق TexturePacker الذي تحمّله معظم المحركات، بحيث يُفهرس كل إطار باسمه. أما مصفوفة JSON فتخزّن الإطارات كقائمة مرتبة يفضّلها Phaser 3 وبعض المسارات. وصيغة XML هي TextureAtlas من Starling/Sparrow التي تستخدمها Unity وGodot وFriday Night Funkin. وتمنحك CSS فئات background-position لمجموعات الأيقونات على الويب. اختر ما يتوقعه محرّك العرض لديك.

هل تحافظ الصورة الناتجة على الشفافية؟

نعم بشكل افتراضي. الصفحة تُصدَّر PNG مع قناة alpha سليمة، فتنتقل خلفيات PNG الشفافة كما هي. إذا احتجت إخراجاً معتماً، اختر خلفية بلون ثابت بجانب أدوات التخطيط، وهو مفيد لمفاتيح الكروما أو المحركات التي تتجاهل alpha. تجنّب JPG كمصدر إن كانت الشفافية مهمة، فهو يدمج alpha باللون الأبيض قبل الرفع.

كم إطاراً أستطيع وضعه في صفحة واحدة؟

عملياً، تحدّ GPU الهواتف نسيجاً مفرداً عند ٢٠٤٨ أو ٤٠٩٦ بكسلاً لكل ضلع، فصفحة ٤٠٩٦×٤٠٩٦ بإطارات ٦٤×٦٤ تستوعب ٤٠٩٦ إطاراً. للحركة، تقسيمها إلى صفحتين ٢٠٤٨×٢٠٤٨ أكثر أماناً على الأجهزة القديمة.

أدوات ذات صلة