Dala Ubuciko Bephikseli, Ama-Sprite Sheet nama-GIF Ngekhodi usebenzisa i-pxl

Yini i-pxl?

pxl iyithuluzi le-pixel art le-Node.js elisekelwe kukhodi. Uchaza imidwebo kumafayela amafushane e-.px.js noma e-.px.ts, bese usebenzisa isixhumi esibonakalayo somugqa womyalo ukuze ukhiqize ama-sprite e-PNG, ama-sprite sheet anemethadatha ye-JSON, ama-GIF agqwayizayo, kanye nokubuka kuqala okukhulisiwe okun_grid ye-pixel.

Iphrojekthi idinga i-Node.js 22.18 noma entsha. Ayinakho ukuncika kwesikhathi sokusebenza futhi ayidingi isinyathelo sokwakha esihlukile uma isetshenziswa kusuka endaweni egcinwe kuyo nge-clone.

Isibukeli sayo esisebenza esipheqululini sakha kabusha umdwebo njalo lapho ugcina ifayela lomthombo. Singaphinda sidlale impahla ehleliwe isinyathelo ngesinyathelo, okwenza kube lula ukuhlola inqubo yokudala lapho udweba ngesandla noma usebenza ne-ejenti ye-AI.

Izici ezibalulekile

• Amaphalethi amafushane: Nikeza imibala okhiye abanohlamvu olulodwa bese usebenzisa amaphalethi akhelwe ngaphakathi njenge-Pico-8, Sweetie 16, ne-Endesga 32.
• Ama-sprite nezinhlobonhlobo: Dala ama-sprite egridi yombhalo, uwabonise esibukweni, wengeze ama-outline azenzakalelayo, uwazungezise noma uwaphendule, bese ukhiqiza izinhlobonhlobo ezishintshwe amaphalethi.
• Amathuluzi okudweba: Sebenzisa onxande, imigqa, imibuthano, amapholigoni, ama-gradient, i-dithering, umsindo, amabhulashi okusabalalisa, ama-tilemap, kanye nefonti ye-pixel eyakhelwe ngaphakathi.
• Ama-sprite sheet: Thumela izithombe ezipakishiwe ezinemethadatha ye-JSON yesitayela se-TexturePacker.
• Izigcawu: Hlela umdwebo ube yizingqimba, wengeze izingqimba zezithunzi nezibani, bese uthumela izingqimba ngazinye njengamafayela e-PNG.
• Ukugqwayiza: Chaza amafreyimu njengama-patch phezu kwe-sprite eyisisekelo bese uthumela ama-strip, ama-tag e-JSON, namafayela e-GIF.
• Ukukhanyisa ongakukhetha: Faka izibani, ukukhanya okukhazimulayo, kanye nokuphakama okusekelwe kuma-normal.
• Ukuhlola amaphutha okuwusizo: Amaphutha afaka ulwazi lwefayela, umugqa, ikholomu, impahla, ungqimba, nomsebenzi, kanye neziphakamiso zokuthi “ubusho ukuthi” lapho kufanele.

Faka futhi usebenzise i-pxl

Inketho 1: Yenza i-clone yendawo yokugcina

Yenza i-clone yephrojekthi bese ungena ohlwini lwayo:

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

Ku-clone, sebenzisa i-CLI nge-node bin/pxl.js. Ungavula ngokushesha esinye sezibonelo ezifakiwe kusibukeli esisebenza bukhoma:

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

Vula i-http://127.0.0.1:4321/ esipheqululini. Isibukeli sizokwakha kabusha iphrojekthi njalo lapho ifayela lobuciko ligcinwa.

Inketho 2: Yisebenzise nge-npx

Ungakha ifayela lobuciko ngokuqondile endaweni yokugcina ye-GitHub ngaphandle kokwenza i-clone:

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

Emiyalweni engezansi, i-pxl isho i-node bin/pxl.js evela ku-clone noma i-npx github:crsolver/claude-pxl.

