PERANCANGAN DAN PEMBUATAN APLIKASI GAME FACEBOOK MISI SANG KAPTEN MENGGUNAKAN ENGINE CONSTRUCT 2 BERBASIS HTML 5 NASKAH PUBLIKASI

PERANCANGAN DAN PEMBUATAN APLIKASI GAME FACEBOOK

“MISI SANG KAPTEN” MENGGUNAKAN ENGINE CONSTRUCT 2

BERBASIS HTML 5

NASKAH PUBLIKASI

diajukan oleh

FATHURRAHMAN

11.21.0609

kepada

SEKOLAH TINGGI MANAJEMEN INFORMATIKA DAN KOMPUTER

AMIKOM YOGYAKARTA

YOGYAKARTA

2013

DESIGNING AND MAKING FACEBOOK APPLICATIONS GAMES “MISSION THE CAPTAIN” USING THE ENGINE CONSTRUCT 2 BASED HTML 5

PERANCANGAN DAN PEMBUATAN APLIKASI GAME FACEBOOK “MISI SANG KAPTEN” MENGGUNAKAN ENGINE CONSTRUCT 2 BERBASIS HTML 5

Fathurrahman Erik Hadi Saputra Jurusan Teknik Informatika STMIK AMIKOM YOGYAKARTA

ABSTRACT

Gaming technology is one of the important learning medium for the development of virtual world technology. Many emerging game developed by individuals or organizations, the presence of social media facebook game which also successfully anesthetize the game lovers ranging from children to adults. Commonly used types of games for online games on facebook is a flash game, but to date has developed software to create a game with another base that is HTML5.

Until now there is very little share information from the Indonesian game developers. Currently, many major game developers are aiming to online games because in addition to providing entertainment also capable of promising passive income as made famous game and played by many people in cyberspace.

The captain's mission is HTML 5-based adventure game that tells how a captain should be the face of the enemy that is attacking aliens to come to earth. All adventures are in the game are made from the author's imagination. Objective of the game is the main thing is as a medium of learning to keep abreast of the latest games and game technology is also intended as a medium of entertainment for game lovers in cyberspace.

1

1. PENDAHULUAN

Melihat dari perkembangan teknologi game di dunia maya khusunya, sampai saat ini menampilkan perkembangan ide dan karya baru dengan berbagai jenis. Banyak game bermunculan yang dikembangkan oleh perorangan atau organisasi, dengan adanya social media facebook game didalamnya juga berhasil membius para pecinta game mulai dari anak-anak hingga orang dewasa. Kemudian baru ini muncul game baru berbasis flash yang bernama Angry Bird, pecinta game ini beragam mulai dari anak-anak sampai dewasa. Dari kasus tersebut sampai saat ini telah dikembangkan perangkat lunak yang dapat membuat game dengan tampilan seperti flash dengan basis lain yaitu HTML5.

Tetapi sayangnya kebanyakan game online yang beredar dan terkenal saat ini adalah buatan orang luar negeri dan perusahaan berskala besar, sampai saat ini masih sangat minim share informasi dari para developer game Indonesia. Para developer game besar banyak yang membidik ke arah game online karena selain bisa memberikan hiburan juga mampu menjanjikan pasive income saat game yang dibuat terkenal dan dimainkan oleh banyak orang di dunia maya.

Dari sekian banyak jenis game online, game ini mengangkat tema game petualangan yang menceritakan bagaimana seorang kapten harus menghadapi musuh yaitu para alien yang akan datang menyerang ke bumi dan basis game ini adalah HTML5. Semua petualangan yang dalam permainan dibuat dari imajinasi penulis. Tujuan dibuatnya game ini yang utama adalah sebagai media pembelajaran untuk mengikuti perkembangan teknologi game terbaru dan game ini juga bertujuan sebagai media hiburan bagi pecinta game di dunia maya.

2. LANDASAN TEORI 2.1 Games Online

Games Online adalah jenis permainan dengan menggunakan komputer yang memanfaatkan jaringan komputer LAN atau internet sebagai media. Game Online banyak disediakan oleh perusahaan pembuat game online dan pemain dapat langsung mengakses melalui sistem yang disediakan dari perusahaan yang menyediakan permainan tersebut1.

