Game Kiper: Cara Keeper Menghadirkan Tekanan Reaksi yang Nyata

Saya ingin membuat game sepak bola yang berpusat pada bagian tersulit dari sebuah penyelamatan: jeda sangat singkat antara membaca tendangan dan menaruh bagian tubuh di jalur bola.

Karena itu tombol langsung tercoret. Klik kiri atau kanan memang bisa menghasilkan hasil yang sama, tapi tidak dengan rasa bereaksinya. Saya ingin pemain memperhatikan ancang-ancang, membaca lintasan bola, menjangkau, mencondongkan badan, lalu berani memutuskan. Jadi webcam harus menjadi controller, dan orang yang berdiri di depannya harus menjadi kiper.

Jadilah Keeper. Dari luar, ini salah satu game kiper yang tampak sederhana: hentikan empat dari enam tendangan untuk menamatkan satu level. Tapi di baliknya, tiap level mengubah soal reaksinya. Tendangan makin cepat, bola makin melengkung, gawang makin lebar, sudut makin sering jadi sasaran, dan area yang dijangkau kiper hasil pemetaan makin sempit.

Saya tidak bermaksud mengklaim bahwa game browser bisa menyamai pertandingan profesional atau menggantikan pelatih kiper, karena memang tidak bisa. Yang saya lakukan adalah meminjam batasan-batasan penting dari menahan tendangan sungguhan, lalu memadatkannya jadi game yang aman dan mudah dibaca, yang bisa kamu mainkan di depan webcam.

Seperti apa tekanan reaksi kiper yang sebenarnya

Penalti sulit bukan karena kiper belum pernah melihat bola bergerak. Penalti sulit karena informasi dan waktu untuk bergerak datang nyaris bersamaan.

Sebuah analisis yang sudah ditelaah sejawat atas 88 tendangan penalti menemukan waktu terbang bola rata-rata 525 milidetik. Para peneliti juga mendapati bahwa tangan kiper mulai terpisah untuk tendangan tinggi dan rendah sekitar 245 milidetik setelah bola disentuh, sedangkan gerakan ke kiri dan kanan sudah bisa dimulai dari isyarat yang ada sebelum bola disentuh. Baca studi tentang cara kiper mendeteksi arah dan ketinggian penalti.

Temuan itu membentuk Keeper. Kiper sungguhan tidak baru bereaksi setelah bola bergerak. Ia membaca ancang-ancang, bentuk tubuh, dan ayunan kaki, lalu memperbarui keputusannya dari awal lintasan bola. Makanya game ini menampilkan pemain bola yang berlari dan mengayunkan kaki sebelum menyentuh bola. Begitu bola melesat, kecepatan, lengkungan, dan titik sasaran menentukan sisa waktu untuk mengoreksi gerakan.

Keeper bukan tes waktu reaksi yang tervalidasi. Latensi kamera, ukuran layar, ukuran ruangan, dan model gerakan yang diperbesar membuatnya berbeda dari lapangan sungguhan. Meski begitu, level-level tinggi sengaja bergerak mendekati jendela tekanan ala pemain profesional. Level 9 memberi 520 milidetik waktu terbang bola, hampir sama dengan rata-rata 525 milidetik di studi tadi. Level 10 ke atas sampai di batas bawah game, yaitu 500 milidetik.

Masalah pertama: membuat kamera terasa seperti cermin

Keeper mulai dengan meminta browser menyediakan aliran video dari kamera depan. Izinnya diatur browser lewat MediaDevices.getUserMedia(). API ini butuh konteks aman dan izin eksplisit dari pengguna, jadi kamera tidak bisa menyala diam-diam di latar belakang.

Saya meminta video dengan resolusi ideal 1280 kali 720, mematikan audio, dan mengutamakan kamera yang menghadap pengguna. Model pose lalu memproses frame video langsung di browser. Keeper memakai MediaPipe Pose Landmarker dalam mode video dengan satu pose dan model ringan yang berjalan lewat GPU delegate jika tersedia. Alur kerja frame video yang sama dijelaskan di panduan Pose Landmarker untuk web dari Google.

Titik-titik tubuh datang dalam koordinat kamera, jadi setiap koordinat x saya balik dulu sebelum dipakai. Kalau pemain bergerak ke kanannya, kiper harus bergerak ke sisi kanan layar dari sudut pandangnya. Tanpa efek cermin itu, game webcam terasa janggal bahkan sebelum tendangan pertama.

