Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Game Development
  2. How to Learn
Gamedevelopment

Belajar Phaser, Game Engine HTML5

by
Length:LongLanguages:

Indonesian (Bahasa Indonesia) translation by Aditia Dwiperdana (you can also view the original English article)

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.

header

Framework Game HTML5 lagi?

Bisa dibilang setiap minggu muncul HTML5 game framework yang baru, dan jumlahnya meningkat dengan sangat pesat. Jadi kenapa kamu perlu mempertimbangkan Phaser dari berbagai pilihan yang ada? Saya pikir alasannya akan berhubungan dengan cita-cita tim yang terlibat dalam membangun Phaser.

Kami di Photon Storm mendedikasikan diri untuk hanya membuat game HTML5 beberapa tahun yang lalu, saat tidak banyak pilihan framework yang bisa digunakan, dan saat jumlah developer game HTML kurang dari sepuluh. Memasuki bidang ini begitu awal, berawal dari Flash, kami merasa perlu untuk membuat alat bantu seperti yang kami gunakan di AS3.

Kami adalah penggemar besar Flixel dan menikmati kesuksesan dari game kami dan Flixel Power Tools yang kami buat. Ada kepuasan tersendiri saat melihat developer lain menggunakan produk tersebut dan membantu membuat game mereka rilis. Ini adalah hal yang ingin kami lakukan juga dalam ranah HTML5.

flixel-power-toosls

Hal yang tidak kami duga sebelumnya adalah bagaimana lingkungan HTML5 berubah begitu cepatnya. Sampai sekarang, salah satu slide presentasi yang saya gunakan dalam berbagai konferensi berisi "Bersiaplah untuk melupakan apa yang sudah kamu pelajari setiap enam bulan sekali", dan saya percaya hal ini masih benar. Saat ini vendor browser melakukan iterasi dan perbaikan dalam kecepatan yang luar biasa. Hanya butuh waktu beberapa minggu untuk sebuah fitur baru untuk muncul ke publik, dan jika kamu terjebak menggunakan game framework yang hanya dikembangkan di waktu luang seseorang atau memiliki siklus rilis yang lambar, tidak akan makan waktu lama sampai game kamu menjadi ketinggalan jaman.

Pertanda lain dari perubahan ini adalah jenis pekerjaan yang diminta oleh klien. Sebagai perusahaan kami hanya mengerjakan dua hal: membuat game HTML5, dan membuat Phaser. Kami membuat game HTML5 untuk beberapa brand perusahaan hiburan terbesar di dunia, dan pengalaman itu memberi banyak inspirasi terkait kebutuhan yang mereka butuhkan. Hal yang paling banyak diminta adalah agar game kami berjalan di mobile browser; begitu banyak framework HTML5 fokus pada desktop, yang memiliki performa dan koneksi yang terjamin, dan mengabaikan mobile browser sama sekali. Tapi justru hal itu lah yang paling diinginkan oleh para klien. Sehingga penting sekali untuk Phaser agar bisa membuat game untuk klien tidak peduli platformnya apa.

Sejak Phaser 1.0 dirilis, update dilakukan secara berkala dan menyeluruh, dengan banyak fitur baru dan perbaikan yang dilakukan dengan cepat. Kami mengerjakan berbagai fitur dari development ke master dalam waktu rata-rata satu bulan, kamu bisa lihat daftar perubahan lengkapnya di GitHub. Yang menarik adalah sekarang muncul kebutuhan agar game bisa berjalan dengan baik di dalam WebView. Kami akan memastikan Phaser bekerja dengan baik di lingkungan tersebut mulai tahun 2014.

Satu hal tidak kalah pentingnya dengan menjaga Phaser tetap mengikuti perkembangan jaman, adalah untuk membuat Phaser sangat mudah digunakan. Kamu akan melihat ini tercermin di keseluruhan framework Phaser. Hal ini dikembangkan dari pengalaman kami dengan Flixel Power Tools, dan lebih jauh lagi dari pengalaman saya berkerja dengan The Game Creators dalam menentukan bentuk bahasa game mereka. Saya rasa sudah mendarah daging bagi saya untuk membuat game development semudah mungkin bagi developer, prinsip yang akan saya lanjutkan selama Phaser berkembang.

Saya minta maaf jika penjelasan berikut (atau sebelumnya) terdengar seperti 'marketing'. Phaser adalah produk yang gratis, kami tidak menghasilkan uang saat kamu menggunakan Phaser, ini karena saya sangat bersemangat akan hal yang sudah saya buat. Jadi tolong sabar dengan saya.


Platform apa yang bisa saya target dengan 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.

connect_me_factory

Firefox OS, Tizen, dan Kindle

Terima kasih pada Mozilla, kami menerima banyak test device FFOS, dan mulai memastikan Phaser berjalan dengan baik pada device-device tersebut. Sejauh ini hal terlihat bagus, dan kami akan membuat panduan implementasi di tahun depan.