Menurut Andrew Rollings dan Ernest Adams, permainan daring lebih tepat disebut sebagai sebuah teknologi, dibandingkan sebagai sebuah permainan, sebuah mekanisme

1

Castronova, Edward. (2006). Synthetic Worlds: The Business and Culture of Online Games. University Of Chicago Press

2

untuk menghubungkan pemain secara bersama, dibandingkan pola tertentu dalam sebuah permainan (Rolling & Adams, 2006: 770)2.

Game online bisa disebut sebagai bagian dari aktivitas sosial karena pemain bisa saling berinteraksi secara virtual dan seringkali menciptakan komunitas maya. Berdasarkan jenisnya, permainan online dibedakan menjadi 7 macam, yaitu: Massively Multiplayer Online First-person shooter games (MMOFPS), Massively Multiplayer Online Real-time strategy games (MMORTS), Massively Multiplayer Online Role-playing games (MMORPG), Cross-platform online play, Massively Multiplayer Online Browser Game, Simulation games, Massively multiplayer online games (MMOG)3.

2.2 UNSUR-UNSUR GAME ONLINE

2.2.1. GAMBAR (IMAGE)

Gambar atau grafik adalah bagian yang penting dalam pembuatan game, karena pada sebuah gambar dapat menceritakan suasana bahkan maksud kata-kata. Banyak sekali ekstensi tipe file gambar.

2.2.2. TEKS (TEXT)

Bagian game yang ini menampilkan kata-kata di layar, ini juga sangat penting untuk sebuah game. Teks masih menjadi sebuah bagian yang sangat dibutuhkan untuk menyebarkan sebuah informasi, dan kode program selalu menyertainya.

2.2.3. SUARA (AUDIO)

Sebuah bagian yang penting dalam unsur game karena audio dapat membangkitkan nyawa sebuah game. Dalam teknologi game, nada yang jernih kadang menjadi sesuatu yang dibutuhkan, maka yang perlu diperhatikan adalah kualitas sound card yang terpasang di PC atau notebook.

2.2.4. ANIMASI (ANIMATION)

Pemakaian animasi dalam teknologi game menjadi poin tambahan yang bagus untuk digunakan, animasi akan membuat perubahan antara gambar yang satu ke gambar yang berikutnya sehingga terbentuk sebuah gerakan yang utuh.

2

Rollings, Andrew; Ernest Adams. (2006). Fundamentals of Game Design. Prentice Hall.

3

3

2.3 MENGEMBANGKAN SISTEM GAME DENGAN FRAMEWORK

Framework juga dibutuhkan dalam pembuatan game untuk memantau alur jalannya produksi game, berikut ini adalah framework/rancangan game yang dibuat oleh david midgley.

2.4 JENIS GAME“MISI SANG KAPTEN”

Misi Sang Kapten adalah sebuah game online berjenis Massively Multiplayer Online Browser Game dengan basis sistem HTML 5, game ini bercerita tentang kisah seorang kapten yang berusaha menyelamatkan bumi dari serangan alien jahat yang akan menghancurkan bumi dan sang kapten harus menghadapi rintangan yang ada untuk menyelesaikan misinya.

2.4.1 HTML 5

HTML5 adalah bahasa markup yang bertujuan untuk penataan dan penyajian konten untuk World Wide Web, dan merupakan teknologi inti dari Internet yang awalnya diusulkan oleh Opera Software. Tujuan utamanya adalah meningkatkan bahasa dengan dukungan untuk teknologi multimedia terkini dengan tetap mudah dibaca oleh manusia dan secara konsisten dimengerti oleh komputer dan perangkat (web browser, parser, dll).

2.5 SISTEM PERANGKAT LUNAK YANG DIGUNAKAN

Penggunaan perangkat lunak tidak terbatas pada satu jenis perangkat lunak yang ada. Dalam penerapan pembuatan game kali ini digunakan beberapa perangkat lunak yang mampu menangani tahap-tahap yang berkaitan dengan tampilan dari game “Misi Sang Kapten” menggunakan engine Construct 2.

2.5.1 CONSTRUCT 2

