Institutional Repository | Satya Wacana Christian University: Pengembangan Game HTML5 Menggunakan Framework Phaser

  

Pengembangan Game HTML5 Menggunakan

Framework Phaser

Artikel Ilmiah

  

Diajukan Kepada

Fakultas Teknologi Informasi

Untuk Memperoleh Gelar Sarjana Komputer

  

Oleh :

Sakti Dyan TK

NIM: 672009063

Program Studi Pendidikan Teknologi Informasi dan Komputer

  

Fakultas Teknologi Informasi

Universitas Kristen Satya Wacana

Salatiga

2015

  

Pengembangan Game HTML 5 Menggunakan Framework Phaser

  1

  

2

Sakti Dyan Tamariska Kusuma Jasson Prestiliano, S.T., M.Cs.

  Fakultas Teknologi Informasi Universitas Kristen Satya Wacana

  Jl. Diponegoro 52-60, Salatiga 50711, Indonesia ₁₎ Email:

  

Abstract

  HTML5 game development is booming in developer community. So does the

framework and tools that needed for developing HTML5 game. From paid tools to free

and open-sourced ones, beginner friendly to expert-only framework.

  Phaser is one of many HTML5 game framework that available on the internet.

  Phaser as their framework because it’s free, open-sourced, But a lot of people using

actively maintained even a new version of framework every bi-weekly and an active

forum makes good impression for developer.

  Key Word: Phaser, Games, HTML5, Framework

Abstrak

  Pengembangan game pada platform HTML5 mulai populer di kalangan

developer. Begitu juga dengan framework dan tools yang dibutuhkan untuk

mengembangkan game HTML5, dari yang berbayar hingga gratis dan open-source, ada

pula yang beginner friendly hingga khusus untuk developer yang sudah berpengalaman.

  Phaser merupakan salah satu dari sekian HTML5 games framework yang ada,

namun banyak orang yang menggunakan Phaser sebagai framework karena gratis, open-

source, secara aktif dikembangkan bahkan versi baru dari framework dwi-mingguan dan

forum yang aktif menjadi salah satu daya tarik dari Phaser ₁₎ Kata Kunci: Phaser, Permainan, HTML5, Framework

  

Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika Universitas Kristen

₂₎ Satya Wacana Salatiga Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga

  1. Pendahuluan

  Semakin banyak orang membicarakan tentang game HTML5 karena Dengan HTML5 kita bisa membangun game yang kompatibel dengan semua yang mempunyai peramban (desktop, smartphone, tablet dan bahkan

  gaming console) tanpa perlu untuk mengunduh apapun.

  Ada banyak framework untuk game HTML5 yang tersedia sekarang, jadi mungkin akan terasa sulit untuk memilih framework yang tepat untuk memulai pengembangan game. Namun jika kita mencari framework yang gratis, open-source dan dikembangkan secara aktif, pilihannya akan segera menyusut.

  Phaser adalah framework HTML5 dua dimensi dimana kita dapat mengembangkan game dengan bahasa JavaScript dan TypeScript yang dibuat oleh Richard Davey di tahun 2013. Phaser adalah framework gratis,

  

