PEMBUATAN GAME “RATS EATING MONEY” DENGAN MENGGUNAKAN HTML5.

commit to user

PEMBUATAN GAME “RATS EATING MONEY” DENGAN MENGGUNAKAN HTML5

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya

Program Diploma III Teknik Informatika

Oleh:

KHOIRUL ANWAR

NIM. M3110085

PROGRAM DIPLOMA III TEKNIK INFORMATIKA

FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM

UNIVERSITAS SEBELAS MARET SURAKARTA

commit to user

ii

PEMBUATAN GAME “RATS EATING MONEY” DENGAN MENGGUNAKAN HTML5

Disusun Oleh:

KHOIRUL ANWAR

NIM. M3110085

Tugas akhir ini telah disetujui untuk dipertahankan

di hadapan dewan penguji pada tanggal 17 Juli 2013

Pembimbing Utama

Eko Harry Pratisto, S.T, M.Info.Tech

commit to user

iii

HALAMAN PENGESAHAN

PEMBUATAN GAME “RATS EATING MONEY” DENGAN MENGGUNAKAN HTML5

Disusun Oleh:

KHOIRUL ANWAR

NIM. M310085

Pembimbing Utama,

Eko Harry Pratisto, S.T, M.Info.Tech

NIDN. 0624118101

Tugas akhir ini telah diterima dan disahkan oleh Dewan Penguji Tugas Akhir

Program Diploma III Teknik Infromatika pada hari

Dewan Penguji:

1. Penguji 1 Eko Harry Pratisto, S.T, M.Info.Tech

( ) NIDN. 0624118101

2. Penguji 2 Nanang Maulana, S.Si

( ) NIDN. 9906004430

3. Penguji 3 Agus Purbayu, S.Si, M.Kom

( ) NIDN. 0629088001

Disahkan Oleh:

Dekan

Fakultas MIPA UNS

Prof. Ir. Ari Handono Ramelan, M.Sc(Hons)., Ph.D.

NIP. 19610223 198601 1 001

Ketua Program Studi

Diploma III Teknik Informatika

Drs. Y.S.Palgunadi, M.Sc.

commit to user

iv ABSTRACT

Khoirul Anwar, 2013. THE MAKING OF RATS EATING MONEY GAME USING HTML5. Diploma III of Informatics Engineering, Faculty of Mathematics and Natural Sciences. Sebelas Maret University Surakarta.

Rats Eating Money Game is a browser game. Due to the increasing complexity of the world game then this game development using HTML5 platform with expectations for education and entertainment. The purpose in writing this final project is to create games Rats Eating Money through HTML5 platform with the intention of providing a criticism of corruption in the country of Indonesia is increasingly happening. Rats Eating Money Game is a game that runs in the browser, because it runs on a web browser, the browser game can take advantage of different technologies and can still function well using HTML5 features.

Rats Eating Money Game game using HTML5 was developed using javascript MelonJS by using HTML5 as a medium. Using Adobe Photoshop and CorelDraw for making character design, object design, background, to the creation of the game interface. For the manufacture of area level using the Tiled Map Editor.

The games are fun and useful to hone agility skills in playing the game as well as to criticize corruption.

commit to user

v ABSTRAK

Khoirul Anwar, 2013. PEMBUATAN GAME RATS EATING MONEY

DENGAN MENGGUNAKAN HTML5. Diploma III Teknik Informatika. Fakultas Matematika dan Ilmu Pengetahuan Alam. Universitas Sebelas Maret Surakarta.

Game Rats Eating Money ini merupakan game browser, karena semakin

kompleksnya dunia game maka pembuatan game ini menggunakan platform HTML5 dengan harapan untuk edukasi dan hiburan. Tujuan dalam penulisan Tugas Akhir ini adalah untuk membuat game Rats Eating Money melalui platform HTML5 dengan maksud memberikan suatu kritikan terhadap korupsi yang ada di negara Indonesia yang semakin banyak terjadi. Game Rats Eating Money ini merupakan game yang berjalan di browser, karena berjalan pada web browser, maka game browser dapat mengambil keuntungan dari teknologi yang berbeda dan dapat tetap berfungsi dengan baik menggunakan fitur HTML5 .

Permainan Game Rats Eating Money menggunakan HTML5 ini

dikembangkan menggunakan javascript MelonJS dengan memanfaatkan HTML5

