العربية
ارسم فن البكسل على شبكة، وحرّك الإطارات، وصدّر النتيجة بصيغة PNG أو GIF أو كود.
آخر تحديث
Coddy teaches you by writing real code in your browser - interactive lessons, instant feedback, and AI help when you get stuck.
صانع فن البكسل أداة رسم مبنية على شبكة ثابتة: بدلاً من ضربات فرشاة حرة، تضع بكسلات مفردة مربعاً مربعاً. هذا القيد هو سرّ سحر فن البكسل: شخصيات الألعاب (السبرايت) والأيقونات القديمة الطراز والصور الرمزية ورسومات 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، وضيّق الأعمدة حتى تصير مربعات، وأضف قاعدة تنسيق شرطي تلوّن كل خلية حسب قيمتها: فن بكسل جداول فوري.