open-source, mempunyai versi baru yang dirilis setiap beberapa pekan

  sekali dan mempunyai komunitas yang kuat. Sehingga banyak orang mulai menggunakan Phaser untuk mengembangkan game.

  2. Tinjauan Pustaka Penelitian Terdahulu

  Dalam penelitian terdahulu, yang berjudul “Pembuatan RUN AND JUMP Game menggunakan HTML5 Canvas” [1] serta “Perancangan Dan Pembuatan Aplikasi Game Facebook “MISI SANG KAPTEN” Menggunakan Engine Construct 2 Berbasis HTML5” [2], Ainurrofiq mengembangkan sebuah web game berbasis HTML5 menggunakan framework melonJS dengan kontrol permainan hanya melalui keyboard, sedangkan Fathurrahman mengembangkan web game berbasis HTML5 khusus untuk Facebook menggunakan game engine Constructor 2 dengan kontrol permainan yang juga hanya melalui keyboard.

  Penelitian web game yang dilakukan oleh Ainurrofiq dan Fathurrahman menggunakan basis HTML5 namun hanya berfokus pada peramban desktop.Terlebih pada penelitian Fathurrahman, game yang dibuat eksklusif pada platform Facebook, yang mengharuskan user memiliki akun Facebook untuk memainkan permainan tersebut dan resolusi layar minimal yang disarankan adalah 1024x768 sehingga user yang mempunyai resolusi layar kurang dari 1024x768 akan kesulitan memainkan permainan tersebut. Dan penelitian yang dilakukan oleh Ainurrofiq dan Faturrahman hanya menggunakan keyboard sebagai kontrol sehingga pengguna yang menggunakan peramban mobile di smartphone tidak bisa memainkan permainan tersebut.

  Yang membedakan penelitian yang penulis buat dengan penelitian sebelumnya adalah keluwesan kontrol pada peramban desktop dan peramban mobile. Pada penelitian ini, (1) permainan dapat dimainkan menggunakan tetikus maupun tap/ketuk pada touchscreen device (2) Permainan dapat dimainkan di hampir semua resolusi, baik 480x800 sampai

  1920x1200 dan semua ukuran layar, dari 4 inci sampai 21 inci tanpa adanya kesulitan selama peramban yang digunakan mendukung HTML5.

  Videogame Game adalah aktivitas dengan peraturan, salah satu bentuk dari

  kegiatan bermain namun tidak selalu melibatkan konflik/kontak dengan pemain lain, dengan sistem game itu sendiri, atau dengan randomness (keacakan), fate (takdir), luck (keberuntungan). Sedangkan videogame adalah game (aktivitas dengan peraturan) yang menggunakan layar video

  digital sebagai media bermain. [3]

  Taksonomi dari videogame dalam hal ini computer games [4], terbagi dalam dua jenis yaitu Skill-and-action games dimana terbagi lagi menjadi tiga sub-jenis dan Strategy games yang terbagi menjadi tiga sub-jenis. Berikut penjelasan tiap jenis game dan sub-jenis nya.

  Skill-and-action games ini berkarakteristik pada penggunaan joystick atau controller dan mengutamakan koordinasi mata dan tangan pemain.

  Sedangkan sub-jenis yang pertama adalah Combat games yang menyajikan konfrontasi langsung dan keras. Pemain harus menembak dan menghancurkan karakter jahat yang dikendalikan oleh komputer. Sub-jenis kedua adalah Maze games yang mempunyai karakteristik adanya maze (jaringan jalan yang ruwet) dimana pemain harus bergerak, terkadang satu atau lebih karakter jahat akan mengejar karakter pemain di sepanjang

  

maze . Sub-jenis ketiga adalah Sport games yang meniru langsung dari

