Sprite pixel yang bagus, dibuat dengan kode.
Teknik membuat sprite pixel art prosedural yang bagus — ditulis agar mudah dibaca dan ditiru oleh AI.
Demo butuh JavaScript.
Untuk AI & agen
Semua konten tersedia sebagai teks bersih tanpa JavaScript:
/llms.txt— indeks ringkas + tautan markdown per artikel/llms-full.txt— seluruh isi + seluruh kode dalam 1 berkas/index.json— metadata mesin-terbaca/md/<slug>.md— tiap artikel dalam markdown
Mulai dari Panduan prompt untuk AI, lalu teknik inti.
Teknik Rendering
Dari render halus ke grid piksel, palet, dithering, buffer, sprite sheet, komposit sprite, parallax.
- Render halus lalu turunkan ke grid pikselTeknik inti — gambar karakter sebagai vektor halus beresolusi tinggi, lalu ubah per sel menjadi piksel ber-shading dan ber-outline.
- Palet terbatas dan ordered ditheringShading bola/benda dengan 5–6 warna dan matriks Bayer 4×4 sebagai ganti gradient, supaya tetap terlihat pixel art.
- Buffer piksel Uint32 dan aturan integerCara menggambar ribuan piksel efek per frame dengan cepat dan tanpa blur, memakai buffer Uint32 dan satu putImageData.
- Sprite sheet — grid, pivot, texturing, ekspor anti-haloSkema koordinat atlas, pivot bottom-center, kode canvas dan CSS, palet terbatas, kompresi PNG, image-rendering, dan cara menghindari halo putih.
- Komposit sprite bertahap — outline, bayangan jatuh, flash, tint sisi jauhSatu sprite berindeks diolah dari mask dalam urutan tetap — bayangan, outline, badan — lalu flash putih saat kena hit dan tint untuk bagian sisi jauh, semuanya di grid integer.
- Parallax berlapis — kedalaman dari faktor kecepatanLatar 3–5 lapisan siluet yang di-tile mulus, digeser dengan faktor kecepatan berbeda, di-snap ke piksel integer, dengan kabut yang dibakar ke palet lapisan, bukan alpha per frame.
Efek (VFX)
Tracer, ledakan, lubang, api, bola neutron & pulsar — semua prosedural.
- Tracer peluru, muzzle flash, dan percikan tumbukanJejak peluru 3 tingkat (inti 1px, pasangan piksel, ekor gelap), kilatan moncong dari sinar acak, dan percikan berpantul.
- Glow — cahaya additive di buffer terpisahCara membuat cahaya (glow) pixel art yang halus tapi tetap tajam — buffer cahaya sendiri, profil (1−d)², pencampuran additive, dan kapan memakai dither sebagai gantinya.
- Ledakan prosedural — roket dan neutronDua jenis ledakan berbeda — roket/launcher (kilat, cincin, puff bola api, asap besar, percikan) dan neutron (Cherenkov: gumpalan 5 disc, sinar, gelombang kejut) — plus cahaya glow dan getaran layar.
- Lubang, kawah, dan kerusakan per elemenSistem Sprite Fusion — halaman = grid sel milik elemen; tiap elemen punya kekerasan (hp) berbeda, retak bertahap, dan bisa copot; lubang bertepi tak beraturan dengan gosong, bayangan kedalaman, dan serpihan berwarna asli.
- Api dan asap dari partikel disc berlapisRamp 9 warna, partikel membesar saat menua, inti bergeser ke atas, highlight kecil, glow additive, dan asap.
- Hujan prosedural 3 lapis kedalamanTetes dua warna, tiga lapis kecepatan, kabut tanah ber-noise, percikan setengah elips, dan lapis depan yang menutupi karakter.
- Bola neutron dan pulsar (PSR)Proyektil bola neutron biru dengan jejak, ledakan Cherenkov, dan pulsar ber-sinar menyapu dengan garis medan dipol.
Karakter Prosedural
Menggambar karakter dari persamaan, bukan dari piksel manual.
Panduan untuk AI
Template prompt, aturan ketat, dan checklist agar hasil AI konsisten.