ارسم فن البكسل على شبكة، وحرّك الإطارات، وصدّر النتيجة بصيغة PNG أو GIF أو كود.
آخر تحديث
يعلّمك Coddy عبر كتابة كود حقيقي في متصفحك: دروس تفاعلية، وملاحظات فورية، ومساعدة بالذكاء الاصطناعي عندما تتعثر.
صانع فن البكسل أداة رسم مبنية على شبكة ثابتة: بدلاً من ضربات فرشاة حرة، تضع بكسلات مفردة مربعاً مربعاً. هذا القيد هو سرّ سحر فن البكسل: شخصيات الألعاب (السبرايت) والأيقونات القديمة الطراز والصور الرمزية ورسومات 8-بت كلها تُصنع باختيار كل بكسل عن قصد.
يمنحك هذا المحرر عدّة محرر السبرايت الكلاسيكية: قلم وممحاة وتعبئة وقطّارة ألوان على شبكات من 8x8 إلى 64x64، مع تحريك إطاراً بإطار ومعاينة حية. صدّر النتيجة كصورة PNG حادة بأي حجم، أو GIF متحرك، أو Sprite Sheet جاهزة لمحرك ألعاب.
ولأن هذا Coddy، فرسمتك كود أيضاً. نقرة واحدة تحوّل الشبكة إلى مصفوفة ثنائية الأبعاد في Python، أو مقطع Canvas في JavaScript، أو فن box-shadow في CSS، أو ملف SVG، أو CSV يُفتح في جداول البيانات: طريقة ممتعة لترى أن الصور ليست سوى مصفوفات من الألوان.
ابدأ صغيراً: 16x16 أو 32x32. الشبكات الصغيرة تفرض أشكالاً بسيطة ومقروءة؛ ومعظم سبرايتات الألعاب الكلاسيكية 16x16 أو 32x32. يمكنك تغيير الحجم لاحقاً دون فقدان الرسمة.
استخدم القلم للحدود والتعبئة للمساحات الكبيرة. ارسم الشكل الكلي بلون واحد أولاً ثم أضف التفاصيل. النقر بالزر الأيمن (أو الممحاة) يمسح البكسل.
اختر درجتين أو ثلاثاً لكل خامة: أساس وإضاءة وظل. اللوحة المدمجة مرتبة لتجد هذه التدرجات بسهولة، والقطّارة تلتقط أي لون موجود على اللوحة.
كرّر الإطار، وحرّك بضعة بكسلات، واضغط تشغيل. إطاران أو ثلاثة تكفي لرمشة عين أو قفزة أو رفّة لهب.
نزّل PNG حتى مقياس 32x، أو GIF متحركاً، أو Sprite Sheet بكل الإطارات في صف واحد. أو افتح لوحة الكود وانسخ عملك كـ Python أو JavaScript أو CSS أو SVG أو CSV.
أحجام اللوحات وصيغ التصدير الشائعة، ومتى تستخدم كلاً منها.
| الخيار | الأنسب لـ | ملاحظات |
|---|---|---|
| شبكة 16x16 | الأيقونات والفافيكون والسبرايتات الصغيرة | حجم السبرايت الكلاسيكي: كل بكسل له وزنه |
| شبكة 32x32 | شخصيات الألعاب والصور الرمزية | التوازن الأمثل بين التفصيل والجهد |
| شبكة 64x64 | المشاهد المفصّلة والبورتريهات | خطط للشكل العام أولاً: 4,096 بكسلاً تمتلئ ببطء |
| تصدير PNG | الصور الرمزية والملصقات والأصول | كبّر 16x أو أكثر لتبقى البكسلات حادة |
| تصدير GIF | رسوم متحركة للمحادثات والويب | يستخدم إعداد FPS؛ يدعم الشفافية |
| Sprite Sheet | محركات الألعاب | كل الإطارات متجاورة في PNG واحد |
| تصدير الكود | التعلّم والفن التوليدي | Python أو JavaScript أو CSS أو SVG أو CSV |
PIXELS = [ [None, "#e43b44", "#e43b44", None], ["#e43b44", "#a22633", "#a22633", "#e43b44"], [None, "#e43b44", "#a22633", None], [None, None, "#e43b44", None],]
for row in PIXELS: print("".join("█" if c else " " for c in row))تصدير الكود يكتب كل بكسل كلون hex داخل قائمة متداخلة، مع مقطع Pillow يعيد رسمها كـ PNG. هذه النسخة المصغرة تطبع الشكل في الطرفية: دليل على أن الصورة مجرد مصفوفة ثنائية الأبعاد.
.pixel-art { --px: 12px; width: var(--px); height: var(--px); box-shadow: calc(1 * var(--px)) 0 0 0 #e43b44, calc(2 * var(--px)) 0 0 0 #e43b44, calc(1 * var(--px)) calc(1 * var(--px)) 0 0 #a22633;}تصدير CSS يحوّل كل بكسل إلى إزاحة box-shadow لعنصر div واحد، وهي حيلة كلاسيكية في تطوير الواجهات. ألصقه في أي صفحة وغيّر قيمة --px لتغيير حجم العمل كله.
,#e43b44,#e43b44, #e43b44,#a22633,#a22633,#e43b44 ,#e43b44,#e43b44, ,,#e43b44,
تصدير CSV يضع كود hex واحداً في كل خلية. افتحه في Google Sheets أو Excel، وضيّق الأعمدة حتى تصير مربعات، وأضف قاعدة تنسيق شرطي تلوّن كل خلية حسب قيمتها: فن بكسل جداول فوري.
فن البكسل فن رقمي تُبنى فيه الصورة بكسلاً بكسلاً على شبكة صغيرة، بحيث يوضع كل مربع عن قصد. إنه الأسلوب البصري لألعاب الفيديو الكلاسيكية وما زال في كل مكان: الألعاب المستقلة والصور الرمزية والأيقونات وصور الملفات الشخصية.
ابدأ بشبكة 16x16 وثلاثة أو أربعة ألوان. ارسم الشكل العام لشيء بسيط (قلب أو فطر أو سيف)، ثم أضف درجة إضاءة ودرجة ظل. القوالب المدمجة تعطيك شكلاً جاهزاً تعيد تلوينه وتعدّله. فن البكسل السهل يقوم على الأشكال النظيفة لا التفاصيل.
16x16 و32x32 هما الحجمان الكلاسيكيان للسبرايت والأفضل للبداية؛ 32x32 يكفي لمعظم الشخصيات والصور الرمزية. استخدم 64x64 فقط حين تحتاج تفصيلاً حقيقياً. وعند التصدير كبّر بمقياس 16x أو 32x لتبقى البكسلات حادة.
أضف إطاراً ثانياً بزر التكرار، وغيّر بضعة بكسلات (عين ترمش، لهب يرفّ)، واضبط FPS واضغط تشغيل للمعاينة. زر تنزيل GIF يصدّر ملف GIF متكرراً يدعم الشفافية، جاهزاً لتطبيقات المحادثة وDiscord والمواقع.
هي صورة واحدة تحوي كل إطارات التحريك متجاورة. محركات مثل Unity وGodot وPhaser تحمّل الورقة مرة واحدة وتشغّل الإطارات بإزاحة نافذة العرض. التصدير يرتب إطاراتك في صف بحجم خلية ثابت.
نعم. ارسم كل إطار، وعاين الحلقة بسرعة لعبتك، وصدّر Sprite Sheet بصيغة PNG بخلفية شفافة. تصديرا SVG وPNG مناسبان أيضاً لأيقونات الواجهات والبلاطات.
يغطي نفس سير العمل الأساسي في Piskel (الرسم على شبكة، تحريك الإطارات، تصدير GIF وSprite Sheet)، ويعمل بالكامل في المتصفح دون تثبيت، ويضيف فوق ذلك تصدير الكود. إن كنت تبحث عن محرر سبرايت أونلاين بسيط ومستمر التطوير، فقد صُنع لهذا بالضبط.
حيلة صفوف دراسية صارت كلاسيكية: تصغير خلايا الجدول حتى تصبح مربعات وتلوينها لتشكيل صورة. تصدير CSV يعطيك كود hex في كل خلية، فتعيد قاعدة تنسيق شرطي واحدة في Google Sheets أو Excel بناء رسمتك.
افتح لوحة الكود واختر صيغة. Python يعطيك قائمة ثنائية الأبعاد مع مصيّر Pillow، وJavaScript يرسم على Canvas، وCSS يصنع فناً بعنصر div واحد عبر box-shadow، وSVG ينتج مستطيلات متجهية حادة، وCSV يغذّي جداول البيانات.
نعم: مجاني، بلا تسجيل، بلا علامة مائية. كل شيء يعمل محلياً في متصفحك: يُحفظ عملك تلقائياً على جهازك ولا يُرفع إلى أي خادم أبداً.