sebagai medianya. Menggunakan Adobe Photoshop dan CorelDraw untuk

pembuatan desain karakter, desain objek, background, hingga pembuatan

interface permainan. Untuk pembuatan area levelnya menggunakan Tiled Map

Editor.

Permainan ini bersifat hiburan berguna untuk mengasah ketangkasan dan ketrampilan dalam bermain game serta untuk mengkritik korupsi.

commit to user

vi MOTTO

”Sesungguhnya setelah kesulitan itu ada kemudahan, maka apabila kamu telah

selesai (dari suatu urusan) maka kerjakanlah dengan sungguh-sungguh (urusan)

yang lainnya, dan hanya kepada Allah-lah hendaknya kamu berharap”

QS. Alam Nasyrah, ayat 6-8

“Terus melangkah ke depan untuk meraih impian dan cita-cita serta sesekali

menegok ke belakang sekedar untuk introspeksi diri untuk melangkah ke depan

dengan lebih baik”

“Maka bertanyalah kepada orang yang mempunyai pengetahuan jika kamu tidak mengetahuinya”

QS. An-Nahl, ayat 43

commit to user

vii

HALAMAN PERSEMBAHAN

Dengan mengucap syukur kehadirat Allah SWT, Tugas Akhir ini saya

persembahkan kepada:

1.Allah SWT atas anugerah dan rahmatnya yang telah diberikan.

2.Bapak dan ibu dengan kearifannya telah mengukir jiwa dan ragaku, serta

doa yang menghantarkanku untuk mencapai cita-cita hidup.

3.Dosen-dosen yang telah memberikan perkuliahan sehingga ilmu yang

diberikan dapat digunakan dalam pembuatan Tugas Akhir ini.

4.Kakak-kakak saya yang telah membantu dengan kasih sayang dan mengisi

keceriaan.

5.Semua teman-teman TIB yang mendukung saya.

commit to user

viii KATA PENGANTAR

Assalamu’alaikum Warahmatullah Wabarakatuh.

Bismillahirrohmanirrohim, puji syukur ke hadirat Tuhan YME yang telah

melimpahkan rahmat dan barokahnya sehingga penulis dapat menyelesaikan

Tugas Akhir dengan judul. Laporan Tugas Akhir ini disusun untuk memenuhi

salah satu syarat dalam memperoleh gelar Amd. Pada Program Studi Diploma III

Teknik Informatika Universitas Sebelas Maret.

Dalam melakukan penelitian dan penyusunan laporan Tugas Akhir ini

penulis telah mendapatkan banyak dukungan dan bantuan dari berbagai pihak.

Penulis mengucapkan terima kasih yang tak terhingga kepada:

1. Prof. Ir. Ari Handono Ramelan, M.Sc(Hons).,Ph.D, selaku Pimpinan

Fakultas MIPA Universitas Sebelas Maret yang memberikan izin kepada

penulis untuk belajar.

2. Drs. YS. Palgunadi, M.Sc., selaku Ketua Program Studi Diploma III

Teknik Informatika Universitas Sebelas Maret yang memberikan izin

kepada penulis untuk belajar.

3. Eko Harry Pratisto, S.T,M.InfoTech, selaku dosen pembimbing yang telah

dengan penuh kesabaran dan ketulusan memberikan ilmu dan bimbingan

terbaik kepada penulis dengan kesabaran bersedia mendengarkan keluh

kesah penulis dalam menyusun tugas akhir.

4. Para Dosen Program Studi Diploma III Teknik Informatika Universitas

Sebelas Maret yang telah memberikan bekal ilmu kepada penulis.

5. Para Karyawan/wati Program Studi Diploma III Teknik Informatika

Universitas Sebelas Maret yang telah membantu penulis dalam proses

belajar.

6. Bapak, Ibu, serta Adik atas doa dan kasih sayang maupun perhatian serta

motivasi dan segalanya yang telah menjadikan penulis selalu semangat

commit to user

ix

7. Teman-teman sekelas, TI.B 2010, terima kasih telah menyediakan waktu

untuk berbagi ilmu ketika penulis memiliki permasalahan.

8. Teman-teman satu kost, trim’s to All, suport, doa dan dukungannya.

Penulis menyadari sepenuhnya bahwa laporan Tugas Akhir ini masih jauh

dari sempurna. Untuk itu, semua jenis saran, kritik dan masukan yang bersifat

