أدوات الصور · مجاني ١٠٠٪

مولّد ورقة الرسوم المتحركة

اجمع صورًا كثيرة في ورقة Sprite واحدة واحصل معها على خريطة إحداثيات بصيغة JSON. طلب HTTP واحد بدل خمسين ما زال من أكثر تحسينات أداء الواجهات فاعلية. مجانية، بدون حساب، وبدون إضافة أي علامة إلى نتيجتك.

مولّد ورقة الرسوم المتحركة

أضف ملفاتك. الإعدادات الموصى بها جاهزة، لتتمكن من المعالجة بنقرة واحدة.

أفلت الملفات هنا

PDF وWord والصور والصوت والفيديو والأرشيفات والمزيد

حتى 100 ملف · 250 ميغابايت · بدون حساب
  1. 1إضافة ملفات
  2. 2اختر إجراءً
  3. 3نزّل أو تابع العمل
خاص افتراضيًا. لا تُرفع الملفات المحددة إلا للإجراءات التي تتم على الخادم.تفاصيل الخصوصية

متى تحتاج هذه الأداة

جمع أيقونات الواجهة في ورقة واحدة لتقليل الطلبات
بناء أطلس خامات لمحرك ألعاب أو رسوم متحركة على canvas
تجميع إطارات رسوم متحركة في ملف واحد

كيف تعمل

تُصف الصور في ورقة شفافة واحدة على شكل شبكة، مع حشوة اختيارية بينها حتى لا يتسرب حد صورة إلى التي تليها عند تكبير الورقة أو عند ترشيح الخامات في محرك الألعاب. ومع ملف PNG يأتي ملف JSON يذكر ملف كل صورة وموضعها وحجمها، وملف CSS فيه صنف لكل صورة يحدد حجمها وموضع خلفيتها، جاهز لصفحة ويب.

أسئلة شائعة

ما فائدة خريطة JSON؟

تعطي الإحداثيين x وy والعرض والارتفاع لكل صورة مجمّعة، وهو ما تحتاجه لخاصية background-position في CSS أو لمحمّل الأطلس في محرك الألعاب.

هل تُحفظ الشفافية؟

نعم. تُصدَّر الورقة بصيغة PNG وتنتقل شفافية الصور الأصلية إلى النتيجة.

هل ما زال هذا مهمًا مع HTTP/2؟

أقل مما كان، لكنه ما زال يقلل عبء الطلبات، وهو ممارسة معتادة في أطالس خامات الألعاب.

هل يوجد CSS يمكنني استخدامه مباشرة؟

نعم. يتضمن التنزيل الملف sprite-sheet.css، وفيه الصنف ‎.sprite للورقة وصنف ‎.sprite-الاسم لكل صورة يحدد عرضها وارتفاعها وموضع خلفيتها.

لماذا الحشوة؟

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

أدوات مجانية ذات صلة