commit to user
i
PEMBUATAN ENDLESS RUN GAME “SEJARAH ANOMAN”
MENGGUNAKAN HTML5
TUGAS AKHIR
Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya
Program Diploma III TeknikInformatika
Oleh:
NOOR ARIEF KURNIAWAN
NIM. M3110109
PROGRAM DIPLOMA III TEKNIK INFORMATIKA
FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM
UNIVERSITAS SEBELAS MARET SURAKARTA
commit to user
ii
HALAMAN PERSETUJUAN
PEMBUATAN ENDLESS RUN GAME “SEJARAH ANOMAN”
MENGGUNAKAN HTML5
Disusun Oleh:
NOOR ARIEF KURNIAWAN
NIM. M3110109
Tugas akhir ini telah disetujui untuk dipertahankan
di hadapan dewan penguji pada tanggal 17 Juli 2013
Pembimbing Utama
Rudi Hartono, S.Si.
commit to user
iii
HALAMAN PENGESAHAN
PEMBUATAN ENDLESS RUN GAME “SEJARAH ANOMAN”
MENGGUNAKAN HTML5
Tugas akhir ini telah diterima dan disahkanoleh Dewan Penguji Tugas Akhir
Program Diploma III Teknik Infromatikapada hari Rabu, tanggal17 Juli 2013
Dewan Penguji:
3. Penguji 3 EndarSuprihWihidayat,S.T.,M.Eng
( ) NIP. 198002 1420130 201
Disahkan Oleh:
Dekan
Fakultas MIPA UNS
Prof. Ir. Ari Handono Ramelan, M.Sc(Hons)., Ph.D.
NIP. 19610223 198601 1 001
Ketua Program Studi
Diploma III Teknik Informatika
Drs. Y.S.Palgunadi, M.Sc.
commit to user
iv
ABSTRACT
Noor Arief Kurniawan, 2013. THE MAKING OF ENDLESS RUN
GAME “THE HISTORY OF ANOMAN” USING HTML5. Diploma III
Informatic Engineering, Faculty of Mathematics and Natural Sciences Sebelas Maret University Surakarta.
Playing game is one of the methods that is used to get rid of boredom. Until today, there have been a number of variations of applications and games developed. One of the games that is now emerging is web-based, or people usually call it browser game. Due to the high amount of dependency of people on the internet, which demands them to interact with browser every day. However, most of the available games are developed to amuse people only. Bases on the problem, the author aims to insert the value of culture into it. The story of Anoman is considered perfect to be involved in an adventure game using HTML5.
The research method that is used in this final paper consists of several phases, which are data compiling, game designing, game developing, game testing, and applying and improving phase. The process of game development use javascript and HTML5 programming, and CorelDraw and Photoshop for creating object designs and user interface.
It can be concluded, that it has been made a game of the folklore of Anoman in endless run genre that consists of 3 different levels. Furthermore, the game can be a good messenger of the story of Indonesian culture.
commit to user
v
ABSTRAK
Noor Arief Kurniawan, 2013. PEMBUATAN ENDLESS RUN GAME
“SEJARAH ANOMAN” MENGGUNAKAN HTML5. Program Studi Diploma
III Teknik Informatika, Fakultas Matematika dan Ilmu Pengetahuan Alam, Universitas Sebelas Maret Surakarta.
Bermain game adalah salah satu cara untuk menghilangkan kebosanan dan kepenatan. Dan hingga saat ini sudah banyak pula variasi aplikasi dan game yang diproduksi oleh para developer. Salah satu game yang sedang banyak berkembang sekarang adalah game dengan basis web atau bisa disebut dengan gamebrowser karena besarnya ketergantungan masyarakat sekarang terhadap internet yang menuntut mereka untuk berinteraksi dengan browser setiap hari.Namun kebanyakan game yang beredar hanya berisi hiburan semata, oleh sebab itu penulis bermaksud untuk menyisipkan cerita budaya yang akan diangkat ke dalam game tersebut dan cerita Anoman yang penulis anggap cukup bagus untuk diangkat menjadi sebuah game petualangan menggunakan HTML5.
Metode penelitian yang di gunakan dalam laporan ini terbagi dari beberapa tahap yaitu tahap pengumpulan data, tahap perancangan game, tahap pembuatan game, tahap uji coba serta tahap penerapan dan perbaikan. Proses pembuatan game ini menggunakan bahasa pemrograman javascript dan HTML5 serta software CorelDraw dan Photoshop untuk pembuatan design objek dan user interface.
Serta dapat ditarik kesimpulan bahwa telah berhasil dibuat game cerita rakyat anomandengan genre endless run yang terbagi dalam 3 level yang berbeda. Serta pada game tersebut dapat di manfaatkan sebagai penyampaian cerita budaya Indonesia.
commit to user
vi
MOTTO
“
Life's not about how hard you hit.
It's about how
hard you can get hit and keep moving forward.
”
commit to user
vii
HALAMAN PERSEMBAHAN
commit to user
viii
KATA PENGANTAR
Assalamu’alaikum Warahmatullah Wabarakatuh.
Alhamdulillahirobbil 'Alamin, dengan memanjatkan segala puji syukur
atas kehadirat Allah SWT, yang telah melimpahkan rahmat dan karunia-Nya.
Sholawat dan Salam kepada Nabi kita Nabi Muhammad SAW dan keluarganya,
sahabat serta orang yang senantiasa berjuang di jalan-Nya. Pada kesempatan yang
diberikan kepada penulis kali ini, dapat dimanfaatkan untuk penulisan Laporan
Tugas Akhir (TA) dengan judul " Pembuatan Endless Run Game Sejarah Anoman
menggunakan HTML5 “. Dengan penuh usaha serta do'a pada akhirnya Laporan
Tugas Akhir (TA) ini dapat terselesaikan.
Dalam penyelesaian penulisan laporan ini, penulis banyak menemui
hambatan-hambatan yang menimbulkan kesulitan baru, tetapi berkat bantuan dari
berbagai pihak akhirnya kesulitan-kesulitan yang menghambat dapat teratasi. Pada
kesempatan ini penulis ingin mengucapkan terima kasih yang
sebesar-besarnykepada semua pihak yang telah banyak memberikan bantuannya, terutama
kepada.
1. Bapak Drs.YS. Palgunadi,M.Sc, selaku Ketua Program D3 ilmu
Komputer FakultasMatematika dan Ilmu Pengetahuan Alam
Universitas Sebelas Maret Surakarta.
2. Bapak Rudi Hartono, S.Si, dosen pembimbing yang telah banyak
memberikan bimbingan dan saran dalam pembuatan laporan ini.
3. Kedua orang tua saya Slamet Nugrahono dan Eni Sarweni, atas
do'a, pengorbanan, kasih sayang dan perhatian yang tulus
mendukung penyelesaian laporan tugas akhir.
4. Budi Prasetyo yang telah membantu penulis dalam membuat
design karakter.
5. Indah Kurniawati yang selalu memberikan semangat kepada
penulis dalam menyelesaikan tugas akhir ini.
6. Keluarga besar TIB 2010 yang selalu mendukung dan memberikan
commit to user
ix
7. Teman-teman dari Informatics Student of Indonesia yang selalu
memberikan semangat baru kepada penulis.
Untuk itu segala bantuan yang telah diberikan, penulis hanya dapat
menyampaikan rasa hormat dan terima kasih yang tak terhingga semoga amal
kebaikan tersebut mendapatkan balasan dari Allah SWT.
Akhirnya penulis berharap semoga laporan ini dapat memberikan manfaat
bagi semua pihak.
Surakarta, 22 Juli 2013
commit to user
HALAMAN PENGESAHAN ... iii
ABSTRACT ... iv
HALAMAN MOTTO ... vi
HALAMAN PERSEMBAHAN ... vii
KATA PENGANTAR ... viii
DAFTAR ISI ... x
DAFTAR GAMBAR ... xiv
BAB I PENDAHULUAN ... 1
1.5.5Tahap Penerapan dan Perbaikan ... 5
1.5.6Tahap Alur dari pembuatan game ... 5
commit to user
xi
2.7 Photoshop ... 11
2.8 Interaksi Manusia dan Komputer ... 11
2.9 Teknik Pengembangan Sistem Waterfall ... 13
2.9.1Keunggulan Waterfall ... 14
2.9.2Kelemahan Waterfall ... 15
BAB III ANALISISKEBUTUHAN DAN PERANCANGAN ... 16
3.1 Analisis Kebutuhan ... 16
3.1.1 Kebutuhan Pembuatan... 16
3.1.1.1 Kebutuhan Hardware untuk Pembuatan ... 16
3.1.1.2 Kebutuhan Softwareuntuk Pembuatan ... 16
3.1.2 Kebutuhan Pemakaian ... 17
3.1.2.1 Kebutuhan Hardwareuntuk Menjalankan ... 17
3.1.2.2 Kebutuhan Software untuk Menjalankan ... 18
3.2 Perancangan Pembuatan Permainan... 18
3.2.1 Konsep ... 18
3.2.2 Pengumpulan Data ... 19
3.2.3 Perancangan Game ... 19
3.2.4 Tahap PembuatanGame... 19
3.2.5 Tahap Uji Coba ... 19
3.2.6 Penerapan dan Perbaikan ... 19
3.3 Rancangan Permainan ... 20
3.3.1 Konsep/Alur Cerita Permainan ... 20
3.3.2 Kontrol ... 21
3.4 Alur Pembuatan Grafik dan Interface Permainan ... 22
3.5 Perancangan Design Karakter ... 22
3.5.1Tokoh Utama ... 22
3.5.2 Musuh ... 23
3.5.2 Scoring Alphabet ... 24
3.6 Perancangan Sprite Animasi Karakter ... 24
3.7 Perancangan Background ... 24
commit to user
xii
3.8.1 Level 1 Menemui Rama! ... 25
3.8.2 Level 2 Pencarian Shinta!... 26
3.8.3 Level 3 Lari dari Alengka! ... 26
3.9 Perancangan Screenpage dan Interface Permainan ... 31
3.9.1 Halaman Intro ... 27
3.9.2 Perancangan Main Menu ... 28
3.9.3 Halaman Instruksi ... 28
3.10 Perancangan Uji Coba ... 29
3.11 Perancangan Evaluasi ... 29
BAB IV IMPLEMENTASI DAN UJI COBA ... 30
4.1 Detail Aplikasi ... 30
4.2 Pembuatan Materi Permainan ... 30
4.2.1 Pembuatan Tokoh Utama ... 30
4.2.2 Pembuatan Karakter Musuh ... 31
4.2.3 Pembuatan Alphabetdan Power up ... 32
4.2.4 Pembuatan Checkpoint ... 32
4.3 Pembuatan Sprite Animasi Tokoh Utama ... 32
4.4 Pembuatan Interface Scoring ... 33
4.5 Pembuatan Background ... 33
4.6 Pembuatan Level Permainan ... 34
4.6.1 Pembuatan Level 1 ... 35
4.6.2 Pembuatan Level 2 ... 35
4.6.3 Pembuatan Level 3 ... 36
4.7 Pembuatan Interface dan ScreenPage Permainan ... 37
4.7.1 Pembuatan Halaman Intro ... 37
4.7.2 Pembuatan Halaman Main Menu ... 38
4.7.3 Pembuatan Halaman Cara Bermain ... 39
4.7.4 Pembuatan Halaman Pilih Level ... 39
4.7.5 Pembuatan Halaman Narasi dan Ending Cerita ... 39
4.8 Pembuatan Script Permainan Menggunakan JS dan HTML5 ... 40
commit to user
xiii
4.8.2Background ... 41
4.8.3Player / Tokoh Utama ... 42
4.8.4Musuh ... 45
4.8.5Alphabet ... 47
4.8.6Collision / Tabrakan ... 48
4.8.7Narasi atau Ending Cerita ... 49
4.9 Hasil Pengujian Aplikasi ... 51
4.10 Hasil Kuisioner ... 53
BAB V PENUTUP ... 54
5.1 Kesimpulan ... 54
5.2 Saran ... 54
DAFTAR PUSTAKA ... 55
commit to user
xiv
DAFTAR GAMBAR
Halaman
Gambar 1.1 ... 5
Gambar 3.1 Langkah Pengembangan Game ... 18
Gambar 3.2 Storyboard ... 21
Gambar 3.3 Alur Perancangan Interface Game ... 22
Gambar 3.4 Perancangan desain karakter tokoh utama ... 23
Gambar 3.5 Perancangan desain karakter musuh ... 23
Gambar 3.6 Perancangan desainscoring alphabet ... 24
Gambar 3.7 Perancangan sprite animasi karakter tokoh utama ... 24
Gambar 3.8 PerancanganBackground Level 1 ... 25
Gambar 3.9 PerancanganBackground Level 2 ... 25
Gambar 3.10 PerancanganBackground Level 3 ... 25
Gambar 3.11 Perancangan level 1 ... 26
Gambar 3.12 Perancangan level 2 ... 26
Gambar 3.13 Perancangan level 3 ... 27
Gambar 3.14 Perancangan Halaman intro 1 Cover game ... 27
Gambar 3.15 Perancangan Halaman intro 1 Cover game ... 28
Gambar 3.16 Perancangan halaman Main Menu ... 28
Gambar 3.17 Perancangan Halaman Instruksi ... 29
Gambar 4.1 Pembuatan tokoh utama ... 30
Gambar 4.2 Pembuatan karakter musuh batu rintangan... 31
Gambar 4.3 Pembuatan karakter musuh anak panah ... 31
Gambar 4.4 Pembuatan karakter musuhapi ... 31
Gambar 4.5 Pembuatan karakter musuhpasukan ... 31
Gambar 4.6 Pembuatan alphabet ... 32
Gambar 4.7 PembuatanPower Up ... 32
Gambar 4.8 Pembuatan checkpoint ... 32
Gambar 4.9 Pembuatan sprite tokoh utama ... 33
Gambar 4.10 PembuatanInterface scor ... 33
commit to user
xv
Gambar 4.12 Background level 2 ... 34
Gambar 4.13 Background level 3 ... 34
Gambar 4.14 Tampilan gambar level 1 ... 35
Gambar 4.15 Tampilan gambar level 2 ... 36
Gambar 4.16 Tampilan gambar level 3 ... 36
Gambar 4.17 PembuatanIntro 1: Cover ... 37
Gambar 4.18 Pembuatan Intro 2: credits page ... 38
Gambar 4.19 Pembuatan Main Menu ... 38
Gambar 4.20 Pembuatan halaman cara bermain ... 39
Gambar 4.21 Pembuatan halaman pilih level ... 39
Gambar 4.22 PembuatanNarasi dan Ending Cerita ... 40
Gambar 4.23 Tampilan Game pada Google Chrome ... 52
Gambar 4.24 Tampilan Game pada Mozilla Firefox ... 52
Gambar 4.25 Tampilan Game pada Internet Explorer ... 52
Gambar 1 Hasil Kuisioner 1 ... 56
Gambar 2 Hasil Kuisioner 2 ... 57
Gambar 3 Hasil Kuisioner 3 ... 58
Gambar 4 Hasil Kuisioner 4 ... 59
Gambar 5 Hasil Kuisioner 5 ... 60
Gambar 6 Hasil Kuisioner 6 ... 61
Gambar 7 Hasil Kuisioner 7 ... 62