Construct 2 adalah sebuah tool berbasis HTML5 untuk menciptakan sebuah permainan. Dengan tool Construct 2 memungkinkan siapa saja membuat game tanpa harus memiliki pengalaman pemrograman. Dikembangkan oleh Scirra Ltd, Hal ini ditujukan terutama untuk para non-programmer yang ingin menciptakan sebuah game secara drag and drop menggunakan editor visual dan berbasis sistem logika perilaku.

3. ANALISIS 3.1 ANALISIS GAME

Untuk membuat sebuah game dari sebuah rancangan yang simple sampai yang rumit pasti ada banyak aspek yang harus diperhitungkan, sehingga tercipta sebuah game

4

yang menarik untuk dimainkan. Pada game Misi Sang Kapten adalah penggabungan beberapa objek dan sumber daya(resources) yang kemudian diberikan sebuah logika dan animasi sehingga dapat dimainkan sesuai dengan instruksi dan konsep yang telah disiapkan sebelumnya.

Langkah-langkah dalam membangun game Misi Sang Kapten merujuk pada framework project game flowchart yang dirancang oleh david midgley.

3.1.1 MENGIDENTIFIKASI AWAL PROJECT (INITIAL PROJECT)

Untuk mengetahui kelemahan dan kelebihan pada sistem game Misi Sang Kapten, maka dibutuhkan metode analisis. Metode analisis yang digunakan pada perancangan game Misi Sang Kapten adalah metode SWOT, yaitu Strengths, Weaknesses, Opportunities, Threats.

3.1.2 DESAIN GAME, DOKUMENTASI DAN TUJUAN PROJECT (GAME DESIGN,

DOCUMENTATION & PROJECT DIRECTION)

3.1.2.1. DESAIN GAME (GAME DESIGN)

Game “Misi Sang Kapten” adalah game online berjenis massively multiplayer online browser game, yaitu permainan yang dimainkan pada peramban seperti Mozilla Firefox, Opera, Chrome atau Internet Explorer. Game “Misi Sang Kapten” dibangun menggunakan basis HTML 5 yang didukung dengan teknologi multimedia web.

3.1.2.1.1. FLOWCHART PROGRAM

Flowchart menggambarkan urutan-urutan instruksi dari suatu program comuter. Tujuan dari menganalisa sebuah sistem adalah untuk memahami kebutuhan dari sebuah sistem. Kebutuhan sistem dapat diartikan sebagai pernyataan apa yang harus dikerjakan oleh sistem.

3.1.2.1.2. ANALISIS KEBUTUHAN SISTEM

Menganalisa sebuah system memiliki tujuan untuk memahami kebutuhan dari sebuah system yang dibangun. Kebutuhan system dapat diartikan sebagai pernyataan apa yang harus dikerjakan oleh system.

3.1.2.2. DOKUMENTASI DAN TUJUAN PROJECT (DOCUMENTATION & PROJECT

DIRECTION) GAME

Dokumentasi adalah sekumpulan informasi yakni mencari data mengenai hal-hal berupa catatan, agenda dan sebagainya.

3.1.3 PENULISAN CERITA GAME (GAME STORY AND WRITING) “MISI SANG

KAPTEN”

Cerita (Story) akan memperlihatkan bagaimana alur sebuah cerita yang dibuat mampu masuk kedalam rancangan game. Sehingga cerita yang diinginkan dapat

5

tercapai. Cerita yang telah dibuat sebisa mungkin akan disambungkan kedalam animasi game yang dibuat.

3.1.4 GAMBARAN GAME (CONCEPT ART)

Didalam gambaran game (Concept Art) terdapat beberapa bagian penting untuk menunjang kelancaran pembuatan game, yaitu: Desain Karakter, Desain Map, Kontrol Karakter, dan Desain Suara (Audio).

3.1.5 MATERI PEMASARAN (MARKETING MATERIALS)

Dalam tahap ini game yang akan dibuat untuk proses kedepannya harus bisa diakses oleh para penyuka game, tergantung apakah game yang dibuat bertujuan untuk edukasi atau mencari keuntungan melalui penyewaan space iklan. Dalam hal ini game Misi Sang Kapten ditujukan untuk hal edukasi.

Game Misi Sang Kapten menggunakan salah satu media pemasaran http://www.facebook.com/developers.

4. IMPLEMENTASI DAN PEMBAHASAN

4.1 IMPLEMENTASI SISTEM