Sebuah pose belum otomatis jadi kiper

Model pose memberi tahu saya di mana kepala, bahu, siku, pergelangan tangan, pinggul, lutut, dan pergelangan kaki pemain muncul di frame kamera. Tapi model itu tidak tahu di mana titik-titik tersebut seharusnya berada di dalam gawang.

Solusinya, saya menganggap gawang sebagai sistem koordinat tersendiri. Pusat pinggul pemain menjadi pusat gerak sang kiper. Titik-titik lain diukur relatif terhadap pinggul itu, diskalakan sesuai lebar dan tinggi gawang, lalu ditempatkan di mulut gawang.

Dengan cara ini, tubuh yang berbeda-beda tetap berbagi ruang main yang sama. Pergelangan tanganmu bisa menjangkau sudut atas, entah kamu tinggi, pendek, dekat kamera, atau berdiri agak jauh. Game tidak menyalin piksel mentah dari kamera ke layar, melainkan memetakan bentuk pose ke bentuk gawang.

Kenapa condong badan harus bergerak lebih jauh daripada di kamera

Ruang tamu bukan lapangan sepak bola. Kebanyakan orang tidak bisa menerjang dengan aman, dan saya tidak mau game ini mendorong ke arah situ.

Sebagai gantinya, Keeper mengukur pergeseran pinggul ke samping dari posisi berdiri yang sudah dikalibrasi, lalu memperbesarnya ke seluruh lebar gawang. Condong badan yang disengaja jadi sebuah selaman. Posisi lengan dan kaki tetap berpengaruh, tapi pergeseran pinggul yang diperbesar membuat seluruh badan kiper bisa meluncur ke sudut tanpa kamu harus menjatuhkan diri ke lantai.

Posisi berdiri acuan perlahan kembali ke tengah di antara tendangan. Ini penting karena orang wajar bergeser setelah beberapa kali menyelamatkan bola. Kalau titik kalibrasinya tetap, lama-lama berdiri tegak pun dianggap condong terus.

Sebelum hitung mundur pertama, game memeriksa apakah kepala, bahu, dan kedua lengan terlihat dan cukup stabil. Keadaan siap itu ditahan sebentar, bukan diterima dari satu frame yang kebetulan pas. Layar kalibrasi bukan urusan terpisah dari desain game: ia menetapkan apa yang perlu dilihat kamera dan memberi pemain ruang untuk bergerak.

Seluruh tubuh menjadi area penyelamatan

Keputusan teknis terpenting: penyelamatan tidak boleh bergantung pada pergelangan tangan saja. Kiper sungguhan menahan tendangan dengan tangan, lengan, kaki, badan, bahkan kadang kepala. Sistem tabrakannya harus mengenali seluruh siluet.

Saya menyusun kiper dari beberapa bentuk sederhana:

• Badan adalah poligon terisi yang dibentuk dari kedua bahu dan kedua pinggul.
• Lengan dan kaki adalah ruas garis tebal, diperlakukan sebagai kapsul, bukan tulang setebal satu piksel.
• Pergelangan tangan mendapat zona sarung tangan berbentuk lingkaran yang sedikit lebih besar.
• Kepala punya zona penyelamatan lingkaran sendiri.

Saat bola tiba di garis gawang, mesin hanya bertanya satu hal: apakah bola menyentuh salah satu bentuk itu? Untuk lengan atau kaki, saya mencari titik terdekat pada ruas garis, lalu membandingkan jaraknya dengan ketebalan anggota badan ditambah radius bola. Untuk badan, saya menguji apakah pusat bola jatuh di dalam poligon.

Titik tubuh dengan visibilitas di bawah ambang tidak dihitung dalam penyelamatan. Ini mencegah pergelangan tangan tebakan atau pergelangan kaki yang tersembunyi menciptakan penghalang tak kasatmata. Hasilnya cukup longgar untuk terasa nyata secara fisik, tapi cukup tepat sehingga kamu tetap harus bergerak ke arah tendangan.

Menghadirkan isyarat sebelum reaksi

Game kiper sepak bola yang adil butuh tendangan yang bisa dibaca. Kalau bola tiba-tiba muncul dengan kecepatan penuh tanpa petunjuk, pemain hanya menebak, bukan bereaksi.

