مستخرج الرسومات

Drop files here or click (max 12 MB)

أسقط صورة أعلاه لبدء استخراج السبرايتات.

حول مستخرج الرسوم المتحركة عبر الإنترنت

هل تحتاج إلى تحويل لوحة رسوم متحركة أو صورة ثابتة إلى رسوم متحركة فردية؟ يقوم مستخرج الرسوم المتحركة هذا باكتشاف مناطق الرسوم المتحركة تلقائيًا، ويقصها بدقة (مع خيارات القص والحشو الاختيارية)، ويصدر صور PNG جاهزة للاستخدام بشفافية. 🚀 مثالي لمشاريع سكراتش، ونماذج الألعاب ثنائية الأبعاد، والأنشطة الصفية، والألعاب المستقلة. يعمل بشكل رائع مع فن البكسل، وعناصر واجهة المستخدم، والرموز والشخصيات.

لماذا تستخدم مستخرج الرسوم المتحركة هذا؟

  • كشف تلقائي للرسوم المتحركة بناءً على الشفافية وعتبات قابلة للتعديل
  • قص نظيف مع خيار تقليم الحواف الشفافة حول كل رسم متحرك
  • تحكم في الحشو والمحاذاة (مركز/أسفل) وحجم إخراج موحد اختياري
  • يحافظ على الشفافية (قناة ألفا) لتصدير PNG - مثالي للخرائط المربعة والشخصيات
  • معرض مرئي لجميع الرسوم المتحركة المكتشفة للفحص السريع قبل التحميل
  • تصدير ZIP من جانب العميل باستخدام JSZip، مع الحفاظ على أسماء الملفات وترتيب الرسوم ثابتًا
  • مناسب لسكراتش: تحويل ورقة الرسوم المتحركة المفردة بسرعة إلى أزياء أو أصول متعددة
  • مثالي لإعادة استخدام الأصول عبر المحركات (سكراتش، جودوت، يونيتي ثنائي الأبعاد، فايزر، إلخ)

🛠️ كيفية استخراج الرسوم المتحركة من ورقة الرسوم for sprite-extractor

1

1. أسقط صورتك

اسحب وأسقط ورقة الرسوم المتحركة أو الصورة في منطقة الإسقاط، أو انقر لاختيار ملف. للحصول على أفضل النتائج، استخدم PNG بخلفية شفافة أو تباين عالٍ بين الرسوم المتحركة والخلفية.

2

2. تشغيل الكشف التلقائي

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

3

3. ضبط خيارات الاستخراج

اضبط الحشو، الخلفية الشفافة مقابل اللون الصلب، تقليم الحواف الشفافة، المحاذاة (مركز أو أسفل)، وعرض/ارتفاع إخراج موحد اختياري. تعيد الأداة بناء لوحة كل رسم متحرك وفقًا لذلك.

4

4. معاينة الرسوم المتحركة

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

5

5. تحميل PNGs أو ZIP

قم بتصدير رسوم متحركة PNG فردية أو حمل ملف ZIP واحد يحتوي على جميع المعاينات الحالية. يتم بناء ZIP من جانب العميل باستخدام JSZip، وتتبع أسماء الملفات نمطًا تسلسليًا مثل <code>sprite_0000.png</code>، <code>sprite_0001.png</code>، إلخ.

المواصفات الفنية

الكشف والمربعات المحيطة

مرحلة الكشف تعمل على نقطة نهاية خلفية مخصصة وتعيد مربعات محيطة نظيفة يستخدمها العميل لبناء الرسوم المتحركة النهائية.

