Dalam beberapa tahun terakhir, tren vibe coding mulai populer di kalangan developer. Istilah ini mengarah pada cara ngoding yang lebih santai, fun, eksploratif, dan fokus pada feel daripada struktur kaku. Coding bukan sekadar menyelesaikan tugas—tapi menciptakan pengalaman, menikmati proses, dan menghasilkan sesuatu yang keren secara visual.

Salah satu proyek vibe coding yang seru adalah membuat game berbasis hand tracking. Berkat Google AI Studio dan MediaPipe, sekarang siapa pun bisa membuat game interaktif yang dikendalikan oleh gerakan tangan—tanpa hardware khusus seperti Kinect atau Leap Motion.

Artikel ini akan membahas langkah-langkah membuat game hand tracking sederhana, mulai dari mendeteksi tangan hingga memetakan gesture menjadi kontrol dalam game.

---

Kenapa Hand Tracking?

Hand tracking punya beberapa kelebihan:

• Interaktif tanpa perangkat khusus – Hanya perlu webcam.
• User experience lebih imersif dibanding keyboard/mouse.
• Bagus untuk game kasual, eksperimen AI, atau demo inovatif.
• Cocok sebagai proyek vibe coding untuk belajar AI & computer vision.

Dengan bantuan Google AI Studio dan MediaPipe, implementasinya jauh lebih mudah.

---

Peran Google AI Studio & MediaPipe

1. Google AI Studio

Google AI Studio menyediakan:

• Model AI siap pakai
• Kemampuan membuat prompt cerdas untuk deteksi gesture
• API Gemini untuk reasoning, interpretasi input visual, dan mengolah data tracking menjadi perintah

Dalam proyek ini, Google AI Studio digunakan untuk:

• Mengklasifikasikan gesture berdasarkan titik-titik tangan (landmarks)
• Memberikan output berupa command (misal: “MOVE_LEFT”, “JUMP”, “FIRE”)

2. MediaPipe

MediaPipe adalah framework powerful untuk:

• Deteksi tangan real-time
• 21 landmark per tangan (telapak, ruas jari, ujung jari)
• Tracking stabil dan cepat di browser (via MediaPipe Solutions / MediaPipe Tasks)

Hasil landmarks ini kemudian dimasukkan ke model dari Google AI Studio untuk interpretasi gesture.

---

Arsitektur Sederhana Game Hand Tracking

Webcam → MediaPipe Hand Landmarks → AI Studio Model → Game Engine (Canvas / Three.js / Phaser)

Penjelasan:

1. Webcam memberikan input video.
2. MediaPipe mendeteksi 21 titik tangan.
3. Google AI Studio menganalisis posisi untuk menentukan gesture.
4. Game Engine menerima command untuk mengontrol karakter.

---

Contoh Gesture yang Bisa Dipakai

Gesture	Keterangan	Output Command
Telapak terbuka	Default / idle	“IDLE”
Mengepal	Aksi menembak / interact	“FIRE”
Tangan geser ke kiri	Gerakan karakter	“MOVE_LEFT”
Tangan geser ke kanan	Gerakan karakter	“MOVE_RIGHT”
Dua jari (V)	Lompat	“JUMP”

Gesture dapat disesuaikan sesuai kebutuhan.

---

Langkah-Langkah Membuat Game Hand Tracking

1. Setup MediaPipe di Browser

Gunakan MediaPipe Tasks (lebih modern dari versi lama):

<script type="module">
import { HandLandmarker, FilesetResolver } from "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest";

const vision = await FilesetResolver.forVisionTasks(
  "https://cdn.jsdelivr.net/npm/@mediapipe/tasks-vision@latest/wasm"
);

const handLandmarker = await HandLandmarker.createFromOptions(vision, {
  baseOptions: {
    modelAssetPath: `https://storage.googleapis.com/mediapipe-models/hand_landmarker/hand_landmarker.task`
  },
  numHands: 1
});
</script>

Lalu tangkap landmarks dari webcam.

2. Mengirim Data Landmarks ke Google AI Studio

Gunakan API Gemini:

const gesture = await fetch("https://generativelanguage.googleapis.com/v1beta/openai/chat/completions?key=API_KEY", {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({
    model: "gemini-2.0-flash-thinking",
    messages: [{
      role: "user",
      content: [
        {
          type: "input_text",
          text: JSON.stringify({ landmarks })
        }
      ]
    }]
  })
})
  .then(res => res.json());

Pada Google AI Studio, prompt model disiapkan untuk:

• Menganalisis posisi jari
• Memberikan interpretasi gesture
• Menghasilkan perintah game

Contoh prompt untuk AI Studio:

Kamu menerima input berupa 21 titik landmark tangan (x,y,z). 
Tentukan gesture yang paling mungkin:
- Telapak terbuka
- Mengepal
- Geser kiri
- Geser kanan
- Dua jari V

Output hanya salah satu command:
"IDLE", "FIRE", "MOVE_LEFT", "MOVE_RIGHT", "JUMP".

3. Menerjemahkan Command menjadi Game Logic

Misalnya menggunakan <canvas> sederhana:

if (command === "MOVE_LEFT") player.x -= 5;
if (command === "MOVE_RIGHT") player.x += 5;
if (command === "JUMP") player.jump();
if (command === "FIRE") shootProjectile();

Gameplay bisa berupa:

• Karakter bergerak kiri–kanan
• Obstacle dodging game
• Shooting game
• Rhythm game (cocok untuk vibe coding)

---

Contoh Game Sederhana: Dodge the Cubes

Ide: Pemain menggerakkan avatar kiri-kanan untuk menghindari kotak jatuh.
Kontrol:

• Geser kiri/kanan → gerak
• V sign → lompat

Pengembangan bisa menggunakan:

• HTML Canvas
• React + Three.js
• Phaser.js
• Unity (via WebCamTexture + JS input)

---

Tips Optimasi

• Gunakan requestAnimationFrame untuk loop agar smooth.
• Batasi rate pengiriman landmarks ke Google AI Studio (misal 5–10 fps).
• Gunakan smoothing pada hasil gesture untuk mengurangi noise.
• Terapkan debounce agar gesture tidak double-trigger.

---

Potensi Pengembangan

Setelah MVP selesai, kamu bisa menambahkan:

• Pengenalan lebih banyak gesture (OK, jempol, flip, push)
• Multi-hand interaction
• UI/UX futuristik ala AR
• Leaderboard atau scoring online
• Mode latihan (gesture visualizer)

---

Kesimpulan

Membuat game hand tracking sekarang jauh lebih mudah berkat kombinasi:

• MediaPipe untuk deteksi dan tracking tangan realtime
• Google AI Studio (Gemini) untuk klasifikasi gesture berbasis reasoning
• Game engine di browser untuk visualisasi dan gameplay

Proyek seperti ini bukan hanya fun sebagai kegiatan vibe coding, tetapi juga meningkatkan pemahaman tentang computer vision, AI, dan real-time interaction.

Referensi

• https://github.com/google-ai-edge/mediapipe-samples
• https://www.youtube.com/watch?v=RRBXVu5UE-U