إنشاء لوحة Sprite Sheet
أداة Sprite Sheet تدمج عدة صور في لوحة واحدة بخلايا متساوية الحجم بدون تباعد — الاستخدام الشائع في تطوير الألعاب وواجهات الويب — مع توفير بيانات CSS جاهزة (أبعاد كل إطار وموضعه) أسفل النتيجة.
تتم معالجة صورك داخل جهازك عبر Canvas ولا يتم رفعها إلى خوادمنا.
تُستخدم لوحة Sprite Sheet عادة في تطوير الألعاب وواجهات الويب — كل الصور تُوضع في خلايا متساوية الحجم دون تباعد، مع بيانات CSS جاهزة أسفل النتيجة.
اسحب عدة صور هنا أو اخترها
JPG أو PNG أو WebP، أكثر من صورة
ما الذي تفعله هذه الأداة
تدمج عدة صور في ملف صورة واحد مرتّب في شبكة — ورقة حركات (sprite sheet) — وتعطيك معه شيفرة CSS تبيّن كيف تعرض أي إطار منها.
متى تستخدمها
- تبني لعبة أو رسمًا متحركًا على الويب وتحتاج إطاراته في ملف واحد.
- تريد تقليل عدد طلبات الشبكة بدمج عدة أيقونات في صورة واحدة.
- تجهّز مجموعة حالات لعنصر واجهة (عادي، تمرير، مضغوط) في ملف واحد.
طريقة الاستخدام
- ضع الصور في منطقة الرفع أو اخترها بالترتيب الذي تريده للإطارات.
- أزل ما لا تريده أو امسح الكل وابدأ من جديد.
- ولّد الورقة ونزّلها.
- انسخ شيفرة CSS المعروضة واستخدمها لعرض الإطار المطلوب برقمه.
مثال عملي
المُدخَل
ثماني صور لإطارات حركة شخصية.
الناتج
ملف صورة واحد فيه الإطارات الثمانية في شبكة، مع شيفرة CSS تبيّن كيف تعرض الإطار رقم كذا بتغيير موضع الخلفية.
حدود الأداة
- الصور ذات الأبعاد المختلفة تُرتَّب في خلايا موحّدة، فقد تظهر فراغات حول الأصغر منها.
- ترتيب الإطارات يتبع ترتيب إضافة الصور، وتغييره يعني إعادة التوليد.
- شيفرة CSS المرافقة نقطة انطلاق تبيّن المبدأ، لا ملف أنماط جاهزًا لمشروعك.
الخصوصية والمعالجة
كل الصور تُعالَج داخل متصفحك ولا تُرفع إلى خوادمنا.
ملاحظات تقنية
- حساب الشبكة مشترك مع أداتي ورقة التواصل وتقسيم الصورة.
- شيفرة CSS تعتمد على إزاحة موضع الخلفية لإظهار إطار واحد من الورقة، وهي الطريقة القياسية في التعامل مع أوراق الحركات.
الأسئلة الشائعة
تجمع عدة صور صغيرة في ملف واحد بترتيب شبكي، وتُستخدم شائعًا في تطوير الألعاب والواجهات لتقليل عدد طلبات تحميل الصور المنفصلة.