Chapter 4 Personal Game Dev

---
title: "Bagian 23 · Bab 4. Game Puzzle yang Saya Buat Sendiri — Catatan Praktik Critter Sort"
part: 23
chapter_in_part: 4
status: v3
written: 2026-05-24
version: v3
author: 이민수
ip_check: done
---

# Bagian 23 · Bab 4. Game Puzzle yang Saya Buat Sendiri — Catatan Praktik Critter Sort

Suatu Sabtu sore, istri saya sedang memainkan puzzle pencocokan warna di ponselnya. Itu game bernama *Yarn Fever*, di mana benang kusut harus dipilah ke keranjang berwarna sama. Setiap kali satu babak selesai, ia menutupnya sambil berkata, "Sama lagi." Karena tidak ada pembaruan, ia cepat bosan.

Pikiran yang muncul saat itu sederhana. Loop itu punya daya kecanduan yang sudah terbukti, dan mekanismenya sendiri bukan objek hak cipta. Jika temanya saya ganti menjadi hewan, lalu level-levelnya saya cetak tanpa batas secara prosedural, masalah "sama lagi" itu hilang. Kalau dibuat sebagai HTML 3D yang langsung berjalan di browser dan dikerjakan sendiri, istri saya bahkan tidak perlu memasangnya di ponsel.

Masalahnya, saya bukan graphics engineer. Meski sudah 24 tahun jadi Game Designer, saya belum pernah menulis shader dengan Three.js. Maka bab ini adalah catatan nyata tentang "membuat satu game berjalan dalam beberapa hari, sendirian, bersama AI". Ini juga catatan tentang pemisahan: saya memakai alat yang sama dengan pekerjaan MMORPG perusahaan (selanjutnya Proyek A), tetapi tidak mencampurkan satu baris pun konten domainnya.

Game-nya benar-benar ada di repository `critter-sort/`, dan keputusan selama tiga hari tersimpan dalam git tag v0.1–v0.3. Ini bukan kasus yang diolah; saya mengutip repository itu apa adanya.

---

## 23.4.1 Merekayasa Balik Lewat Prompt — dan Kehilangan Ciri Khasnya

Hal pertama yang saya lakukan adalah membongkar game aslinya dengan kata-kata, lalu melemparkannya ke AI. Prompt pertamanya seperti ini.

> **Prompt (memulai v0.1):**
> "Saya ingin mengadaptasi loop inti dari puzzle kasual bernama Yarn Fever menjadi tema hewan, dibuat dengan Three.js + Vite. Loopnya begini: pilah gumpalan-warna yang kusut ke wadah berwarna sama, dan jika slot sementara terlampaui, game over. Jadikan hewan sebagai objek yang dipilah, jadi kalau tumpukan hewan kusut di-tap, hewannya dikirim ke sarang (nest) berwarna sama. Tulis logikanya sebagai state machine JS murni yang lepas dari Three.js supaya bisa diuji secara headless. Tambahkan juga level prosedural tanpa batas (berbasis seed)."

AI mengikutinya dengan setia. Ia memecah struktur folder menjadi `game/` (logika murni) dan `render/` (Three.js), menulis `state.js`·`rules.js`·`generator.js` lebih dulu, lalu menampilkan papan dengan placeholder kotak berwarna. Bukan beberapa hari, hanya dalam satu sesi v0.1 sudah berjalan.

Tetapi begitu saya memainkannya sendiri untuk diperlihatkan ke istri, ada yang terasa janggal. Game-nya telah berubah menjadi puzzle pencocokan biasa, di mana hewan-hewan melompat dari atas layar ke dalam keranjang. Sentuhan khas game aslinya hilang. Identitas *Yarn Fever* bukanlah "memilah", melainkan **sensasi menguraikan benang kusut dengan tangan** dan **tindakan memutar layar untuk memeriksa warna yang tertutup**. Dalam prompt, saya memipihkan semua itu menjadi sort biasa berupa "tap hewan lalu kirim ke sarang", dan AI hanya setia pada definisi yang saya berikan.

Inilah jebakan pertama dari rekayasa balik. Begitu game aslinya diringkas, ciri khasnya menguap. Sebab ringkasan menyisakan permukaan, bukan esensinya.

Di sini saya tegaskan satu hal. AI tidak memberi jawaban yang salah. Prompt sayalah yang salah. Maka siklus berikutnya bukan perbaikan kode, melainkan **koreksi definisi**.

---

## 23.4.2 Tulang Punggung — Siklus Koreksi yang Menghidupkan Kembali Rotasi dan Penguraian Benang

Tepat setelah melihat v0.1, saya menyatakan ulang intinya dalam dua kali koreksi. Koreksi pertama membidik tindakan, koreksi kedua membidik sensasi.

> **Prompt (koreksi 1 — tindakan):**
> "Ini cuma jadi puzzle pencocokan. Identitas Yarn Fever itu 'memutar layar 3D untuk memeriksa warna yang tertutup, lalu menentukan urutan menguraikannya'. Jangan sebarkan papan di bidang datar, tapi tumpuk jadi gundukan tinggi di tengah, supaya warna yang tertutup di belakang baru terlihat kalau diputar. Tambahkan rotasi dengan OrbitControls. Tapi kan rotasi dan tap jadi bentrok — bagaimana cara memisahkannya?"

> **Keluaran Claude (mentah, tanpa diringkas):**
> "Benar. Gestur rotasi dan tap memakai pointer event yang sama sehingga bentrok. Saya usulkan memisahkannya lewat ambang jarak dan waktu. Pada `pointerdown` saya catat koordinat dan waktunya, lalu pada `pointerup` jika jarak gerak melampaui 9px atau durasi tekan melampaui 400ms, itu dianggap gestur rotasi sehingga tap diabaikan. Hanya di bawah ambang itulah raycaster memungut hewan dan memanggil `state.tap()`. Azimuth OrbitControls akan saya batasi sekitar ±54° agar tumpukan tidak keluar dari layar. Namun di mobile, 9px bisa terlalu sensitif, jadi perlu dicek di perangkat nyata."

Ambang 9px/400ms itu sampai sekarang masih hidup apa adanya di `src/main.js`. Kode yang ringkas, tanpa kelebihan, dan bisa diverifikasi langsung.