pxl yordamida kod orqali piksel sanʼati, sprite varaqlari va GIFlar yarating

pxl nima?

pxl — Node.js uchun kodga asoslangan piksel art vositasi. Siz tasvirni ixcham .px.js yoki .px.ts fayllarida tavsiflaysiz, so‘ng buyruqlar qatori interfeysi orqali PNG spritlar, JSON metama’lumotlariga ega sprite sheetlar, animatsiyalangan GIF fayllar va piksel panjarasi bilan kattalashtirilgan oldindan ko‘rishlarni yaratasiz.

Loyiha Node.js 22.18 yoki undan yangiroq versiyasini talab qiladi. Uning ish vaqtida hech qanday bog‘liqliklari yo‘q va klonlangan repozitoriydan foydalanilganda alohida build bosqichini talab qilmaydi.

Jonli brauzer ko‘ruvchisi manba faylini har safar saqlaganingizda tasvirni qayta yaratadi. U tahrirlangan asset amalini bosqichma-bosqich qayta ijro etishi ham mumkin, bu qo‘lda chizish yoki AI agent bilan ishlashda yaratish jarayonini tekshirishni osonlashtiradi.

Asosiy imkoniyatlar

• Ixcham palitralar: Ranglarni bir belgili kalitlarga biriktiring va Pico-8, Sweetie 16 hamda Endesga 32 kabi o‘rnatilgan palitralardan foydalaning.
• Spritlar va variantlar: Matn panjarasidagi spritlarni yarating, ularni akslantiring, avtomatik konturlar qo‘shing, aylantiring yoki ag‘daring hamda palitra almashtirilgan variantlarni hosil qiling.
• Chizish vositalari: To‘g‘ri to‘rtburchaklar, chiziqlar, doiralar, ko‘pburchaklar, gradientlar, dithering, shovqin, sochuvchi mo‘yqalamlar, tilemaplar va o‘rnatilgan piksel shriftidan foydalaning.
• Sprite sheetlar: TexturePacker uslubidagi JSON metama’lumotlariga ega joylashtirilgan tasvirlarni eksport qiling.
• Sahnalar: Tasvirni qatlamlarga ajrating, soya va yorug‘lik qatlamlarini qo‘shing hamda alohida qatlamlarni PNG fayllari sifatida eksport qiling.
• Animatsiya: Kadrlarni asosiy sprite ustidagi patchlar sifatida belgilang va tasma, JSON teglari hamda GIF fayllarini eksport qiling.
• Ixtiyoriy yoritish: Lampalar, yaltirash va normal xaritaga asoslangan relyef qo‘shing.
• Foydali diagnostika: Xatolarda fayl, satr, ustun, asset, qatlam va amal haqidagi ma’lumotlar, shuningdek tegishli joylarda “shuni nazarda tutdingizmi” kabi tavsiyalar ko‘rsatiladi.

pxl ni o‘rnating va ishga tushiring

1-variant: Repozitoriyni klonlash

Loyihani klonlang va uning katalogiga kiring:

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

Klonlangan nusxada CLI'ni node bin/pxl.js orqali ishga tushiring. Kiritilgan misollardan birini jonli ko‘ruvchida darhol ochishingiz mumkin:

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

Brauzerda http://127.0.0.1:4321/ manzilini oching. Ko‘ruvchi art fayli saqlanganida loyihani qayta yaratadi.

2-variant: Uni npx bilan ishga tushirish

Repozitoriyni klonlamasdan, GitHub repozitoriysidan art faylini bevosita yaratishingiz mumkin:

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

Quyidagi buyruqlarda pxl klonlangan nusxadagi node bin/pxl.js yoki npx github:crsolver/claude-pxl o‘rnida ishlatiladi.

Birinchi kodlangan spritingizni yarating

art.px.js nomli fayl yarating va quyidagi kodni qo‘shing:

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 })

Misolni tushunish

1. pal() bir belgili kalitlarni o‘n oltilik ranglarga moslaydi. Keyin bu kalitlardan sprite panjaralarida bevosita foydalanish mumkin.
2. sprite("slime", ...) asosiy spritni e’lon qiladi.
3. mx: true parametri spritning berilgan yarmini gorizontal ravishda akslantiradi.
4. outline: "k" spritga k ga biriktirilgan palitra rangidan foydalanib avtomatik kontur qo‘shadi.
5. Ikkinchi sprite base: "slime" dan foydalanadi va uning yashil ranglarini qizil ranglarga almashtiradi. Shu tariqa panjarani takrorlamasdan qayta ranglangan variant hosil bo‘ladi.
6. sheet() chars nomli sprite sheet yaratadi. slime* andozasi mos keluvchi assetlarni qamrab oladi, pad: 1 esa bir piksel bo‘shliq qo‘shadi.

Assetlarni yarating

Klonlangan repozitoriydan quyidagini ishga tushiring:

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

Misol quyidagiga o‘xshash fayllarni yaratadi:

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

Sprite fayllar tasvirni asl, bir pikselga teng masshtabda saqlaydi. chars.png va chars.json fayllari sprite sheet hamda uning TexturePacker uslubidagi metama’lumotlarini tashkil qiladi. out/_preview/ katalogida piksel panjarasi bilan kattalashtirilgan oldindan ko‘rishlar saqlanadi.

Jonli ko‘ruvchidan foydalaning

Art faylingiz uchun ishlab chiqish serverini ishga tushiring:

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

