ورقة السبرايت نصف المهمة فقط. يحتاج المحرك أيضًا إلى معرفة موضع كل إطار ومدة عرضه. يجمع هذا الصانع إطاراتك في شبكة أو شريط أو أطلس محكم، ويكتب تلك البيانات بالصيغ التي تستوردها المحركات فعلًا: TexturePacker/Phaser JSON وAseprite JSON ومورد Godot 4 SpriteFrames وCSS وإعدادات تقطيع Unity. تُرتَّب الإطارات بالطريقة التي كنت سترقّمها بها، فيأتي walk_10 بعد walk_9.
طريقة استخدام صانع ورقة السبرايت
- أفلت كل ملفات PNG لإطاراتك دفعة واحدة. تُرتَّب حسب الاسم ترتيبًا طبيعيًا. أضف المزيد في أي وقت.
- أعد الترتيب بالأسهم، وأزل الإطارات الشاردة، أو اعكس الترتيب.
- اختر تخطيطًا: شبكة (أعمدة تلقائية أو ثابتة)، أو صف واحد، أو عمود واحد، أو تعبئة محكمة مع قص الحواف الشفافة.
- حدّد الحشوة بين الإطارات والهامش الخارجي وتمديد الحواف. فعّل حجم قوة العدد اثنين إن كانت منصتك تحتاج خامات بحجم 64 أو 128 أو 256 px.
- راجع الحركة في المعاينة وحدّد معدل إطاراتها.
- نزّل ملف PNG وملف بيانات واحدًا، أو ملف ZIP يضم PNG وكل الصيغ.
ما الذي تحصل عليه
- ورقة PNG بشفافية، تمامًا كما في المعاينة.
- Phaser / TexturePacker JSON (hash وarray)، بما في ذلك إزاحات القص كي تبقى الإطارات المعبأة بإحكام في محاذاتها.
- Aseprite JSON مع وسم إطارات ومدد.
- Godot 4 SpriteFrames .tres باستخدام AtlasTextures، جاهز لـ AnimatedSprite2D.
- سبرايتات CSS بفئة لكل إطار وحركة متدرجة، إضافة إلى إعدادات الاستيراد والتقطيع لـ Unity.
المحركات المتوافقة
- Phaser 3:
this.load.atlas(key, 'sheet.png', 'sheet.json')، ثم أنشئ الحركة من أسماء الإطارات. - Godot 4: ضع ملف .tres بجوار ملف PNG وأسنده إلى Sprite Frames في AnimatedSprite2D.
- Unity: تخطيطات الشبكة تُقطَّع باستخدام Grid By Cell Size بالقيم الموجودة في ملف الإعدادات. استخدم ترشيح Point وبلا ضغط.
- PixiJS وDefold وCocos وConstruct: تقرأ TexturePacker JSON (hash) مباشرة أو عبر أدوات الاستيراد الخاصة بها.
نصائح من تجربتنا في صنع الألعاب بها
- استخدم الشبكة مع إطارات موحّدة لتحريك الشخصيات. أدوات تقطيع الشبكة وطبقات البصل في المحركات تتوقع ذلك.
- استخدم التعبئة المحكمة مع القص لأطالس العناصر وواجهات المستخدم التي تضم صورًا كثيرة بأحجام مختلفة.
- أضف تمديدًا بمقدار 1–2 px عندما تُحجَّم الورقة بمعامل غير صحيح أو تُستخدم معها mipmaps. يمنع ذلك تسرّب الإطارات المجاورة عند الحواف.
- اجعل أسماء الإطارات ذات معنى (hero_walk_00…). فهي تصبح مفاتيح الإطارات في ملف JSON.
حالات الاستخدام
- جمع إطارات مصدّرة من Aseprite أو Blender أو Spine في خامة واحدة.
- بناء أطلس لواجهة المستخدم أو العناصر للعبة ويب.
- تحويل إطارات مولّدة بالذكاء الاصطناعي إلى ورقة يستطيع محركك تحريكها.
- صنع حركة سبرايت بـ CSS لصفحة هبوط.
الأسئلة الشائعة
ما صيغ البيانات التي يصدّرها؟
TexturePacker JSON بصيغتي hash وarray (يقرؤها Phaser وPixiJS ومحركات كثيرة)، وAseprite JSON، وGodot 4 SpriteFrames .tres، وفئات سبرايت CSS مع keyframes، وملف نصي بإعدادات الاستيراد والتقطيع لـ Unity.
ماذا تفعل التعبئة المحكمة؟
تقص الحافة الشفافة لكل إطار وتجمع الإطارات المقصوصة في صفوف مرتبة حسب الارتفاع، وتجرّب عدة عروض وتحتفظ بأصغر ورقة. يسجّل ملف JSON الحجم الأصلي لكل إطار وإزاحته فيُعرض في المكان الصحيح.
ما هو تمديد الحواف؟
التمديد ينسخ الصف الخارجي من بكسلات كل إطار إلى الخارج بمقدار 1–4 px. عندما تأخذ وحدة معالجة الرسوميات عينة خارج الإطار بقليل (الترشيح، mipmaps، التكبير بمعامل غير صحيح)، فإنها تقرأ حافة الإطار نفسه بدلًا من إطار مجاور.
إطاراتي بأحجام مختلفة. ماذا يحدث؟
في تخطيطات الشبكة والصف والعمود تكون كل خلية بحجم أكبر إطار، وتُحاذى الإطارات الأصغر إلى أسفل الوسط أو الوسط أو أعلى اليسار. أما التعبئة المحكمة فتُبقي كل إطار بحجمه الخاص.
هل هناك حد لعدد الإطارات؟
لا يوجد حد ثابت. كل شيء يعمل في متصفحك، لذا فالحد العملي هو ذاكرة جهازك. مئات الإطارات بحجم 64 px لا تمثل أي مشكلة.
هل تُرفع صوري؟
لا. تُقرأ الإطارات وتُجمع محليًا. لا يُرسل أي شيء إلى خادم.