Kami juga melihat game Phaser berjalan dengan baik pada perangkat Tizen dan Kindle HTML5 wrapper, berarti kamu bisa merilis ke device-device berikutu tanpa usaha tambahan. Sejalan dengan perangkat berbasis web mulai masuk ke pasar, kami akan memastikan Phaser tetap bisa mendukung berbagai perangkat tersebut.

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.

okai

Fitur Utama

Kami akan membahas beberapa fitur paling penting dari Phaser berdasarkan sudut pandang seorang developer:

Itu semua hanya JavaScript

Hal ini mungkin terdengar seperti sebuah 'fitur' yang aneh, tapi sebenarnya adalah fitur yang menarik. Phaser tidak menggunakan struktur Berorientasi Objek di balik layar. Tidak ada rantai inheritance atau sistem komponen yang besar, dan kamu tidak harus memaksa objek yang kamu buat untuk mengikuti struktur kelas tertentu. Semuanya hanya merupakan rantai prototype sederhana, sebagaimana JavaScript seharusnya digunakan.

Hal ini tidak berarti kamu tidak bisa membuat game dengan struktur yang baik, justru sebaliknya. Ini hanya berarti kami tidak memaksakan struktur tertentu. Ini juga berarti Phaser sangat mudah untuk dimodifikasi sampai ke pusatnya.

Tapi saya lebih suka TypeScript!

Baguslah, karena kami punya file definisi TypeScript juga. Sudah ada panduan untuk menggunakan Phaser dengan TypeScript.

phaser-typescript

Loading Asset dengan mudah

Phaser memiliki asset loader bawaan yang bisa menangani:

  • Gambar
  • Sprite 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

Kami secara rutin mengeskpor file tekstur atlas dari Flash langsung ke game Phaser kami, dan Phaser mendukung atlas yang sudah tersusun rapi. Asset bisa di-load sebagian, cached, dan diambil dari berbagai URL berbeda (untuk mendukung CDN), dan bahkan kamu bisa mengubah semua sprite menjadi progress bar dengan satu bars kode saja.

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.

phaser-shaders

Audio: Web Audio dan Legacy Audio

Audio sudah menjadi kelemahan game HTML sejak lama. Beberapa tahun yang lalu, kita dihadapkan pada pilihan hanya memiliki satu channel audio high-latency yang akan mengganggu device saat dijalankan atau tidak memiliki audio sama sekali. Tapi dengan perkembangan jaman, Web Audio API muncul untuk menyelamatkan kita. Web Audio API mendukung node-based audio support, dengan beberapa channel, node routing, dan berbagai jenis efek. Jadi sekarang Phaser sepenuhnya mendukung Web Audio.

Namun, terutama pada Android, masih banyak device yang belum mendukung hal ini, jadi kamu tetap mendukung legacy audio dan penggunaan Audio Sprite: teknik mengelompokkan banyak sample audio menjadi satu file dan menggunakan playback marker untuk berpindah ke berbagai efek suara. Phaser akan memilih salah satu antara dua teknik tersebut tergantung pada kapabilitas device, termasuk membuka akses ke sub-system audio secara otomatis, hal yang biasa menjadi kesulitan untuk mobile dev yang baru.

peterrabbit

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.

wolfblood

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.

phaser-particles

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.


Persiapan Awal

Pada bagian ini kami akan membahas di mana kamu bisa mengunduh Phaser, bagaimana persiapan untuk pengembangan, dan bagaimana cara memulai.

Mengunduh Phaser

Project Phaser disimpan di GitHub di URL https://github.com/photonstorm/phaser. Ada dua branch utama: master adalah versi rilis stabil yang terbaru, sedangkan dev adalah tempat menyimpan versi yang sedang dalam pengembangan. Begitu ada versi yang selesai, kami push dari dev ke master, lalu dev akan diupdate untuk menyiapkan rilis berikutnya. Kecuali kamu tahu bahwa kamu memang membutuhkan branch dev, kamu sebaiknya memulai dengan master.

Idealnya, kamu perlu menggunakan git dan checkout atau fork repository Phaser agar kamu bisa dengan mudah mengupdatenya. Tapi jika kamu masih baru dalam menggunakan git atau belum nyaman menggunakannya, ada opsi untuk mengunduh file zip yang berisi keseluruhan repository.

Artikel yang berhubungan
gravity-smash

Panduan untuk Memulai

Setelah mengunduh, kami sarankan kamu mengikuti Panduan untuk Memulai Phaser yang resmi. Panduan ini akan membimbing kamu menyiapkan web server lokal, memilih lingkungan pengembangan, dan membangun game di cloud jika diinginkan.

Panduannya dibagi menjadi bagian-bagian berikut:

Ada pula panduan yang sama untuk TypeScript.

Membuat game pertamamu

Setelah menyiapkan lingkungan pengembangan, saatnya untuk membuat permainan. Kami sarankan untuk menggunakan tutorial Membuat game Phaser pertamamu. Panduan tersebut akan membimbing kamu membuat sebuah permainan platformer sederhana, memperkenalan konsep inti bagaimana Phaser berkerja, dan menyiapkan kamu untuk mengembangkan permainan tersebut dan belajar lebih banyak lagi.

