pembuatan endless run game “sejarah anoman

perpustakaan.uns.ac.id digilib.uns.ac.id

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

2013


commit to user

ii

HALAMAN PERSETUJUAN


MENGGUNAKAN HTML5

Disusun Oleh:


NIM. M3110109

Tugas akhir ini telah disetujui untuk dipertahankan

di hadapan dewan penguji pada tanggal 17 Juli 2013

Pembimbing Utama

Rudi Hartono, S.Si.

NIDN. 9906008058


commit to user

iii

HALAMAN PENGESAHAN


MENGGUNAKAN HTML5

Disusun Oleh:


NIM. M3110109

Pembimbing Utama

Rudi Hartono, S.Si.

NIDN. 9906008058

Tugas akhir ini telah diterima dan disahkanoleh Dewan Penguji Tugas Akhir

Program Diploma III Teknik Infromatikapada hari Rabu, tanggal17 Juli 2013

Dewan Penguji:

1. Penguji 1 Rudi Hartono, S.Si.

( ) NIDN. 9906008058

2. Penguji 2 Agus Purnomo, S.Si.

( ) NIDN. 9906002096

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.

NIP. 19560407 198303 1 004


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.

Keywords: Browser Game, Endless run, HTML5, JavaScript, Anoman


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.

Kata kunci : Browser Game, Endless run, HTML5, JavaScript, Anoman


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

Rocky Balboa


commit to user

vii

HALAMAN PERSEMBAHAN

Buat Ayah dan Mama


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

masukan-masukan dalam menyelesaikan laporan ini.


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

Penulis


commit to user

x

DAFTAR ISI

Halaman

HALAMAN JUDUL ............................................................................................. i

HALAMAN PERSETUJUAN .............................................................................. ii

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.1 Latar Belakang ................................................................................... 1

1.2 Perumusan Masalah............................................................................ 2

1.3 Batasan Masalah ................................................................................. 2

1.4 Tujuan dan Manfaat ........................................................................... 2

1.5 Metodologi Penelitian ........................................................................ 3

1.5.1 Tahap Pengumpulan Data ........................................................ 3

1.5.2 Tahap Perancangan Game ......................................................... 3

1.5.3 Tahap Pembuatan Game............................................................ 4

1.5.4 Tahap Uji Coba ......................................................................... 4

1.5.5Tahap Penerapan dan Perbaikan ................................................ 5

1.5.6Tahap Alur dari pembuatan game .............................................. 5

1.6 Sistematika Penulisan ......................................................................... 5

BAB II LANDASAN TEORI ............................................................................ 7

2.1 HTML................................................................................................. 7

2.2 Browser .............................................................................................. 7

2.3 HTML5............................................................................................... 8

2.4 JavaScript ........................................................................................... 10

2.5 Notepad++ .......................................................................................... 10

2.6 CorelDraw .......................................................................................... 11


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

3.8 Perancangan Level .............................................................................. 25


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

4.8.1Gameplay / Main menu .............................................................. 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

LAMPIRAN .......................................................................................................... 56


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.11 Perancangan level 1 ....................................................................... 26



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

Gambar 4.11 Background level 1 ........................................................................ 34


commit to user

xv



Gambar 4.14 Tampilan gambar level 1 ............................................................... 35



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








pembuatan endless run game “sejarah anoman

Documents