olahraga yang popular.

  Strategy games tidak memerlukan motor skill dan waktu yang lebih

  lama untuk memainkan game ini, Sub-jenis yang pertama Adventures dimana pemain menjadi petualang menjelajahi dunia yang kompleks. Sub- jenis kedua adalah D&D games yang terinspirasi dari DUNGEON & DRAGON ™ (yang mempunyai dua kekurangan, pertama dibutuhkannya banyak pemain dan adanya dungeonmaster dan kedua dibutuhkannya dadu untuk bermain). Game ini bisa dikatakan menghilangkan kedua kekurangan tersebut. Sub-jenis yang ketiga adalah Wargames, merupakan simulasi dari perang, dimana pemain bermain sebagai komandan atau pemimpin dari sebuah negara atau faction.

  HTML5

  HTML5 merupakan pengembangan dari generasi HTML sebelumnya, walau secara umum kode maupun format HTML5 tampak sama dengan HTML generasi sebelumnya, berikut adalah fitur-fitur yang khusus hanya terdapat pada HTML5 : (1) Multimedia support, HTML5 mendukung file audio dan video bisa dimainkan tanpa harus bergantung pada plug-in tambahan. (2) Tipe input elemen yang baru, HTML5 mempunyai tipe input element baru yang penting, beberapa di antaranya adalah Tel, url, email, color, datetime. (3) Canvas, HTML5 mendukung Canvas, yang merupakan area berbentuk kotak dimana kita bisa melakukan pixel-level operation seperti menggambar garis, lingkaran atau menggambar lukisan. (4) Custom Data Attributes, HTML5 memungkinkan data tanpa mempengaruhi user interface dari halaman web itu sendiri. (5) Editable Contents, HTML5 memungkinkan end-user untuk meng-edit isi dari HTML. Fitur ini biasa digunakan oleh developer untuk membuat halaman web yang memasukkan notes atau HTML editor didalam halaman[5].

  Phaser

  Phaser adalah open-source HTML5 framework dua dimensi yang diciptakan oleh Richard Davey pada 2013. Berikut adalah sebagian fitur- fitur unggulan dari Phaser [6] : (1) Animation, Phaser mendukung classic Sprite Sheets dengan fixed frame size, Texture Packer, Flash CS6/CC JSON files (baik dalam format Hash dan Array) dan Starling XML files; (2) Camera, Phaser mempunyai built-in Game World. Obyek dapat ditempatkan dimana saja didalam world dan akses ke Camera untuk melihat ke dalam world; (3) Device Scaling, Phaser mempunyai built-in Scale Manager yang memungkinkan kita untuk mengatur skala ukuran layar agar sesuai dengan semua ukuran layar. Kita dapat mengatur aspect

  ratios, minimum dan maximum scales dan full-screen support;

  (4) Groups, Group mengumpulkan Sprites menjadi satu untuk

  

pooling dan recycling yang mudah, menghindari pembuatan obyek secara

  konstan (terus menerus); (5) Input, Phaser mendukung hampir semua input

  

method , baik dari touch-screen atau mouse, bahkan bisa berganti input

method mid-game tanpa susah payah; (6) Particles, Sistem Arcade Particle

  sudah ada didalam framework ini (built-in), sehingga kita bisa membuat efek partikel dengan mudah; (7) Physics, Phaser mendukung 3 sistem

  

physics yaitu Arcade Physics, Ninja Physics dan p2.js; (8) Plugin system,

  Phaser mempunyai smart Plugin system, dimana Phaser hanya menangani fungsi-fungsi inti dari game, sedangkan plugin bisa menangani fungsi tambahan bila diperlukan.

  JavaScript JavaScript adalah scripting language dirancang secara khusus untuk menambah interaksi pada halaman Web dan membuat aplikasi Web.

  Pertama kali di implementasikan oleh Netscape Communications Corp. pada browser Netscape Navigator 2 beta di tahun 1995.

  JavaScript adalah object-oriented language dengan prototypal

inheritance. Bahasa ini mendukung beberapa objek built-in, dan

programmers dapat membuat atau menghapus objek yang mereka buat.

Prototypal inheritance membuat JavaScript berbeda dari bahasa

  pemrograman populer lain, karena JavaScript tidak mempunyai class seperti C++ atau Java [7].

  Dalam bab ini, metode yang digunakan adalah Metode Tahapan pada metode pengembangan multimedia terbagi menjadi beberapa tahap, yaitu: (1) Concept; (2) Design; (3) Material Collecting; (4)

  Assembly; (5) Testing; (6) Distribution. Rinciannya sebagai berikut:

  Tabel.1 Tahap-Tahap Pengembangan Multimedia No Tahap Deskripsi

  1. Concept Tahap concept adalah tahap menentukan kebutuhan system antara lain identifikasi pengguna system atau biasa disebut dengan identifikasi audience. Selain itu, pada tahap ini juga ditentukan jenis dan tujuan dari permainan yang dikembangkan serta kebutuhan perangkat lunak dan perangkat keras untuk

