pengembangan game html5 menggunakan framework...
Post on 25-Apr-2019
228 Views
Preview:
TRANSCRIPT
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
1
2
3
4
5
6
7
8
9
Pengembangan Game HTML 5 Menggunakan Framework Phaser 1Sakti Dyan Tamariska Kusuma 2Jasson Prestiliano, S.T., M.Cs.
Fakultas Teknologi Informasi
Universitas Kristen Satya Wacana Jl. Diponegoro 52-60, Salatiga 50711, Indonesia
Email: 1)sdtk53@gmail.com, 2)jasprelao@yahoo.com
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. But a lot of people using Phaser as their framework because it’s free, open-sourced, 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
1) Mahasiswa Fakultas Teknologi Informasi Jurusan Teknik Informatika Universitas Kristen
Satya Wacana Salatiga 2) Staff Pengajar Fakultas Teknologi Informasi, Universitas Kristen Satya Wacana Salatiga
10
1. Pendahuluan Semakin banyak orang membicarakan tentang game HTML5 karena
teknologinya yang relatif baru dan mempunyai potensial yang besar. 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
11
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
12
melakukan pixel-level operation seperti menggambar garis, lingkaran atau menggambar lukisan. (4) Custom Data Attributes, HTML5 memungkinkan kita menambah atribut data yang valid, yang membantu dalam menyimpan 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].
13
3. Metode Penelitian Dalam bab ini, metode yang digunakan adalah Metode
Pengembangan Multimedia. Metode ini dikembangkan oleh Sutopo[8]. 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 Collecting
Material collecting merupakan tahap dimana dilakukan pengumpulan bahan yang sesuai dengan 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.
6. Distribution Tahap distribution merupakan tahap penentuan cara pendistribusian permainan.
14
Dalam tahap Concept, dilakukan penentuan kebutuhan untuk mengembangkan permainan yaitu : (1) Pengguna permainan adalah semua umur; (2) Permainan dapat dimainkan secara 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
15
Berdasarkan Gambar 1 dapat dilihat bahwa saat permainan dijalankan, pengguna akan langsung disajikan menu utama yaitu petunjuk-petunjuk penting untuk memainkan permainan, dan setelah pengguna mengerti apa 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.
16
Permainan hanya terbagi menjadi 2 jendela yaitu jendela utama dan jendela permainan. Jendela utama adalah awal dimulainya permainan. Tidak ada tombol pada jendela ini karena permainan dapat dimulai dengan 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
17
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.
18
Pada tahap assembly, seluruh obyek dan bahan multimedia mulai dibuat. Pembuatan tersebut mengacu pada rancangan dan pengumpulan bahan yang telah dilakukan sebelumnya. Langkah awal yang dilakukan pada 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.
4. Analisa dan Pembahasan
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]
19
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
20
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.
21
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
22
Kode Program 1 Kode Program Asteroid Generator
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
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.
1 var numAsteroids = this.game.rnd.integerInRange(150, 200)
2 asteriod.scale.setTo(this.game.rnd.integerInRange(10, 40)/12);
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);
23
Pembahasan selanjutnya adalah perbandingan dan kelebihan framework Phaser dengan dua HTML5 framework yaitu craftyJS dan melonJS dengan menggunakan game Breakout sebagai acuan perbandingan. [12]
Berikut adalah perbandingan masing-masing framework secara fisik atau besarnya ukuran game Breakout yang sudah siap dimainkan.
Tabel 2 Tabel Perbandingan
Perbandingan Framework
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
Perbandingan Framework 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.
24
Tabel 4 Tabel Pengujian Menu Utama
Kelas Uji Skenario Hasil yang diharapkan Kesimpulan
Menu Utama
Memulai permainan
dengan metode tetikus
Pada saat tombol tetikus
ditekan, permainan
dimulai
Valid
Memulai permainan
dengan metode ketukan
pada layar sentuh
Pada saat layar
diketuk ditekan,
permainan dimulai
Valid
Tabel 5 Tabel Pengujian Karakter Pemain Utama
Kelas Uji Skenario Hasil yang diharapkan Kesimpulan
Karakter Pemain
Bergerak dengan input
melalui tetikus
Karakter bergerak
sesuai input dari
tetikus
Valid
Bergerak dengan input
melalui ketukan
Karakter bergerak
sesuai input dari ketukan di
layar
Valid
Karakter menabrak halangan
Karakter menghilang
dan meledak
Valid
Karakter menabrak tepi layar permainan
Karakter berhenti bergerak
Valid
25
Tabel 6 Tabel Pengujian Collectables
Kelas Uji Skenario Hasil yang diharapkan Kesimpulan
Collectables Karakter menabrak
collectables
Collectables menghilang Valid
Nilai bertambah
Valid
Tabel 7 Tabel Pengujian Halangan
Kelas Uji Skenario Hasil yang diharapkan Kesimpulan
Halangan
Pergerakan halangan
Halangan bergerak secara
acak Valid
Ukuran halangan
Halangan mempunyai ukuran yang
acak
Valid
Halangan ditabrak
oleh karakter
Halangan tidak menghilang dan tidak bergerak karena ditabrak
pemain
Valid
Halangan menabrak tepi layar permainan
Halangan berhenti dan
tidak menghilang Valid
Tabel 8 Tabel Pengujian Collectables
Kelas Uji Skenario Hasil yang diharapkan Kesimpulan
Game over Permainan berakhir
Pemain meledak dan permainan
kembali ke menu utama
Valid
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
No Pertanyaan
Bobot Nilai SS
5
S
4
N
3
KS
2
TS
1
26
1 Anda puas terhadap interface/tampilan dari permainan Impossible Escape
2 Anda puas terhadap hasil audio dari permainan Impossible Escape
3
Anda puas dengan hasil image/gambar yang ditampilkan dalam permainan Impossible Escape
4 Anda puas terhadap kinerja keseluruhan dari permainan Impossible Escape
5 Permainan ini terlalu mudah
6 Permainan ini terlalu sulit
7 Anda merasa jengkel dengan permainan ini
8 Anda ingin memberi tahu teman tentang game ini
9 Anda merasa game ini perlu dikembangkan lebih baik lagi
10 Anda ingin bermain 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:
27
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 0 28 21 24 4 77
51%
6 40 44 24 6 0 114
76%
7 40 32 36 4 0 112
75%
8 45 48 27 0 0 120
80%
9 85 40 9 0 0 134
89%
10 65 52 12 0 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
28
Berikut kriteria interpretasi skor berdasarkan interval : Angka 0% - 20% = Tidak Puas Angka 21% - 40% = Kurang 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] http://www.developer.com/lang/top-7-features-of-html5.html.
Diakses tanggal 1 Januari 2015 [6] http://phaser.io. Diakses tanggal 1 Juni 2014 [7] http://www.javascripter.net/faq/whatisja.htm.
Diakses tanggal 1 Januari 2015 [8] Sutopo, Ariesto Hadi., 2003., Multimedia Interaktif dengan Flash.
Jogjakarta: Graha Ilmu. [9] http://venturebeat.com/2014/01/31/flappy-bird-hits-no-1-on-the-
app-stores-but-why/. Diakses tanggal 1 Mei 2015 [10] http://blog.appannie.com/app-annie-index-games-february-2014/.
Diakses tanggal 1 Mei 2015 [11] https://www.appannie.com/apps/ios/app/642099621/rank-history/.
Diakses tanggal 1 Mei 2015 [12] http://www.jsbreakouts.org/. Diakses tanggal 1 Januari 2015 http://www.gamedevacademy.org/html5-phaser-tutorial-
spacehipster-a-space-exploration-game/. Diakses tanggal 1 November 2014
top related