Dala i-sprite yakho yokuqala enekhodi

Dala ifayela elibizwa ngokuthi art.px.js bese wengeza ikhodi elandelayo:

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

Qonda isibonelo

1. pal() ihlanganisa okhiye abanohlamvu olulodwa nemibala ye-hexadecimal. Labo khiye bangasetshenziswa ngokuqondile kumagridi e-sprite.
2. sprite("slime", ...) imemezela i-sprite eyisisekelo.
3. Inketho ye-mx: true ibonisa ngokuvundlile ingxenye ye-sprite enikeziwe.
4. outline: "k" yenza ngokuzenzakalela i-outline ye-sprite ngombala wephalethi onikezwe u-k.
5. I-sprite yesibili isebenzisa u-base: "slime" bese ishintsha imibala yayo eluhlaza ibe bomvu, ikhiqize uhlobo olushintshiwe ngaphandle kokuphinda igridi.
6. sheet() idala i-sprite sheet ebizwa ngokuthi chars. Iphethini ye-slime* ifaka izimpahla ezifanayo, kanti i-pad: 1 yengeza i-pixel eyodwa yesikhala.

Yakha izimpahla

Kusuka endaweni yokugcina eyenziwe i-clone, sebenzisa:

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

Isibonelo sikhiqiza amafayela afana nala:

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

Amafayela e-sprite aqukethe umdwebo ngesikali sawo sokuqala se-pixel eyodwa. Amafayela e-chars.png ne-chars.json akha i-sprite sheet nemethadatha yaso yesitayela se-TexturePacker. Uhla lwe-out/_preview/ luqukethe ukubuka kuqala okukhulisiwe okun_grid ye-pixel.

Sebenzisa isibukeli esisebenza bukhoma

Qalisa iseva yokuthuthukisa yefayela lakho lobuciko:

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

Ngokuzenzakalela, isibukeli sitholakala ku-port 4321. Ukugcina ngakunye kuqalisa ukwakhiwa kabusha futhi kudlale kabusha impahla ehleliwe isinyathelo ngesinyathelo. Iseva ibhala namafayela afanayo e-out/ njengomyalo wokwakha, ngaphandle uma okukhiphayo kuvaliwe.

Ukuze ukhethe enye i-port noma uhla lokukhipha, sebenzisa:

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

Ukuze usebenzise isibukeli ngaphandle kokubhala izimpahla ezikhiqiziwe kudiski:

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

Hlola imiyalo ye-CLI

Yakha izimpahla ezikhethiwe

Umyalo wokwakha wamukela izinketho zohlu lwemibhalo okuyiwa kulo, ama-asset akhethiwe, isikali sokukhishwa, nokubuka kuqala:

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

Isibonelo, yakha ama-asset amabili kuphela aqanjwe ngamagama, ngesikali esiphindwe kane kwesokuqala:

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

Hlola i-sprite njengombhalo

Umyalo we-ascii ubonisa i-asset njengokhiye be-palette namarula avundlile naqondile. Lokhu kuyasiza lapho uthola amaphikseli ngamanye:

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

Faka ohlwini izincazelo zephrojekthi

Sebenzisa i-list ukuze ubonise ama-asset, amaqembu, nama-sheet kanye nezindawo zemithombo yawo:

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

Amathiphu okusebenza athuthukile

Sebenzisa amafayela obuciko e-TypeScript

Amaphrojekthi obuciko angasebenzisa i-.js noma i-.ts. Indawo yokugcina ikhodi ihlanganisa i-types/pxl.d.ts ukuze inikeze ukuqedelwa kwekhodi kumhleli kumafayela e-.px.ts.

Phinda usebenzise futhi uguqule ubuciko