pengembangan system.

  2. Design Design (perancangan) dilakukan penentuan spesifikasi system, antara lain mengenai arsitektur permainan atau jalannya permainan dan tampilan permainan.

  3. Material Material collecting merupakan tahap dimana dilakukan pengumpulan bahan yang sesuai dengan Collecting kebutuhan. Tahap ini dapat dikerjakan bersamaan

dengan tahap assembly.

  4. Assembly Tahap assembly adalah tahap dimana semua objek atau bahan multimedia dibuat. Pembuatan bahan multimedia didasarkan pada tahap design dan tahap material collecting.

  

5. Testing Tahap testing dilakukan setelah tahap assembly

selesai. Tahap ini dilakukan dengan cara mencoba permainan oleh pengembang. Hal tersebut dilakukan untuk mengetahui ada tidaknya kesalahan dalam permainan. Selain itu dilakukan pula pengujian oelh beberapa pengguna untuk mengetahui kesesuaian permainan dengan kebutuhan pengguna.

  Dalam tahap Concept, dilakukan penentuan kebutuhan untuk mengembangkan permainan yaitu : (1) Pengguna permainan adalah semua online maupun offline (diperlukan file dan peramban yang mendukung); (3) Permainan harus sederhana namun mempunyai tingkat kesulitan tinggi, sehingga pengguna harus berusaha untuk meraih nilai tertinggi. Permainan ini akan dikembangkan menggunakan Adobe Illustrator CC untuk merancang karakter dan halangan. Di samping itu, digunakan pula Brackets untuk pengintegrasian objek dan koding. System operasi yang digunakan yang digunakan adalah Windows 8. Pada tahap

  Design dilakukan perancangan arsitektur dan gameplay yang akan dikembangkan.

  Arsitektur permainan dapat dilihat pada Gambar 1.

  Gambar 1 Flowchart Permainan Berdasarkan Gambar 1 dapat dilihat bahwa saat permainan dijalankan, pengguna akan langsung disajikan menu utama yaitu petunjuk-petunjuk yang harus dilakukan, pengguna mengetuk (tap) layar atau klik pada tetikus untuk memulai permainan. Saat pengguna memainkan permainan dan permainan selesai, pengguna akan disajikan menu utama yang menampilkan nilai tertinggi dan bilamana pengguna ingin bermain kembali, pengguna mengetuk (tap) layar atau klik pada tetikus dan permainan akan dimulai kembali. Sedangkan untuk gameplay dapat dilihat pada Gambar 2

  Gambar 2 Flowchart gameplay

  Berdasarkan Gambar 2 Dapat dilihat bahwa saat permainan dijalankan pemain bergerak menurut kontrol yang ada, kemudian pada saat pemain menabrak koin permainan berlanjut sampai pemain menabrak halangan menggunakan fitur dari Phaser yaitu Physics yang dimana pemain akan melihat efek meledak menggunakan fitur dari Phaser yaitu emmiter dan kemudian permainan akan berakhir.

  Sedangkan control atau kendali dalam permainan menggunakan tetikus jika pengguna menggunakan computer desktop, jika pengguna menggunakan touch-based device maka kendali menggunakan tap atau ketuk pada layar.

  Permainan hanya terbagi menjadi 2 jendela yaitu jendela utama dan jendela permainan. Jendela utama adalah awal dimulainya permainan. Tidak ketukan atau klik pada tetikus sehingga tombol tidak diperlukan. Jendela kedua adalah jendela permainan, dimana pengguna mulai bermain. Pada jendela ini, karakter pengguna harus menghindari halangan agar permainan terus berlanjut sampai karakter menabrak halangan yang ada. Jendela permainan dapat dilihat pada Gambar 3.

  Gambar 3 Rancangan Antar Muka Jendela Permainan

  Berdasarkan Gambar 3.4, terdapat tiga jenis obyek dalam jendela permainan. Obyek 1 merupakan karakter pengguna, obyek 2 merupakan halangan yang harus dihindari obyek 1 supaya permainan terus berjalan dan obyek 3 merupakan entitas koin dimana karakter pengguna harus mengumpulkan obyek 3 supaya meraih nilai tertinggi. Obyek 2 mempunyai ukuran dan pergerakan acak dan obyek 1 harus menghindari obyek 2 dan mengumpulkan obyek 3 supaya meraih nilai tertinggi.

  Pada tahap material collecting, seluruh bahan yang dibutuhkan akan dikumpulkan. Pengumpulan bahan ini dimaksudkan untuk mencari bentuk yang tepat untuk entitas-entitas yang ada dalam permainan dan bahan-bahan yang diperlukan untuk permainan ini. Adapun bahan-bahan yang diperlukan adalah: (1) Teks, jenis huruf yang digunakan adalah Arial dengan ukuran 15px untuk teks nilai dan 30px untuk teks menu utama; (2) Gambar, semua gambar yang digunakan dalam permainan mempunyai tipe png, berikut penjelasannya :

  (a) Karakter

  Gambar 4 Gambar spritesheet karakter pemain

  Gambar 4 merupakan spritesheet karakter dalam permainan dimana Phaser mampu menganimasikan karakter seperti terbang atau berjalan dengan menggunakan fitur animate. (b) Halangan

  Gambar 5 Gambar entitas halangan dalam permainan

  Gambar 5 merupakan gambar entitas halangan yang harus dihindari pemain dalam permainan, pergerakan dan scaling untuk menentukan besar kecilnya halangan mampu ditangani Phaser tanpa ketergantungan plugin eksternal.

  (c) Koin

  Gambar 6 Gambar entitas koin

  Gambar 6 merupakan gambar entitas koin yang harus dikumpulkan oleh pemain sebanyak-banyaknya supaya memperoleh nilai tertinggi. (d) Latar Belakang

  Gambar 7 Gambar latar belakang permainan

  Gambar 7 merupakan latar belakang permainan yang mempunyai ukuran 40x40 piksel dan Phaser menangani seberapa banyaknya gambar latar belakang sesuai dengan ukuran layar.

  (e) Efek Partikel

  Gambar 8 Gambar efek partikel

  Gambar 8 merupakan gambar efek partikel dimana menggunakan fitur dari Phaser yaitu animate, ketika karakter pemain menabrak halangan, pemain akan meledak. (3) Audio, semua audio yang digunakan dalam permainan mempunyai tipe OGG, berikut penjelasannya : (a) collect.ogg : suara ini terdengar saat karakter menabrak koin; (b) explosion.ogg : suara ini terdengar saat karakter menabrak halangan. Pada tahap assembly, seluruh obyek dan bahan multimedia mulai dibuat. Pembuatan tersebut mengacu pada rancangan dan pengumpulan tahap ini adalah membuat seluruh obyek gambar yang dibutuhkan dalam permainan. Obyek-obyek tersebut adalah latar belakang permainan, gambar entitas karakter dari pengguna, gambar entitas halangan, gambar entitas koin dan gambar entitas partikel dari karakter. Untuk pembuatan obyek gambar, digunakan Adobe Illustrator CC.

  Selanjutnya, seluruh objek gambar akan disatukan dalam permainan yang dibangun dan ditambahkan interaktivitas. Contoh penambahan interaktivitas antara lain obyek yang bergerak sesuai posisi ketukan pada layar atau klik pada tetikus. Penyatuan seluruh obyek dalam permainan dan penambahan interaktivitas tersebut dilakukan dengan menggunakan Brackets.

  Langkah terakhir pada tahap ini adalah penambahan audio. Audio yang ditambahkan antara lain audio pada saat karakter pengguna mengumpulkan koin dan pada saat karakter pengguna menabrak halangan. Audio yang digunakan memiliki format ogg.

  Pada tahap testing, akan dilakukan pengujian yang dibagi menjadi dua bagian yaitu pengujian oleh pengembang permainan (alpha testing) dan pengujian oleh pengguna aplikasi (beta testing). Alpha testing dilakukan untuk mengetahui apakah terdapat kesalahan pada aplikasi sedangkan beta testing dilakukan untuk mengetahui feedback atau saran dari pengguna.

  Pada tahap distribution, Permainan yang telah selesai dikembangkan akan didistribusikan dalam format online dan offline, dimana pengguna yang ingin bermain secara offline harus mempunyai file-file yang dibutuhkan dan peramban yang mendukung HTML5.

  Alasan peneliti memilih genre game yang mirip Flappy Bird ini adalah kepopuleran dari Flappy Bird yang mempunyai rating 4 bintang mencapai jumlah 240.000[9] dan sempat menjadi nomer satu pada kategori free games di bulan Februari pada Google Play Store dan App Store[10]. Berikut adalah statistik jumlah pengunduhan pada App Store pada bulan Oktober 2013 sampai Desember 2013. [11]

  Gambar 9 Grafik pengunduhan Flappy Bird pada App Store

  Berikut adalah kelebihan-kelebihan yang menurut penulis merupakan keunggulan dari framework Phaser.

  Gambar 10 Gameplay dari permainan pada platform PC

  Gambar 11 Gameplay dari permainan pada platform Android

  Pada Gambar 10 dan 11 dapat dilihat bahwa hanya terdapat satu jendela tanpa adanya tombol apapun karena tombol tidak diperlukan dalam permainan ini dan kontrol permainan dapat dilakukan dengan klik pada tetikus dan atau ketukan pada layar

  touchscreen .

  

