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
iv
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
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 ... Error! Bookmark not defined.
DAFTAR GAMBAR ... viii DAFTAR TABEL ... ix BAB I PENDAHULUAN ... Error! Bookmark not defined.
1.1 Latar Belakang Masalah ... Error! Bookmark not defined.
1.2 Rumusan Masalah ... Error! Bookmark not defined.
1.3 Tujuan ... Error! Bookmark not defined.
1.4 Batasan Masalah ... Error! Bookmark not defined.
1.5 Metode Penelitian ... Error! Bookmark not defined.
1.5.1 Studi Pustaka ... Error! Bookmark not defined.
1.5.2 Analisa Sistem ... Error! Bookmark not defined.
1.5.3 Perancangan Sistem ... Error! Bookmark not defined.
1.5.4 Implementasi Sistem ... Error! Bookmark not defined.
1.5.5 Pengujian Sistem ... Error! Bookmark not defined.
1.5.6 Sistematika Penulisan ... Error! Bookmark not defined.
BAB II LANDASAN TEORI ... Error! Bookmark not defined.
2.1 Game ... Error! Bookmark not defined.
2.1.1 Pengertian Game ... Error! Bookmark not defined.
2.1.2 Jenis Game Menurut Genre ... Error! Bookmark not defined.
2.1.3 Jenis Game Menurut Pola Interaksi Pemain .. Error! Bookmark not defined.
2.1.4 Game Edukasi ... Error! Bookmark not defined.
vi
2.1.5 Perkembangan yang Dipengaruhi oleh Game Error! Bookmark not defined.
2.1.6 Manfaat Game ... Error! Bookmark not defined.
2.1.7 Pembuatan Game ... Error! Bookmark not defined.
2.2 Web Game dan Teknologi HTML5 ... Error! Bookmark not defined.
2.2.1 Web Game ... Error! Bookmark not defined.
2.2.2 Teknologi HTML5 ... Error! Bookmark not defined.
2.2.3 Fitur Baru dalam HTML5 ... Error! Bookmark not defined.
2.2.4 Kemampuan Web Browser untuk Web Game dengan HTML5 Error!
Bookmark not defined.
2.2.5 Efek suara pada Web game ... Error! Bookmark not defined.
2.2.6 Construct 2 ... Error! Bookmark not defined.
BAB III ANALISA DAN PERANCANGAN SISTEM ... Error! Bookmark not defined.
3.1 Analisa Kebutuhan Sistem ... Error! Bookmark not defined.
3.1.1 Kebutuhan Fungsional ... Error! Bookmark not defined.
3.1.2 Kebutuhan Non Fungsional... Error! Bookmark not defined.
3.2 Analisa Sistem Pada Game ... Error! Bookmark not defined.
3.2.1 Pengenalan Karakter ... Error! Bookmark not defined.
3.2.2 Storyboard ... Error! Bookmark not defined.
3.3 Perancangan Sistem ... Error! Bookmark not defined.
3.3.1 State chart diagram ... Error! Bookmark not defined.
3.3.2 Diagram Keadaan Karakter (Finite State Machine)... Error!
Bookmark not defined.
3.4 Desain Interface ... Error! Bookmark not defined.
3.4.1 Desain Tampilan Awal ... Error! Bookmark not defined.
3.4.2 Desain Tampilan Menu Play ... Error! Bookmark not defined.
3.4.3 Desain Tampilan Menu Help ... Error! Bookmark not defined.
3.4.4 Desain Tampilan Menu About ... Error! Bookmark not defined.
3.4.5 Desain Tampilan Game Over ... Error! Bookmark not defined.
BAB IV IMPLEMENTASI DAN PENGUJIAN .. Error! Bookmark not defined.
4.1 Implementasi ... Error! Bookmark not defined.
vii
4.1.1 Lingkungan Implementasi Pengembangan .... Error! Bookmark not defined.
4.1.2 Implementasi Perangkat Lunak ... Error! Bookmark not defined.
4.2 Pengujian ... Error! Bookmark not defined.
4.2.1 Pengujian Fitur Perangkat Lunak ... Error! Bookmark not defined.
4.2.2 Pengujian Event ... Error! Bookmark not defined.
4.2.3 Pengujian Responden ... Error! Bookmark not defined.
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 ... 57
viii
DAFTAR GAMBAR
Gambar 2. 1 Key features HTML5 ... Error! Bookmark not defined.
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 ... Error! Bookmark not defined.
Gambar 3. 4 Diagram FSM level 3 ... Error! Bookmark not defined.
Gambar 3. 5 Desain tampilan awal game... Error! Bookmark not defined.
Gambar 3. 6 Desain tampilan menu play ... Error! Bookmark not defined.
Gambar 3. 7 Desain tampilan menu help ... Error! Bookmark not defined.
Gambar 3. 8 Desain tampilan menu about ... Error! Bookmark not defined.
Gambar 3. 9 Desain tampilan menu game over ... Error! Bookmark not defined.
Gambar 4. 1 Tampilan menu awal permainan ... Error! Bookmark not defined.
Gambar 4. 2 Implementasi event sheet menu utamaError! Bookmark not defined.
Gambar 4. 3 Tampilan menu help ... Error! Bookmark not defined.
Gambar 4. 4 Tampilan menu about... Error! Bookmark not defined.
Gambar 4. 5 Tampilan menu play ... Error! Bookmark not defined.
Gambar 4. 6 Implementasi event sheet level 1 ... Error! Bookmark not defined.
Gambar 4. 7 Tampilan level 2 ... Error! Bookmark not defined.
Gambar 4. 8 Implementasi event sheet level 2 ... Error! Bookmark not defined.
Gambar 4. 9 Tampilan level 3 ... Error! Bookmark not defined.
Gambar 4. 10 Implementasi event sheet level 3 ... Error! Bookmark not defined.
Gambar 4. 11 Implementasi tampilan next screen . Error! Bookmark not defined.
Gambar 4. 12 Implementasi event sheet tampilan next screenError! Bookmark not defined.
Gambar 4. 13 Grafik uji coba waktu menyelesaikan level 1Error! Bookmark not defined.
ix
Gambar 4. 14 Grafik uji coba waktu menyelesaikan level 2Error! Bookmark not defined.
Gambar 4. 15 Grafik uji coba waktu menyelesaikan level 3Error! Bookmark not defined.
x
DAFTAR TABEL
Tabel 2. 1 Kemampuan browser untuk web game dengan teknologi HTML5 ... Error! Bookmark not defined.
Tabel 3. 1 Karakter dan objek pada game ... Error! Bookmark not defined.
Tabel 3. 2 Storyboard/ user interface ... Error! Bookmark not defined.
Tabel 3. 3 Karakter, latar, dan objek pada level 1 .. Error! Bookmark not defined.
Tabel 3. 4 Karakter, latar, dan objek pada level 2 .. Error! Bookmark not defined.
Tabel 3. 5 Karakter, latar, dan objek pada level 3 .. Error! Bookmark not defined.
Tabel 4. 1 Pengujian fungsional ... Error! Bookmark not defined.
Tabel 4. 2 Pengujian event pada game ... Error! Bookmark not defined.
Tabel 4. 3 Hasil uji coba responden penilaian game secara keseluruhan. ... Error!
Bookmark not defined.
57
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-manfaat- main-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.