الجانبالسلوكملاحظات
نقطة نهاية الكشفPOST /api/sprite-extractor/inspectيقبل عنوان URL للبيانات وخيارات الكشف، ويعيد مصفوفة من مربعات الرسوم.
مدخلات الكشفالتسامح، عتبة ألفا، الحد الأدنى للعرض، الحد الأدنى للارتفاعاضبط هذه المعاملات في الواجهة لتجاهل الضوضاء الصغيرة أو التقاط الرسوم ذات المعنى فقط.
شكل المربعمستطيلات محاذية للمحاوريحمل كل <code>SpriteBox</code> قيم <code>x</code>، <code>y</code>، <code>width</code>، <code>height</code> في إحداثيات الصورة الأصلية.
معالجة الشفافيةيدعم قناة ألفاتساهم البكسلات الشفافة في قرارات القص/التشذيب ولكن يمكن الاحتفاظ بها في المخرجات.
معالجة الأخطاءاسترجاعات متدرجةإذا فشل الكشف، تظهر الأداة خطأً مقروءًا ولا تعطل الواجهة.

القص، التشذيب والمحاذاة

بمجرد معرفة المربعات، يتم تنفيذ جميع عمليات عرض الرسوم في المتصفح باستخدام لوحة HTML.

الخطوةالتنفيذالتفاصيل
قص أوليdrawImage(img, box.x, box.y, w, h, 0, 0, w, h)يتم أولاً قص كل رسم من الصورة الأصلية إلى لوحة مؤقتة.
تشذيب الشفافيةمسح قناة ألفا عبر getImageDataتقوم الأداة بمسح البكسلات لحساب أصغر مربع محيط غير شفاف عند تفعيل التشذيب.
الحشوقابل للتعديل 0–256 بكسليتم تطبيق الحشو حول الرسم المشذب أو المقصوص لتقليل التشوهات الحافة في المحركات.
المحاذاةمركز / أسفليمكن توسيط الرسوم أو محاذاتها إلى الأسفل (مفيد للشخصيات الواقفة على خط أساس).
حجم مخرجات موحداختياري spriteWidth / spriteHeightعند التفعيل، يتم عرض جميع الرسوم في لوحة بحجم ثابت لتوحيد الرسوم المتحركة.
الخلفيةشفافة أو بلون صلبإما الحفاظ على الشفافية الكاملة أو ملء اللوحة بلون خلفية RGBA محدد.

الأداء والحدود

مصمم للاستخدام التفاعلي في المتصفح.

المعاملالسلوك النموذجيملاحظات
الحد الأقصى لحجم الإدخال~10 ميجابايت للصورةقد تعمل الملفات الأكبر حجماً ولكن ستحمل/تكتشف ببطء أكبر.
عدد الرسومات المتحركةحتى ~400 رسم متحركالأعداد المرتفعة جداً ممكنة، ولكن عرض المعاينة وإنشاء الأرشيف سيستغرق وقتاً أطول.
صيغة التصديرPNG داخل ZIP (Blob)يتم إنشاء الأرشيف بالكامل من جانب العميل باستخدام JSZip.
عمليات اللوحةقص ورسم لكل رسم متحركيعتمد على واجهة برمجة تطبيقات اللوحة ثنائية الأبعاد للمتصفح؛ يتناسب الأداء مع الدقة والعدد.

بدائل سطر الأوامر

لمجموعات الرسومات المتحركة الضخمة أو خطوط الأنابيب الآلية، يمكنك دمج أدوات CLI مثل ImageMagick مع البرمجة النصية.

لينكس / 🍎 ماك

قص الشبكة المنتظمة باستخدام ImageMagick

convert spritesheet.png -crop 64x64 +repage sprite_%04d.png

يقطع شبكة منتظمة 64×64 إلى ملفات PNG فردية.

ضغط جميع الرسومات المتحركة

zip sprites.zip sprite_*.png

تعبئة جميع الرسومات المتحركة المُنشأة في أرشيف واحد.

ويندوز (PowerShell + ImageMagick)

القائم على الشبكة

magick spritesheet.png -crop 64x64 +repage sprite_%%04d.png

نفس ما سبق، باستخدام واجهة سطر الأوامر <code>magick</code> على ويندوز.