membangun sangat penulis harapkan. Akhir kata, semoga tulisan ini dapat

memberikan manfaat dan memberikan wawasan tambahan bagi para pembaca dan

khususnya bagi penulis sendiri.

Wassalamu’alaikum Warohmatullah Wabarakatuh.

Surakarta, 14 Juni 2013

commit to user

x DAFTAR ISI

Halaman

HALAMAN JUDUL ... i

HALAMAN PERSETUJUAN ... ii

HALAMAN PENGESAHAN ... iii

ABSTRACT ... iv

ABSTRAK ... v

HALAMAN MOTTO ... vi

HALAMAN PERSEMBAHAN ... vii

KATA PENGANTAR ... viii

DAFTAR ISI ... x

DAFTAR TABEL ... xiv

DAFTAR GAMBAR ... xv

BAB I PENDAHULUAN ... 1

1.1 Latar Belakang ... 1

1.2 Perumusan Masalah... 2

1.3 Batasan Masalah ... 2

1.4 Tujuan Penelitian... 3

1.5 Manfaat Penelitian... 3

1.6 Metodologi Penelitian ... 4

1.6.1 Metode Pengumpulan Data ... 4

1.6.2 Metode Perancangan Game ... 4

1.6.3 Metode Pembuatan Game ... 4

1.6.4 Implementasi dan Uji Coba game ... 4

BAB II LANDASAN TEORI ... 5

2.1 Landasan Teori ... 5

2.1.1 Pengertian game ... 5

2.1.2 Klasifikasi game ... 5

a. Board Games(Permainan Papan) ... 5

b. Card Games(Permainan Kartu) ... 6

commit to user

xi

d. Children Games(Permainan Anak) ... 6

f. Computer Games(Permainan Komputer) ... 6

2.1.3 Pengertian Game Browser ... 7

2.1.4 Pengertian Game Engine ... 8

2.1.5 Pengertian Development Tools ... 10

2.1.6 HTML5 ... 10

2.1.7 Tiled Map Editor ... 12

2.1.8 MelonJS ... 13

2.1.9 Corel Draw X5 ... 13

2.1.10 Adobe Phothoshop CS4 ... 13

BAB III ANALISIS KEBUTUHAN DAN PERANCANGAN SISTEM ... 14

3.1 Analisis Kebutuhan ... 14

3.1.1 Kebutuhan Fungsional... 14

3.1.2 Kebutuhan Dalam Pembuatan Game ... 15

3.1.2.1 Kebutuhan Hardware Pembuatan ... 15

3.1.2.2 Kebutuhan Software Pembuatan... 15

3.1.3 Kebutuhan Spesifikasi Minimum Game ... 16

3.1.3.1 Kebutuhan Minimal Hardware Menjalankan Game ... 16

3.1.3.2 Kebutuhan Minimal Software Menjalankan Game ... 16

3.2 Tahapan Pembuatan Game ... 17

3.2.1 Penentuan Konsep Game ... 17

3.2.2 Pengumpulan Materi ... 18

3.2.3 Perancangan Game ... 18

3.2.4 Pembuatan Game... 18

a. Alur Pembuatan Grafik dan Interface Permainan ... 19

b. Perancangan Desain Karakter... 19

c. Perancangan Sprite Animasi Karakter dan Objek ... 20

d. Perancangan Objek dan Dekorasi Permainan... 20

e. Perancangan level dalam Game ... 21

1) Level 1 ... 21

commit to user

xii

3) Level 3 ... 23

4) Level 4 ... 23

3.2.5 Tahap Implementasi(Testing/debugging) ... 24

3.2.6 Hasil Game ... 24

BAB IV IMPLEMENTASI DAN UJI COBA ... 25

4.1 Detail Aplikasi Game ... 25

4.2 Pembuatan Materi Game ... 25

4.2.1 Pembuatan Karakter Utama dalam Game ... 25

4.2.2 Pembuatan Karakter Musuh ... 26

4.2.2.1 Karakter musuh KPK ... 26

4.2.2.2 Karakter musuh duri ... 26

4.2.3 Pembuatan Koin ... 27

4.3 Pembuatan Sprite Animasi Game ... 27

4.3.1 Sprite karakter Utama... 27

4.3.2 Sprite Karakter Musuh KPK dan duri ... 28

4.3.3 Sprite untuk Koin ... 28

4.4 Pembuatan Objek dan Dekorasi... 29

