Kumpulan Framework untuk Membuat Game dengan HTML5, Bagian 1

Membuat game tidak harus menggunakan aplikasi yang besar, berat, dan mahal. Sekarang kita bisa membuat game hanya dengan bermodalkan text editor dan web browser  saja. Hal ini dapat terjadi berkat berkembangkan HTML5 dengan fitur canvasnya yang dapat dimanfaatkan untuk mengembangkan game.

Saya dan pembaca mungkin sebelumnya pernah merasakan betapa kita pernah cukup bergantung pada teknologi Flash. Flash sendiri merupakan teknologi yang dikembangkan oleh salah satu perusahan komersial Adobe. Salah satu tujuan pengembangan HTML5 adalah mengurangi ketergantungan akan aplikasi pihak ketiga seperti Flash dengan memberikan HTML fitur native untuk melakukan hal-hal yang dapat dilakukan oleh Flash, canvas merupakan salah satu fitur HTML5 untuk mengatasi permasalahn ini. Canvas sendiri digunakan oleh banyak aplikasi, mulai dari audio player, video player, diagram responsive, dan bahkan game.

Kita dapat membuat game hanya dengan teknolog HTML dan JavaScript murni namun membutuhkan usaha yang jauh lebih keras dibandingkan dengan menggunakan game framework yang telah ada. Saat ini tercatat ada 22 game engine HTML5 di situs html5gameengine.com. Di artikel kumpulan game engine terbaik ini, saya akan memilih game engine yang free dan telah cukup banyak digunakan.

EaselJS

EaselJS merupakan game engine yang dikembangkan oleh gskinner.com. EaselJS terinspirasi dari Adobe Flash/ActionScript, oleh karena itu apabila pembaca pernah menggunakan Adobe Flash/ActionScript sebelumnya, seharusnya pembaca akan lebih cepat beradaptasi dengan EaselJS. EaselJS dapat digunakan untuk membuat konten 2d dengan HTML5 seperti visualisasi data, iklan, game, dll.

EaselJS merupakan aplikasi free and open source dibawah lisensi MIT, kode sumbernya dapat diakses melalui halaman github.com. Dokumentasi lengkap mengenai modul-modul EaselJS dapat dibaca melalui halaman dokumentasinya selain itu juga ada panduan untuk pemula yang baru mengenal EaselJS di halaman Getting Started. Puluhan contoh dapat pembaca lihat di halaman example. Informasi terbaru mengenai EaselJS dapat pembaca ikuti melalui twitter, google+, dan blog mereka.

Pembaca pasti penasaran ingin melihat seperti apa game yang pernah dibuat dengan EaselJS. Berikut ini tiga contoh game yang pernah dibuat dengan EaselJS.

Pixi.js merupakan pemain baru dibidang renderer game HTML5. Dirilis pertama kali pada awal tahun 2013, saat ini versi pixi.js adalah versi 2.0. Pixi.js dikembangkan oleh goodboy digital. Tujuan pengembangan pixi.js adalah untuk menyediakan pustaka 2d yang cepat dan ringan yang dapat berjalan disemua perangkat. Pixi memberikan penggunanya kemudahan untuk memanfaatkan kelebihan hardware acceleration tanpa perlu memiliki pengathuan akan webGL sebelumnya. Situs resmi pixi.js ada di github.com. Ikuti informasi terbaru pixi.js melalui twitter (@doormat23) dan blog goodboydigital.com.

Pixi.js saat ini telah memiliki fitur-fitur yang cukup lengkap yaitu:

• WebGL renderer (batching yang cepat dan performa sangat cepat)
• Canvas renderer (Paling cepat diantara pustaka lain)
• Full scene graph
• API sangat mudah untuk digunakan (mirip dengan API display list Flash)
• Mendukung texture atlases
• Asset loader / sprite sheet loader
• Memiliki fitur Auto-detect yang akan memilih renderer yang harus dipakai
• Full Mouse dan Multi-touch Interaction
• Text
• BitmapFont text
• Multiline Text
• Render Texture
• Spine support
• Primitive Drawing
• Masking
• Filters

Dokumentasi mengenai penggunaan Pixi dapat anda baca di halaman dokumentasi pixi.js di github.com. Contoh penggunaan pixi.js dapat diakses melalui halaman example. Forum pixi.js dapat diikuti melalui htmlgamedevs.com. Kumpulan artikel dan tutorial tentang pixi.js ada di halaman resources. Akses langsung situsnya di pixijs.com.

Phaser

Phaser merupakan framework game HTML5 yang sedang naik daun. Popularitasnya sangat tinggi dan dikenal sebagai framework game HTML5 yang sangat bisa diandalkan. Phaser dikembangkan oleh Richard Davey (Photon Storm). Game yang dibuat dengan Phaser dapat dikompile ke Android dan iOS melalui aplikasi pihak ketiga. Versi terakhir Phaser adalah versi 2.2.2 dan versi 3 saat ini masih dalam pengembangan. Phaser adalah aplikasi free and open source dibawah lisensi MIT.

Pembaca dapat mengunduh Phaser melalui github dan membuat game dengan JavaScript maupun TypeScript. Phaser juga memiliki forum sendiri bagi orang-orang yang ingin bertemu dengan sesama pengguna Phaser. Forum ini ada di html5gamedevs.com.

Phaser sangat ramah akan pengguna baru, mereka memiliki lebih dari 400 contoh untuk berbagai jenis game yang bisa pembaca lihat di example.phaser.io. Hanya sedikit framework yang dapat memberikan contoh sebanyak itu. Dengan begini, kita tidak akan terlalu kesulitan untuk mencari cara penggunaan Phaser melalui ratusan contoh yang disediakan.

Penasaran dengan game-game yang telah dibuat dengan Phaser? Beberapa contoh di bawah ini adalah game yang dibuat dengan Phaser seperti The Defiant Few, Chuck, Tap Tap Submarine, Foot Chinko, Moon Rocket, The Hobbit, dll.

Phaser memiliki panduan pengguna baru dan dokumentasi yang sangat lengkap. Pembuat Phaser juga sedang menulis buku resmi yang membahas tentang Phaser, dari ketiga buku baru dua yang telah siap yaitu A Guide to the Phaser Tween Manager dan A Guide to the Phaser Scale Manager.

Untuk mendapatkan informasi terbaru mengenai Phaser, kunjungi situsnya di phaser.io, disana terdapat bagian News, yang akan terus memberikan informasi terbaru setiap harinya. Pembaca juga dapat mengikuti akun twitter Photon Storm. Selain itu Photon Storm juga merilis buletin Phaser Coding Tips setiap minggunya.