حالات الاستخدام العملية

تطوير ألعاب ثنائية الأبعاد

  • استخراج إطارات تحريك الشخصيات من لوحة الرسومات المتحركة لـ Godot أو Unity 2D أو Phaser أو Construct.
  • عزل عناصر واجهة المستخدم (أزرار، أيقونات، أشرطة الصحة) من نموذج التصميم.
  • تفكيك مجموعات البلاط إلى بلاطات فردية لمحرري المستويات.
// مثال Godot: تحميل إطارات متعددة\nvar frames = []\nfor i in range(0, 8):\n    frames.append(load(\"res://sprites/hero_walk_\" + str(i).pad_zeroes(2) + \".png\"))

سكراتش ومشاريع الفصول الدراسية

  • تحويل لوحة رسومات متحركة واحدة إلى أزياء متعددة لشخصية سكراتش.
  • تحضير حزم أصول مواضيعية (حيوانات، كواكب، أيقونات) لورش عمل البرمجة.
  • السماح للطلاب بتصميم لوحات رسومات متحركة في أداة رسم ثم استخراجها لسكراتش.
// كود زائف على نمط سكراتش للتحريك البسيط\nwhen green flag clicked\nforever\n  next costume\n  wait 0.1 seconds

فن البكسل ومكتبات الأصول

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

❓ Frequently Asked Questions

❓هل كشف الرسومات تلقائي بالكامل؟

الأداة تقوم بالكشف التلقائي بناءً على الشفافية وعتبات قابلة للتعديل (التسامح، عتبة ألفا، الحد الأدنى للعرض/الارتفاع). في كثير من الحالات تعمل "ببساطة"، ولكن للوحات المعقدة قد تحتاج إلى ضبط الخيارات أو تشغيل مرحلة ثانية.

📏هل يغير المستخرج صورتي الأصلية؟

لا. صورتك الأصلية تبقى كما هي. الأداة تقرأها فقط إلى لوحة في الذاكرة، وتقطع المناطق إلى لوحات جديدة، ثم تصدر رسومات PNG جديدة.

🎯هل يمكنني التحكم في الحشو والمحاذاة؟

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

🔒هل يتم تخزين صوري على الخادم؟

خطوة الكشف ترسل صورتك (كعنوان بيانات) إلى نقطة نهاية مخصصة لحساب مربعات الرسومات، ولكن الرسومات نفسها تُبنى وتُضغط في متصفحك. الخدمة مصممة للمعالجة المؤقتة، وليس التخزين طويل الأمد. كما هو الحال دائمًا، تجنب استخدام أدوات الطرف الثالث للأصول التي يجب أن تبقى خاصة تمامًا.

🧊هل سيتم الحفاظ على الشفافية في الرسومات المصدرة؟

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

Pro Tips

Best Practice

استخدم كمية صغيرة من الحشو (2-4 بكسل) حول كل رسم لمنع تسرب الحواف عند التحجيم أو التدوير في محركك.

Best Practice

اسم الرسومات بشكل متناسق (مثل <code>hero_run_0001.png</code>، <code>hero_run_0002.png</code>) لتبسيط استيراد الرسوم المتحركة والبرمجة النصية.

Best Practice

في بيئات الفصول الدراسية، ابدأ بلوحات رسومات بسيطة جداً (رسومات قليلة وكبيرة، خلفية واضحة) حتى يرى الطلاب النتائج فوراً.

Best Practice

احتفظ بملف ZIP المصدر بجانب ملفات مصدر مشروعك حتى تتمكن من إعادة إنشاء أو تعديل الرسوم المتحركة لاحقاً بسهولة.

Additional Resources

ويكي سكراتش – الرسومات
Documentation
وثائق جودوت – رسوم متحركة ثنائية الأبعاد
Documentation
دليل يونيتي – رسومات ثنائية الأبعاد
Documentation

Other Tools