دوز مباشرة للمحتوى الرئيسي
دروس فالذكاء الاصطناعي

صايب Pixel Art وSprite Sheets وGIFs بالكود باستعمال pxl

تعلّم كيفاش تثبّت pxl، وتعرّف Pixel Art باستعمال DSL ديالو المختصر، وتولّد sprites وsprite sheets بصيغة PNG، وتعاين التغييرات فعارض مباشر فالمتصفح، وتستعمل ميزات متقدمة بحال variants والأنيميشن والمشاهد والإضاءة وسيرورات العمل بمساعدة الذكاء الاصطناعي.

حوالي 16 دقايق ديال القراية
صايب Pixel Art وSprite Sheets وGIFs بالكود باستعمال pxl

شنو هو pxl؟

pxl هو أداة ديال pixel art مبنية على الكود لـ Node.js. كتوصّف الرسومات فملفات مختصرة .px.js ولا .px.ts، ومن بعد كتستعمل الواجهة ديال سطر الأوامر باش تولّد sprites بصيغة PNG، وsprite sheets مع metadata بصيغة JSON، وGIFs متحرّكة، ونسخ مكبّرة فيها شبكة ديال البيكسلات.

المشروع كيحتاج Node.js 22.18 ولا أحدث. ما فيه حتى dependency وقت التشغيل، وما كيحتاجش لمرحلة build بوحدها ملي كتستعملو من repository منسوخ.

مشهد pixel art متحرّك مولّد بـ pxl

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

أهم المزايا

  • لوحات ألوان مختصرة: عيّن الألوان لمفاتيح من حرف واحد واستعمل لوحات مدمجة بحال Pico-8 وSweetie 16 وEndesga 32.
  • Sprites ونسخ مختلفة: أنشئ sprites من شبكات نصية، قلبها، زِد ليها حدود أوتوماتيكية، دوّرها ولا قلبها، وخرّج نسخ مبدّلة الألوان.
  • أدوات الرسم: استعمل المستطيلات، والخطوط، والدوائر، والمضلعات، والتدرجات، وdithering، والضجيج، وفرش scatter، وtilemaps، وخط البيكسلات المدمج.
  • Sprite sheets: صدّر صوراً مجمّعة مع metadata بصيغة JSON على طريقة TexturePacker.
  • المشاهد: نظّم الرسومات فطبقات، زِد طبقات الظلال والإضاءة، وصدّر كل طبقة بوحدها كملف PNG.
  • التحريك: عرّف الإطارات كتصحيحات فوق sprite أساسي وصدّر الشرائط، ووسوم JSON، وملفات GIF.
  • إضاءة اختيارية: زِد المصابيح، والتوهج، relief مبني على الـ normals.
  • تشخيص مفيد: الأخطاء كتتضمن معلومات الملف، والسطر، والعمود، وasset، والطبقة، والعملية، ومعاها اقتراحات “واش قصدتي” ملي كاينة.
مشهد متجر pixel art مفصّل مصنوع بـ pxl

ثبّت وشغّل pxl

الخيار 1: نسخ repository

نسخ المشروع ودخل للمجلد ديالو:

git clone https://github.com/crsolver/claude-pxl.git
cd claude-pxl

فنسخة منسوخة، شغّل CLI عبر node bin/pxl.js. تقدر تفتح مباشرة واحد من الأمثلة المرفقة فالعارض المباشر:

node bin/pxl.js serve examples/shop.px.js

حلّ http://127.0.0.1:4321/ فالمتصفح. العارض غادي يعاود يبني المشروع كل مرة كيتسجّل فيها ملف الرسم.

الخيار 2: شغّلو بـ npx

تقدر تبني ملف رسم مباشرة من GitHub بلا ما تنسخ repository:

npx github:crsolver/claude-pxl build art.px.js

فالأوامر اللي جاية، pxl كتعني يا إما node bin/pxl.js من نسخة منسوخة، يا إما npx github:crsolver/claude-pxl.

أنشئ أول sprite بالكود

