هل تُرفع صورتي إلى خادم؟

لا. يعمل كل شيء في متصفحك باستخدام واجهة API الخاصة بـ Canvas. ملفاتك لا تغادر جهازك أبدًا.

كم عدد الصور التي يمكنني إضافتها إلى ورقة رسم واحدة؟

لا يوجد حد أقصى محدد — الأداة تُعبئ عددًا كبيرًا من الصور كما يسمح ذاكرة متصفحك. للحصول على أداء أفضل، احتفظ بحجم كل رسمة معقول.

ما الذي تفعله إعدادات عرض الصف الأقصى؟

تُحدّد هذه الإعدادات كم يمكن أن يصبح عرض كل صف من الرسوم المتحركة قبل أن يبدأ المُعبّئ صفًا جديدًا. قيمة أكبر تنتج ورقة أعرض، بينما قيمة أصغر تنتج ورقة أطول وضيّقة.

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

نعم. كل فئة رسم تشمل عنوان صورة الخلفية (الذي يشير إلى ملف PNG الذي قمت بتنزيله)، ومكان الخلفية، والعرض، والارتفاع — فقط قم بنسخه إلى أي ملف أسلوب وتطبيق الفئة على عناصر HTML الخاصة بك.

ما هي صيغ الصور التي يمكنني استخدامها كرسوم متحركة؟

أي صيغة يمكن لمحركك فك تشفيرها — PNG، JPEG، WebP، GIF، SVG، AVIF، وغيرها. دائمًا ما يكون ملف الرسم المتحرك الناتج ملفًا PNG واحدًا لضمان التوافق القصوى.

هل هذه الأداة ترفع بياناتي؟

لا. يعمل كل شيء مباشرة في متصفحك، لذا بياناتك لن تغادر جهازك أبداً — بل إنها تعمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.

🗂️ مُولّد ورقة الرسوم (Sprite Sheet)

احزم عدة صور في ورقة رسم واحدة مُحسّنة بصيغة PNG واحصل على قواعد CSS background-position الجاهزة للاستخدام — مجانًا، في المتصفح، بدون الحاجة إلى رفع أي ملفات.

🗂️

اسحب الصور هنا أو انقر لاختيار عدة صور

معبأة في ملف PNG واحد + CSS — في متصفحك، بدون رفع

مصمم للخصوصية. تعمل هذه الأداة بالكامل في متصفحك — لا يتم رفع أي شيء تدخله أو تخزينه، وتعمل الأداة دون اتصال بالإنترنت.

حول

تستخدم هذه الأداة واجهة API الخاصة بالمتصفح Canvas لتعبئة صورك بشكل مضغوط في ورقة رسم PNG تمامًا على جهازك — لا يتم رفع أي شيء إلى أي خادم. اسقط عددًا كبيرًا من الصور كما تشاء، وحدد عرض الصف الأقصى ومساحة التعبئة لكل رسمة، وستقوم الأداة بترتيبها صفًا تلو الآخر لتقليل الفراغات غير المستغلة. بمجرد إنشاء الورقة، يمكنك تنزيل ملف PNG المدمج ونسخ قطعة الشفرة CSS، والتي تحتوي على فئة لكل رسمة مع قيم background-image وbackground-position وعرض وارتفاع صحيحة جاهزة لنسخها إلى ملف أسلوبك. وبما أن كل شيء يعمل محليًا في متصفحك، فإن العملية فورية تمامًا وخصوصية 100%.

كيف تستخدم

اسقط صورك في منطقة الرفع أو اضغط للبحث وتحديد ملفات متعددة مرة واحدة.
حدد عرض الصف الأقصى (بالبكسل) ومساحة التعبئة حول كل رسمة لضبط مدى احكام تعبئتها.
اضغط على 'أنشئ ورقة الرسم' لتعبئة جميع الصور في ملف PNG واحد، مع عرض فوري على الـ canvas.
انسخ الشفرة CSS المُنشئة — كل رسمة تحصل على فئة خاصة بها مع قيم background-position وعرض وارتفاع صحيحة.
تنزيل ملف PNG لورقة الرسم ووضع الشفرة CSS في ملف أسلوب مشروعك — انتهت المهمة.

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

هل تُرفع صورتي إلى خادم؟: لا. يعمل كل شيء في متصفحك باستخدام واجهة API الخاصة بـ Canvas. ملفاتك لا تغادر جهازك أبدًا.
كم عدد الصور التي يمكنني إضافتها إلى ورقة رسم واحدة؟: لا يوجد حد أقصى محدد — الأداة تُعبئ عددًا كبيرًا من الصور كما يسمح ذاكرة متصفحك. للحصول على أداء أفضل، احتفظ بحجم كل رسمة معقول.
ما الذي تفعله إعدادات عرض الصف الأقصى؟: تُحدّد هذه الإعدادات كم يمكن أن يصبح عرض كل صف من الرسوم المتحركة قبل أن يبدأ المُعبّئ صفًا جديدًا. قيمة أكبر تنتج ورقة أعرض، بينما قيمة أصغر تنتج ورقة أطول وضيّقة.
هل يمكنني استخدام CSS المُنتج مباشرة في مشروعتي؟: نعم. كل فئة رسم تشمل عنوان صورة الخلفية (الذي يشير إلى ملف PNG الذي قمت بتنزيله)، ومكان الخلفية، والعرض، والارتفاع — فقط قم بنسخه إلى أي ملف أسلوب وتطبيق الفئة على عناصر HTML الخاصة بك.
ما هي صيغ الصور التي يمكنني استخدامها كرسوم متحركة؟: أي صيغة يمكن لمحركك فك تشفيرها — PNG، JPEG، WebP، GIF، SVG، AVIF، وغيرها. دائمًا ما يكون ملف الرسم المتحرك الناتج ملفًا PNG واحدًا لضمان التوافق القصوى.
هل هذه الأداة ترفع بياناتي؟: لا. يعمل كل شيء مباشرة في متصفحك، لذا بياناتك لن تغادر جهازك أبداً — بل إنها تعمل دون اتصال بالإنترنت بمجرد تحميل الصفحة.