Odatiy holatda ko‘ruvchi 4321 portida mavjud bo‘ladi. Har bir saqlash qayta yaratishni ishga tushiradi va tahrirlangan assetni bosqichma-bosqich qayta ijro etadi. Chiqish o‘chirilmagan bo‘lsa, server build buyrug‘i kabi out/ fayllarini ham yozadi.

Boshqa port yoki chiqish katalogini tanlash uchun quyidagidan foydalaning:

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

Yaratilgan assetlarni diskka yozmasdan ko‘ruvchidan foydalanish uchun:

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

CLI buyruqlarini o‘rganing

Tanlangan assetlarni yaratish

Build buyrug‘i maqsad katalogi, tanlangan assetlar, chiqish masshtabi va oldindan ko‘rishlar uchun parametrlarni qabul qiladi:

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

Masalan, faqat nomi ko‘rsatilgan ikkita assetni asl masshtabidan to‘rt baravar kattalashtirib build qilish:

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

Sprite’ni matn sifatida tekshirish

ascii buyrug‘i assetni palitra kalitlari, gorizontal va vertikal o‘lchov chiziqlari bilan chiqaradi. Bu alohida piksellarni topishda foydalidir:

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

Loyiha ta’riflarini ro‘yxatlash

Assetlar, guruhlar va sheetlarni ularning manba joylashuvlari bilan birga ko‘rsatish uchun list buyrug‘idan foydalaning:

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

Ilg‘or ish jarayoni bo‘yicha maslahatlar

TypeScript art fayllaridan foydalanish

Art loyihalari .js yoki .ts formatidan foydalanishi mumkin. Repozitoriy .px.ts fayllarida muharrir to‘ldirishini ta’minlash uchun types/pxl.d.ts faylini o‘z ichiga oladi.

Artwork’ni qayta ishlatish va o‘zgartirish

Assetlar umumiy tuzilishga ega bo‘lsa, gridlarni takrorlashdan saqlaning. Variantlarni asosiy sprite’dan yarating, muqobil rang sxemalari uchun palitra almashtirishlaridan foydalaning, kerakli joylarda flip, aylantirish, qayta ishlatiladigan _parts va stamp imkoniyatlarini qo‘llang.

Deterministik protseduraviy vositalardan foydalanish

DSL tarkibida gradientlar, dithering, shovqin, sochuvchi mo‘yqalamlar, tilemaplar va qayta tiklanadigan seed’li tasodifiy guruhlar mavjud. Qayta tiklanadigan tasodifiylik generatsiya qilingan detallar buildlar orasida barqaror qolishi kerak bo‘lganda ayniqsa foydalidir.

Sahnalarni qatlamlarda qurish

Kattaroq kompozitsiyalar uchun har bir amalni bitta yassi assetga joylashtirish o‘rniga sahnalar va qatlamlardan foydalaning. pxl soya va yorug‘lik qatlamlarini, shuningdek har bir qatlamni PNG sifatida eksport qilishni qo‘llab-quvvatlaydi. To‘liq API uchun reference.md fayliga murojaat qiling.

Animatsiya va yoritishni tanlab qo‘shish

Animatsiya kadrlari asosiy sprite ustidagi patchlar sifatida ifodalanishi mumkin, bu o‘xshash kadrlar orasidagi takrorlanishni kamaytiradi. pxl bu ta’riflarni striplar, JSON teglar va animatsiyali GIFlarga aylantira oladi. Chiroqlar, nur tarqalishi va normal xaritaga asoslangan relyef uchun maxsus lighting qo‘llanmasiga amal qiling.

pxl’dan AI agent bilan foydalanish

Repozitoriy agent ko‘nikmasi sifatida ishlashga mo‘ljallangan. Tavsiya etilgan sikl art faylini yozish, uni build qilish, preview’ni tekshirish va manba kodiga tuzatish kiritishdan iborat. Jonli ko‘ruvchi bu jarayonni real vaqt rejimida ko‘rsatadi.

Ko‘nikmani barcha Claude Code loyihalari uchun o‘rnatish:

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

Uni faqat joriy loyiha uchun o‘rnatish:

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

Codex, Cursor yoki boshqa agent uchun agentga SKILL.md faylini ko‘rsating va CLI yo‘lini node <path-to-pxl>/bin/pxl.js sifatida belgilang. Artwork brauzeringizda qanday yaratilayotganini kuzatmoqchi bo‘lsangiz, agentdan pxl serve buyrug‘ini ishga tushirishni so‘rang.

Ishlab chiqish buyruqlari

pxl’ning o‘zini o‘zgartirmoqchi bo‘lsangiz, ishlab chiqish bog‘liqliklarini o‘rnating va tekshiruvlarni ishga tushiring:

npm install
npm run check

Ishlab chiqish bog‘liqliklari TypeScript va Node.js tur ta’riflarini o‘z ichiga oladi. Repozitoriy galereyasini qayta generatsiya qilish uchun quyidagini ishga tushiring:

node scripts/gallery.ts

Xulosa

pxl piksel artni manba kodi sifatida ko‘rishning ixcham usulini taqdim etadi. Palitra va matnli grid sprite’dan boshlang, uni PNG va sprite-sheet assetlariga build qiling hamda tezkor fikr-mulohaza uchun jonli ko‘ruvchini ochiq qoldiring. Loyiha kengaygani sari runtime bog‘liqliklarini qo‘shmasdan qayta ishlatiladigan variantlar, chizish primitivlari, qatlamli sahnalar, animatsiya, yoritish va AI yordamidagi iteratsiya siklini qo‘shishingiz mumkin.