Roll It adalah Eksperimen Chrome yang mengonsep ulang game kayu klasik dengan hanya menggunakan browser di ponsel dan komputer Anda. Browser di ponsel memungkinkan Anda membidik dan melempar bola dengan mengibaskan pergelangan tangan, sementara browser di komputer merender grafik waktu nyata jalur Roll It dengan WebGL dan Canvas. Kedua perangkat berkomunikasi melalui Websocket. Tidak ada aplikasi Tanpa 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 proyek, ada sejumlah tantangan unik. Artikel ini membahas beberapa teknik yang kami gunakan, trik yang kami temukan, dan pelajaran yang kami pelajari saat membuahkan hasil Roll It.
Alur Kerja 3D
Salah satu kesulitan pada 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 tersebut disederhanakan dan dikonversi menjadi mesh poligon rendah. Setiap mesh diberi tag pemilihan poligon tertentu guna membedakan bagian-bagian objek untuk diberi warna dan diberi tekstur. Kemudian, kami dapat mengekspor sebagai file Collada 1.5 (.dae) dan mengimpornya ke Blender, sebuah program 3D open source, untuk membuat file yang kompatibel untuk Three.js. Setelah memastikan model diimpor dengan benar, kami mengekspor mesh sebagai file JSON dan pencahayaan diterapkan menggunakan kode. Berikut detail langkah-langkah yang kami ambil:
Menulis kode
Roll It dikembangkan dengan library open source dan berjalan secara native di browser modern. Dengan teknologi seperti WebGL dan WebSockets, web semakin dekat dengan pengalaman multimedia dan game berkualitas konsol. Kemudahan dan kenyamanan dalam membangun pengalaman ini telah menjadi kemajuan seiring tersedianya alat yang lebih modern untuk pengembangan HTML.
Lingkungan pengembangan
Sebagian besar kode asli Roll It ditulis dengan CoffeeScript—bahasa yang sederhana dan ringkas yang di-transkompilasi ke JavaScript yang dibentuk dengan baik dan . CoffeeScript sangat berguna untuk pengembangan OOP dengan model pewarisannya yang besar 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 membutuhkan sedikit waktu untuk disiapkan, tetapi hasilnya sangat berharga, terutama untuk project yang lebih besar seperti Roll It. Kami menyiapkan server Ruby on Rails untuk mengompilasi aset kami secara otomatis selama pengembangan, sehingga semua langkah kompilasi ini menjadi transparan.
Selain menciptakan lingkungan coding yang efisien dan nyaman, kami mengoptimalkan aset secara manual untuk meminimalkan permintaan agar situs dapat dimuat 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, gambar dapat memperkecil ukuran file gambar secara signifikan. Tindakan 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 dalam HTML, CSS, dan JavaScript. Saat membahas subjek encoding base64, kami juga menyematkan file font Open Sans WOFF dan SVG langsung ke dalam CSS menggunakan teknik ini, sehingga menghasilkan total permintaan yang lebih sedikit.
Adegan 3D yang mendukung fisika
THREE.js adalah library JavaScript 3D yang ada di mana-mana untuk web. Game ini mengemas matematika 3D tingkat rendah dan pengoptimalan WebGL berbasis hardware yang memungkinkan manusia biasa dengan mudah membuat adegan 3D interaktif yang indah dan terang 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. Kami memanfaatkan library ini untuk menyimulasikan bola bergulir, melompat, dan memantul ke tujuannya dalam 3D.
Sejak awal, kami bersiap untuk tidak hanya membuat pengalaman fisik melempar bola terasa realistis, tetapi juga memastikan bahwa objek dalam game terasa nyata. Hal ini memerlukan banyak iterasi untuk menyesuaikan gravitasi keseluruhan dari adegan Physijs, kecepatan bola saat menggelinding dari lemparan pemain, kemiringan lompatan jalur, dan sifat gesekan dan restitusi (bounciness) dari bola dan material jalur. Kombinasi gravitasi yang lebih besar dan kecepatan yang lebih tinggi menghasilkan pengalaman bermain game yang lebih realistis.
Melembutkan
Kebanyakan kombinasi browser dan kartu video modern harus memanfaatkan anti-aliasing berbasis perangkat keras asli di lingkungan WebGL, namun beberapa kombinasinya tidak akan berfungsi dengan baik. Dalam kasus anti-aliasing tidak berfungsi secara native, setiap tepi yang keras dan kontras dalam tampilan THREE.js akan terlihat bergerigi dan jelek (setidaknya oleh mata kita yang cerdas).
Untungnya ada perbaikan: melalui cuplikan kode, kita dapat mendeteksi apakah platform akan mendukung antialiasing secara native. Jika ya, berarti kita siap memulai. Jika tidak, ada serangkaian shader pascapemrosesan yang disertakan dengan THREE.js yang dapat membantu kita. Yaitu, filter anti-aliasing FXAA. Dengan menggambar ulang adegan yang dirender setiap frame menggunakan shader ini, biasanya kita akan mendapatkan tampilan yang jauh lebih halus pada garis dan tepi. 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
Keajaiban Game Roll ini berasal dari gestur menggulung bola yang dilakukan pemain dengan ponsel. Perangkat seluler saat ini memiliki akses ke akselerometer di dalam browser, tetapi sebagai industri, kami baru saja mulai mengeksplorasi pengenalan gestur berbasis gerakan di web. Kami agak dibatasi oleh data yang disediakan akselerometer ponsel, tetapi dengan sedikit kreativitas, kami dapat menghasilkan pengalaman baru yang luar biasa.
Mendeteksi Putar Gestur "roll" utamanya 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 menjumlahkan sepuluh delta sudut terakhir secara konstan, kita dapat mendeteksi rotasi berkelanjutan saat ponsel bergerak melintasi ruang angkasa. Saat ponsel melewati batas perubahan sudut geser, kita memicu lemparan. Kemudian, dengan menemukan delta kemiringan tunggal terbesar dalam sapuan tersebut, kita dapat memperkirakan kecepatan bola. Di Roll It, kecepatan ini dinormalkan menggunakan stempel waktu yang dilampirkan ke setiap update akselerometer. Hal ini membantu memperlancar kecepatan variabel yang dihasilkan update akselerometer ke browser pada perangkat lain.
Komunikasi WebSockets
Setelah pemain melempar bola dengan ponsel, pesan akan dikirim dari ponsel ke laptop yang menyuruhnya meluncurkan bola. Pesan "roll" ini dikirim melalui objek data JSON melalui koneksi WebSocket antara dua komputer. 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 dikirim antar-komputer. Agar komunikasi ini tetap sederhana dan mudah dikelola, pesan WebSockets disiarkan menggunakan titik keluar tunggal 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 ujungnya. Saat pesan WebSocket diterima, data JSON disiarkan ulang dalam aplikasi JavaScript menggunakan metode trigger() jQuery. Pada tahap ini, data yang masuk berperilaku sama seperti peristiwa DOM khusus lainnya, dan dapat diambil serta diproses oleh objek lain di 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 dengan cepat 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 diatur dengan memiringkan ponsel dan mengetuk tombol untuk mengonfirmasi pilihan. Hal ini memerlukan aliran data kemiringan yang lebih konsisten yang ditransmisikan 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 di atas meja! Laju transmisi juga dibatasi - tidak lebih dari 15 pesan WebSockets dikirim per detik dalam Roll It, meskipun perangkat sedang aktif dimiringkan.
Setelah nilai kemiringan diambil di komputer, nilai tersebut diinterpolasi dari waktu ke waktu menggunakan requestAnimationFrame untuk menjaga nuansa yang lancar. Hasil akhirnya adalah menu yang berputar dan bola yang berputar untuk membantu menunjukkan pilihan pengguna. Saat ponsel mengirim data kemiringan, elemen DOM ini diupdate secara real time dengan menghitung ulang transformasi CSS di dalam loop requestAnimationFrame. Kontainer menu hanya berputar, tetapi bola tampak menggelinding di sepanjang lantai. Untuk mencapai efek ini, kami menerapkan beberapa trigonometri dasar untuk menghubungkan bola koordinat x dengan rotasinya. Persamaan sederhananya adalah: rotasi = x / (diameter * π)
Penutup
Putarlah tanda waktu. Di antara berbagai project open source yang mendukung pengembangannya, kecanggihan pemrosesan perangkat di meja dan di saku kita, serta kondisi web sebagai platform, inilah saat yang sangat menarik dan transformatif untuk terhubung di web terbuka. Beberapa tahun yang lalu, sebagian besar teknologi ini hanya ada dalam sistem eksklusif, tidak tersedia untuk digunakan dan didistribusikan secara bebas. Saat ini, pengalaman yang kompleks dapat diwujudkan dengan lebih sedikit upaya dan lebih banyak imajinasi saat kita membuat dan berbagi potongan puzzle baru setiap hari. Jadi, tunggu apa lagi? Buat sesuatu yang hebat dan bagikan dengan dunia!
