RANCANG BANGUN GAME PETUALANGAN SI CEMING MENGGUNAKAN HTML5 TUGAS AKHIR Sebagai Persyaratan Guna Meraih Gelar Sarjana Strata 1 Teknik Informatika Universitas Muhammadiyah Malang Oleh : Prita Larasati 08560406 JURUSAN TEKNIK INFORMATIKA FAKULTAS TEKNIK UNIVERSITAS MUHAMMADIYAH MALANG 2014
KATA PENGANTAR Dengan memanjatkan puji syukur kehadirat Allah Subhanahu Wa Ta ala atas limpahan rahmat dan hidayah-nya sehingga penulis dapat menyelesaikan tugas akhir yang berjudul : RANCANG BANGUN GAME PETUALANGAN SI CEMING MENGGUNAKAN HTML5 Di dalam 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, 23 Oktober 2014 Penulis iv
DAFTAR ISI SAMPUL DEPAN HALAMAN JUDUL LEMBAR PENGESAHAN LEMBAR PERNYATAAN ABSTRAK... Error! Bookmark not ABSTRACT... Error! Bookmark not LEMBAR PERSEMBAHAN... Error! Bookmark not KATA PENGANTAR... Error! Bookmark not DAFTAR GAMBAR... viii DAFTAR TABEL... ix BAB I PENDAHULUAN... Error! Bookmark not 1.1 Latar Belakang Masalah... Error! Bookmark not 1.2 Rumusan Masalah... Error! Bookmark not 1.3 Tujuan... Error! Bookmark not 1.4 Batasan Masalah... Error! Bookmark not 1.5 Metode Penelitian... Error! Bookmark not 1.5.1 Studi Pustaka... Error! Bookmark not 1.5.2 Analisa Sistem... Error! Bookmark not 1.5.3 Perancangan Sistem... Error! Bookmark not 1.5.4 Implementasi Sistem... Error! Bookmark not 1.5.5 Pengujian Sistem... Error! Bookmark not 1.5.6 Sistematika Penulisan... Error! Bookmark not BAB II LANDASAN TEORI... Error! Bookmark not 2.1 Game... Error! Bookmark not 2.1.1 Pengertian Game... Error! Bookmark not 2.1.2 Jenis Game Menurut Genre... Error! Bookmark not 2.1.3 Jenis Game Menurut Pola Interaksi Pemain.. Error! Bookmark not 2.1.4 Game Edukasi... Error! Bookmark not v
2.1.5 Perkembangan yang Dipengaruhi oleh Game Error! Bookmark not 2.1.6 Manfaat Game... Error! Bookmark not 2.1.7 Pembuatan Game... Error! Bookmark not 2.2 Web Game dan Teknologi HTML5... Error! Bookmark not 2.2.1 Web Game... Error! Bookmark not 2.2.2 Teknologi HTML5... Error! Bookmark not 2.2.3 Fitur Baru dalam HTML5... Error! Bookmark not 2.2.4 Kemampuan Web Browser untuk Web Game dengan HTML5 Error! Bookmark not 2.2.5 Efek suara pada Web game... Error! Bookmark not 2.2.6 Construct 2... Error! Bookmark not BAB III ANALISA DAN PERANCANGAN SISTEM... Error! Bookmark not 3.1 Analisa Kebutuhan Sistem... Error! Bookmark not 3.1.1 Kebutuhan Fungsional... Error! Bookmark not 3.1.2 Kebutuhan Non Fungsional... Error! Bookmark not 3.2 Analisa Sistem Pada Game... Error! Bookmark not 3.2.1 Pengenalan Karakter... Error! Bookmark not 3.2.2 Storyboard... Error! Bookmark not 3.3 Perancangan Sistem... Error! Bookmark not 3.3.1 State chart diagram... Error! Bookmark not 3.3.2 Diagram Keadaan Karakter (Finite State Machine)... Error! Bookmark not 3.4 Desain Interface... Error! Bookmark not 3.4.1 Desain Tampilan Awal... Error! Bookmark not 3.4.2 Desain Tampilan Menu Play... Error! Bookmark not 3.4.3 Desain Tampilan Menu Help... Error! Bookmark not 3.4.4 Desain Tampilan Menu About... Error! Bookmark not 3.4.5 Desain Tampilan Game Over... Error! Bookmark not BAB IV IMPLEMENTASI DAN PENGUJIAN.. Error! Bookmark not 4.1 Implementasi... Error! Bookmark not vi
4.1.1 Lingkungan Implementasi Pengembangan... Error! Bookmark not 4.1.2 Implementasi Perangkat Lunak... Error! Bookmark not 4.2 Pengujian... Error! Bookmark not 4.2.1 Pengujian Fitur Perangkat Lunak... Error! Bookmark not 4.2.2 Pengujian Event... Error! Bookmark not 4.2.3 Pengujian Responden... Error! Bookmark not BAB V KESIMPULAN DAN SARAN... Error! Bookmark not 5.1 Kesimpulan... Error! Bookmark not 5.2 Saran... Error! Bookmark not DAFTAR PUSTAKA... 57 vii
DAFTAR GAMBAR Gambar 2. 1 Key features HTML5... Error! Bookmark not Gambar 2. 2 Skor evaluasi pendukung HTML5... Error! Bookmark not Gambar 3. 1 State chart diagram... Error! Bookmark not Gambar 3. 2 Diagram FSM level 1... Error! Bookmark not Gambar 3. 3 Diagram FSM level 2... Error! Bookmark not Gambar 3. 4 Diagram FSM level 3... Error! Bookmark not Gambar 3. 5 Desain tampilan awal game... Error! Bookmark not Gambar 3. 6 Desain tampilan menu play... Error! Bookmark not Gambar 3. 7 Desain tampilan menu help... Error! Bookmark not Gambar 3. 8 Desain tampilan menu about... Error! Bookmark not Gambar 3. 9 Desain tampilan menu game over... Error! Bookmark not Gambar 4. 1 Tampilan menu awal permainan... Error! Bookmark not Gambar 4. 2 Implementasi event sheet menu utamaerror! Bookmark not Gambar 4. 3 Tampilan menu help... Error! Bookmark not Gambar 4. 4 Tampilan menu about... Error! Bookmark not Gambar 4. 5 Tampilan menu play... Error! Bookmark not Gambar 4. 6 Implementasi event sheet level 1... Error! Bookmark not Gambar 4. 7 Tampilan level 2... Error! Bookmark not Gambar 4. 8 Implementasi event sheet level 2... Error! Bookmark not Gambar 4. 9 Tampilan level 3... Error! Bookmark not Gambar 4. 10 Implementasi event sheet level 3... Error! Bookmark not Gambar 4. 11 Implementasi tampilan next screen. Error! Bookmark not Gambar 4. 12 Implementasi event sheet tampilan next screenerror! Bookmark not Gambar 4. 13 Grafik uji coba waktu menyelesaikan level 1Error! Bookmark not viii
Gambar 4. 14 Grafik uji coba waktu menyelesaikan level 2Error! Bookmark not Gambar 4. 15 Grafik uji coba waktu menyelesaikan level 3Error! Bookmark not ix
DAFTAR TABEL Tabel 2. 1 Kemampuan browser untuk web game dengan teknologi HTML5... Error! Bookmark not Tabel 3. 1 Karakter dan objek pada game... Error! Bookmark not Tabel 3. 2 Storyboard/ user interface... Error! Bookmark not Tabel 3. 3 Karakter, latar, dan objek pada level 1.. Error! Bookmark not Tabel 3. 4 Karakter, latar, dan objek pada level 2.. Error! Bookmark not Tabel 3. 5 Karakter, latar, dan objek pada level 3.. Error! Bookmark not Tabel 4. 1 Pengujian fungsional... Error! Bookmark not Tabel 4. 2 Pengujian event pada game... Error! Bookmark not Tabel 4. 3 Hasil uji coba responden penilaian game secara keseluruhan.... Error! Bookmark not x
DAFTAR PUSTAKA [1] S.W, Haugland. 2000. The effects of computer software on preschool childern s developmental gains. Journal of Computing in Childhood Education. [2] Nilwan, A. 1995. Pemrograman Animasi dan Game Profesional. Elex Media Komputindo. [3] Henry, S. 2010. Cerdas dengan Game. Gramedia Pustaka Utama. [4] Fullerton, Tracy with Christopher Swain and Steven S.Hoffman. 2008. A Playcentric Approach to Creating Innovative Games Second Edition. London: Elsevier. [5] Handryantini, Eva S.Kom. 2009. Permainan Edukatif Berbasis Komputer untuk Siswa Sekolah Dasar. [6] Manfaat Bermaain Game, 2013, http://www.unik.ws/2013/01/10-manfaatmain-game.html, diakses pada tanggal 23 Januari 2014. [7] Makzan. 2011. HTML5 Games Development by Example Beginner s Guide. [8] www.scirra.com, 2014, diakses pada tanggal 12 Maret 2014. [9] State Chart Diagram, 2009, http://www.smartdraw.com/resources/tutorials/ uml-statechart-diagrams/, diakses pada tanggal 9 September 2014. 57