Gambar 12 Gambar Halangan

  Pada gambar 12 Halangan mempunyai ukuran, jumlah dan nantinya mempunyai pergerakan yang random atau acak. Kode program dapat dilihat pada Kode Program 1 Kode Program 1 Kode Program Asteroid Generator 1 var numAsteroids = this.game.rnd.integerInRange(150, 200) 2 asteriod.scale.setTo(this.game.rnd.integerInRange(10, 40)/12);

  Kode Program diatas merupakan fitur unggulan dari Phaser dimana jumlah halangan dan ukuran halangan dapat diatur secara acak melalui dua baris kode

  Gambar 13 Gambar saat pemain menabrak halangan

  Pada gambar 13 merupakan gambar saat dimana pemain menabrak halangan dan permainan berakhir. Kode program dapat dilihat pada Kode Program 2

  Kode Program 2 Collision dan Efek Ledakan 1 this.game.physics.arcade.collide(this.player,

this.asteroids, this.hitAsteroid, null,

this); 2 var emitter = this.game.add.emitter(this.player.x, this.player.y, 100);

  Pada baris pertama merupakan fitur Phaser yaitu Physics, dimana dengan satu baris kode, kita dapat mengaktikan physics dimana ketika karakter menabrak halangan maka akan terjadi collide. Pada baris ke-2 merupakan fitur Phaser yaitu Animate, dimana emitter mampu menyimulasikan ledakan dengan menggunakan elemen- elemen individu dalam permainan ini berbentuk kotak berwarna biru.

  Pembahasan selanjutnya adalah perbandingan dan kelebihan framework Phaser dengan dua HTML5 framework yaitu craftyJS dan perbandingan. [12]

  Berikut adalah perbandingan masing-masing framework secara fisik atau besarnya ukuran game Breakout yang sudah siap dimainkan.

  Tabel 2 Tabel Perbandingan

  Framework Perbandingan

  Phaser melonJS craftyJS Ukuran game

  1.23 MB

  1.14 MB 618 KB Banyak file 39 file 41 file 41 file

  Dapat dilihat Tabel 2 bahwa framework Phaser mempunyai ukuran terbesar dari ketiga framework karena adanya fitur tambahan dan asset tambahan pada permainan yang tidak bisa ditambahkan pada framework lain dan mempunyai file yang paling sedikit dalam sebuah game. Berikutnya adalah perbandingan tiap-tiap framework setelah dimainkan beserta fitur-fitur pada framework.

  Tabel 3 Tabel Perbandingan Performa

  Framework Perbandingan

  Phaser melonJS craftyJS Fitur

  16

  15

  8 Kestabilan Stabil Terdapat Lag Terdapat Lag Performa 30 fps 20 fps 20fps

  Selanjutnya akan dibahas tentang kelebihan Phaser pada permainan Breakout dibandingkan dengan framework lain (1) Camera Support, Dalam game Breakout yang menjadi perbandingan, pada Phaser saat bola menyentuh obyek yang harus dihancurkan maka layar permainan, dalam hal ini peramban akan bergoyang karena Phaser mempunyai fitur Camera dimana Phaser mempunyai built-in world dimana pengembang dapat memodifikasi Camera sesuai kebutuhan dalam hal ini menggetarkan kamera. Yang kedua adalah mampu mengubah metode kontrol on the fly Dalam permainan ini, pengguna dapat mengganti metode kontrol permainan melalui tuts di keyboard. Dalam hal ini pengguna dapat berganti metode dari pergerakan tetikus menjadi keyboard menggunakan tombol A untuk ke arah kiri dan D untuk ke arah kanan. Berikutnya adalah pengujian alpha menggunakan metode blackbox.

  Tabel 4 Tabel Pengujian Menu Utama

  Hasil yang Kelas Uji Skenario Kesimpulan diharapkan

  Pada saat Memulai tombol permainan tetikus dengan Valid ditekan, metode permainan tetikus dimulai

  Menu Memulai

  Utama Pada saat permainan layar dengan diketuk metode Valid ditekan, ketukan permainan pada layar dimulai sentuh

  Tabel 5 Tabel Pengujian Karakter Pemain Utama

  Hasil yang Kelas Uji Skenario Kesimpulan diharapkan

  Bergerak Karakter dengan bergerak input sesuai Valid melalui input dari tetikus tetikus

  Karakter Bergerak bergerak dengan sesuai input Valid input dari melalui

  Karakter ketukan di Pemain ketukan layar

  Karakter Karakter menghilang menabrak Valid dan halangan meledak

  Karakter Karakter menabrak berhenti Valid tepi layar bergerak permainan

  

