Cara Menggambar Space Invader

• Memperkenalkan Space Invader Generator dan menjelaskan prinsip di balik pembuatan otomatis berbagai invader pixel art
• Menggunakan struktur berbasis pembuatan body poligon vektor sederhana serta aturan geometris seperti simetri, titik acak, dan mirroring
• Elemen anggota tubuh seperti lengan, tentakel, dan tanduk juga diperluas dengan pendekatan acak dan geometris, sehingga memungkinkan variasi yang mudah dan kreatif
• Menyelesaikan grafis game yang familier melalui konversi ke piksel dari bentuk vektor, penerapan warna, penambahan mata, dan lain-lain
• Membuka seluruh proses pembuatan dan logika implementasi kode, sehingga pelajar dan pengembang dapat langsung melakukan kustomisasi atau praktik

---

Gambaran Umum

Space Invader Generator adalah alat yang memungkinkan siapa pun membuat invader bergaya pixel art secara acak dengan mudah. Artikel ini menjelaskan prinsip kerjanya dan proses pembuatan acak yang kreatif, disertai animasi dan contoh. Pendekatan yang menggabungkan desain dan coding ini menonjol lewat struktur geometris invader, konversi vektor-ke-piksel, penerapan warna, dan lain-lain.

Latar Belakang

• Saat mengembangkan tool 3D renderer bernama Rayven, penulis menyadari pentingnya menciptakan hasil karya yang benar-benar nyata
• Untuk hasil yang sederhana dan menyenangkan, dipilihlah objek yang intuitif dan mudah dikenali seperti Space Invader
• Pengerjaan dimulai dari gagasan bahwa akan menarik untuk menggambar berbagai invader klasik dengan rendering 3D berbasis vektor, lalu mengembangkannya menjadi generator acak
• Pengalaman pembuatan ini juga dibagikan dalam code challenge dari Creative Coding Amsterdam

Code Challenge

• Code challenge Space Invaders menarik minat banyak kreator dan pengembang
• Berbagai implementasi dan hasil karya sedang dikumpulkan, serta dibagikan secara aktif di komunitas terkait pengembangan

Dari Sketsa ke Piksel

• Pada awalnya, struktur invader dianalisis dengan coretan dan sketsa tangan di atas kertas
• Dengan tool Aseprite, berbagai bentuk invader dicoba secara digital di grid piksel 15x15
• Ditemukan pola geometris yang sama, seperti simetri sumbu tengah dan body poligon sederhana
• Dengan menggabungkan keunggulan pixel art dan grafis vektor, berhasil dibuat fungsi yang secara otomatis menghasilkan sebagian besar desain yang sebelumnya digambar manual
• Detail implementasi dapat dilihat di repositori GitHub

Proses Pembuatan Invader

Menentukan Pusat

• Menetapkan titik pusat sebagai acuan untuk semua manipulasi
• Karena tentakel dibuat di bagian bawah, body utama ditempatkan sedikit lebih ke atas
• Dengan memanfaatkan simetri keseluruhan, cukup menggambar satu sisi lalu menyelesaikannya dengan membalik kiri-kanan

Menentukan Atas dan Bawah

• Saat merancang sisi body, titik atas dan bawah dipilih secara acak
• Bentuk di kedua sisi tetap sama mengikuti sumbu simetri

Menggambar Sisi Kiri

• Menempatkan 1 hingga 5 titik secara acak di sisi kiri body
• Hasilnya dapat bervariasi bebas dari poligon cembung sederhana
• Fenomena tumpang-tindih garis akan terkoreksi secara alami dalam proses pixelisasi

Pantulan ke Kanan

• Menggunakan data titik di kiri untuk otomatis membuat pantulan di sisi kanan

Menghubungkan Poligon Body

• Menghubungkan titik-titik untuk menyelesaikan body poligon vektor
• Dengan menambahkan anggota tubuh di atas dasar ini, bentuk inti invader terbentuk

Menambahkan Anggota Tubuh

Cara Membuat Tentakel dan Tanduk

• Membuat tentakel bawah dan tanduk atas secara terpisah, dengan metode yang sama tetapi posisi dan sudut yang berbeda

Menemukan Akar Tentakel

• Membuat tentakel kiri secara acak berdasarkan titik paling bawah dari body

Membuat Sketsa Garis Tengah

