RANCANGAN DAN PEMBUATAN GAME PETUALANGAN SANG BIMA MENGGUNAKAN HTML5
TUGAS AKHIR
DiajukanUntukMemenuhi PersyaratanGunaMeraihGelarSarjana Strata 1 TeknikInformatikaUniversitasMuhammadiyah Malang
ZAINAL ARIFIN 08560420
JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2015
ii
KATA PENGANTAR Dengan memanjatkan puji syukur kehadirat Allah Subhanahu Wata’ala atas limpahan rahmat dan hidayah-Nya sehingga penulis dapat menyelesaikan tugas akhir yang berjudul : “RANCANGAN DAN PEMBUATAN GAME PETUALANGAN SANG BIMA MENGGUNAKAN HTML5”
Didalam tulisan ini disajikan pokok-pokok bahasan yang meliputi pendahuluan, landasan teori, perancangan sistem, implementasi, dan pengujian sistem. Penulis menyadari sepenuhnya bahwa dalam penulisan tugas akhir ini masih banyak kekurangan dan keterbatasan. Oleh karena itu penulis mengharapkan saran yang membangun agar tulisan ini bermanfaat bagi perkembangan ilmu pengetahuan ke depan.
Malang,30 July2015
Zainal Arifin
v
DAFTAR ISI
SAMPUL DEPAN HALAMAN JUDUL LEMBAR PENGESAHAN LEMBAR PERNYATAAN ABSTRAK ............................................................. Error! Bookmark not defined. ABSTRACT ........................................................... Error! Bookmark not defined. LEMBAR PERSEMBAHAN ................................ Error! Bookmark not defined. KATA PENGANTAR ............................................................................................. v DAFTAR GAMBAR ........................................................................................... viii DAFTAR TABEL...................................................................................................ix BAB I PENDAHULUAN ....................................................................................... 1 1.1
Latar Belakang ......................................................................................... 2
1.2
Rumusan Masalah ..................................................................................... 2
1.3
Tujuan........................................................................................................ 2
1.4
Batasan Masalah........................................................................................ 2
1.5
Metode Penelitian ...................................................................................... 3
a.
Studi Pustaka...................................................................................... 3
b
Analisa Sistem ................................................................................... 3
c
Merancang desain Sistem .................................................................. 3
d
Implementasi Sistem .......................................................................... 3
e
Pengujian Sistem ................................................................................ 3
1.6
Sistematika Penulisan ........................................................................ 3
BAB II LANDASAN TEORI ................................................................................. 4 2.1
Game ......................................................................................................... 4
2.1.1
Pengertian Game ................................................................................ 4
2.1.2
Jenis Game ......................................................................................... 4
2.1.3
Jenis Game Menurut Pola Interaksi Pemain ...................................... 5
2.1.4
Game Edukasi .................................................................................... 7
2.1.5
Perkembangan yang Dipengaruhi oleh Game.................................... 8
2.1.6
Manfaat Game.................................................................................... 8 vi
2.1.7 2.2
Pembuatan Game ............................................................................... 9
WebGame dan Teknologi HTML5 .......................................................... 10
2.2.1
WebGame ......................................................................................... 10
2.2.2
Teknologi HTML5 ........................... Error! Bookmark not defined.
2.2.3
Kemampuan Web Browser untuk Web Game dengan HTML5 ...... 12
2.2.4
Efek suara pada Web game .............. Error! Bookmark not defined.
2.2.5
Construct 2 ....................................... Error! Bookmark not defined.
BAB III ANALISA DAN PERANCANGAN SISTEM ....................................... 15 3.1
Analisa Kebutuhan Sistem ...................................................................... 15
3.1.1
Kebutuhan Fungsional ..................................................................... 15
3.1.2
Skenario game.................................................................................. 15
3.1.3
Pengenalan Karakter ........................................................................ 16
3.1.4
Storyboard........................................................................................ 19
3.2
Perancangan Sistem................................. Error! Bookmark not defined.
3.2.1
State chart diagram .......................... Error! Bookmark not defined.
3.2.2
Diagram Keadaan Karakter.............. Error! Bookmark not defined.
3.2.3 Desain Interface..................................... Error! Bookmark not defined.3 a
Desain Tampilan Awal .................................................................... 23
b
Desain Tampilan Menu Play ........................................................... 24
c
Desain Tampilan Menu Help ........................................................... 25
d
Desain Tampilan Menu About ......................................................... 25
e
Desain Tampilan GameOver............................................................ 26
BAB IV IMPLEMENTASI DAN PENGUJIAN .................................................. 27 4.1
Implementasi ........................................................................................... 27
4.1.1
Implementasi Pengembangan .......................................................... 27
4.1.2
Implementasi Perangkat Lunak........ Error! Bookmark not defined.
4.2 4.3
Pengujian ................................................. Error! Bookmark not defined. Pengujian Fitur Perangkat Lunak..................................................... 30
BAB V KESIMPULAN DAN SARAN ............... Error! Bookmark not defined. 5.1
Kesimpulan.............................................. Error! Bookmark not defined.
5.2
Saran ........................................................ Error! Bookmark not defined.
DAFTAR PUSTAKA .............................................................................................. x
vii
DAFTAR GAMBAR Gambar 2. 2 Skor evaluasi pendukung HTML5 .... Error! Bookmark not defined.
Gambar 3. 1 State chart diagram ........................... Error! Bookmark not defined. Gambar 3. 2 Diagram FSM level 1 ........................ Error! Bookmark not defined. Gambar 3. 3 Diagram FSM level 2 ........................................................................ 24 Gambar 3. 5 Desain tampilan awal game .............................................................. 25 Gambar 3. 6 Desain tampilan menu play ............................................................... 25 Gambar 3. 7 Desain tampilan menu help ............................................................... 26 Gambar 3. 8 Desain tampilan menu about............................................................. 26 Gambar 3. 9 Desain tampilan menu game over ..................................................... 27 Gambar 4. 1 Tampilan menu awal permainan ....................................................... 29 Gambar 4. 2 Implementasi event sheet menu utama.............................................. 30 Gambar 4. 3 Tampilan menu help.......................................................................... 30 Gambar 4. 4Implementasi event sheet menu help ................................................. 31 Gambar 4. 5 Tampilan menu about ....................................................................... 31 Gambar 4. 6Implementasi event sheet menu about ............................................... 32 Gambar 4. 7 Tampilan menu level 1 ...................................................................... 32 Gambar 4. 8 Implementasi event sheet level 1....................................................... 33 Gambar 4. 9 Tampilan level 2 ................................................................................ 34 Gambar 4.10 Implementasi event sheet level 2...................................................... 34 Gambar 4.11 Implementasi event sheet karakter bima .......................................... 35 Gambar 4.12 Implementasi event sheet karakter musuh ....................................... 36 Gambar 4. 9 Tampilan menu game over ................................................................ 37 Gambar 4. 9 Tampilan menu finis .......................................................................... 37
viii
DAFTAR TABEL Tabel 2. 1 Kemampuan browser untuk webgame dengan teknologi HTML5Error! Bookmark not defined. Tabel 3. 1 Karakter dan objek pada game.............................................................. 17 Tabel 3. 2 Storyboard/ user interface .................... Error! Bookmark not defined. Tabel 3. 3 Karakter, latar, dan objek pada level 1.................................................. 23 Tabel 3. 4 Karakter, latar, dan objek pada level 2.................................................. 24
Tabel 4. 2 Pengujian event pada game. .................................................................. 37 Tabel 4. 2Hasil uji coba responden penilaian game secara keseluruhan. .............. 39
ix
DAFTAR PUSTAKA
Anggit Dwi H.2014.Perancangan Game multiplatform menggunakan scirra construct 2dan HTML 5.Naskah Publikasi. Sekolah Tinggi Manajemen Informatika Dan Komputer Amikom Yogyakarta Alfian T.2014.Membangun game multi platfrorm "kill pirate killer" Menggunakan scirra construct 2. Naskah Publikasi. Sekolah Tinggi Manajemen Informatika Dan Komputer Amikom Yogyakarta Handryantini, E. S. 2009. Permainan Edukatif Berbasis Komputer untuk Siswa Sekolah Dasar. Skripsi Henry, S. 2010. Cerdas dengan Game. Jakarta. Gramedia Pustaka Utama. LigaGame.2013. Manfaat Bermaain Game.DipetikApril 17, http://www.unik.ws/2013/01/10-manfaat-main-game.html.
2015
dari
Makzan. 2011. HTML5 Games Development by Example Beginner’s Guide. Nailufar. 2013. Game The Bear Saving Earth Pada Platform HTML5. Fathurrahman.2013.Perancangan dan pembuatan game diponegoro adventure sebagai media pembelajaran ips menggunakan engine construct 2. Prita L.2014.Rancang bangun game petualangan si ceming menggunakan HTML Scirra.2011. Create Games Easily;Beginner’s Guide to Construct. Dipetik Maret 12, 2015 dari www.Scirra.com. Arizandrianto, “Game Edukasi Sang Pejuang Sebagai Media Pembelajaran Sejarah Proklamasi Kemerdekaan Indonesia,” Universitas Muhammadiyah Malang, 2013.
x
