PEMBUATAN ENDLESS RUN GAME SEJARAH ANOMAN MENGGUNAKAN HTML5 TUGAS AKHIR

Transkripsi

1 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. M PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET SURAKARTA 2013 i

2 HALAMAN PERSETUJUAN PEMBUATAN ENDLESS RUN GAME SEJARAH ANOMAN MENGGUNAKAN HTML5 Disusun Oleh: NOOR ARIEF KURNIAWAN NIM. M Tugas akhir ini telah disetujui untuk dipertahankan di hadapan dewan penguji pada tanggal 17 Juli 2013 Pembimbing Utama Rudi Hartono, S.Si. NIDN ii

3 HALAMAN PENGESAHAN PEMBUATAN ENDLESS RUN GAME SEJARAH ANOMAN MENGGUNAKAN HTML5 Disusun Oleh: NOOR ARIEF KURNIAWAN NIM. M Pembimbing Utama Rudi Hartono, S.Si. NIDN 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 Penguji 2 Agus Purnomo, S.Si. NIDN Penguji 3 EndarSuprihWihidayat,S.T.,M.Eng NIP ( ) ( ) ( ) Dekan Fakultas MIPA UNS Disahkan Oleh: Ketua Program Studi Diploma III Teknik Informatika Prof. Ir. Ari Handono Ramelan, M.Sc(Hons)., Ph.D. NIP Drs. Y.S.Palgunadi, M.Sc. NIP iii

4 ABSTRACT Noor Arief Kurniawan, 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 iv

5 ABSTRAK Noor Arief Kurniawan, 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 v

6 MOTTO Life's not about how hard you hit. It's about how hard you can get hit and keep moving forward. Rocky Balboa vi

7 HALAMAN PERSEMBAHAN Buat Ayah dan Mama vii

8 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 sebesarbesarnykepada 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 commit dalam menyelesaikan to user laporan ini. viii

9 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 ix

10 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 Latar Belakang Perumusan Masalah Batasan Masalah Tujuan dan Manfaat Metodologi Penelitian Tahap Pengumpulan Data Tahap Perancangan Game Tahap Pembuatan Game Tahap Uji Coba Tahap Penerapan dan Perbaikan Tahap Alur dari pembuatan game Sistematika Penulisan... 5 BAB II LANDASAN TEORI HTML Browser HTML JavaScript Notepad CorelDraw x

11 2.7 Photoshop Interaksi Manusia dan Komputer Teknik Pengembangan Sistem Waterfall Keunggulan Waterfall Kelemahan Waterfall BAB III ANALISISKEBUTUHAN DAN PERANCANGAN Analisis Kebutuhan Kebutuhan Pembuatan Kebutuhan Hardware untuk Pembuatan Kebutuhan Softwareuntuk Pembuatan Kebutuhan Pemakaian Kebutuhan Hardwareuntuk Menjalankan Kebutuhan Software untuk Menjalankan Perancangan Pembuatan Permainan Konsep Pengumpulan Data Perancangan Game Tahap PembuatanGame Tahap Uji Coba Penerapan dan Perbaikan Rancangan Permainan Konsep/Alur Cerita Permainan Kontrol Alur Pembuatan Grafik dan Interface Permainan Perancangan Design Karakter Tokoh Utama Musuh Scoring Alphabet Perancangan Sprite Animasi Karakter Perancangan Background Perancangan Level xi

12 3.8.1 Level 1 Menemui Rama! Level 2 Pencarian Shinta! Level 3 Lari dari Alengka! Perancangan Screenpage dan Interface Permainan Halaman Intro Perancangan Main Menu Halaman Instruksi Perancangan Uji Coba Perancangan Evaluasi BAB IV IMPLEMENTASI DAN UJI COBA Detail Aplikasi Pembuatan Materi Permainan Pembuatan Tokoh Utama Pembuatan Karakter Musuh Pembuatan Alphabetdan Power up Pembuatan Checkpoint Pembuatan Sprite Animasi Tokoh Utama Pembuatan Interface Scoring Pembuatan Background Pembuatan Level Permainan Pembuatan Level Pembuatan Level Pembuatan Level Pembuatan Interface dan ScreenPage Permainan Pembuatan Halaman Intro Pembuatan Halaman Main Menu Pembuatan Halaman Cara Bermain Pembuatan Halaman Pilih Level Pembuatan Halaman Narasi dan Ending Cerita Pembuatan Script Permainan Menggunakan JS dan HTML Gameplay / Main commit menu... to user 40 xii

13 4.8.2Background Player / Tokoh Utama Musuh Alphabet Collision / Tabrakan Narasi atau Ending Cerita Hasil Pengujian Aplikasi Hasil Kuisioner BAB V PENUTUP Kesimpulan Saran DAFTAR PUSTAKA LAMPIRAN xiii

14 DAFTAR GAMBAR Halaman Gambar Gambar 3.1 Langkah Pengembangan Game Gambar 3.2 Storyboard Gambar 3.3 Alur Perancangan Interface Game Gambar 3.4 Perancangan desain karakter tokoh utama Gambar 3.5 Perancangan desain karakter musuh Gambar 3.6 Perancangan desainscoring alphabet Gambar 3.7 Perancangan sprite animasi karakter tokoh utama Gambar 3.8 PerancanganBackground Level Gambar 3.9 PerancanganBackground Level Gambar 3.10 PerancanganBackground Level Gambar 3.11 Perancangan level Gambar 3.12 Perancangan level Gambar 3.13 Perancangan level Gambar 3.14 Perancangan Halaman intro 1 Cover game Gambar 3.15 Perancangan Halaman intro 1 Cover game Gambar 3.16 Perancangan halaman Main Menu Gambar 3.17 Perancangan Halaman Instruksi Gambar 4.1 Pembuatan tokoh utama Gambar 4.2 Pembuatan karakter musuh batu rintangan Gambar 4.3 Pembuatan karakter musuh anak panah Gambar 4.4 Pembuatan karakter musuhapi Gambar 4.5 Pembuatan karakter musuhpasukan Gambar 4.6 Pembuatan alphabet Gambar 4.7 PembuatanPower Up Gambar 4.8 Pembuatan checkpoint Gambar 4.9 Pembuatan sprite tokoh utama Gambar 4.10 PembuatanInterface scor Gambar 4.11 Background level 1 commit... to user 34 xiv

15 Gambar 4.12 Background level Gambar 4.13 Background level Gambar 4.14 Tampilan gambar level Gambar 4.15 Tampilan gambar level Gambar 4.16 Tampilan gambar level Gambar 4.17 PembuatanIntro 1: Cover Gambar 4.18 Pembuatan Intro 2: credits page Gambar 4.19 Pembuatan Main Menu Gambar 4.20 Pembuatan halaman cara bermain Gambar 4.21 Pembuatan halaman pilih level Gambar 4.22 PembuatanNarasi dan Ending Cerita Gambar 4.23 Tampilan Game pada Google Chrome Gambar 4.24 Tampilan Game pada Mozilla Firefox Gambar 4.25 Tampilan Game pada Internet Explorer Gambar 1 Hasil Kuisioner Gambar 2 Hasil Kuisioner Gambar 3 Hasil Kuisioner Gambar 4 Hasil Kuisioner Gambar 5 Hasil Kuisioner Gambar 6 Hasil Kuisioner Gambar 7 Hasil Kuisioner Gambar 8 Hasil Kuisioner xv