4.5 Pembuatan TileSet pada Tiled Map Editor ... 29

4.6 Pembuatan Level Game ... 30

4.6.1 Pembuatan Level 1 ... 30

4.6.2 Pembuatan Level 2 ... 32

4.6.3 Pembuatan Level 3 ... 32

4.6.4 Pembuatan Level 4 ... 34

4.7 Pembuatan Interface dan halaman untuk Spalsh Game ... 35

4.7.1 Pembuatan Halaman Intro ... 35

4.8 Pembuatan Script Permainan dengan Query MelonJS ... 37

4.8.1 Main.js ... 37

4.8.2 JsApp pada Main.js ... 38

4.8.3 Tikusentity.js ... 40

4.8.4 Durientity.js ... 43

commit to user

xiii

4.8.6 Koinentity.js ... 45

4.8.7 Kpkentity.js ... 46

4.9 Hasil Pengujian Aplikasi ... 47

4.9.1 Tampilan Pengujian Dalam Browser ... 47

4.9.2 Pengujian Menggunakan Metode Black Box ... 51

BAB V PENUTUP ... 60

5.1 Kesimpulan ... 60

5.2 Saran ... 60

commit to user

xiv DAFTAR TABEL

Halaman

Tabel 2.1 Tabel fiturHTML5 ... 12

Tabel 3.1 Hardware PC ... 14

Tabel 3.2 Kebutuhan Hardware PC minimum ... 15

Tabel 4.1 Hasil Pengujian Interface pada Menu Awal Game ... 51

Tabel 4.2 Hasil Pengujian Interface pada Level Satu ... 52

Tabel 4.3 Hasil Pengujian Interface pada Level Dua ... 54

Tabel 4.4 Hasil Pengujian Interface pada Level Tiga ... 55

commit to user

xv DAFTAR GAMBAR

Halaman

Gambar 3.1 Gambar Tahapan Pembuatan Game ... 16

Gambar 3.2 Gambar Karakter utama seekor tikus ... 18

Gambar 3.3 Gambar Karakter musuh KPK ... 18

Gambar 3.4 Perancangan sprite animasi karakter utama ... 19

Gambar 3.5 Perancangan sprite animasi karakter musuh KPK ... 19

Gambar 3.6 Perancangan Sprite Animasi musuh berupa duri ... 19

Gambar 3.7 Perancangan objek-objek yang akan dimasukkan dalam tilesset ... 20

Gambar 3.8 Perancangan level 1 ... 21

Gambar 3.9 Perancangan level 2 ... 21

Gambar 3.10 Perancangan level 3 ... 22

Gambar 3.11 Perancangan level 4 ... 22

Gambar 4.1 Pembuatan karakter utama ... 24

Gambar 4.2 Pembuatan karakter KPK ... 25

Gambar 4.3 Pembuatan Karakter duri ... 25

Gambar 4.4 Pembuatan koin ... 26

Gambar 4.5 Pembuatan Sprite Karakter Utama ... 26

Gambar 4.6 Pembuatan Sprite Karakter KPK... 27

Gambar 4.7 Pembuatan Sprite Karakter Musuh duri ... 27

Gambar 4.8 Pembuatan Sprite Karakter duri ... 27

Gambar 4.9 Pembuatan Objek-objek ... 28

Gambar 4.10 Tileset pada Tiled Map Editor ... 28

Gambar 4.11 Pembuatan Metatiled pada level satu ... 29

Gambar 4.12 Pembuatan layer pada level satu ... 30

Gambar 4.13 Pembuatan level 1 pada Tiled Map Editor ... 30

Gambar 4.14 Pembuatan Level 2 pada Tiled Map Editor ... 31

Gambar 4.15 Pembuatan Level 3 pada Tiled map Editor ... 32

commit to user

xvi

Gambar 4.17 Pembuatan Level 4 menggunakan Tiled map Editor ... 33

Gambar 4.18 Pembuatan Level 4 pada Tiled Map Editor ... 34

Gambar 4.19 Pembuatan intro awalan dengan Corel Draw X5 ... 35

Gambar 4.20 Pembuatan intro kedua dengan Corel Draw X5 ... 35

Gambar 4.21 Tampilan game pada Google Chrome 19 ... 47

Gambar 4.22 Tampilan game pada Mozilla Firefox 12 ... 48

Gambar 4.23 Tampilan game dalam browser Opera Browser 12 ... 48