Implementasi adalah sebuah tahap dimana sebuah sistem digunakan oleh pengguna. Namun, sebelum sistem digunakan oleh pengguna, sistem harus melalui tahap pengujian terlebih dahulu, untuk menghindari kesalahan-kesalahan pada pemanfaatan sistem nantinya.

Implementasi dan pembahasan pembuatan game MIsi Sang Kapten melanjutkan langkah-langkah sesuai framework yang dirancang oleh david midgley yang sudah diterapkan pada Bab III.

4.1.1 IMPLEMENTASI KODE (CODE IMPLEMENTATION)

Sebelum implementasi kode dilakukan, yang terlebih dahulu harus dibuat adalah rancangan kerja untuk kebutuhan game keseluruhan. Secara default yang perlu dipersiapkan diantaranya adalah layout, event sheets, object types, sound dan music.

4.1.2 PENCIPTAAN GAMBAR (ART CREATION)

Tahap penciptaan gambar adalah sebuah tahapan dimana konsep gambar yang telah dirancang akan diaplikasikan kedalam game, dan pada game Misi Sang Kapten penciptaan gambar dibagi menjadi 2 langkah, yaitu penciptaan gambar untuk layout title dan layout game.

6

Layout title adalah tahapan untuk merancang intromenu, ini yang akan pertama kali muncul saat game dimainkan dan yang perlu dilakukan pertama kali untuk penciptaan gambar pada layout title adalah menyiapkan konsep gambar yang akan dipakai dan melakukan import file kedalam layout.

Gambar 4.1Tampilan Saat Layout Title Play di Browser

2. Penciptaan Gambar Pada Layout Game

Layout game adalah rancangan tentang game yang berjalan saat permainan dimana gambar, suara, teks disatukan dengan kode instruksi untuk menampilkan sebuah kondisi tertentu ke browser seperti animasi gerakan pemain.

Gambar 4.2 Tampilan Saat Layout Game Play di Browser

7

pada tahap ini suara akan disisipkan kedalam event kode. File suara yang sudah disiapkan sebelumnya diimport kedalam folder sounds dan music, kenapa ada 2 macam folder? karena akan disendirikan antara suara untuk background dan suara untuk material, pada game Misi Sang Kapten folder sounds untuk suara material dan folder music untuk suara background.

4.1.4 PENGUJIAN GAME DAN PENGUJIAN KESALAHAN (PLAY-TESING AND

BUG-TESTING)

Pengujian sistem perangkat lunak(software testing) adalah merupakan bagian dari siklus hidup pengembangan sebuah perangkat lunak(software). Proses pengujian(testing) ini sangat diperlukan karena untuk memverifikasi apakah setiap unit yang dikembangkan telah memenuhi kebutuhan sistem yang telah didefinisikan pada tahapan sebelumnya. Untuk pengujian(testing) menggunakan metode Black Box Testing.

4.1.4.1. BLACK BOX TESTING

Black Box testing merupakan tahap pengujian yang berfokus pada persyaratan fungsional perangkat lunak. Memungkinkan pengembang perangkat lunak untuk mendapatkan serangkaian kondisi input yang mempergunakan semua persyaratan fungsional program.

Berikut ini adalah table deskripsi Black Box testing :

Tabel 4.1 Black Box testing

Menu Input Output Status

Start Tekan tombol

“Space”

Tampilan utama game

Benar

Gerakan player ke atas, bawah, depan, dan belakang

Tekan tombol “arah atas, bawah, depan, dan belakang”

Tampilan player bergerak ke arah atas, bawah, depan, dan belakang

Benar

Gerakan mengeluarkan roket

Tekan tombol “Shift” Player mengeluarkan roket

Benar

8

“Space” Kembali ke intromenu Tekan tombol

“Backspace”

Kembali ke intromenu

Benar

Semua fungsi key dapat berjalan dengan lancar, dari hasil tes Black Box Testing dapat diambil kesimpulan bahwa key dan sistem berjalan dengan lancar.

4.1.5 MEMPROMOSIKAN GAME (MILESTONE BUILDS)