Gwema ukuphinda amagridi lapho ama-asset enesakhiwo esifanayo. Yakha izinhlobo ezihlukile usuka ku-sprite eyisisekelo, sebenzisa ukushintshanisa i-palette kwezikimu zemibala ezihlukile, futhi usebenzise ama-flip, ama-rotation, i-_parts esetshenziswa kabusha, kanye ne-stamp lapho kufanele.

Sebenzisa amathuluzi enqubo anomphumela oqond deterministically

I-DSL ihlanganisa ama-gradient, i-dithering, umsindo, amabhulashi okusabalalisa, ama-tilemap, namaqembu angahleliwe anembewu ephindaphindekayo. Ukuhleleka kabusha kokungahleliwe kuwusizo kakhulu lapho ufuna imininingwane ekhiqiziwe ihlale izinzile phakathi kokwakhiwa.

Yakha izigcawu ngezendlalelo

Ezakhiweni ezinkulu, sebenzisa izigcawu nezigcawu zezendlalelo esikhundleni sokufaka yonke imisebenzi ku-asset eyisicaba eyodwa. I-pxl isekela izendlalelo zezithunzi eziphonswayo nezokukhanya, kanye nokukhishwa kwe-PNG kwesendlalelo ngasinye. Bheka i-reference.md ukuze uthole i-API ephelele.

Engeza ukugqwayiza nokukhanyisa ngokukhetha

Amafreyimu wokugqwayiza angamelwa njengama-patch phezu kwe-sprite eyisisekelo, okunciphisa ukuphindaphindwa phakathi kwamafreyimu afanayo. I-pxl ingaguqula lezi zincazelo zibe ama-strip, amathegi e-JSON, nama-GIF agqwayizayo. Kumalambu, ukukhanya okukhazimulayo, nokukhululeka okusekelwe kuma-normal, landela umhlahlandlela wokukhanyisa ozinikele.

Sebenzisa i-pxl ne-ejenti ye-AI

Indawo yokugcina ikhodi yakhelwe ukusebenza njengekhono le-ejenti. Umjikelezo onconywayo uwukubhala ifayela lobuciko, ukulakha, ukuhlola ukubuka kuqala, bese ulungisa umthombo. Isibukeli esibukhoma senza lo msebenzi ubonakale ngesikhathi sangempela.

Ukufaka leli khono kuwo wonke amaphrojekthi e-Claude Code:

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

Ukulifaka kuphrojekthi yamanje kuphela:

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

Kwi-Codex, Cursor, noma kwenye i-ejenti, qondisa i-ejenti ku-SKILL.md bese ucacisa indlela ye-CLI njenge-node <path-to-pxl>/bin/pxl.js. Cela i-ejenti iqale i-pxl serve uma ufuna ukubuka ubuciko bakhiwa esipheqululini sakho.

Imiyalo yokuthuthukisa

Uma uhlela ukulungisa i-pxl uqobo, faka okuncikile kwayo kokuthuthukisa bese usebenzisa ukuhlola kwayo:

npm install
npm run check

Okuncikile kokuthuthukisa kuhlanganisa i-TypeScript nezincazelo zezinhlobo ze-Node.js. Ukuvuselela igalari yendawo yokugcina ikhodi, sebenzisa:

node scripts/gallery.ts

Isiphetho

I-pxl inikeza indlela emfushane yokuphatha ubuciko be-pixel njengekhodi yomthombo. Qala nge-palette ne-sprite ye-text-grid, uyakhe ibe ama-asset e-PNG ne-sprite-sheet, futhi ugcine isibukeli esibukhoma sivuliwe ukuze uthole impendulo esheshayo. Njengoba iphrojekthi ikhula, ungangeza izinhlobo ezihlukile ezisebenziseka kabusha, ama-primitive okudweba, izigcawu ezinezendlalelo, ukugqwayiza, ukukhanyisa, kanye nomjikelezo wokuphindaphinda osizwa yi-AI ngaphandle kokwengeza okuncikile ngesikhathi sokusebenza.