Softonic

مولّد أوراق السبرايت

خطوة / 3
جارٍ استعادة الملف المحدد...

أفلِت مجموعة من الصور، فيرتّبها المولّد على شبكة منتظمة ويرسم صورة PNG واحدة على هيئة ورقة سبرايت داخل متصفحك، ثم ينتج CSS بإزاحة background-position لكل سبرايت. يجري كل شيء محليًا على لوحة الرسم (canvas)، لذا لا يُرفع أي شيء إلى خادم. مفيد لمجموعات الأيقونات وإطارات الألعاب الكلاسيكية وحالات الواجهة عندما تريد ملفًا واحدًا بدل صور منفصلة كثيرة. أنت تتحكم في عدد الأعمدة وحجم البلاطة والمسافة بين الخلايا والخلفية (شفافة أو بيضاء أو سوداء).

كيف تُبنى ورقة السبرايت

  1. 1

    أفلِت صورك

    أضف ملفات PNG أو JPG أو WebP. أعد ترتيبها بأزرار أعلى/أسفل أو احذف أي إطار؛ تُعاد بناء الورقة فورًا.

  2. 2

    اضبط الشبكة

    اختر عدد الأعمدة؛ ويُشتق عدد الصفوف من عدد الصور التي أضفتها. تُحجَّم كل صورة لتلائم بلاطة مربعة مع الحفاظ على نسبة الأبعاد وتُوسَّط.

  3. 3

    اضبط حجم البلاطة والمسافة

    اختر حجم البلاطة بالبكسل وأضف مسافة بين الخلايا لمنع تداخل الصور المتجاورة عند التحجيم.

  4. 4

    نزّل PNG وانسخ CSS

    احفظ ورقة السبرايت كملف PNG واحد وانسخ فئات CSS المُولَّدة: قاعدة `.spr-الاسم` واحدة لكل صورة مع العرض والارتفاع وموضع الخلفية.

كيف يعمل التخطيط

يستخدم المولّد تخطيطًا واحدًا يمكن التنبؤ به: شبكة منتظمة. تحدّد عدد الأعمدة، وعدد الصفوف هو تقريب_للأعلى(الصور / الأعمدة). لكل خلية الحجم المربّع نفسه (حجم البلاطة الذي اخترته)، لذا تُحجَّم كل صورة لتلائم خليتها مع الحفاظ على نسبة الأبعاد ثم تُوسَّط. تنتهي الصور بأحجام مختلفة جميعها في خلايا متساوية، وهذا بالضبط ما تتوقعه سبرايتات CSS مع background-position.

عنصر التحكم النطاق الأثر
الأعمدة 1 إلى 16 عدد السبرايتات في الصف؛ وتُحسب الصفوف تلقائيًا
حجم البلاطة 32 إلى 512 px الخلية المربعة التي تلائم كل صورة
المسافة 0 إلى 64 px فجوة شفافة بين الخلايا لمنع التداخل عند التحجيم
الخلفية شفافة / بيضاء / سوداء حشو خلف السبرايتات في ملف PNG الناتج

شكل CSS الناتج

تصبح كل صورة فئة باسم ملفها (.spr-<الاسم>)، بحجم البلاطة ومزاحة إلى خليتها. بأربعة أعمدة، وحجم بلاطة 128 px، وبلا مسافة، تبدو الورقة هكذا:

.spr-idle  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -0px; }
.spr-walk  { width: 128px; height: 128px; background: url(spritesheet.png) -128px -0px; }
.spr-run   { width: 128px; height: 128px; background: url(spritesheet.png) -256px -0px; }
.spr-jump  { width: 128px; height: 128px; background: url(spritesheet.png) -384px -0px; }
.spr-fall  { width: 128px; height: 128px; background: url(spritesheet.png) -0px -128px; }