Dalam mempromosikan game yang telah selesai dibangun, fasilitas yang dirasa paling tepat untuk itu adalah dengan membuat fans page melalui media social networking facebook.com, dengan cara itu antusias para penikmat game dapat dilihat dari banyaknya like. Berikut ini adalah tampilan fans page game Misi Sang Kapten dan url bisa diakses di http://www.facebook.com/MIsiSangKapten.

Gambar 4.3Tampilan Fans Page Game Misi Sang Kapten

4.1.6 MENERBITKAN GAME (ONGOING PUBLISHER / OWNER MILESTONES)

Setelah konsep dituangkan kedalam penciptaan game dan dilakukan testing tidak mengalami masalah maka selanjutnya dilakukan proses eksporting project game menjadi file HTML 5, ini merupakan proses akhir dari perancangan game Misi Sang Kapten. Proses eksporting itu sendiri merupakan sebuah proses dimana mendeploy source code menjadi sebuah paket aplikasi yang kemudian akan dijalankan menggunakan perangkat keras.

Berikut ini adalah tampilan game saat dijalankan melalui url http://misikapten.androios.net/.

9

Gambar 4.4Tampilan Play Game dari Self Hosting

Setelah game bisa diakses melalui domain, selanjutnya adalah memasang game

ke apps facebook, untuk mendaftar anggota melalui link

https://developers.facebook.com/. Untuk aplikasi yang telah selesai dibuat akan mendapatkan link menuju ke appcenter. Dan game berhasil dijalankan via facebook.

Gambar 4.5Tampilan Game Misi Sang Kapten di Facebook

4.1.7 TAHAP AKHIR (FINAL GAME)

Pada tahap akhir ini akan dibahas petunjuk dan penggunaan game Misi Sang Kapten. Adapun langkah-langkahnya adalah sebagai berikut :

1. Pastikan perangkat komputer terhubung ke internet dan buka url

http://misikapten.androios.net/ atau

https://www.facebook.com/appcenter/misi_kapten.

2. Selanjutnya akan muncul tampilan Intromenu, disana akan terdapat teks instruksi key yang dipakai saat permainan dimulai.

3. Jika ditekan tombol keyboard “space” maka permainan akan dimulai. Dalam permainan ini musuh akan berdatangan dari depan. Yang perlu dilakukan oleh

10

player adalah menghindari atau menembak musuh. Saat musuh berhasil ditembak maka skor akan bertambah, tetapi apabila player terkena serangan musuh makan skor dan life akan berkurang. Apabila life player habis maka game akan dimulai lagi dari awal.

4. Untuk memulai permainan kembali bisa dengan menekan tombol “backspace” maka akan kembali masuk ke Intromenu.

5. Untuk mendapatkan hasil yang bagus setidaknya menggunakan resolusi layar 1024x768.

5. KESIMPULAN

Berdasarkan penelitian dan perancangan yang penulis kerjakan dan berdasarkan dari rumusan masalah yang ada, kesimpulan yang dapat diambil dari skripsi ini adalah : 1.

Game

Misi Sang Kapten berbasis HTML 5 dan dapat berjalan pada semua

browser yang telah menggunakan teknologi HTML 5.

2. Game Misi Sang Kapten dapat dimainkan secara Online menggunakan web browser.

3. Semua gerakan dan alur permainan dapat berjalan dengan baik.

4. Engine Construct 2 bisa digunakan untuk membuat

game browser berbasis

HTML 5.

11

DAFTAR PUSTAKA

Castronova, Edward. 2006. Synthetic Worlds: The Business and Culture of Online Games. Chicago: University Of Chicago Press.

N.K., Adaman. 2005. The Developmental History of Online Gaming Design. New York City: McGraw-Hill.

Rollings, Andrew dan Ernest Adams. 2006. Fundamentals of Game Design. USA: Prentice Hall.

Gullen, Ashley dan Thomas Gullen. 2011. Construct 2. http://www.scirra.com/construct2, diakses tanggal 10 Maret 2013.

Gullen, Ashley dan Thomas Gullen. 2011. Construct 2 System Requirements. https://www.scirra.com/manual/6/system-requirements, diakses tanggal 10 Maret 2013.

Gullen, Ashley. 2011. Beginner’s guide to Construct 2.

http://www.scirra.com/tutorials/37/beginners-guide-to-construct-2, di akses tanggal 10 Maret 2013.