Roll It adalah Eksperimen Chrome yang menghadirkan kembali permainan papan klasik hanya menggunakan browser di ponsel dan komputer Anda. Browser di ponsel memungkinkan Anda membidik dan menggulirkan bola dengan menggerakkan pergelangan tangan, sementara browser di komputer merender grafik real time dari lorong Roll It dengan WebGL dan Canvas. Kedua perangkat berkomunikasi melalui Websocket. Tidak ada aplikasi Tidak ada download. Tidak ada token. Yang Anda butuhkan hanyalah browser modern.
Dengan arahan Google Creative Lab, Legwork mengembangkan pengalaman pengguna, antarmuka, dan lingkungan game, lalu bekerja sama dengan partner pengembangan, Mode Set, untuk membuat Roll It. Selama durasi project, ada sejumlah tantangan unik. Artikel ini membahas beberapa teknik yang kami gunakan, trik yang kami temukan, dan pelajaran yang kami peroleh saat mewujudkan Roll It.
Alur Kerja 3D
Salah satu kesulitan di awal adalah mencari cara terbaik untuk menghadirkan model 3D dari software kami ke format file yang siap digunakan di web. Setelah membuat aset di dalam Cinema 4D, model disederhanakan dan dikonversi menjadi mesh poligon rendah. Setiap mesh diberi tag pemilihan poligon tertentu untuk membedakan bagian objek untuk pewarnaan dan tekstur. Kemudian, kita dapat mengekspor sebagai file Collada 1.5 (.dae) dan mengimpor ke Blender, program 3D open source, untuk membuat file yang kompatibel dengan three.js. Setelah memastikan model diimpor dengan benar, kita mengekspor mesh sebagai file JSON dan pencahayaan diterapkan menggunakan kode. Berikut adalah tampilan yang lebih mendetail tentang langkah-langkah yang kami lakukan:
Menulis kode
Roll It dikembangkan dengan library open source dan berjalan secara native di browser modern. Dengan teknologi seperti WebGL dan WebSockets, web semakin mendekati pengalaman multimedia dan game berkualitas konsol. Kemudahan dan kenyamanan yang dapat dirasakan developer dalam membangun pengalaman ini telah mengalami kemajuan pesat seiring dengan tersedianya alat yang lebih modern untuk pengembangan HTML.
Lingkungan pengembangan
Sebagian besar kode asli Roll It ditulis dengan CoffeeScript—bahasa yang bersih dan ringkas yang ditranskompilasi ke JavaScript yang di-lint dan terbentuk dengan baik. CoffeeScript sangat cocok untuk pengembangan OOP dengan model pewarisan yang bagus dan penanganan cakupan yang lebih bersih. CSS ditulis dengan framework SASS, yang memberi developer sejumlah alat hebat untuk meningkatkan dan mengelola stylesheet project. Menambahkan sistem ini ke proses build memerlukan sedikit waktu untuk disiapkan, tetapi hasilnya pasti sepadan, terutama untuk project yang lebih besar seperti Roll It. Kami menyiapkan server Ruby on Rails untuk mengompilasi aset secara otomatis selama pengembangan, sehingga semua langkah kompilasi ini menjadi transparan.
Selain menciptakan lingkungan coding yang sederhana dan nyaman, kami mengoptimalkan aset secara manual untuk meminimalkan permintaan guna memuat situs lebih cepat. Kami menjalankan setiap gambar melalui beberapa program kompresi—ImageOptim dan ImageAlpha. Setiap program mengoptimalkan gambar dengan caranya sendiri—lossless dan lossy. Dengan kombinasi setelan yang tepat, setelan ini dapat secara signifikan mengurangi ukuran file gambar. Hal ini tidak hanya menghemat bandwidth saat memuat gambar eksternal, tetapi setelah dioptimalkan, gambar Anda akan diterjemahkan menjadi string berenkode base64 yang jauh lebih kecil untuk penyematan inline di HTML, CSS, dan JavaScript. Sehubungan dengan encoding base64, kami juga menyematkan file font WOFF dan SVG Open Sans langsung ke CSS menggunakan teknik ini, yang menghasilkan total permintaan yang lebih sedikit.
Tampilan 3D yang mengaktifkan fisika
THREE.js adalah library JavaScript 3D yang ada di mana-mana untuk web. Library ini menggabungkan matematika 3D tingkat rendah dan pengoptimalan WebGL berbasis hardware yang memungkinkan pengguna biasa membuat tampilan 3D interaktif yang indah dan terang dengan mudah tanpa harus menulis shader kustom atau melakukan transformasi matriks manual. Physijs adalah wrapper khusus THREE.js untuk library fisika C++ populer yang telah diterjemahkan ke JavaScript. Kita memanfaatkan library ini untuk menyimulasikan bola yang menggelinding, melompat, dan memantul ke tujuannya dalam 3D.
Sejak awal, kami tidak hanya ingin membuat pengalaman fisik menggelindingkan bola terasa realistis, tetapi juga memastikan bahwa objek dalam game terasa nyata. Hal ini memerlukan banyak iterasi untuk menyesuaikan gravitasi keseluruhan tampilan Physijs, kecepatan bola saat menggelinding dari lemparan pemain, kemiringan lompatan jalur, serta properti gesekan dan restitusi (kekenyalan) dari bola dan bahan jalur. Kombinasi gravitasi yang lebih besar dan kecepatan yang lebih tinggi menghasilkan pengalaman bermain game yang lebih realistis.
Melembutkannya
Sebagian besar kombinasi browser dan kartu video modern akan memanfaatkan anti-aliasing berbasis hardware native di lingkungan WebGL, tetapi beberapa tidak akan berfungsi dengan baik. Jika anti-aliasing tidak berfungsi secara native, setiap tepi yang keras dan kontras di tampilan THREE.js akan menjadi tidak rata dan jelek (setidaknya bagi mata kita yang jeli).
Untungnya, ada perbaikan: melalui cuplikan kode, kita dapat mendeteksi apakah platform akan mendukung anti-aliasing secara native. Jika sudah, kita siap. Jika belum, ada serangkaian shader pascapemrosesan yang disertakan dengan THREE.js yang dapat membantu kita. Yaitu, filter anti-aliasing FXAA. Dengan menggambar ulang tampilan yang dirender setiap frame dengan shader ini, kita biasanya akan mendapatkan tampilan garis dan tepi yang jauh lebih halus. Lihat demo di bawah:
// Check for native platform antialias support via the THREE renderer
// from: http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/#antialiasing
var nativeAntialiasSupport = (renderer.context.getParameter(renderer.context.SAMPLES) == 0) ? false : true;
Kontrol game berbasis akselerometer
Sebagian besar keajaiban Roll It berasal dari gestur bola yang diputar oleh pemain dengan ponsel. Perangkat seluler telah memiliki akses ke akselerometer dalam browser selama beberapa waktu, tetapi sebagai industri, kami baru saja mulai mengeksplorasi pengenalan gestur berbasis gerakan di web. Kita agak dibatasi oleh data yang diberikan oleh akselerometer ponsel, tetapi dengan sedikit kreativitas, kita dapat menghasilkan beberapa pengalaman baru yang luar biasa.
Mendeteksi gestur "roll" utama Roll It dimulai dengan melacak 10 pembaruan akselerometer terbaru yang berasal dari peristiwa deviceorientation jendela. Dengan mengurangi nilai kemiringan sebelumnya dari nilai kemiringan saat ini, kita menyimpan delta sudut di antara peristiwa. Kemudian, dengan terus menjumlahkan sepuluh delta sudut terakhir, kita dapat mendeteksi rotasi berkelanjutan saat ponsel bergerak di ruang. Saat ponsel melewati nilai minimum perubahan sudut sapuan, kita akan memicu putaran. Kemudian, dengan menemukan delta kemiringan tunggal terbesar dalam sapuan tersebut, kita dapat memperkirakan kecepatan bola. Di Roll It, kecepatan ini dinormalisasi menggunakan stempel waktu yang kita lampirkan ke setiap update akselerometer. Hal ini membantu memperlancar kecepatan variabel saat update akselerometer di-streaming ke browser di berbagai perangkat.
Komunikasi WebSocket
Setelah pemain menggulirkan bola dengan ponsel, pesan akan dikirim dari ponsel ke laptop yang memberi tahu laptop untuk meluncurkan bola. Pesan "roll" ini dikirim melalui objek data JSON melalui koneksi WebSocket antara kedua mesin. Data JSON berukuran kecil, terutama terdiri dari jenis pesan, kecepatan lemparan, dan arah bidik.
{
"type": "device:ball-thrown",
"speed": 0.5,
"aim": 0.1
}
Semua komunikasi antara laptop dan ponsel terjadi melalui pesan JSON kecil seperti ini. Setiap kali game memperbarui statusnya di desktop, atau pengguna memiringkan atau mengetuk tombol di ponsel, pesan WebSocket akan dikirimkan di antara mesin. Agar komunikasi ini tetap sederhana dan mudah dikelola, pesan WebSocket disiarkan menggunakan satu titik keluar dari salah satu browser. Sebaliknya, ada satu titik entri di browser penerima, dengan satu objek WebSocket yang menangani semua pesan masuk dan keluar di kedua ujung. Saat pesan WebSocket diterima, data JSON akan disiarkan ulang dalam aplikasi JavaScript menggunakan metode trigger() jQuery. Pada tahap ini, data yang masuk berperilaku seperti peristiwa DOM kustom lainnya, dan dapat diambil dan diproses oleh objek lain dalam aplikasi.
var websocket = new WebSocket(serverIPAddress);
// rebroadcast incoming WebSocket messages with a global event via jQuery
websocket.onmessage = function(e) {
if (e.data) {
var obj = JSON.parse(e.data);
$(document).trigger(data.type, obj);
}
};
// broadcast outgoing WebSocket messages by passing in a native .js object
var broadcast = function(obj) {
websocket.send(JSON.stringify(obj));
};
Server WebSocket Roll It dibuat secara langsung saat dua perangkat disinkronkan dengan kode game. Backend untuk Roll It dibuat di platform Google Compute Engine dan App Engine menggunakan Go.
Memiringkan layar menu
Selain pesan WebSocket berbasis peristiwa yang digunakan selama gameplay, menu di Roll It dikontrol dengan memiringkan ponsel dan mengetuk tombol untuk mengonfirmasi pilihan. Hal ini memerlukan aliran data kemiringan yang lebih konsisten yang dikirim dari ponsel ke laptop. Untuk mengurangi bandwidth dan menghindari pengiriman update yang tidak perlu, pesan ini hanya dikirim jika kemiringan perangkat telah berubah lebih dari beberapa derajat. Tidak ada gunanya mengirim aliran data kemiringan jika ponsel tergeletak rata di atas meja. Kecepatan transmisi juga dibatasi - tidak lebih dari 15 pesan WebSockets dikirim per detik di Roll It, meskipun perangkat secara aktif dimiringkan.
Setelah nilai kemiringan diambil di komputer, nilai tersebut akan diinterpolasi dari waktu ke waktu menggunakan requestAnimationFrame untuk menjaga nuansa yang halus. Hasil akhirnya adalah menu yang berputar dan bola yang bergulir untuk membantu menunjukkan pilihan pengguna. Saat ponsel mengirim data kemiringan, elemen DOM ini diperbarui secara real time dengan menghitung ulang transformasi CSS di dalam loop requestAnimationFrame. Penampung menu hanya berputar, tetapi bola tampaknya bergulir di lantai. Untuk mencapai efek ini, kita menerapkan beberapa trigonometri dasar untuk mengaitkan koordinat x bola dengan rotasinya. Persamaan sederhananya adalah: rotasi = x / (diameter * π)
Rangkuman
Roll It adalah tanda zaman. Antara project open source yang mendukung pengembangannya, daya pemrosesan perangkat di meja dan di saku kita, serta status web sebagai platform, ini adalah waktu yang benar-benar menarik dan transformatif untuk terhubung di web terbuka. Beberapa tahun yang lalu, sebagian besar teknologi ini hanya ada dalam sistem eksklusif, yang tidak dapat digunakan dan didistribusikan secara bebas. Saat ini, pengalaman yang kompleks dapat diwujudkan dengan lebih sedikit pekerjaan dan lebih banyak imajinasi saat kita membuat dan membagikan potongan teka-teki baru setiap hari. Jadi, tunggu apa lagi? Buat sesuatu yang luar biasa dan bagikan kepada dunia.