أنشئ ملف سميتو art.px.js وزِد فيه الكود التالي:

pal({
  k: "#1b1630",
  g: "#8ccf63",
  G: "#4c8a44",
  w: "#fff6e0",
  r: "#e2585e",
  R: "#a63a4c"
})

sprite("slime", { mx: true, outline: "k" }, `
  ....ggg
  ..ggGGg
  .ggGwGg
  gggkwgg
  GGGGGGG`)

sprite("slime_red", {
  base: "slime",
  swap: { g: "r", G: "R" }
})

sheet("chars", ["slime*"], { pad: 1 })

فهم المثال

  1. pal() كيربط مفاتيح من حرف واحد بألوان hexadecimal. ومن بعد تقدر تستعمل هاد المفاتيح مباشرة فشبكات الـ sprites.
  2. sprite("slime", ...) كيصرّح بالـ sprite الأساسي.
  3. الخيار mx: true كيقلب أفقياً النصف اللي عطيت من الـ sprite.
  4. outline: "k" كيدير حدود أوتوماتيكية للـ sprite باستعمال لون لوحة الألوان المرتبط بـ k.
  5. الـ sprite الثاني كيستعمل base: "slime" وكيبدّل الألوان الخضراء بالحمراء، وكيخرّج نسخة مبدّلة اللون بلا ما يكرّر الشبكة.
  6. sheet() كينشئ sprite sheet سميتو chars. النمط slime* كيشمل الـ assets المطابقة، وpad: 1 كيزيد بيكسل واحد ديال المسافة.

بني الـ assets

من repository منسوخ، شغّل:

node bin/pxl.js build art.px.js

المثال كيخرّج ملفات بحال:

