pxl کے ساتھ پکسل آرٹ، اسپرائٹ شیٹس اور GIFs کو کوڈ کے ذریعے بنائیں

pxl کیا ہے؟

pxl Node.js کے لیے کوڈ فرسٹ پکسل آرٹ ٹول ہے۔ آپ مختصر .px.js یا .px.ts فائلوں میں آرٹ ورک بیان کرتے ہیں، پھر اس کے کمانڈ لائن انٹرفیس کے ذریعے PNG اسپرائٹس، JSON میٹا ڈیٹا والی اسپرائٹ شیٹس، متحرک GIFs، اور پکسل گرڈ کے ساتھ بڑے پری ویوز تیار کرتے ہیں۔

اس پروجیکٹ کے لیے Node.js 22.18 یا اس کے بعد کا ورژن درکار ہے۔ اس میں رن ٹائم ڈیپینڈنسیز نہیں ہیں اور کلون کی گئی ریپوزٹری سے استعمال کرتے وقت الگ بلڈ مرحلے کی ضرورت نہیں ہوتی۔

اس کا لائیو براؤزر ویور آپ کی سورس فائل محفوظ کرتے ہی آرٹ ورک کو دوبارہ بناتا ہے۔ یہ ترمیم شدہ اثاثے کی کارروائیوں کو ایک ایک کرکے دوبارہ چلا بھی سکتا ہے، جس سے ہاتھ سے ڈرائنگ کرتے وقت یا AI ایجنٹ کے ساتھ کام کرتے ہوئے تخلیق کے عمل کا معائنہ آسان ہو جاتا ہے۔

اہم خصوصیات

• مختصر پیلیٹس: رنگوں کو ایک حرف والی کلیدوں سے منسلک کریں اور Pico-8، Sweetie 16، اور Endesga 32 جیسی بلٹ اِن پیلیٹس استعمال کریں۔
• اسپرائٹس اور ورژنز: ٹیکسٹ گرڈ اسپرائٹس بنائیں، انہیں آئینہ کریں، خودکار آؤٹ لائنز شامل کریں، گھمائیں یا پلٹیں، اور پیلیٹ تبدیل شدہ ورژنز تیار کریں۔
• ڈرائنگ ٹولز: مستطیلیں، لکیریں، دائرے، کثیرالاضلاع، گریڈینٹس، ڈائتھرنگ، نویز، اسکیٹر برشز، ٹائل میپس، اور بلٹ اِن پکسل فونٹ استعمال کریں۔
• اسپرائٹ شیٹس: TexturePacker طرز کے JSON میٹا ڈیٹا کے ساتھ پیک شدہ تصاویر برآمد کریں۔
• مناظر: آرٹ ورک کو تہوں میں منظم کریں، کاسٹ شیڈو اور لائٹ تہیں شامل کریں، اور انفرادی تہوں کو PNG فائلوں کے طور پر برآمد کریں۔
• اینیمیشن: فریمز کو بنیادی اسپرائٹ پر پیچز کے طور پر متعین کریں اور اسٹرپس، JSON ٹیگز، اور GIF فائلیں برآمد کریں۔
• اختیاری روشنی: لیمپس، گلو، اور نارمل بیسڈ ریلیف شامل کریں۔
• مفید تشخیصی معلومات: غلطیوں میں فائل، لائن، کالم، اثاثے، تہہ، اور کارروائی کی معلومات شامل ہوتی ہیں، اور جہاں مناسب ہو وہاں “کیا آپ کی مراد یہ تھی” کے اشارے بھی دیے جاتے ہیں۔

pxl انسٹال اور چلائیں

آپشن 1: ریپوزٹری کلون کریں

پروجیکٹ کلون کرکے اس کی ڈائریکٹری میں جائیں:

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 ریپوزٹری سے براہ راست آرٹ فائل بنا سکتے ہیں:

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

ذیل کی کمانڈز میں pxl سے مراد کلون سے node bin/pxl.js یا npx github:crsolver/claude-pxl ہے۔

اپنا پہلا کوڈ شدہ اسپرائٹ بنائیں

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() ایک حرف والی کلیدوں کو ہیکساڈیسیمل رنگوں سے منسلک کرتا ہے۔ پھر ان کلیدوں کو اسپرائٹ گرڈز میں براہ راست استعمال کیا جا سکتا ہے۔
2. sprite("slime", ...) بنیادی اسپرائٹ کا اعلان کرتا ہے۔
3. mx: true آپ کے فراہم کردہ اسپرائٹ کے نصف حصے کو افقی طور پر آئینہ کرتا ہے۔
4. outline: "k" پیلیٹ میں k کو تفویض کردہ رنگ سے اسپرائٹ کے گرد خودکار آؤٹ لائن بناتا ہے۔
5. دوسرا اسپرائٹ base: "slime" استعمال کرتا ہے اور اس کے سبز رنگوں کو سرخ رنگوں سے بدل دیتا ہے، یوں گرڈ کو دوبارہ لکھے بغیر دوبارہ رنگ کیا گیا ورژن تیار ہوتا ہے۔
6. sheet() chars نام کی اسپرائٹ شیٹ بناتا ہے۔ slime* پیٹرن مماثل اثاثوں کو شامل کرتا ہے، جبکہ pad: 1 ایک پکسل کی خالی جگہ شامل کرتا ہے۔

اثاثے بنائیں

کلون کی گئی ریپوزٹری سے چلائیں:

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

