PERANCANGAN DAN PEMBUATAN GAME ANOMAN GESIT MENGGUNAKAN HTML5 DAN JAVASCRIPT NASKAH PUBLIKASI diajukan oleh Ramadhan Adhi Chandra 07.11.1608 kepada SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER AMIKOM YOGYAKARTA YOGYAKARTA 2015
NASKAH PUBLIKASI PERANCANGAN DAN PEMBUATAN GAME ANOMAN GESIT MENGGUNAKAN HTML5 DAN JAVASCRIPT disusun oleh Ramadhan Adhi Chandra 07.11.1608 Dosen Pembimbing Emha Taufiq Luthfi, ST, M.Kom NIK. 190302125 Tanggal, 12 Maret 2015 Ketua Jurusan Teknik Informatika Sudarmawan, MT NIK. 190302035
PERANCANGAN DAN PEMBUATAN GAME ANOMAN GESIT MENGGUNAKAN HTML5 DAN JAVASCRIPT Ramadhan Adhi Chandra 1), Emha Taufiq Luthfi 2), 1) Teknik Informatika STMIK AMIKOM Yogyakarta 2) Teknik Informatika STMIK AMIKOM Yogyakarta Jl Ringroad Utara, Condongcatur, Depok, Sleman, Yogyakarta Indonesia 55283 Email : ramadhan.c@students.amikom.ac.id 1), emhataufiqluthfi@amikom.ac.id 2) Abstract - Internet is a global collection of thousands of computers network and millions of personal computers that are managed independently. One of the facilities of the internet is a website. Website is an Internet service that includes multimedia resources (text, images, animation, audio, video). Along with the growth of technologies, website now also offers entertainment in the form of games. Web-based games are generally played with an extra special plugin that must be installed first on browser. Another alternative is using HTML5 and JavaScript. By using a web browser that supports HTML5, games can be played without the need for additional special plugins. HTML5 game development even more easy by using application such as Construct 2 game makers. Game Anoman Gesit that was created using HTML5 could run well on most browsers. This makes HTML5 games to be reckoned with in today's internet age.. Keywords Internet, HTML5, JavaScript, Game. 1. Pendahuluan Game merupakan salah satu industri besar di dunia saat ini. Perkembangan game begitu pesat dengan jenis yang beragam, mulai dari game yang hanya dapat dimainkan oleh satu orang saja, hingga yang dapat dimainkan oleh beberapa orang sekaligus. Game yang dapat dimainkan oleh satu orang saja saat ini mulai kurang digemari, yang cukup digemari masyarakat adalah mini game. Game yang paling digemari saat ini adalah game online, user dapat berinteraksi dengan semua pemain lain melalui koneksi internet. Teknologi game yang berkembang saat ini telah mampu menampilkan berbagai macam cerita, grafis dan efek yang menarik untuk dimainkan. Internet yang semakin bertambah penggunanya membuat semakin menjamurnya game berbasis web. 1.1 Rumusan Masalah Seiring teknologi web yang berkembang saat ini, untuk itu penulis ingin mengembangkan game berbasis web, dalam hal ini game yang menggunakan teknologi HTML5 dan Javascript karena hingga saat ini aplikasi mini game cukup digemari dikalangan masyarakat. Hal ini terlihat dari produk ponsel baik model lama maupun keluaran terbaru, minimal terdapat aplikasi game yang sudah terintegrasi didalamnya. Untuk itu penulis merumuskan masalah bagaimana membangun game berbasis web menggunakan teknologi HTML5 dan JavaScript menggunakan aplikasi Construct 2. 1.2 Tujuan Tujuan yang ingin dicapai dari disusunnya penelitian ini adalah sebagai berikut. 1. Penelitian ini disusun sebagai syarat untuk menyelesaikan program studi Strata 1 pada Sekolah Tinggi Managemen Informatika dan Komputer AMIKOM Yogyakarta. 2. Memberikan pengetahuan tentang pembuatan game berbasis web yang sederhana. 3. Mengembangkan game berbasis web dengan harapan suatu saat dapat ikut berperan aktif dalam industri game yang lebih besar. 1.3 Metodelogi Penelitian Untuk mendapatkan data yang baik dan releven dengan aplikasi yang akan dibangun maka digunakan beberapa metode pengumpulan data untuk mengumpulkan data. Beberapa metode pengumpulan data tersebut diantaranya adalah sebagai berikut. 1. Metode Interview 2. Metode Observasi 3. Metode Kepustakaan 2. Landasan Teori 2.1 Game Dalam kamus besar bahasa Indonesia game diartikan sebagai permainan. Permainan merupakan bagian dari bermain dan bermain juga bagian dari permainan dan keduanya saling berhubungan. Permainan adalah kegiatan yang kompleks yang didalamnya terdapat peraturan. Game berbasis web atau browser game adalah permainan yang dimainkan menggunakan web browser dan dapat diakses melalui internet. Game berbasis web yang diakses dan dimainkan melalui internet lebih sering dikenal dengan Game Online. Proses pengembangan game sendiri secara umum dapat dilakukan melalui beberapa tahapan sebagai berikut. [1] 1
1. High Concept 2. Perancangan Game 3. Pembuatan Game 4. Pengujian 5. Deployment 2.2 HTML5 HTML5 merupakan standar terbaru dari HTML (Hyper Text Markup Language) yang dikembangan untuk mengimbangi perkembangan internet yang sangat pesat. HTML5 memberikan kemudahan dalam mengembangkan website yang kompleks. Dengan HTML5, konten multimedia dapat dinikmati tanpa membutuhkan plugin tambahan. HTML5 juga dirancang agar dapat berjalan baik di PC, Tablet, maupun Smartphone (cross-platform). Beberapa keuntungan menggunakan HTML 5 adalah sebagai berikut. [2] Fitur masih berdasarkan pada HTML, CSS, DOM, dan JavaScript sehingga mudah jika beralih dari HTML4 ke HTML5. Mengurangi penggunaan plugin pihak ketiga (seperti Flash dan Ms. Silverlight). Penanganan masalah lebih mudah diatasi. Lebih Markup dan Scripting. Lebih independen. Pengembangan ke publik yang lebih baik. 2.3 JavaScript JavaScript sendiri merupakan bahasa scripting yang popular di internet saat ini. JavaScript termasuk dalam client-side scripting yaitu dieksekusi di sisi client atau dieksekusi oleh browser tanpa harus diterjemahkan dahulu di sisi server seperti bahasa pemrograman PHP. JavaScript juga merupakan dalang dibalik perkembangan web yang semakin pesat saat ini. JavaScript membuat halaman web semakin menarik dan lebih interaktif, bahkan mampu untuk membuat sebuah game berbasis web. Beberapa hal tentang JavaScript. [3] 1. JavaScript didesain untuk menambah interaktif suatu web. 2. JavaScript merupakan bahasa scripting. 3. Bahasa scripting merupakan bahasa pemrograman yang ringan. 4. JavaScript berisi baris kode yang dijalankan di komputer (web browser). 5. JavaScript biasanya disisipkan (embedded) dalam halaman HTML. 6. JavaScript adalah bahasa interpreter (yang berarti skrip dieksekusi tanpa proses kompilasi). 7. Setiap orang dapat menggunakan JavaScript tanpa membayar lisensi. 2.4 Perangkat Lunak yang Digunakan Construct 2 adalah sebuah perangkat lunak pembuat game HTML5 khusus untuk game 2D. Perangkat lunak ini dibuat oleh perusahaan Scirra Ltd. Dengan Construct 2 siapapun bisa membuat game tanpa harus menguasai bahasa pemrograman tertentu. Sebagian besar fungsi yang dibutuhkan dalam game sudah disediakan oleh Contruct 2. 3. Analisis Game Anoman Gesit bertipe side scrolling dengan latar belakang atau tema cerita pewayangan ketika Dewi Sinta disekap di Taman Argasoka, Alengka. Kemudian Ramawijaya mengutus Anoman pergi menuju Alengka untuk menyelamatkan Dewi Sinta. Untuk mencapai Alengka Anoman harus melewati sebuah gua keramat yang penuh dengan rintangan berbahaya. Rintangan akan dibagi menjadi 3 level berbeda yang harus dilewati pemain untuk menyelesaikan permainan. 3.1 Analisis Kekuatan dan Kelemahan Sistem Untuk mengetahui kelemahan dan kelebihan dalam perancangan game berbasis web Anoman Gesit ini maka digunakan analisis SWOT. Analisis SWOT adalah metode perencanaan strategis yang digunakan untuk mengevaluasi kekuatan, kelemahan, peluang, dan ancaman dalam suatu perancangan. Proses ini melibatkan penentuan tujuan yang spesifik dari spekulasi perancangan dan megidentifikasi faktor internal dan eksternal yang mendukung dan yang tidak dalam mencapai tujuan tersebut. 3.2 Analisis Kebutuhan Sistem Analisis kebutuhan sistem merupakan cara untuk memahami dengan baik kebutuhan dari sistem. Kebutuhan teknologi atau peralatan yang diperlukan antara lain : 1. Perangkat Keras 2. Perangkat Lunak 3. Sumber Daya Manusia 3.3 Perancangan Game Anoman Gesit Perancangan game Anoman gesit meliputi desain cerita, desain level, desain kebutuhan gambar dan audio, dan desain input/kontrol. 3.3.1 Desain Cerita Pada waktu Dewi Sinta disekap di Taman Argasoka, Alengka, Ramawijaya mengutus Anoman untuk merebutnya kembali. Anoman yang hendak menuju ke Alengka hanya memiliki satu cara untuk sampai ke sana, yaitu melewati sebuah gua keramat yang penuh dengan rintangan. 3.3.2 Desain Level Dalam perjalanannya melewati gua keramat Anoman akan menemui rintangan yang berbeda. Pembagian level akan dibagi menjadi 3 level yaitu sebagai berikut. 1. Level 1 Pada bagian pertama dari gua keramat ini secara kasat mata hanya berisi stalagtit dan stalagmit pada dinding atas dan bawah gua. Tetapi stalagtit dan stalagmit tersebut berbahaya jika tersentuh. Siapapun akan mati 2
seketita jika menyentuhnya. Level permulaan ini rintangan tidak terlalu sulit. Pemain cukup menghindari rintangan yang ada di atas dan di bawah. 2. Level 2 Pada level 2 ini rintangan akan sedikit bertambah yaitu adanya bola api. Selain menghindari stalagtit dan stalagmit pemain juga harus menghindari bola api. 3. Level 3 Pada level terakhir ini rintangan tetap sama namun yang bertambah adalah kecepatan (speed) permainan. Permainan yang bertambah cepat akan membuat pemain lebih sulit untuk menghindari rintangan. Apabila berhasil menyelesaikan level 3 ini maka permainan berakhir. 3.3.3 Perancangan Flowchart Sistem Permainan 4. Pembahasan Tahapan ini merupakan tahapan dimana hasil analisis dan peracangan dibuat atau diaplikasikan dalam bentuk nyata yaitu berupa game yang berjalan atau dimainkan melalui web browser pada desktop computer. Game yang dibuat harus sesuai dengan analisis serta perancangan yang telah dibuat sebelumnya. 4.1 Pembuatan Game Adapun tahap-tahap pembuatan game Anoman Gesit adalah sebagai berikut. 1. Penambahan dan pengaturan objek (gambar, animasi, dan lain-lain). 2. Pengaturan gameplay permainan. 3. Penambahan dan pengaturan audio. 4.2 Pengujian Game Pengujian game dilakukan untuk mengetahui apakah game sudah berjalan dengan baik, apakah sudah sesuai dengan rancangan yang diinginkan dan apakah ada bug yang perlu diperbaiki. Saat game Anoman Gesit dijalankan maka akan muncul tampilan menu utama seperti gambar di bawah ini. Gambar 1. Flowchart proses game Anoman Gesit 3.3.4 Desain / Pemilihan Gambar Pemilihan gambar yaitu meliputi pemilihan gambar untuk karakter utama, background, dan karakter musuh atau rintangan. Gambar yang digunakan adalah gambar 2d (dua dimensi) dan disesuaikan dengan desain cerita. 3.3.5 Pemilihan Audio Elemen audio digunakan untuk menambah mood atau agar game terasa lebih hidup. Terlebih jika mengkombinasikan event tertentu dengan audio yang sesuai. Audio yang akan digunakan untuk mengiringi keseluruhan game yaitu berupa musik tradisional pewayangan. 3.3.6 Perancangan Kontrol Game Rancangan kontrol game digunakan untuk merancang kontrol yang ada pada game untuk menentukan tomboltombol pada keyboard dan mouse yang akan digunakan dalam memainkan game. Gambar 2. Tampilan Menu Utama Apabila ingin memulai permainan maka pemain mengklik tombol start pada layar menu utama. Pemain akan diarahkan pada layout level 1 untuk memulai permainan dari level 1. Gambar 3. Tampilan permainan Jika level 3 berhasil dilewati maka permainan selesai dan pemain dapat kembali ke menu utama jika ingin bermain lagi. Tabel 1. Pengujian aplikasi No Pengujian Hasil 1 Run Aplikasi OK 2 Test Tombol Start pada OK Menu Utama 3 Spasi OK Mouse left click OK Touch (Layar Sentuh) OK 3
4 Level 1 OK 5 Level 2 OK 5 Level 3 OK 6 Audio OK 7 Tes Chrome versi OK 40.0.2214.93 8 Tes Mozilla Firefox OK 12.0 9 Tes Opera 12.15 OK. Tetapi pergerakan objek sedikit lambat GAGAL. Tidak mendukung HTML5 10 Tes Internet Explorer versi 8.0 11 Tes Safari versi 5.1.7 OK. Tetapi butuh plugin Quicktime untuk play audio. 4.3 Deployment Deployment merupakan tahapan terakhir pembuatan game yaitu menjadikan game menjadi paket yang siap didistribusikan atau dipublish kemudian dimainkan. Hasil export yaitu berupa file html beserta file pendukung lainnya. Hasil export ini yang dapat dimainkan baik secara offline ataupun diakses online jika dipublikasi ke server online. 5. Kesimpulan Berdasarkan hasil perancangan, pembuatan dan implementasi aplikasi dari bab-bab sebelumnya, maka diperoleh kesimpulan mengenai pembuatan game Anoman Gesit sebagai berikut. 1. Membuat game berbasis web menggunakan aplikasi Construct 2 terbilang cukup mudah bagi pemula kendati demikian masih sulit untuk menemukan referensi maupun tutorialnya dalam bentuk buku. 2. Walau hanya memiliki tampilan grafis dua dimensi (2D) tetapi memiliki gameplay yang cukup menantang untuk dimainkan sebagai sarana hiburan. 3. Karena berbasis web maka game ini dapat dimainkan secara multi-platform karena bisa dimainkan cukup dengan menggunakan web browser. agar dapat tampil dengan baik di berbagai perangkat yang memiliki ukuran layar berbeda. 3. Dalam pengembangannya diharapkan semoga game Anoman Gesit dapat dikembangkan sehingga dapat dimainkan multiplayer atau bahkan ditambahkan jumlah level dengan rintangan yang lebih berfariasi. Daftar Pustaka [1] Taru Nugroho, Andi. Cara Mudah Membuat Game di Android. Penerbit ANDI Yogyakarta, 2012. [2] Khafidli, M. Firgiawan. Trik Menguasai HTML5 CSS3 PHP Aplikatif. Lokomedia, 2011. [3] Sunyoto, Andi. AJAX Membangun Web dengan Teknologi Asynchronouse JavaScript & XML. Penerbit ANDI Yogyakarta, 2007. [4] Pemrograman Game Berbasis Web menggunakan Javascript + HTML5. Yogyakarta : Penerbit ANDI Yogyakarta. Biodata Penulis Ramadhan Adhi Chandra, memperoleh gelar Sarjana Komputer (S.Kom) Jurusan Teknik Informatika STMIK AMIKOM Yogyakarta, lulus tahun 2015. Saat ini menjadi freelance web programmer. Emha Taufiq Luthfi, memperoleh gelar Sarjana Teknik (S.T), Prodi Teknik Elektro Fakultas Teknik Universitas Gadjah Mada Yogyakarta. Memperoleh gelar Magister Komputer (M.Kom), Program Pasca Sarjana Magister Ilmu Komputer Fakultas MIPA Universitas Gadjah Mada Yogyakarta. Saat ini menjadi Dosen di STMIK AMIKOM Yogyakarta. 6. Saran Untuk lebih memahami tentang pembuatan game berbasis web diperlukan pengetahuan yang cukup baik, adapun saran yang dapat diberikan untuk pengembangan game adalah sebagai berikut. 1. Agar dapat membuat game yang baik dan efektif, sebaiknya dikerjakan dalam bentuk tim sehingga dapat berbagi tugas, ada yang mendesain gameplay, ada yang bertugas sebagai programmer, ada yang mendesain sisi grafisnya dan pembagian tugas lainnya. 2. Karena game berbasis web adalah multi-platform maka perlu diperhatikan perancangan ukuran layout 4