• Membuat polyline (garis tengah) menggunakan titik-titik acak
• Panjang dan bentuk tentakel dapat divariasikan dari berbagai sudut

Menerapkan Ketebalan (fat line)

• Karena garis tengah saja terlalu tipis, dibuat titik di kedua sisi untuk membentuk tentakel yang tebal
• Semakin dekat ke body, bentuknya semakin tebal; semakin ke ujung, semakin tipis (efek taper)
• Pada bagian dengan sudut tajam, ketebalan garis dikurangi agar sambungan terlihat alami
• Untuk mengatur lebar, digunakan parameter easing

Menyelesaikan Tentakel

• Menghubungkan kedua ujung sisi untuk menyelesaikan tentakel tebal

Perluasan ke Banyak Tentakel dan Tanduk

• Dengan metode yang sama, dapat diperluas ke simetri kiri-kanan, tentakel tengah, dan tanduk atas
• Untuk tentakel tengah, proses dihentikan lebih awal agar tidak bertabrakan dengan tentakel samping yang sudah digambar
• Untuk tanduk, rentang sudut dipersempit dan ditempatkan di kiri-kanan agar ruangnya tidak saling tumpang-tindih

Konversi dari Vektor ke Piksel

Pixelisasi Body

• Piksel body ditentukan berdasarkan apakah pusat tiap piksel berada di dalam poligon vektor
• Prioritasnya adalah kesederhanaan dan kecepatan eksekusi dibanding akurasi

Pixelisasi Anggota Tubuh

• Tentakel dan tanduk cukup tipis sehingga pusat piksel sering kali tidak berada di dalam bentuk
• Piksel ditetapkan dengan memeriksa jarak antara titik dan pusat piksel yang berdekatan
• Kealamian tentakel dapat ditingkatkan dengan subdivisi garis tengah (line splitting)

Menambahkan Mata

• Memilih secara acak dari beberapa set mata yang sudah disiapkan
• Ditempatkan di sekitar pusat body, lalu diberi padding dengan piksel bumper di bagian luar
• Piksel yang bertumpuk otomatis dikosongkan agar terlihat seperti lubang

Penerapan Warna

Logika Pembuatan Warna

• Menggunakan ruang warna OKLCH
• Dibanding HSL, kecerahan (lightness) dapat dijaga tetap konsisten sambil menghasilkan kombinasi warna yang beragam dan hidup
• Dengan menetapkan satu nilai kecerahan tetap dan mengacak dua parameter lainnya, berbagai variasi dapat dihasilkan
• Memberikan kesan invader yang berkesinambungan dan konsisten secara visual

Memanfaatkan Variasi CSS

• Warna dapat diatur lewat variabel CSS
• Perubahan brightness dan saturation dapat diterapkan sesuai situasi, seperti kontras elemen UI atau mode debug

Implementasi Animasi

• Seperti game aslinya, gerakan diberikan pada tentakel, tanduk, dan mata melalui animasi sederhana 2 frame
• Frame yang dimodifikasi dibuat dengan menyalin mid-line anggota tubuh lalu menggesernya secara acak
• Mata juga digeser satu piksel untuk meningkatkan kesan hidup

Penyesuaian Ukuran

• Jika ukuran grid diperbesar, invader akan menjadi semakin detail dan kompleks
• Jika terlalu besar, abstraksi vektor menjadi lebih menonjol sehingga nuansa invader aslinya berkurang
• Dibatasi hingga 31x31 piksel, dengan opsi tersembunyi yang memungkinkan hingga 51x51

Kesimpulan

• Selesai dibuat generator yang otomatis menghasilkan invader penuh warna dalam variasi tak terbatas
• Proses pembuatan dan penulisan ini mewujudkan pembelajaran, kesenangan, dan kebebasan berkreasi
• Karena kode dan prinsipnya dibuka sepenuhnya, alat ini cocok untuk latihan, eksperimen, dan kustomisasi

Catatan Produksi

• Kode JavaScript di dalam post disimpan agar mudah dipelajari dan dijadikan referensi
• Animasi dirancang dengan memanfaatkan Anime.js dan berbagai dependensi eksternal, lalu diimplementasikan dengan TypeScript
• Tersedia mode debug terpisah dan opsi step untuk menjelajahi proses pembuatannya secara langsung

Bonus - Post Menggambar Tali

• Post interaktif sebelumnya tentang menggambar bentuk rope dengan SVG dan JavaScript juga layak dilihat