اسپرائٹ فائلوں میں آرٹ ورک ایک پکسل کے اصل اسکیل پر موجود ہوتا ہے۔ chars.png اور chars.json فائلیں اسپرائٹ شیٹ اور اس کے TexturePacker طرز کے میٹا ڈیٹا پر مشتمل ہوتی ہیں۔ out/_preview/ ڈائریکٹری میں پکسل گرڈ کے ساتھ بڑے پری ویوز ہوتے ہیں۔

لائیو ویور استعمال کریں

اپنی آرٹ فائل کے لیے ڈیولپمنٹ سرور شروع کریں:

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

بطور ڈیفالٹ، ویور پورٹ 4321 پر دستیاب ہوتا ہے۔ ہر محفوظ کرنے کی کارروائی دوبارہ بلڈ شروع کرتی ہے اور ترمیم شدہ اثاثے کی کارروائیوں کو مرحلہ وار دوبارہ چلاتی ہے۔ جب تک آؤٹ پٹ غیر فعال نہ ہو، سرور بلڈ کمانڈ جیسی ہی out/ فائلیں بھی لکھتا ہے۔

دوسرا پورٹ یا آؤٹ پٹ ڈائریکٹری منتخب کرنے کے لیے استعمال کریں:

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

تیار کردہ اثاثوں کو ڈسک پر لکھے بغیر ویور استعمال کرنے کے لیے:

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

CLI کمانڈز دریافت کریں

منتخب اثاثے بنائیں

build کمانڈ منزل ڈائریکٹری، منتخب اثاثوں، آؤٹ پٹ اسکیل اور پیش نظاروں کے لیے اختیارات قبول کرتی ہے:

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

مثال کے طور پر، دو نامزد اثاثوں کو ان کے اصل اسکیل سے چار گنا پر صرف build کریں:

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 فائلوں کے لیے ایڈیٹر کی تکمیل فراہم کرتی ہے۔

آرٹ ورک کو دوبارہ استعمال اور تبدیل کریں

جب اثاثے ایک مشترک ساخت رکھتے ہوں تو گرڈز کو بار بار بنانے سے گریز کریں۔ بنیادی اسپرائٹ سے مختلف شکلیں بنائیں، متبادل رنگی اسکیموں کے لیے پیلیٹ تبدیل کریں، اور جہاں مناسب ہو flips، rotations، دوبارہ قابلِ استعمال _parts اور stamp استعمال کریں۔

متعین طریقہ کار کے ٹولز استعمال کریں

DSL میں gradients، dithering، noise، scatter brushes، tilemaps اور قابلِ تکرار seeds والے random groups شامل ہیں۔ قابلِ تکرار randomness خاص طور پر اس وقت مفید ہوتی ہے جب آپ چاہتے ہیں کہ تخلیق کردہ تفصیلات مختلف builds میں مستحکم رہیں۔

مناظر کو تہوں میں بنائیں

بڑی کمپوزیشنز کے لیے ہر آپریشن کو ایک ہی فلیٹ اثاثے میں رکھنے کے بجائے scenes اور layers استعمال کریں۔ pxl cast-shadow اور light layers کے ساتھ ساتھ ہر layer کی PNG برآمد کو بھی سپورٹ کرتا ہے۔ مکمل API کے لیے reference.md دیکھیں۔

اینیمیشن اور روشنی کا انتخابی استعمال کریں

اینیمیشن فریمز کو بنیادی اسپرائٹ پر patches کے طور پر ظاہر کیا جا سکتا ہے، جس سے ملتے جلتے فریمز کے درمیان تکرار کم ہوتی ہے۔ pxl ان تعریفوں کو strips، JSON tags اور متحرک GIFs میں تبدیل کر سکتا ہے۔ lamps، glow اور normal-based relief کے لیے مخصوص lighting guide کی پیروی کریں۔

AI ایجنٹ کے ساتھ pxl استعمال کریں

ریپوزٹری کو ایجنٹ کی skill کے طور پر کام کرنے کے لیے ڈیزائن کیا گیا ہے۔ اس کا تجویز کردہ عمل یہ ہے کہ آرٹ فائل لکھیں، اسے build کریں، پیش نظارہ دیکھیں اور ماخذ میں ترمیم کریں۔ لائیو ویور اس ورک فلو کو حقیقی وقت میں دکھاتا ہے۔

تمام Claude Code پروجیکٹس کے لیے skill انسٹال کرنے کے لیے:

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 path کو node <path-to-pxl>/bin/pxl.js کے طور پر بتائیں۔ اگر آپ براؤزر میں آرٹ بنتا ہوا دیکھنا چاہتے ہیں تو ایجنٹ سے pxl serve شروع کرنے کو کہیں۔

ترقیاتی کمانڈز

اگر آپ خود pxl میں ترمیم کرنے کا ارادہ رکھتے ہیں تو اس کی ترقیاتی dependencies انسٹال کریں اور اس کے checks چلائیں:

npm install
npm run check

ترقیاتی dependencies میں TypeScript اور Node.js کی type definitions شامل ہیں۔ ریپوزٹری gallery دوبارہ بنانے کے لیے چلائیں:

node scripts/gallery.ts

نتیجہ

pxl پکسل آرٹ کو source code کے طور پر برتنے کا ایک مختصر طریقہ فراہم کرتا ہے۔ پیلیٹ اور text-grid اسپرائٹ سے شروع کریں، اسے PNG اور sprite-sheet اثاثوں میں build کریں، اور فوری feedback کے لیے لائیو ویور کھلا رکھیں۔ جیسے جیسے پروجیکٹ بڑھتا ہے، آپ runtime dependencies شامل کیے بغیر دوبارہ قابلِ استعمال variants، drawing primitives، layered scenes، animation، lighting اور AI-assisted iteration loop شامل کر سکتے ہیں۔