Unda Sanaa ya Pikseli, Karatasi za Spraiti na GIF kama Msimbo ukitumia pxl

pxl ni nini?

pxl ni zana ya pixel art inayotumia msimbo kwanza kwa Node.js. Unaeleza mchoro katika faili fupi za .px.js au .px.ts, kisha unatumia kiolesura chake cha mstari wa amri kutengeneza sprite za PNG, sprite sheet zenye metadata ya JSON, GIF zenye uhuishaji, na hakikisho zilizokuzwa zenye gridi ya pikseli.

Mradi huu unahitaji Node.js 22.18 au toleo jipya zaidi. Hauna utegemezi wa wakati wa kuendesha programu na hauhitaji hatua tofauti ya kujenga unapotumiwa kutoka kwenye hazina iliyokloniwa.

Kioneshi chake cha moja kwa moja kwenye kivinjari hujenga upya mchoro kila unapohifadhi faili ya chanzo. Pia kinaweza kucheza tena utendaji wa kipengee kilichohaririwa hatua kwa hatua, hivyo kurahisisha kukagua mchakato wa uundaji unapochora mwenyewe au kufanya kazi na wakala wa AI.

Vipengele muhimu

• Paleti fupi: Weka rangi kwenye funguo za herufi moja na utumie paleti zilizojengwa ndani kama Pico-8, Sweetie 16 na Endesga 32.
• Sprite na vibadala: Unda sprite za gridi ya maandishi, zionyeshe kwa kioo, ongeza mipaka otomatiki, zizungushe au zigeuze, na utengeneze vibadala vilivyobadilishiwa paleti.
• Zana za kuchora: Tumia mistatili, mistari, miduara, poligoni, gradienti, dithering, kelele, brashi za kutawanya, tilemapu na fonti ya pikseli iliyojengwa ndani.
• Sprite sheet: Hamisha picha zilizopangwa zikiwa na metadata ya JSON ya mtindo wa TexturePacker.
• Mandhari: Panga mchoro katika tabaka, ongeza tabaka za vivuli na mwanga, na hamisha tabaka binafsi kama faili za PNG.
• Uhuishaji: Bainisha fremu kama viraka juu ya sprite ya msingi na hamisha mistari ya fremu, lebo za JSON na faili za GIF.
• Mwangaza wa hiari: Ongeza taa, mng'ao na unafuu unaotegemea normals.
• Uchunguzi wa kusaidia: Makosa yanajumuisha taarifa za faili, mstari, safu, kipengee, tabaka na utendaji, pamoja na vidokezo vya “je, ulimaanisha” inapofaa.

Sakinisha na endesha pxl

Chaguo la 1: Kloni hazina

Kloni mradi na uingie kwenye saraka yake:

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

Kwenye kloni, tumia CLI kupitia node bin/pxl.js. Unaweza kufungua mara moja mojawapo ya mifano iliyojumuishwa katika kioneshi cha moja kwa moja:

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

Fungua http://127.0.0.1:4321/ kwenye kivinjari. Kioneshi kitajenga upya mradi kila faili ya mchoro inapohifadhiwa.

Chaguo la 2: Endesha kwa npx

Unaweza kujenga faili ya mchoro moja kwa moja kutoka kwenye hazina ya GitHub bila kuikloni:

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

Katika amri zilizo hapa chini, pxl humaanisha ama node bin/pxl.js kutoka kwenye kloni au npx github:crsolver/claude-pxl.

Unda sprite yako ya kwanza yenye msimbo

Unda faili iitwayo art.px.js na uongeze msimbo ufuatao:

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

Elewa mfano

1. pal() huunganisha funguo za herufi moja na rangi za heksadesimali. Funguo hizo zinaweza kutumiwa moja kwa moja katika gridi za sprite.
2. sprite("slime", ...) hutangaza sprite ya msingi.
3. Chaguo la mx: true huakisi kwa mlalo nusu ya sprite iliyotolewa.
4. outline: "k" huongeza kiotomatiki mpaka kwenye sprite kwa kutumia rangi ya paleti iliyowekwa kwenye k.
5. Sprite ya pili hutumia base: "slime" na kubadilisha rangi zake za kijani kuwa nyekundu, hivyo kutengeneza kibadala chenye rangi tofauti bila kurudia gridi.
6. sheet() huunda sprite sheet iitwayo chars. Muundo wa slime* unajumuisha vipengee vinavyolingana, na pad: 1 huongeza pikseli moja ya nafasi.

Jenga vipengee

Kutoka kwenye hazina iliyokloniwa, endesha:

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

Mfano huu hutengeneza faili kama:

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

Faili za sprite zina mchoro katika kipimo chake cha awali cha pikseli moja. Faili za chars.png na chars.json huunda sprite sheet na metadata yake ya mtindo wa TexturePacker. Saraka ya out/_preview/ ina hakikisho zilizokuzwa zenye gridi ya pikseli.

Tumia kioneshi cha moja kwa moja

Anzisha seva ya uendelezaji kwa faili yako ya mchoro:

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

