PEMBUATAN GAME RATS EATING MONEY DENGAN MENGGUNAKAN HTML5 TUGAS AKHIR

Transkripsi

1 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. M PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET SURAKARTA 2013

2 PEMBUATAN GAME RATS EATING MONEY DENGAN MENGGUNAKAN HTML5 Disusun Oleh: KHOIRUL ANWAR NIM. M 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 ii

3 HALAMAN PENGESAHAN PEMBUATAN GAME RATS EATING MONEY DENGAN MENGGUNAKAN HTML5 Disusun Oleh: KHOIRUL ANWAR NIM. M Pembimbing Utama, Eko Harry Pratisto, S.T, M.Info.Tech NIDN 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 Penguji 2 Nanang Maulana, S.Si NIDN Penguji 3 Agus Purbayu, S.Si, M.Kom NIDN ( ) ( ) ( ) Dekan Fakultas MIPA UNS Disahkan Oleh: Ketua Program Studi Diploma III Teknik Informatika Prof. Ir. Ari Handono Ramelan, M.Sc(Hons)., Ph.D. NIP Drs. Y.S.Palgunadi, M.Sc. NIP iii

4 ABSTRACT Khoirul Anwar, 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 iv

5 ABSTRAK Khoirul Anwar, 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 v

6 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 vi

7 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. vii

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

9 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 ix

10 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 Latar Belakang Perumusan Masalah Batasan Masalah Tujuan Penelitian Manfaat Penelitian Metodologi Penelitian Metode Pengumpulan Data Metode Perancangan Game Metode Pembuatan Game Implementasi dan Uji Coba game... 4 BAB II LANDASAN TEORI Landasan Teori Pengertian game Klasifikasi game... 5 a. Board Games(Permainan Papan)... 5 b. Card Games(Permainan Kartu)... 6 c. Athletic Games(Permainan commit to Atletik) user... 6 x

11 d. Children Games(Permainan Anak)... 6 f. Computer Games(Permainan Komputer) Pengertian Game Browser Pengertian Game Engine Pengertian Development Tools HTML Tiled Map Editor MelonJS Corel Draw X Adobe Phothoshop CS BAB III ANALISIS KEBUTUHAN DAN PERANCANGAN SISTEM Analisis Kebutuhan Kebutuhan Fungsional Kebutuhan Dalam Pembuatan Game Kebutuhan Hardware Pembuatan Kebutuhan Software Pembuatan Kebutuhan Spesifikasi Minimum Game Kebutuhan Minimal Hardware Menjalankan Game Kebutuhan Minimal Software Menjalankan Game Tahapan Pembuatan Game Penentuan Konsep Game Pengumpulan Materi Perancangan Game Pembuatan Game a. Alur Pembuatan Grafik dan Interface Permainan b. Perancangan Desain Karakter c. Perancangan Sprite Animasi Karakter dan Objek d. Perancangan Objek dan Dekorasi Permainan e. Perancangan level dalam Game ) Level ) Level xi

12 3) Level ) Level Tahap Implementasi(Testing/debugging) Hasil Game BAB IV IMPLEMENTASI DAN UJI COBA Detail Aplikasi Game Pembuatan Materi Game Pembuatan Karakter Utama dalam Game Pembuatan Karakter Musuh Karakter musuh KPK Karakter musuh duri Pembuatan Koin Pembuatan Sprite Animasi Game Sprite karakter Utama Sprite Karakter Musuh KPK dan duri Sprite untuk Koin Pembuatan Objek dan Dekorasi Pembuatan TileSet pada Tiled Map Editor Pembuatan Level Game Pembuatan Level Pembuatan Level Pembuatan Level Pembuatan Level Pembuatan Interface dan halaman untuk Spalsh Game Pembuatan Halaman Intro Pembuatan Script Permainan dengan Query MelonJS Main.js JsApp pada Main.js Tikusentity.js Durientity.js Hudentity.js xii

13 4.8.6 Koinentity.js Kpkentity.js Hasil Pengujian Aplikasi Tampilan Pengujian Dalam Browser Pengujian Menggunakan Metode Black Box BAB V PENUTUP Kesimpulan Saran DAFTAR PUSTAKA xiii

14 DAFTAR TABEL Halaman Tabel 2.1 Tabel fitur HTML Tabel 3.1 Hardware PC Tabel 3.2 Kebutuhan Hardware PC minimum Tabel 4.1 Hasil Pengujian Interface pada Menu Awal Game Tabel 4.2 Hasil Pengujian Interface pada Level Satu Tabel 4.3 Hasil Pengujian Interface pada Level Dua Tabel 4.4 Hasil Pengujian Interface pada Level Tiga Tabel 4.5 Hasil Pengujian Interface pada Level Empat xiv

15 DAFTAR GAMBAR Halaman Gambar 3.1 Gambar Tahapan Pembuatan Game Gambar 3.2 Gambar Karakter utama seekor tikus Gambar 3.3 Gambar Karakter musuh KPK Gambar 3.4 Perancangan sprite animasi karakter utama Gambar 3.5 Perancangan sprite animasi karakter musuh KPK Gambar 3.6 Perancangan Sprite Animasi musuh berupa duri Gambar 3.7 Perancangan objek-objek yang akan dimasukkan dalam tilesset Gambar 3.8 Perancangan level Gambar 3.9 Perancangan level Gambar 3.10 Perancangan level Gambar 3.11 Perancangan level Gambar 4.1 Pembuatan karakter utama Gambar 4.2 Pembuatan karakter KPK Gambar 4.3 Pembuatan Karakter duri Gambar 4.4 Pembuatan koin Gambar 4.5 Pembuatan Sprite Karakter Utama Gambar 4.6 Pembuatan Sprite Karakter KPK Gambar 4.7 Pembuatan Sprite Karakter Musuh duri Gambar 4.8 Pembuatan Sprite Karakter duri Gambar 4.9 Pembuatan Objek-objek Gambar 4.10 Tileset pada Tiled Map Editor Gambar 4.11 Pembuatan Metatiled pada level satu Gambar 4.12 Pembuatan layer pada level satu Gambar 4.13 Pembuatan level 1 pada Tiled Map Editor Gambar 4.14 Pembuatan Level 2 pada Tiled Map Editor Gambar 4.15 Pembuatan Level 3 pada Tiled map Editor Gambar 4.16 Pembuatan Level 3 pada commit Tiled to user Map Editor xv

16 Gambar 4.17 Pembuatan Level 4 menggunakan Tiled map Editor Gambar 4.18 Pembuatan Level 4 pada Tiled Map Editor Gambar 4.19 Pembuatan intro awalan dengan Corel Draw X Gambar 4.20 Pembuatan intro kedua dengan Corel Draw X Gambar 4.21 Tampilan game pada Google Chrome Gambar 4.22 Tampilan game pada Mozilla Firefox Gambar 4.23 Tampilan game dalam browser Opera Browser Gambar 4.24 Tampilan game dalam browser Safari xvi