Cara Menggambar Space Invader

 (muffinman.io)
1 poin oleh GN⁺ 2025-08-20 | 1 komentar | Bagikan ke WhatsApp
  • 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

Bacaan terkait

1 komentar

 
GN⁺ 2025-08-20
Komentar Hacker News

  • Saya juga pernah membuat generator space invader
    Ada versi yang bisa dijalankan dan kode sumbernya juga dibuka
    Terinspirasi oleh Jared Tarbell
    Saya merasakan sendiri bahwa hasilnya jadi bagus lebih mudah dari yang saya kira
    Kuncinya adalah mata, simetri bilateral, dan piksel acak di dalam kotak kecil

    • Soal terinspirasi oleh Jared Tarbell, saya juga merasa karya-karyanya sangat berarti saat pertama kali mengenal komputer
      levitated.net dan kemudian complexification.net juga merupakan situs seperti permata dari awal masa internet
      Sayangnya, dukungan untuk Flash (Levitated) dan Java (Complexification) sudah dihentikan sehingga sebagian besar contohnya tidak lagi berjalan
      Meski begitu, untuk Complexification, source Processing .pde masih bisa dijalankan jika ditempel ke editor Processing

    • Saya suka UI-nya dan juga palet warna acaknya
      Hasilnya benar-benar keren

  • Ini salah satu pengalaman terbaik yang pernah saya rasakan saat membaca artikel di ponsel

    • Kegembiraan kecil saat kanvas ikut naik setiap kali saya scroll benar-benar membekas

  • Saya terkejut karena hasilnya sangat bagus
    Bisa dilihat di muffinman.io/invaders
    Jauh melebihi ekspektasi saya hanya dari membaca artikelnya
    Dan hari ini saya jadi tahu tentang oklch

    • Saat saya coba sendiri, saya juga terkejut karena hasilnya keluar jauh lebih baik dari dugaan
      Setelah dirapikan dan ditambahkan UI, rasanya jadi jauh lebih oke
      OKLCH benar-benar peningkatan besar
      Mengatur warna lewat kode itu sulit, dan ini jelas membuatnya jauh lebih mudah
      Saya pribadi juga suka HSLuv, tetapi sayangnya belum ada dukungan native di browser

  • Seru
    Ironisnya, rasanya seperti menyelamatkan planet ini dengan membuat para invader, cara khas hacker yang menyenangkan tanpa brute force AI
    Proyek ini sangat layak direkomendasikan

    • Terima kasih, rasanya AI memang menghilangkan semua kesenangan dari proyek seperti ini
      Keajaiban proses kreatif pada akhirnya memang ada pada kerja tangan seperti itu sendiri

  • Sangat keren bagaimana gambarnya dipasang tetap di bagian atas sehingga saat kita scroll, kita terus melihat apa yang sedang dibahas
    Biasanya saya tidak terlalu suka halaman yang berubah-ubah heboh mengikuti scroll, tapi susunan ini adalah pengecualian

  • Keren
    Saya mengumpulkan space invader dari seluruh dunia
    space-invaders.com/flashinvaders juga layak dilihat

  • Sebagai hal terkait, ada levInvaderFractal (2003) dari legenda web era 2000-an levitated.net

  • Saya sangat menikmati membacanya
    Terasa sekali ada perhatian dan usaha dalam cara memecahkan masalahnya, tulisannya sendiri, sampai presentasinya

  • Menurut saya, space invader yang bagus harus terlihat mengintimidasi dan berbahaya
    Kalau capitnya bergoyang, itu nilai tambah

  • Sangat menarik
    Ini tulisan yang akan terasa lebih seru lagi bagi orang yang menyukai nuansa 8-bit dan komputasi retro
    Sambil membaca, saya sempat terpikir bahwa ini pada akhirnya adalah bentuk digital dari “hasrat Alam Ibu untuk mengembangkan semua hal menjadi kepiting”
    Karena simetri space invader dan beragam struktur seperti kaki serta capit, pada akhirnya semua invader terlihat seperti kepiting
    Saya juga sempat membayangkan, jangan-jangan kita sedang melihat semacam korespondensi di dalam Matrix