Kwa chaguo-msingi, kioneshi kinapatikana kwenye porti 4321. Kila uhifadhi husababisha kujengwa upya na kucheza tena kipengee kilichohaririwa hatua kwa hatua. Seva pia huandika faili zilezile za out/ kama amri ya kujenga, isipokuwa utoaji uzimwe.

Chagua porti au saraka nyingine ya kutoa kwa kutumia:

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

Tumia kioneshi bila kuandika vipengee vilivyotengenezwa kwenye diski:

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

Chunguza amri za CLI

Jenga vipengee vilivyochaguliwa

Amri ya build inakubali chaguo za saraka lengwa, vipengee vilivyochaguliwa, kipimo cha pato, na hakikisho:

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

Kwa mfano, jenga vipengee viwili vilivyopewa majina pekee kwa kipimo mara nne ya ukubwa wake wa awali:

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

Kagua sprite kama maandishi

Amri ya ascii huchapisha kipengee kama funguo za paleti zikiwa na vipimo vya mlalo na wima. Hii ni muhimu unapopata pikseli mahususi:

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

Orodhesha fasili za mradi

Tumia list kuonyesha vipengee, vikundi, na sheets pamoja na maeneo yake ya chanzo:

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

Vidokezo vya utendakazi wa hali ya juu

Tumia faili za sanaa za TypeScript

Miradi ya sanaa inaweza kutumia .js au .ts. Hifadhi hii inajumuisha types/pxl.d.ts ili kutoa ukamilishaji wa kihariri kwa faili za .px.ts.

Tumia tena na ubadilishe sanaa

Epuka kurudia gridi wakati vipengee vinashiriki muundo wa pamoja. Jenga vibadala kutoka kwa sprite msingi, tumia ubadilishaji wa paleti kwa miundo mbadala ya rangi, na tumia mgeuzo, mizunguko, _parts zinazoweza kutumika tena, na stamp inapofaa.

Tumia zana za kiutaratibu zenye matokeo thabiti

DSL inajumuisha gradienti, dithering, noise, brashi za scatter, tilemap, na vikundi nasibu vyenye mbegu zinazoweza kurudiwa. Nasibu inayoweza kurudiwa ni muhimu hasa unapotaka maelezo yaliyoundwa yabaki thabiti kati ya miundo.

Jenga mandhari kwa tabaka

Kwa miundo mikubwa, tumia mandhari na tabaka badala ya kuweka kila operesheni kwenye kipengee kimoja tambarare. pxl inasaidia tabaka za vivuli vilivyotupwa na mwanga, pamoja na usafirishaji wa PNG kwa kila tabaka. Soma reference.md kwa API kamili.

Ongeza uhuishaji na mwangaza kwa kuchagua

Fremu za uhuishaji zinaweza kuwakilishwa kama viraka juu ya sprite msingi, hivyo kupunguza urudiaji kati ya fremu zinazofanana. pxl inaweza kubadilisha fasili hizi kuwa mikanda, lebo za JSON, na GIF zilizohuishwa. Kwa taa, mwanga wa kumeta, na unafuu unaotegemea kawaida, fuata mwongozo wa mwangaza maalum.

Tumia pxl na wakala wa AI

Hifadhi hii imeundwa kufanya kazi kama ujuzi wa wakala. Mzunguko unaopendekezwa ni kuandika faili ya sanaa, kuijenga, kukagua hakikisho, na kurekebisha chanzo. Kitazamaji cha moja kwa moja hufanya utendakazi huu uonekane kwa wakati halisi.

Kusakinisha ujuzi kwa miradi yote ya Claude Code:

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

Kusakinisha kwa mradi wa sasa pekee:

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

Kwa Codex, Cursor, au wakala mwingine, mwelekeze wakala kwenye SKILL.md na ueleze njia ya CLI kama node <path-to-pxl>/bin/pxl.js. Mwambie wakala aanzishe pxl serve ikiwa unataka kutazama sanaa ikijengwa kwenye kivinjari chako.

Amri za usanidi

Ikiwa unapanga kurekebisha pxl yenyewe, sakinisha vitegemezi vyake vya usanidi na utekeleze ukaguzi wake:

npm install
npm run check

Vitegemezi vya usanidi vinajumuisha TypeScript na ufafanuzi wa aina za Node.js. Ili kuunda upya ghala la hifadhi, endesha:

node scripts/gallery.ts

Hitimisho

pxl hutoa njia fupi ya kuchukulia sanaa ya pikseli kama msimbo wa chanzo. Anza na paleti na sprite ya gridi ya maandishi, iunde kuwa vipengee vya PNG na sprite-sheet, na uache kitazamaji cha moja kwa moja wazi kwa mrejesho wa haraka. Mradi unapokua, unaweza kuongeza vibadala vinavyoweza kutumika tena, primitivi za kuchora, mandhari zenye tabaka, uhuishaji, mwangaza, na mzunguko wa urudiaji unaosaidiwa na AI bila kuanzisha vitegemezi vya wakati wa utekelezaji.