phaser-starter-tutorial

Contoh game Phasre

Jika kamu melakukan checkout atau mengunduh Phaser, maka akan dilengkapi dengan kumpulan contoh. Ini adalah website mandiri yang berisi lebih dari 170 contoh kode, dibagi ke beberapa kategori kunci: Physics, Collision, Sprite, Text, dan lain-lain. Setiap contoh adalah sebuah kode mandiri yang sudah bisa dijalankan, yang bisa dengan mudah kamu buka, modifikasi, dan pelajari. Jika digunakan bersama dokumentasi API, kumpulan contoh ini adalah jalur cepat untuk mempelajari berbagai bagian dari Phaser.

phaser-examples

Dokumentasi API

Dokumentasi API tersedia di dalam repository Phaser pada folder docs. Kami sudah bekerja keras membuat dokumentasi tersebut beberapa bulan terakhir, walau masih perlu pengembangan, dokumentasi tersebut sudah menjadi panduan lengkap yang mencakup keseluruhan framework.

Rilis terbaru (1.1.3) memiliki banyak update besar di berbagai bagian dari Phaser. Sudah menjadi misi kami untuk mengembangkan dokumentasi setiap ada rilis Phaser yang baru.

JSHint

Sejak Phaser versi 1.1.3, keseluruhan framework dijalankan menggunakan JSHint sebelum rilis. Kami menyediakan file konfigurasi kami pada repository Phaser.

JSHint adalah cara untuk kami memastikan kode dalam framwork mengikuti sekumpulan panduan penulisan kode, mulai dari cara kami menangani tab dan indentasi, sampai nama variabel dan gaya penulisan kutipan. Semua yang ingin berkontribusi terhadap Phaser harus memeriksa update mereka terhadap konfigurasi JSHint.


Langkah berikutnya

Jika kamu mengikuti artikel ini dengan baik, kamu akan mengerti kenapa Phaser itu hebat, apa yang kami ingin capai dengan membuat Phaser, dan bagaimana kamu bisa belajar membuat game menggunakan Phaser. Tapi bagian terpenting dari game framework bukanlah seberapa banyak fitur atau demo teknis yang dimiliki, melainkan komunitas yang mendukungnya.

Membuat game adalah kerja keras, titik. Dan lebih sulit lagi jika dilakukan sendirian, dengan framework baru yang pastinya berbeda dnegan apapun yang sudah pernah ada sebelumnya. Untungnya, Phaser memiliki komunitas yang sangat aktif.

tildeath

Forum Game Dev HTML5

Kami membuat forum HTML5 game dev beberapa waktu yang lalu, tidak hanya untuk Phaser, tapi karena membuat game HTML5 adalah ranah baru dan kami ingin bisa berdikusi dengan orang lain tentang itu. Sejak itu forum tersebut terus berkembang, dengan papan diskusi yang aktif, 250.000 view per bulan, dan pengguna yang bersahabat dan profesional.

Jadi masuk akal jika kami menggunakan ini sebagai markas resmi Phaser, dan kamu akan menemui banyak rekan developer yang bersahabat untuk bertukar pikiran atau pertanyaan. Forum ini juga markas dari beberapa library lain termasuk Pixi.js dan framework 3D Babylon.js. Terdapat pula area Showcase Game untuk menampilkan apa saja yang sudah kamu buat. Mengunjungi forum setiap hari adalah sumber inspirasi bagi saya, dan senang sekali melihat apa saja yang bisa dicapai oleh developer game HTML5 saat ini.

html5gamedevs

Newsletter

Phaser Newsletter dirilis sebulan sekali dan berisi detail tentang rilis baru, artikel pendek tentang topik Phaser baru seperti plugin dan tutorial. Untuk berlangganan tidak dikenakan biaya, dan karena menggunakan Campaign Monitor, kamu bisa pastikan tidak ada spam dan mudah untuk berhenti berlangganan jika kamu mau.

Berkontribusi

Kamu bisa membantu membentuk bagaimana Phaser berkembang. Jika kamu menemukan bug, tolong laporkan. Tidak akan makan waktu lama, dan sampai saat ini kami sudah memperbaiki lebih dari 91% dari semua masalah yang dilaporkan (dan kami masih mengerjakan 9% sisanya). Kamu juga bisa membuat pull request terhadap branch development, atau merilis plugin atau filter kamu sendiri.

Tunjukkan game yang kamu buat!

Kami menghabiskan banyak waktu untuk membuat Phaser karena kami ingin Phaser menjadi framework pembuatan game HTML5 yang terbaik. Kami sadar Phaser tidak akan cocok untuk semua orang. Tapi jika kamu menggunakan Phaser untuk membuat sesuatu, tidak masalah seberapa besar atau kecil, jangan sungkan memberitahu kami. Ketika ada developer yang menujukkan game yang sedang mereka kerjakan kami mendapat tambahan motivasi yang luar biasa besar! Hubungi kami via forum, Twitter (@photonstorm) atau melalui email.

Akhir kata, kami harap kamu bisa bersenang-senang saat membuat game kamu sendiri.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.