out/sprites/slime.png
out/sprites/slime_red.png
out/chars.png
out/chars.json
out/_preview/*.png

ملفات الـ sprites فيها الرسومات بالحجم الأصلي ديال بيكسل واحد. الملفان chars.png وchars.json كيشكّلو الـ sprite sheet والـ metadata ديالو على طريقة TexturePacker. المجلد out/_preview/ فيه معاينات مكبّرة مع شبكة ديال البيكسلات.

استعمل العارض المباشر

شغّل خادم التطوير لملف الرسم ديالك:

node bin/pxl.js serve art.px.js

افتراضياً، العارض متاح فالمنفذ 4321. كل عملية حفظ كتطلق إعادة البناء وكتعاود تشغيل asset المعدّل خطوة بخطوة. الخادم حتى هو كيكتب نفس ملفات out/ اللي كينتجها أمر build، إلا عطّلتي الإخراج.

باش تختار منفذاً ولا مجلداً آخر للإخراج، استعمل:

node bin/pxl.js serve art.px.js --port 5000 --out generated

باش تستعمل العارض بلا ما تكتب assets مولّدة فالقرص:

node bin/pxl.js serve art.px.js --no-out

كهف pixel art متحرّك ومضيء

اكتشف أوامر CLI

بني assets محدّدة

أمر البناء كيقْبل اختيارات للمجلد ديال الوجهة، والأصول المختارة، ومقياس الإخراج، والمعاينات:

pxl build <art.px.js> [--out DIR] [--only a,b] [--scale N] [--no-preview]

مثلاً، بنِي غير جوج ديال الأصول المسمّاة بمقياس كيساوي أربع مرات المقياس الأصلي ديالهم:

node bin/pxl.js build art.px.js --only slime,slime_red --scale 4

عاين سْبرايت كنص

الأمر ascii كيطبع الأصل على شكل مفاتيح ديال الألوان، مع مساطر أفقية وعمودية. هاد الشي مفيد ملي كتقلب على البيكسلات الفردية:

node bin/pxl.js ascii art.px.js slime

عرض تعريفات المشروع

استعمل list باش تعرض الأصول، والمجموعات، والصفائح مع مواقع المصدر ديالها:

node bin/pxl.js list art.px.js

نصائح متقدمة لسير العمل

استعمل ملفات الرسم بـ TypeScript

مشاريع الرسم تقدر تستعمل إما .js أو .ts. المستودع فيه types/pxl.d.ts باش يوفّر الإكمال التلقائي فالمحرر لملفات .px.ts.

عاود استعمل وحوّل الرسومات

تفادى تكرار الشبكات ملي كتكون الأصول عندها بنية مشتركة. بنِي النسخ انطلاقاً من سْبرايت أساسي، واستعمل تبديلات الألوان لأنظمة ألوان بديلة، واستعمل القلب، والدوران، و_parts القابلة لإعادة الاستعمال، وstamp فالحالات المناسبة.

استعمل أدوات إجرائية حتمية

الـ DSL فيها التدرجات، والتنقيط، والضجيج، وفراشي النثر، وخرائط البلاطات، والمجموعات العشوائية ببذور قابلة لإعادة الإنتاج. العشوائية القابلة لإعادة الإنتاج مفيدة خصوصاً ملي بغيتي التفاصيل المولّدة تبقى مستقرة بين عمليات البناء.

بنِي المشاهد على طبقات

فالتكوينات الكبيرة، استعمل المشاهد والطبقات عوض ما تحط كل عملية فـأصل مسطّح واحد. pxl كيدعم طبقات الظلال المسقطة والضوء، وكذلك تصدير PNG لكل طبقة. راجع reference.md باش تشوف الـ API كاملة.

زِد الحركة والإضاءة بشكل انتقائي

تقدر تمثّل إطارات الحركة على شكل ترقيعات فوق سْبرايت أساسي، وبهذا كتقلّل التكرار بين الإطارات المتشابهة. pxl يقدر يحوّل هاد التعريفات لشرائط، ووسوم JSON، وصور GIF متحركة. بالنسبة للمصابيح، والتوهج، والإغناء المبني على الاتجاهات الطبيعية، تبع دليل الإضاءة المخصص.

استعمل pxl مع وكيل ذكاء اصطناعي

المستودع مصمم باش يخدم كمهارة للوكيل. الحلقة الموصى بها هي تكتب ملف رسم، تبنيه، تعاين المعاينة، وتعدّل المصدر. العارض المباشر كيخلّي هاد سير العمل باين فالوقت الحقيقي.

باش تثبّت المهارة لجميع مشاريع Claude Code:

git clone https://github.com/crsolver/claude-pxl.git ~/.claude/skills/pxl-pixel-art

وباش تثبّتها غير فالمشروع الحالي:

git clone https://github.com/crsolver/claude-pxl.git .claude/skills/pxl-pixel-art

بالنسبة لـ Codex أو Cursor أو أي وكيل آخر، وجّه الوكيل لـ SKILL.md وحدّد مسار CLI بهاد الشكل: node <path-to-pxl>/bin/pxl.js. طلب من الوكيل يشغّل pxl serve إلا بغيتي تراقب كيفاش كيتبنى الرسم فالمتصفح.

أوامر التطوير

إلا كنت ناوي تعدّل pxl براسو، ثبّت اعتماديات التطوير ديالو وشغّل الاختبارات:

npm install
npm run check

اعتماديات التطوير فيها تعريفات TypeScript وNode.js. باش تعاود تولّد معرض المستودع، شغّل:

node scripts/gallery.ts

الخلاصة

pxl كيوفّر طريقة مختصرة باش تتعامل مع فن البيكسل بحال إلا كان كود المصدر. بْدا بلوحة ألوان وسْبرايت مبني على شبكة نصية، وبنيه لأصول PNG وصفائح السْبرايت، وخلي العارض المباشر محلول باش تاخذ ملاحظات بسرعة. ومع نمو المشروع، تقدر تزيد نسخاً قابلة لإعادة الاستعمال، وأشكال الرسم الأساسية، ومشاهد متعددة الطبقات، والحركة، والإضاءة، وحلقة تكرار بمساعدة الذكاء الاصطناعي، بلا ما تزيد اعتماديات وقت التشغيل.