Tabel 6 Tabel Pengujian Collectables

  Hasil yang Kelas Uji Skenario Kesimpulan diharapkan

  Collectables Karakter Valid menghilang

  Collectables menabrak Nilai collectables Valid bertambah

  

Tabel 7 Tabel Pengujian Halangan

  Hasil yang Kelas Uji Skenario Kesimpulan diharapkan

  Halangan Pergerakan bergerak secara Valid halangan acak

  Halangan Ukuran mempunyai

  Valid halangan ukuran yang acak

  Halangan tidak Halangan Halangan menghilang dan ditabrak tidak bergerak Valid oleh karena ditabrak karakter pemain

  Halangan Halangan menabrak berhenti dan Valid tepi layar tidak menghilang permainan

  

Tabel 8 Tabel Pengujian Collectables

  Hasil yang Kelas Uji Skenario Kesimpulan diharapkan

  Pemain meledak Permainan dan permainan

  Game over Valid berakhir kembali ke menu utama

  Pengujian beta dilakukan dengan pembagian angket kepada penguji independen sebanyak tiga puluh orang. Pertanyaan yang diajukan dan bobot nilai tiap-tiap jawaban dapat dilihat pada tabel 7

  Tabel 9 Tabel pertanyaan angket

  Bobot Nilai Pertanyaan

  SS S N KS TS No

  5

  4

  3

  2

  1 Anda puas terhadap interface/tampilan dari 1 permainan Impossible

  Escape Anda puas terhadap hasil audio dari

  2 permainan Impossible Escape Anda puas dengan hasil image/gambar yang

  3 ditampilkan dalam permainan Impossible Escape Anda puas terhadap kinerja keseluruhan

  4 dari permainan Impossible Escape Permainan ini terlalu

  5 mudah Permainan ini terlalu

  6 sulit Anda merasa jengkel

  7 dengan permainan ini Anda ingin memberi

  8 tahu teman tentang game ini Anda merasa game ini

  9 perlu dikembangkan lebih baik lagi Anda ingin bermain

  10 game ini kembali

  Keterangan SS : Sangat Setuju S : Setuju N : Netral KS : Kurang Setuju TS : Tidak Setuju

  Pengujian aplikasi pada tahap pada partisipan bertujuan untuk memastikan aplikasi sudah siap atau tidak digunakan oleh user. Uji coba dalam bentuk angket perlu dilakukan untuk mengetahui tingkat kepuasan atau kecocokan dari user (partisipan). Untuk menghitung skor dari tiap poin penyataan dalam angket maka digunakan rumus:

  Rumus Index % =

  Tabel 10 Hasil Uji Partisipan

  Soal SP P N KP TP Jumlah Nilai

  Perhitungan Hasil 1 10 48 33 10 0 101 67%

  2 10 36 42 10 0 98 65% 3 10 36 42 10 0 98 65% 4 10 44 36 10 0 100 66%

  5 28 21 24 4 77 51% 6 40 44 24 6 114 76% 7 40 32 36 4 112 75% 8 45 48 27 0 120 80% 9 85 40 9 134 89% 10 65 52 12 0 129 86%

  Total 315 408 282 74 4 1083 72% Tingkat kepuasan secara keseluruhan bisa didapat dari perhitungan rumus atau dari perhitungan rata-rata yaitu (67% +

  65% + 65% + 66% + 51% + 76% + 75% + 90% 89% + 86%) : 10 = 72% Selanjutnya adalah menghitung interval untuk menentukan tingkatan kepuasan dengan rumus: Interval ( I ) =

  = = 20 Berikut kriteria interpretasi skor berdasarkan interval : Angka 0% - 20% = Tidak Puas Angka 41% - 60% = Netral Angka 61% - 80% = Puas Angka 81% - 100% = Sangat Puas Berdasarkan hasil uji partisipan diatas, secara keseluruhan dapat disimpulkan partisipan puas (72%) dengan permainan Impossible

  Escape.

  5. Kesimpulan dan Saran

  Berdasarkan hasil pengembangan permainan dan pengujian yang telah dilakukan maka didapatkan kesimpulan bahwa Phaser cocok untuk semua genre permainan dalam format dua dimensi. Sedangkan tidak cocok untuk game tiga dimensi karena Phaser merupakan HTML5 framework khusus dua dimensi. Saran yang dapat diberikan untuk pengembangan penelitian kedepannya adalah kompatibilitas dengan sistem operasi iOS dan Linux.

  6. Daftar Pustaka

  [1] Alfaiz, Ainurrofiq., 2012., Pembuatan Run And Jump Game Menggunakan HTML5 Canvas. [2] Fathurrahman, 2013., Perancangan Dan Pembuatan Aplikasi Game

  Facebook “Misi Sang Kapten” Menggunakan Engine Construct 2 Berbasis HTML5. [3] IGDA, 2008., IGDA Curriculum Framework. [4] Crawford, Chris., 1982., The Art of Computer Game Design [5]

  Diakses tanggal 1 Januari 2015

  Diakses tanggal 1 Januari 2015 [8] Sutopo, Ariesto Hadi., 2003., Multimedia Interaktif dengan Flash. Jogjakarta: Graha Ilmu. iakses tanggal 1 Mei 2015 [10]

  Diakses tanggal 1 Mei 2015 [11] Diakses tanggal 1 Mei 2015

  [12] Diakses tanggal 1 November 2014