Tiap tendangan diawali ancang-ancang singkat. Pemain bola mendekati bola, kaki tendang terayun ke belakang, dan cincin yang menyempit menandai saat tendangan akan terjadi. Begitu bola lepas dari sepatu, lajunya ke arah gawang makin cepat. Bola juga membesar dari ukuran jauh ke ukuran dekat, jadi ada satu petunjuk kedalaman lagi.

Lengkungan memakai busur sinusoidal. Lengkungannya nol saat bola meninggalkan kaki, membesar di tengah lintasan, dan kembali nol di sasaran. Jadi bola bisa melengkung tanpa pernah meleset dari tujuan yang dipilih penendang.

Saat terjadi penyelamatan, bola tidak langsung lenyap. Bola memantul menjauh dari titik sentuh sesaat, dan bagian tubuh yang menahannya berkedip. Jeda kecil itu membuat tabrakan jauh lebih mudah dimengerti, karena pemain bisa melihat kenapa tendangannya tertahan.

Level tinggi, tekanan reaksi ala profesional

Cara paling gampang membuat game kiper sepak bola lebih sulit adalah menaikkan kecepatan bola. Saya berusaha tidak hanya mengandalkan itu, sebab kecepatan ada batasnya. Lewat titik tertentu, kecepatan hanya menghabiskan kesempatan untuk bereaksi.

Jadi Keeper mengubah lima variabel yang saling terkait seiring naiknya level:

1. Waktu terbang berkurang, sehingga pemain punya lebih sedikit waktu untuk memutuskan.
2. Lengkungan ke samping bertambah, sehingga lintasan awal tidak lagi lurus.
3. Gawang makin lebar, jadi ada lebih banyak ruang yang harus dijaga.
4. Jangkauan kiper hasil pemetaan menyusut sedikit, jadi berdiri diam melindungi lebih sedikit bagian gawang.
5. Penendang lebih sering membidik sudut.

Di level pertama, bola terbang sekitar satu detik. Waktu itu berkurang 0,06 detik tiap level sampai menyentuh batas bawah setengah detik. Di saat yang sama, lengkungan dan peluang bidikan ke sudut naik menuju batas tetapnya. Gawang melebar sedikit demi sedikit, bukan melompat antar mode kesulitan yang sembarangan.

Yang penting bukan satu angka tertentu, tapi cara variabel-variabel itu bekerja bersama. Level awal mengajarkan pemetaannya. Level berikutnya meminta kamu menggali informasi dari ancang-ancang, mengikuti lengkungan, memutuskan lebih awal, dan tetap memakai jangkauan penuh dari pose. Kombinasi itu lebih mirip tekanan keputusan yang dihadapi kiper berpengalaman daripada sekadar membuat tendangan lurus ke tengah jadi lebih cepat.

Statistik level memperlihatkan seluruh progresinya

Saya memeriksa penyetelan produksi yang berlaku sekarang langsung dari konfigurasi game. Inilah angka yang benar-benar dipakai Keeper:

• Level 1: waktu terbang 1,00 detik, faktor lengkungan 5 persen, lebar gawang 42 persen, peluang sudut 25 persen, dan jangkauan dasar 102 persen.
• Level 4: waktu terbang 0,82 detik, faktor lengkungan 20 persen, lebar gawang 54 persen, peluang sudut 43 persen, dan jangkauan dasar 96 persen.
• Level 7: waktu terbang 0,64 detik, faktor lengkungan 35 persen, lebar gawang 66 persen, peluang sudut 61 persen, dan jangkauan dasar 90 persen.
• Level 9: waktu terbang 0,52 detik, faktor lengkungan maksimum 45 persen, lebar gawang 74 persen, peluang sudut 73 persen, dan jangkauan dasar minimum 88 persen.
• Level 12: waktu terbang 0,50 detik, faktor lengkungan 45 persen, lebar gawang 86 persen, peluang sudut 90 persen, dan jangkauan dasar 88 persen.

Faktor lengkungan adalah nilai di ruang game, bukan klaim tentang berapa meter bola sungguhan bergerak. Lebar gawang dan jangkauan juga proporsi dari gawang di ruang layar. Perbandingan yang berguna adalah progresinya: dari level 1 ke level 12, waktu terbang tinggal separuh, gawang jadi lebih dari dua kali lebih lebar, peluang sudut naik dari satu dari empat tendangan menjadi sembilan dari sepuluh, dan area yang terlindungi saat berdiri menyusut.

