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 Chandra1), Emha Taufiq Luthfi2), 1)
Teknik Informatika STMIK AMIKOM Yogyakarta Teknik Informatika STMIK AMIKOM Yogyakarta Jl Ringroad Utara, Condongcatur, Depok, Sleman, Yogyakarta Indonesia 55283 2)
Email :
[email protected]),
[email protected])
ini terlihat dari produk ponsel baik model lama maupun keluaran terbaru, minimal terdapat aplikasi game yang sudah terintegrasi didalamnya.
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.
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.
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..
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
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.
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.
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.
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.
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
Proses pengembangan game sendiri secara umum dapat dilakukan melalui beberapa tahapan sebagai berikut. [1]
1
1. 2. 3. 4. 5.
High Concept Perancangan Game Pembuatan Game Pengujian Deployment
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
2.2 HTML5
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.
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).
3.1 Analisis Kekuatan dan Kelemahan Sistem
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.
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
2.3 JavaScript
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
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.
3.3 Perancangan Game Anoman Gesit Perancangan game Anoman gesit meliputi desain cerita, desain level, desain kebutuhan gambar dan audio, dan desain input/kontrol.
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.
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.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.
2
seketita jika menyentuhnya. Level permulaan ini rintangan tidak terlalu sulit. Pemain cukup menghindari rintangan yang ada di atas dan di bawah.
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.
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.
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.
3.3.3 Perancangan Flowchart Sistem Permainan
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 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 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.
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
3.3.6 Perancangan Kontrol Game
1 2
Rancangan kontrol game digunakan untuk merancang kontrol yang ada pada game untuk menentukan tomboltombol pada keyboard dan mouse yang akan digunakan dalam memainkan game.
3
3
Run Aplikasi Test Tombol Start pada Menu Utama Spasi Mouse left click Touch (Layar Sentuh)
OK OK OK OK OK
4 5 5 6 7 8 9 10 11
Level 1 Level 2 Level 3 Audio Tes Chrome versi 40.0.2214.93 Tes Mozilla Firefox 12.0 Tes Opera 12.15 Tes Internet Explorer versi 8.0 Tes Safari versi 5.1.7
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.
OK OK OK OK OK OK
Daftar Pustaka
OK. Tetapi pergerakan objek sedikit lambat GAGAL. Tidak mendukung HTML5 OK. Tetapi butuh plugin Quicktime untuk play audio.
[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.
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.
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.
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.
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
