PEMBUATAN GAME “RATS EATING MONEY” DENGAN MENGGUNAKAN HTML5.

perpustakaan.uns.ac.id

digilib.uns.ac.id

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
2013

perpustakaan.uns.ac.id

digilib.uns.ac.id

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
NIDN. 0624118101

commit to user

ii

perpustakaan.uns.ac.id

digilib.uns.ac.id

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

Ketua Program Studi

Fakultas MIPA UNS

Diploma III Teknik Informatika

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

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

NIP. 19610223 198601 1 001
commit to user

iii

NIP. 19560407 198303 1 004

perpustakaan.uns.ac.id

digilib.uns.ac.id

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.
Keywords: Rats Eating Money, HTML5, Multimedia, game

commit to user

iv

perpustakaan.uns.ac.id

digilib.uns.ac.id

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.
Kata kunci : Rats Eating Money, HTML5, Multimedia, game

commit to user

v

perpustakaan.uns.ac.id

digilib.uns.ac.id

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
“Dados tiyang niku mboten sah ngengkel yen mboten leres”

commit to user

vi

perpustakaan.uns.ac.id

digilib.uns.ac.id

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.
6. Almamater.

commit to user

vii

perpustakaan.uns.ac.id

digilib.uns.ac.id

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 yang
to user
dan termotivasi untuk melakukan
terbaik.

viii

perpustakaan.uns.ac.id

digilib.uns.ac.id

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
Penulis

commit to user

ix

perpustakaan.uns.ac.id

digilib.uns.ac.id

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 ............................................... 6
c. Athletic Games(Permainan
Atletik)

x

perpustakaan.uns.ac.id

digilib.uns.ac.id

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
3.1

ANALISIS KEBUTUHAN DAN PERANCANGAN SISTEM ........ 14
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
2) Level 2 ...................................................................................
22

xi

perpustakaan.uns.ac.id

digilib.uns.ac.id

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
4.8.5 Hudentity.js ...............................................................................
44

xii

perpustakaan.uns.ac.id

digilib.uns.ac.id

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
DAFTAR PUSTAKA ........................................................................................... 61

commit to user

xiii

perpustakaan.uns.ac.id

digilib.uns.ac.id

DAFTAR TABEL

Halaman
Tabel 2.1 Tabel fitur HTML5 ................................................................................ 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
Tabel 4.5 Hasil Pengujian Interface pada Level Empat ........................................ 57

commit to user

xiv

perpustakaan.uns.ac.id

digilib.uns.ac.id

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
Gambar 4.16 Pembuatan Level 3 pada
Tiled
Map Editor ..................................... 32

xv

perpustakaan.uns.ac.id

digilib.uns.ac.id

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
Gambar 4.24 Tampilan game dalam browser Safari 5.1.7 .................................... 49

commit to user

xvi