Inilah sebabnya ronde-ronde akhir terasa seperti standar yang berbeda, bukan level pertama yang sekadar diganti warna. Di level 9, jendela reaksi sudah masuk ke kisaran setengah detik seperti yang terukur dalam rekaman penalti profesional, dan tendangannya juga lebih sering melengkung dan berakhir dekat sudut.

Target penyelamatan adalah aturan game, bukan tolok ukur profesional

Tiap level berisi enam tendangan. Selamatkan minimal 60 persen, yaitu empat dari enam, dan level berikutnya terbuka. Skornya adalah jumlah level yang berhasil kamu tamatkan.

Saya memilih blok tetap karena itu memberi tiap level cerita kecil. Pemain selalu tahu targetnya, tendangan yang sedang berjalan, dan berapa kesalahan yang masih boleh dibuat. Kalau empat penyelamatan yang dibutuhkan sudah mustahil tercapai, permainan langsung berakhir, tidak perlu memainkan sisa tendangan yang tak berarti.

Menyelamatkan empat dari enam berarti tingkat lolos level 66,7 persen. Angka ini tidak boleh dibandingkan dengan persentase penyelamatan penalti di dunia nyata. Tendangan, penskalaan tubuh, dan sebaran sasaran di Keeper dirancang untuk game browser yang enak diulang, bukan untuk menyamai statistik kompetisi profesional. Acuan dunia nyatanya ada di jendela reaksi dan tekanan keputusan visual, bukan di skor akhir.

Struktur ini juga membedakan konsistensi dari sekadar satu penyelamatan yang kebetulan. Satu penyelamatan spektakuler memang terasa enak, tapi untuk menamatkan level kamu perlu keputusan dan gerakan yang berulang. Itu lebih cocok untuk game kiper online yang singkat daripada rangkaian tanpa akhir yang tak punya titik pemeriksaan.

Memisahkan mesin dari kamera

Mesin inti game tidak tahu apa-apa soal React, webcam, atau titik pose. Ia mengurus penendang, ancang-ancang, lintasan bola, lengkungan, hasil tendangan, aturan level, dan skor. Halaman hanya menyerahkan ukuran panggung dan sebuah fungsi untuk menguji penyelamatan.

Pemisahan itu membuat aturan-aturan penting bisa diuji tanpa menyalakan kamera. Saya bisa memberi mesin sumber acak yang deterministik, memajukan waktu, memeriksa lintasan bola, dan memastikan kapan level seharusnya tamat atau berakhir. Geometri pose tinggal di modul terpisah, tempat ia bisa diuji sebagai geometri.

Putaran di browser memakai requestAnimationFrame(). Saya menghitung waktu yang berlalu antar-frame lalu memasukkannya ke mesin, sehingga bola tidak melaju lebih cepat hanya karena layarnya punya refresh rate lebih tinggi.

Yang saya pelajari dari membuat Keeper

Bagian tersulitnya bukan mengenali seseorang, melainkan memutuskan bagaimana orang itu mengisi gawang digital sementara tendangannya makin menyerupai tekanan reaksi yang nyata.

Game ini mulai berhasil ketika saya berhenti menganggap titik pose sebagai controller jadi. Titik-titik itu bahan mentah. Controller-nya lahir dari kalibrasi, pencerminan, koordinat relatif, condong badan yang diperbesar, pemeriksaan visibilitas, dan bentuk tabrakan. Sedangkan rasanya datang dari ancang-ancang yang mudah dibaca, sentuhan yang terlihat, dan kurva kesulitan yang mengubah soalnya tanpa mengubah aturannya.

Itulah yang saya suka dari game webcam. Sistem teknisnya rumit, tapi petunjuk untuk pemain tetap bisa sederhana: baca ancang-ancang, perhatikan tendangan, jangkau bola, lalu selamatkan. Level-level awal memberimu waktu untuk menghafal urutan itu. Level-level tinggi memintamu melakukannya dalam setengah detik.

Kamu bisa memainkan Keeper gratis di browser. Untuk gambaran singkat pengalamannya, baca panduan pendamping saya tentang game sepak bola AR. Dan kalau ingin tahu bagaimana alur pose yang sama saya pakai untuk berlari, bukan menjaga gawang, baca cara saya membuat Dino Survival.