تتحرك الإزاحة في بُعدين: تملأ السبرايتات كل صف من اليسار إلى اليمين، ثم تنتقل إلى الصف التالي. احفظ PNG باسم spritesheet.png بجوار ملف CSS (أو عدّل url(...) ليطابق مسارك).

المسافة والتداخل

قد تتداخل السبرايتات المرصوصة حافةً بحافة عندما يُحجِّم المتصفح الورقة (نِسب بكسل غير صحيحة، تحويلات CSS). أضف من 2 إلى 4 بكسل مسافة بين الخلايا لمنع البكسلات المجاورة من التسرّب.

الشاشات عالية الكثافة (retina)

لا يوجد تصدير 2x تلقائي، لكن يمكنك الحصول على ورقة أوضح ببساطة: اختر حجم بلاطة أكبر (مثلًا 256 px بدل 128 px) ليحمل كل سبرايت بكسلات أكثر، ثم اعرضه بنصف حجم CSS. بذلك تحصل على سبرايتات حادة على الشاشات عالية الكثافة دون مرور منفصل.

أوراق السبرايت مقابل البدائل

  • أوراق السبرايت: مجموعات أيقونات كلاسيكية في CSS، وإطارات ألعاب HTML5، وصفحات تستفيد من تجميع صور صغيرة كثيرة في ملف واحد.
  • سبرايتات SVG (symbol): أفضل لأيقونات الواجهات الحديثة، تُحجَّم دون فقدان، وتقبل fill في CSS، دون عناء background-position.
  • خطوط الأيقونات: محدودة، لكنها لا تزال تُستخدم لأيقونات صغيرة جدًا أحادية اللون.
  • ملفات منفصلة مع HTTP/2 أو HTTP/3: يجعل تعدد الإرسال عدد الطلبات أقل أهمية مما كان.

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

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

نعم، لكن صور SVG المضمّنة أو سبرايتات SVG بعنصر <symbol> تلائم عادةً أطر المكوّنات بشكل أفضل. تتألق أوراق سبرايت CSS عندما تُعرض صور كثيرة في آنٍ واحد على صفحات ثابتة.

اجعل عدد الأعمدة مساويًا لعدد الإطارات كي يقع كل إطار في صف واحد، ثم تحكّم فيه عبر animation-timing-function: steps(N) في CSS وbackground-position يقفز خلية بخلية. مناسب لحركات قصيرة متكرّرة (مؤشرات التحميل، حالات السكون).

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

أدوات ذات صلة

مولد الورق المسطر

أنشئ ورقًا مسطرًا قابلًا للطباعة مجانًا. اختر تسطيرًا جامعيًا أو واسعًا أو ضيقًا، واضبط تباعد الأسطر بالمليمتر وحجم الصفحة وخط هامش، ثم اطبع أو نزّل ملف SVG.

منتقي ألوان Material Design

تصفح لوحة ألوان Material Design وانسخ أي درجة (من 50 إلى A700) بصيغة HEX أو RGB أو HSL بنقرة واحدة.

مولّد ورق الرسم البياني

أنشئ ورق رسم بياني قابلاً للطباعة عبر الإنترنت: اختر شبكة مربّعات أو نقاطاً، واضبط التباعد بالمليمتر، وحدّد A4 أو Letter ولون خطوط مخصّصاً، ثم اطبع أو نزّل ملف SVG واضحاً.

صانع الأعلام

صمّم علماً مخصصاً بسيطاً بنسبة 3:2 في متصفحك باستخدام ستة تخطيطات وألوان ونص ورمز. نزّل SVG أو PNG، أو افتح مربع حوار الطباعة في المتصفح.

أداة تقسيم شبكة إنستغرام

قسّم صورة عريضة إلى شبكة إنستغرام بحجم 3×3 أو إلى أي عدد من الصفوف. القطع مُرقّمة لتسهيل رفعها بترتيب عكسي.

عكس ألوان الصورة

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

الأداة متاحة بلغات أخرى