Phaser, Game Engine HTML5

Phaser js

Phaser adalah framework game HTML5 open source yang dibuat oleh Photon Storm. Phaser dirancang untuk membuat game yang akan berjalan di desktop dan mobile web browser. Perhatian lebih diberikan pada aspek performa game dalam mobile web browser, pasar yang penting dan berkembang pesat dalam web gaming. Jika memungkinkan, device akan menggunakan WebGL untuk rendering, jika tidak maka akan berubah menggunakan Canvas tanpa masalah. Dalam artikel ini, saya akan membahas materi untuk belajar Phaser, menunjukkan berbagai hal yang bisa dilakukan oleh Phaser, dan berbagai pertimbangan saat merancang Phaser.

Platform untuk Phaser?

Browser Desktop

Phaser adalah library JavaScript yang dirancang untuk berjalan di semua browser desktop yang umum digunakan. Mencakup Internet Explorer 9 atau lebih baru, Firefox, Chrome, dan Safari. Versi sebelum IE9 tidak mendukung canvas, jadi jika kamu benar-benar butuh framework yang bisa menangani DOM rendering maka Phaser tidak cocok untuk itu. Tapi, permintaan game seperti itu menjadi sangat sedikit, dan kami mengubah perhatian kami ke arah lain, menuju WebGL.

Browser Mobile

Pada mobile, Phaser berjalan di iOS5 atau lebih, pada Mobile Safari. Pada Android, Phaser berjalan di versi 2.2 atau lebih, baik pada browser bawaan dan pada Chrome. Saat ini Chrome adalah browser Android yang standar, dengan versi terbaru bahkan mendukung WebGL. Tapi kamu belum bisa mengabaikan jutaan device Android tua yang masih banyak digunakan orang.

Aplikasi Native dan Desktop exe

Terdapat banyak sekali pilihan aplikasi pembuatan game yang menargetkan untuk membuat aplikasi native (Unity, Corona, Loom, dan lain-lain), tapi itu bukanlah hal yang ingin kami tangani di awal, terutama jika dibandingkan dengan pasar browser mobile yang kurang dilayani. Tapi, dengan perkembangan wrapper seperti CocoonJS dan Ejecta, kami melihat para developer yang menggunakan Phaser dapat membungkus game mereka dan merilisnya sebagai aplikasi native. Jadi mulai 2014, kami akan menambahkan dukungan untuk CocoonJS, termasuk mendukung desktop wrapper seperti node-webkit.

Fitur Utama

Loading Asset dengan mudah

Phaser memiliki asset loader bawaan yang bisa menangani:

• prite Sheet (dengan ukuran frame yang seragam)
• Texture Atlas (mencakup Texture Packer, JSON Hash, JSON Array, Flash CS6/CC, dan format XML dari Starling)
• File Audio
• File Data (XML, JSON, teks biasa)
• File JavaScript (jadi kamu bisa melakukan part-load atau mengambil resource berbasis JS)
• Tilemap (CSV, dan format Tiled map lain)
• Bitmap Font
• Gambar

Rendering: WebGL dan Canvas

Di balik layar, Phaser menggunakan Pixi.js untuk rendering. Pixi adalah rendering library yang cepat dan fokus pada Canvas dan WebGL. Pixi adalah library yang akan terus kami dukung untuk mendorong kemajuan Phaser. Untuk game yang kamu buat, ini berarti jika browser yang bersangkutan mendukung WebGL maka pemain akan lebih sering mendapat pengalaman bermain yang lebih mulus. WebGL itu umum ditemui pada desktop tapi masih baru pada mobile; walaupun begitu, mobile adalah masa depan HTML5, jadi mendukung WebGL itu penting sekali. Pada rilis terbaru Phaser, kami memperkenalkan dukungan untuk shader WebGL dan filter, dan rilis berikutnya akan mendukung normal map sehingga kamu bisa mendapat keuntungan dari tool baru seperti Sprite Lamp.

Input: Multi-Touch, Keyboard, Pointer, dan Mouse

Jika kita mendukung desktop dan mobile sekaligus, akan ada banyak opsi input yang akan digunakan. Phaser mendukung keyboard, mouse, touch, MSPointer (sekarang Pointer pada IE11), dan kombinasi di antaranya. Contohnya, pada perangkat Windows Surface kamu bisa bertukar antara menggunakan mouse, touch, atau menggunakan keduanya sekaligus. Untuk input touch, Phaser menerima single-touch can multi-touch. Kamu bisa menentukan sampai 10 titik sentuh dan mendeteksinya secara terpisah, menggunakan event untuk menangani interaksi Sprite seperti drag, tap, dan collision.

Physic, Tween, dan Particle

Sistem ArcadePhysics dan ArcadeParticle sudah dimasukkan pada library utama. Terdapat library AABB sederhana yang ringan dan membuat kamu bisa menerapkan gravitasi dan gerakan ke Sprite apa saja, lalu memeriksa collision dan separation. Dengan menggunakan world-based quadtree, kamu bisa meminimalkan pengujian tabrakan, dan mendapat hasil yang baik lebih cepat dengan waktu pemrosesan sesedikit mungkin. Tapi, kami mengerti hal ini tidak akan cocok untuk semua jeniis game, jadi sistem physic bisa diganti dengan mudah, dan tidak ada properti physic terikat pada sprite (tapi terhadap komponen body), sehingga dapat diganti dengan Box2D atau p2.js. Terdapat pula sistem tweening bawaan yang membuat kamu bisa membuat tween terhadap objek atau properti dengan mudah. Jika game dijeda, semua tween akan berhenti secara otomatis dan bisa dilanjutkan sesuai kebutuhan.

Plugin

Tujuan kami adalah membuat inti dari Phaser mencapai versi yang stabil dan tidak perlu banyak diubah kecuali perbaikan dan terkait update browser. Di sisi lain, kami ingin Phaser terus ingin berkembang, menyediakan fitur-fitur untuk berbagai jenis game tanpa membuat library inti berkembang terlalu besar. Untuk mencapai hal tersebut, kami membuat sebuah sistem plugin. Plugin Phaser bisa mendaftarkan diri mereka sendiri dengan framework ini, diupdate dari dalam game loop utama, dan menjalankan berbagai tugas lain yang berguna. Contoh yang baik adalah plugin path finding EasyStar yang baru dirilis. Kami akan menrilis plugin kami sendiri dan nantikan lebih banyak lagi plugin dari komunitas Phaser.

Daftar pustaka

https://github.com/pixijs/pixi.js https://www.codepolitan.com/phaser-3-framework-game-html5-jaman-now-5a831eb289405 https://gamedevelopment.tutsplus.com/id/articles/how-to-learn-the-phaser-html5-game-engine--gamedev-13643