PEMBUATAN RUN AND JUMP GAME MENGGUNAKAN HTML5 CANVAS TUGAS AKHIR

perpustakaan.uns.ac.id

digilib.uns.ac.id

PEMBUATAN RUN AND JUMP GAME MENGGUNAKAN HTML5 CANVAS

TUGAS AKHIR

Diajukan Untuk Memenuhi Salah Satu Syarat Mencapai Gelar Ahli Madya Program Diploma III Teknik Informatika

Oleh: AINURROFIQ ALFAIZ NIM. M3109006

PROGRAM DIPLOMA III TEKNIK INFORMATIKA FAKULTAS MATEMATIKA DAN ILMU PENGETAHUAN ALAM UNIVERSITAS SEBELAS MARET SURAKARTA 2012 commit to user


digilib.uns.ac.id

commit to user ii


digilib.uns.ac.id

commit to user iii


digilib.uns.ac.id

ABSTRACT MAKING THE RUN AND JUMP GAME USING HTML5 CANVAS. Ainurrofiq Alfaiz. NIM. M3109006. Information Technology Diploma Programme. Faculty of Mathematics and Natural Sciences. Universitas Sebelas Maret Surakarta. 2012. Nowadays the Internet has evolved into one of the most popular media in the world. With the internet growing so the more applications and game developers who use the Internet with many variations and genres. Consists of a wide range of platforms, devices, web browsers, and programming languages. While a variety of games to own a majority platform browser using adobe flash developer whose whereabouts are now becoming obsolete. One reason for adobe flash is becoming obsolete because adobe flash is no longer running on mobile devices made by Apple, which incidentally is the smartest gadget manufacturers today. And various features of HTML5 can provide a better user experience, as well as eliminating the boundaries between online apps and desktop apps. Run and Jump game uses HTML5 Canvas game was developed using javascript MelonJS by utilizing HTML5 Canvas as a medium. Using Adobe Photoshop and CorelDraw for making design character, object, background, to manufacture the game interface. And utilize Tilledmap Editor to create areas on each level. These games are entertainment. And created with the aim to hone agility, skill, and reflexes of children. Keywords: Multimedia, Run and Jump Game, HTML5 Canvas

commit to user iv


digilib.uns.ac.id

ABSTRAK PEMBUATAN RUN AND JUMP GAME MENGGUNAKAN HTML5 CANVAS. Ainurrofiq Alfaiz. NIM. M3109006. Program DIII Teknik Informatika. Fakultas Matematika dan Ilmu Pengetahuan Alam. Universitas Sebelas Maret Surakarta. 2012. Saat ini internet telah berkembang menjadi salah satu media yang paling populer di dunia. Dengan berkembangnya internet maka semakin banyak pula developer aplikasi dan game yang memanfaatkan internet dengan berbagai variasi dan genre. Terdiri dari berbagai macam platform, device, web browser dan bahasa pemrogramannya. Sedangkan berbagai game untuk platform browser sendiri mayoritas pengembangnya menggunakan adobe flash yang keberadaannya saat ini sudah mulai ditinggalkan. Salah satu alasan adobe flash mulai ditinggalkan adalah karena adobe flash sudah tidak lagi berjalan pada perangkat mobile buatan Apple, yang notabene merupakan produsen gadget tercerdas saat ini. Dan berbagai fitur dari HTML5 dapat memberikan user experience yang lebih baik, serta menghilangkan batasan antara online apps dan desktop apps. Permainan Run and Jump game menggunakan HTML5 Canvas ini dikembangkan menggunakan javascript MelonJS dengan memanfaatkan HTML5 Canvas sebagai medianya. Menggunakan Adobe photoshop dan CorelDraw untuk pembuatan design character, objek, background, hingga pembuatan interface permainan. Dan memanfaatkan Tilledmap Editor untuk membuat area pada setiap levelnya. Permainan ini bersifat hiburan. Dan dibuat dengan tujuan untuk mengasah ketangkasan, ketrampilan, dan refleks anak.

Kata kunci : Multimedia, Run and Jump Game, HTML5 Canvas

commit to user v


digilib.uns.ac.id

MOTTO

“It’s not we need new ideas, but we need to stop having old ideas.” Edwin Land “Whatever you are, be a good one.” Abraham Lincoln

commit to user vi


digilib.uns.ac.id

HALAMAN PERSEMBAHAN

Buat Ibu Bapak

commit to user vii


digilib.uns.ac.id

KATA PENGANTAR Assalamu’alaikum Warahmatullah Wabarakatuh. Bismillahirrohmanirrohim, segala puji dan rasa syukur hanya penulis panjatkan ke haribaan Allah subhanahu wa ta’ala, yang telah melimpahkan segala kemudahannya hingga akhirnya penulis mampu menyelesaikan Tugas Akhir dan menuliskan laporannya tepat waktu. Laporan Tugas Akhir ini disusun untuk memenuhi sebagian persyaratan memperoleh kelulusan Diploma III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta. Dalam pelaksanaan Tugas Akhir, yang didalamnya termasuk kegiatan pembuatan laporan ini, penulis mendapat banyak bantuan dari berbagai pihak. Tanpa bantuan Allah subhanahu wa ta’ala melalui tangan mereka niscaya Tugas Akhir penulis tidak akan berjalan dengan lancar. Untuk itu dalam secuil kertas yang mungkin tiada berarti ini penulis sampaikan rasa hormat dan menghaturkan rasa terima kasih kepada: 1. Kepada Yang Maha Ada, yang menjadikan semua ini ada. 2. Ir. Ari Handono Ramelan, M.Sc., PhD. selaku Dekan Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta. 3. Drs. YS. Palgunadi, M.Sc., selaku Ketua Program Diploma III Teknik Informatika Fakultas Matematika dan Ilmu Pengetahuan Alam Universitas Sebelas Maret Surakarta. 4. Fendi Aji Purnomo, S.Si., selaku pembimbing, yang telah memberikan bimbingan, nasehat, kritik dan saran selama penyusunan tugas akhir dan telah membuka mata penulis akan ilmu-ilmu yang sempat tidak terpandang oleh penulis. 5. Bapak, Ibu, serta Adik atas doa, kasih sayang, perhatian dan segalanya yang telah menjadikan penulis selalu semangat dan termotivasi untuk melakukan yang terbaik. 6. Gulingku tersayang, terimakasih banyak atas segala inspirasi yang terlah diberikan. commit to user viii


digilib.uns.ac.id

7. Rekan-rekan Teknik Informatika 2009-2011 terima kasih atas segala support dan bantuan kalian. 8. Teman-teman sekelas, TI.A 2009, terima kasih telah menyediakan waktu untuk berbagi ilmu ketika penulis memiliki permasalahan. 9. Kepada Jule, selaku translator. 10. Dan seluruh pihak-pihak yang tidak dapat penulis cantumkan satu persatu, terimaksih atas segala bimbingan, bantuan, kritik, dan saran dalam penyusunan tugas akhir ini. Penulis menyadari bahwa dalam penulisan tugas akhir ini masih jauh dari sempurna, oleh karena itu kritik dan saran penulis harapkan dari berbagai pihak demi terciptanya kesempurnaan penulisan tugas akhir ini dan penulis akan berusaha untuk lebih baik lagi ke depannya. Wassalamu’alaikum Warohmatullah Wabarakatuh.

Surakarta, 08 Juni 2012 Penulis

commit to user ix


digilib.uns.ac.id

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 BAB I PENDAHULUAN .................................................................................. 1 1.1

Latar Belakang ................................................................................... 1

1.2

Perumusan Masalah............................................................................ 3

1.3

Batasan Masalah ................................................................................. 3

1.4

Tujuan dan Manfaat ........................................................................... 3

1.5

Metodologi Penelitian ........................................................................ 3 1.5.1 Metode Pengumpulan Data ...................................................... 4 1.5.2 Metode Pembuatan Game ........................................................ 4 1.5.3 Perencanaan Game ................................................................... 4 1.5.4 Implementasi Permainan .......................................................... 4

1.6

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

BAB II LANDASAN TEORI ............................................................................ 6 2.1

Computer Game ................................................................................. 6

2.2

Klasifikasi Game ............................................................................... 7

2.3

Jenis-Jenis Genre Permainan Komputer ........................................... 8 2.3.1 Simulasi ..................................................................................... 8 2.3.2 Edukasi ...................................................................................... 9 2.3.3 Entertainment ............................................................................ 9

2.4

Macam-Macam Platform Computer Game ........................................ 12 2.4.1 Desktop Game ........................................................................... 13 commit to user 2.4.2 Mobile Game ............................................................................ 13 x


digilib.uns.ac.id

2.5.3 Browsers Game ........................................................................ 13 2.5

Konsep dan Komponen dalam Pengembangan Game ....................... 14 2.5.1 Game Engine ............................................................................. 14 2.5.2 Game Deployment Tools .......................................................... 15

2.6

HTML5 .............................................................................................. 18 2.6.1 HTML5 Canvas ......................................................................... 18

2.7

Tiled Map Editor ............................................................................... 18

2.8

Javascript Game Engine .................................................................... 18 2.8.1 MelonJS .................................................................................... 19

2.9 BAB III 3.1

Adobe Dreamweaver CS5.5 .............................................................. 19 ANALISIS KEBUTUHAN DAN PERANCANGAN ....................... 20 Analisis Kebutuhan ............................................................................ 20 3.1.1 Kebutuhan Pembuatan............................................................... 20 3.1.1.1 Kebutuhan Hardware untuk Pembuatan ........................... 20 3.1.1.2 Kebutuhan Software untuk Pembuatan ............................. 20 3.1.2 Kebutuhan Pemakaian ............................................................... 21 3.1.2.1 Kebutuhan Hardware untuk Pemakaian ........................... 21 3.1.2.1 Kebutuhan Software untuk Pemakaian .............................. 22

3.2

Langkah Perancangan Permainan ...................................................... 22 3.2.1 Konsep....................................................................................... 23 3.2.2 Pengumpulan Materi ................................................................ 23 3.2.3 Perancangan Game .................................................................... 23 3.2.4 Tahap Pembuatan ...................................................................... 23 3.2.5 Testing/Debugging .................................................................... 23 3.2.6 Hasil .......................................................................................... 24

3.3

Perancangan Game ............................................................................. 24 3.3.1 Konsep/Alur Cerita Permainan ................................................. 24 3.3.2 Kontrol ...................................................................................... 24

3.4

Alur Pembuatan Grafik dan Interface Permainan .............................. 25

3.5

Perancangan Design Karakter ............................................................ 25 commitKarakter to user dan Objek .............................. 26 Perancangan Sprite Animasi

3.6

xi


digilib.uns.ac.id

3.7

Perancangan Objek dan Dekorasi Permainan .................................... 26

3.8

Perancangan TileSet ........................................................................... 27

3.9

Perancangan Level ............................................................................. 28 3.9.1 Level 1 Runningman! ................................................................ 28 3.9.2 Level 2 Jumper! ........................................................................ 29 3.9.3 Level 3 Transform!.................................................................... 30 3.9.4 Level 4 Hit the enemy! .............................................................. 30 3.9.5 Level 5 Move on, make a finish! ............................................... 28

3.10 Perancangan Screenpage dan Interface Permainan ............................ 31 3.10.1 Halaman Intro .......................................................................... 31 3.10.2 Perancangan Main Menu ......................................................... 33 3.10.3 Halaman Instruksi ................................................................... 34 3.11 Perancangan Uji Coba ........................................................................ 34 3.12 Perancangan Evaluasi ........................................................................ 34 BAB IV IMPLEMENTASI DAN UJI COBA .................................................... 36 4.1

Detail Aplikasi ................................................................................... 36

4.2

Pembuatan Materi Permainan ............................................................ 36 4.2.1 Pembuatan Tokoh Utama ......................................................... 36 4.2.2 Pembuatan Karakter Musuh ...................................................... 37 4.2.3 Pembuatan Entiti Koin .............................................................. 37

4.3

Pembuatan Sprite Animasi ................................................................ 36 4.3.1 Sprite Tokoh Utama .................................................................. 38 4.3.2 Sprite Karakter Musuh dan Koin .............................................. 39

4.4

Pembuatan Objek dan Dekorasi......................................................... 36

4.5

Pembuatan TileSet ............................................................................. 36

4.6

Pembuatan Level Permainan .............................................................. 40 4.6.1 Pembuatan Level 1 .................................................................... 41 4.6.2 Pembuatan Level 2 .................................................................... 42 4.6.3 Pembuatan Level 3 .................................................................... 44 4.6.4 Pembuatan Level 4 .................................................................... 45 to user 4.6.5 Pembuatan Levelcommit 5 .................................................................... 46 xii


4.7

digilib.uns.ac.id

Pembuatan Interface dan Screen Page Permainan ............................ 47 4.7.1 Pembuatan Halaman Intro ....................................................... 49 4.7.2 Pembuatan Main Menu ............................................................. 50 4.7.3 Pembuatan Halaman Instruksi .................................................. 51 4.7.4 Pembuatan Halaman Plot.......................................................... 51

4.8

Pembuatan Script Permainan Menggunakan Query MelonJS ........... 52 4.8.1 Game Resource ........................................................................ 52 4.8.2 JsApp ....................................................................................... 53 4.8.3 Player Entity ............................................................................. 55 4.8.4 PlayScreen ................................................................................ 57

4.9

Hasil Pengujian Aplikasi ................................................................... 59

4.10 Hasil Kuisioner .................................................................................. 63 BAB V

PENUTUP ............................................................................................ 66

5.1 Kesimpulan ........................................................................................... 66 5.2 Saran ..................................................................................................... 66 DAFTAR PUSTAKA ........................................................................................... 67 LAMPIRAN .......................................................................................................... 69

commit to user xiii


digilib.uns.ac.id

BAB I PENDAHULUAN

1.1 Latar Belakang Saat ini internet sudah berkembang menjadi salah satu media yang paling populer di dunia. Karena fasilitas dan kemudahannya, internet sudah menjadi barang yang tidak asing lagi. Dengan berkembangnya internet, maka semakin banyak pula pengembang-pengembang aplikasi dan game yang memanfaatkan fasilitas internet. Semakin berkembangnya internet, maka semakin banyak pula jenis aplikasi dan game yang diproduksi oleh developer dengan beragam variasinya. Terdiri dari berbagai platform, device, browser dan bahasa pemrogramannya. Seiring dengan menjamurnya facebook dan berbagai jejaring sosial lainnya yang memanfaatkan web browser, berbagai game yang berjalan pada platform browser pun menjadi sangat populer saat ini. Permainanannya yang simple dan ringan sangat cocok untuk dinikmati sambil berbalas sapa pada social media yang sedang aktif. Game browser pun menjadi daya tarik tersendiri bagi penikmat jejaring social. Namun, game browser sendiri mayoritas pengembangnya masih menggunakan adobe flash. Dimana keberadaan adobe flash ini sudah mulai ditinggalkan, bukan hanya oleh gadget-gadget produkan apple, namun juga android dan beralih ke HTML5. (Craig Lloyd. Remains of the Day: Adobe Dropping Flash from Android. http://lifehacker.com/5922466/remains-of-the-day-adobe-dropping-flash-fromandroid)

Salah satu alasan adobe flash mulai ditinggalkan adalah karena adobe flash sudah tidak lagi berjalan pada perangkat mobile buatan Apple, yang notabene merupakan produsen gadget tercerdas saat ini. Dan berbagai fitur commit to user 1


digilib.uns.ac.id 2

dari HTML5 dapat memberikan user experience yang lebih baik, serta menghilangkan batasan antara online apps dan desktop apps. Kebanyakan dari Mobile application pada saat ini berdiri masingmasing tergantung dari OS yang digunakan. Android dengan base programming java, dan iOS dengan C#. Sehingga dibutuhkan aplikasi yang dapat dijalankan secara multiplatform, bukan hanya untuk mobile, namun juga untuk perangkat-perangkat desktop yang lebih besar. dan HTML5 canvas adalah salah satu solusi yang bisa dimanfaatkan untuk menyelesaikannya. (Tim Perdue, former About.com Guide, “HTML5 vs. Flash: The Battle for Rich Media”. http://newtech.about.com/od/softwaredevelopment/a/Html5-VsFlash-The-Battle-For-Rich-Media_3.htm) Berbagai cara dapat digunakan pengembang untuk membuat game browser. Antara lain menggunakan software-software game maker yang berbayar atau opensource, atau dapat juga menggunakan javascript game engine. Salah satu langkah penting dalam membuat Game menggunakan HTML5 canvas sendiri adalah memilih game engine yang cocok untuk digunakan dan memenuhi berbagai kebutuhan sang developer. Dalam kasus permainan browser dengan genre ‘Run and Jump’, pilihan ini jatuh pada dua javascript gam e engine yang bisa diandalkan, antara MelonJS dan EnchantJS. (Berigoi Daniel, 8 january 2012, http://students.info.uaic.ro/~daniel.berigoi; http://bit.ly/NaWA37) Namun, melonJS menawarkan berbagai kelebihan yang tidak dimiliki EnchantJS, antara lain, dukungan beberapa saluran audio, efek untuk transisi, beberapa lapisan layer dalam pemetaan. Ia juga memiliki beberapa elemen GUI, loader disesuaikan dan dapat mengatur animasi dasar. Seperti EnchantJS. Disamping hal itu tak lepas dari web browser yang harus sudah memiliki dukungan untuk HTML5 dan WebGL. commit to user


digilib.uns.ac.id 3

1.2 Perumusan Masalah Setelah mengkaji dari latar belakang masalah, maka rumusan masalah yang dikemukakan adalah bagaimana membuat Run and Jump game pada browser menggunakan MelonJS pada HTML5 Canvas. 1.3 Batasan Masalah Berkaitan dengan rumusan masalah, masalah dibatasi hanya dpada proses pembuatan Run and Jump Game dengan memanfaatkan HTML5 Canvas dengan 5 tingkat kesulitan dan scoring berdasarkan time-trial. 1.4 Tujuan dan Manfaat Pembuatan Game Tujuan Tujuan dari penelitian ini adalah membuat Run and Jump game menggunakan HTML5 Canvas yang bersifat menghibur dan menghilangkan rasa galau. Manfaat 1. Bagi Developer a. Dapat mengembangkan game dengan menggunakan open source game engine. b. Mendapatkan pengetahuan dan pengalaman yang dapat menjadi bekal untuk bersaing di dunia kerja. c. Mendapat kesempatan untuk menerapkan ilmu yang telah diperoleh selama perkuliahan. 2. Bagi Pengguna a. Sebagai hiburan dan penghilang kepenatan. b. Membantu perkembangan psikomotorik anak dalam hal reflek, koordinasi mata-tangan, dan melatih kecepatan berfikir dalam pengambilan keputusan. 1.5 Metodologi Penelitian Metode pengumpulan data yang akan digunakan dalam pembuatan Tugas Akhir penulis adalah sebagai berikut: commit to user


digilib.uns.ac.id 4

1.5.1 Metode Pengumpulan Data a.

Observasi Pengumpulan data yang dilakukan melalui pengamatan, pencatatan dan pencarian Informasi tentang game-game browser yang menggunakan media HTML5 Canvas.

b.

Studi Pustaka Metode pengumpulan data ini menggunakan pustaka-pustaka yang telah ada untuk digunakan sebagai referensi atau acuan, serta sebagai bahan penunjang. Mecari referensi tentang HTML5 Canvas dan tutorial yang

membahasnya,

serta

referensi

tentang

pembuatan

game

menggunakan bahasa pemrograman Javascript. 1.5.2 Metode Pembuatan Game Pembuatan game ini meliputi software apa yang akan digunakan, alur game untuk setiap levelnya. Sehingga dengan adanya perancangan ini nantinya dapat digunakan untuk meminimalisir dan mengidentifikasi permasalahan dan hambatan yang terjadi, serta mengusulkan berbagai macam kebutuhan untuk perbaikan. 1.5.3 Perencanaan Game Run and Jump HTML5 Canvas Game ini memiliki beberapa tahapan dalam perancangan gamenya. Perancangan dipisahkan menjadi berbagai tahapan. Antara lain adalah: Perancangan alur permainan (plot), perancangan karakter, perancangan background (setting), miscellaneous object, sound efek, background music, dan tampilan halaman game. Agar game dapat bekerja dengan maksimal. 1.5.4 Implementasi Permainan Implementasi permainan merupakan deployment dan evaluasi dari permainan yang telah dibuat dan diuji coba untuk bisa dijalankan pada berbagai browser. Tahapan implementasi game ini mencakup pengkodean permainan dan deployment program. Jika semua tahap berakhir, maka akan commit to user


digilib.uns.ac.id 5

sampai pada tahap evaluasi sistem. Evaluasi sistem adalah menguji dan memastikan bahwa permainan sudah berjalan sesuai dengan alur sistem secara keseluruhan. 1.6

Sistematika Penulisan Laporan Tugas Akhir dengan judul “Run and Jump Game Menggunakan

HTML5 Canvas” ini, terdiri dari lima bab yaitu: 1.

BAB I Pendahuluan Pendahuluan yang berisi Latar Belakang Masalah, Perumusan Masalah, Batasan Masalah, Tujuan dan Manfaat Penelitian, Metodologi Penelitian, Sistematika Penulisan.

2.

BAB II Landasan Teori Landasan teori memuat tinjauan pustaka yang digunakan sebagai referensi dalam pembuatan Run and Jump game menggunakan HTML5 Canvas.

3. BAB III Analisis Dan Perancangan Analisis dan perancangan game memuat tentang analisa kebutuhan dari game yang akan dibuat, beserta rancangan game. 4.

BAB IV Implementasi Dan Evaluasi Implementasi memuat hasil analisa dan perancangan game yang mungkin akan ditampilkan dalam bentuk tabel, flow chart, gambar, dan penjelasan dari masing-masing bagian.

5.

BAB V Penutup Penutup memuat kesimpulan dari hasil penelitian atau implementasi game dan saran yang diperoleh dari kesimpulan tersebut.

commit to user


digilib.uns.ac.id

BAB III ANALISIS KEBUTUHAN DAN PERANCANGAN

3.1 Analisis Kebutuhan Dalam pembuatan tugas akhir ini kebutuhan alat yang digunakan dibagi menjadi 2 macam perangkat, yaitu perangkat keras (hardware) dan perangkat lunak (software). 3.1.1 Kebutuhan Pembuatan 3.1.1.1 Kebutuhan Hardware Pembuatan Hardware minimum untuk pembuatan Run and Jump Game HTML5 Canvas ini adalah dengan spesifikasi sebagai berikut: a. Processor Dikarenakan proses graphic rendering pada WebGL yang cukup berat, maka Processor minimum yang digunakan untuk pembuatan game ini adalah Processor Intel dual core 1.66 GHz b. Memory Memory minimum untuk pembuatan game ini RAM 512 MB. c. Harddisk Harddisk yang digunakan dalam pembuatan game ini berkapasitas kosong minimal 80 GB. d. Graphic Accelerator VGA yang digunakan untuk menjalankan game ini adalah VGA dengan memory minimal 128 Mb yang sudah support WebGL. 3.1.1.2 Kebutuhan Software Pembuatan Software yang diperlukan dalam pembuatan Run and Jump HTML5Game Canvas ini adalah sebagai berikut: a. Script editor software, sebagai pengolah script dalam pembuatan permainan ini menggunakan yang minimal mendukung bahasa Javascript, dan HTML. Dapat menggunakan Adobe Dreamweaver CS, KomodoEdit, Gedit, ataupun notepad++. commit to user

20


21 digilib.uns.ac.id

b. Karena game ini merupakan sebuah web app. maka untuk mengaksesnya membutuhkan sebuah web browser. Browser minimal yang sudah support HTML5 dan WebGL adalah Mozilla Firefox (3.6+), Safari (5+), Maxthon (3+) atau GoogleChrome (9+). Namun mayoritas browser saat ini sudah support HTML5. c. Web Server seperti xampp, wampp, atau sejenisnya. d. CorelDraw X4 atau lebih baru, digunakan untuk menggambar berbagai karakter, objek, dan interface pada permainan. e. Adobe Photoshop CS3 atau lebih baru, digunakan untuk membuat berbagai interface dan mengolah ulang hasil gambar yang sudah dibuat pada CorelDraw TiledMap Editor versi Tiled Qt 0.8.1 for Windows, digunakan untuk membuat mapping permainan. TiledMap Editor juga sudah mendukung ortogonal dan isometrik peta sehingga sangat membantu dalam pembuatan permainan. 3.1.2 Kebutuhan Pemakaian 3.1.2.1 Kebutuhan Hardware untuk Menjalankan Hardware minimum untuk menjalankan game ini memiliki spesifikasi sebagai berikut: a. Processor Processor yang digunakan untuk menjalankan game ini processor Intel dual core 1.66 GHz. b. Memory Memory yang digunakan untuk menjalankan game ini RAM 512 MB c. Harddisk Harddisk yang digunakan untuk menjalankan game ini min free 100 MB disk space. d. Graphic Accelerator VGA yang digunakan untuk menjalankan game ini adalah minimal support WebGL. e. Sound user device Minimal support speakercommit sebagaitooutput



f. Input Input device yang digunakan adalah keyboard 3.1.1.2 Kebutuhan Software untuk Menjalankan Software yang diperlukan untuk menjalankan ‘Run and Jump Game’ ini adalah sebuah web browser, karena game ini berjalan pada platform browser. Web browser yang digunakan pun harus sudah support WebGL (Web Graphics Library). Browser minimal yang sudah support HTML5dan WebGL adalah Mozilla Firefox (3.6+), Safari (5+), Chrome (9+). Namun mayoritas browser saat ini pasti sudah support dan dapat mengakses tag-tag HTML5.

3.2 Langkah Pernacangan Permainan Permainan Run and Jump dengan HTML5 Canvas ini adalah sebuah permainan yang terlihat dan terasa seperti sebuah Run and Jump dengan Adobe Flash game pada umumnya. Tetapi permainan ini bebebeda, karena engine yang dipakai adalah melonJS, sebuah javascript library untuk HTML5 game engine yang mendukung game developing HTML5 Canvas pada browser dengan dukungan WebGL. Run

and

Jump

Game

ini

memiliki

beberapa

tahapan

perancangannya. Langkah pengembangan game ini adalah sebagai berikut:

Konsep

Hasil

Pengumpulan materi

Testing/debugging

Perancangan Game

Tahap Pembuatan

Gambar 3.1 Langkah Perancangan Game

commit to user

dalam



3.2.1 Konsep Langkah pertama dari pembuatan game ini adalah menentukan konsep permainan sekaligus plot/alur cerita dari permainan ini. Konsep dari permainan ini adalah Run and Jump Game, permainan berlari dan melompat, pemain akan disuguhi petualangan klasik dengan tampilan gambar 2Dimensi dengan 5 tingkat kesulitan. 3.2.2 Pengumpulan Materi Untuk membuat sebuah run and jump game diperlukan berbagai materi awal/bahan mentah (RAW), baik sebagai acaun ataupun yang nantinya diolah, dan digunakan dalam pembuatan pemainan. Beberapa materi yang dibutuhkan untuk permainan ini adalah berbagai sprite dari sebuah tokoh/character dari suatu game dengan step-by-step gerakan per-frame-nya, beberapa tiled map dengan ukuran 32x32 pixel, sketch kasar dari gambaran karakter dalam permainan, dan beberapa contoh sound effect yang biasa digunakan dalam game sebagai referensi atau acuan dari game ini. 3.2.3 Perancangan Game Perencanaan game ini meliputi software apa yang akan digunakan, alur game untuk setiap levelnya, dan game engine apa yang akan digunakan. Sehingga dengan adanya perancangan ini nantinya dapat dingunkan untuk meminimalisir dan mengidentifikasi permasalahan dan hambatan yang terjadi, serta mengusulkan berbagai macam kebutuhan untuk perbaikan. 3.2.4 Tahap Pembuatan Merupakan tahap pembuatan dari rancangan-rancangan yang ada. Mulai dari desain atau layout yang akan dibuat, hingga script yang digunakan untuk menjalankan permainan. 3.2.5 Testing/debugging Implementasi permainan merupakan deployment dan evaluasi dari permainan yang telah dibuat dan diuji coba untuk bisa dijalankan pada berbagai browser. Tahapan implementasi game ini mencakup pengkodean permainan dan deployment program. Jika semua tahap berakhir, maka akan user sampai pada tahap evaluasi commit sistem. toEvaluasi sistem adalah menguji dan



memastikan bahwa permainan sudah berjalan sesuai dengan alur sistem secara keseluruhan. 3.2.6 Hasil Setelah dilakukan evaluasi dari hasil pembuatan game yang sesuai dengan alur pembuatan secara keseluruhan, maka didapatkan sebuah permainan Run and Jump Game dengan mengguankan media HTML5 Canvas dengan judul “Guling Galau Rebotak”.

3.3 Perancangan Game Run and Jump Game ini memiliki beberapa tahapan dalam perancangan gamenya. fungsi. Perancangan dipisahkan menjadi berbagai tahapan. Antara lain adalah: Perancangan alur permainan (plot), perancangan karakter, perancangan background (setting), miscellaneous object, sound efek, background music, dan tampilan halaman game, agar game dapat berjalan dengan maksimal. 3.3.1 Konsep/Alur Cerita Permainan Nama Run and Jump Game ini adalah ‘Guling Galau Rebotak’, yang mengisahkan seorang anak bernama Rebotak terperangkap dalam kegalauan yang mendalam. Hingga pada suatu malam ia terperangkap pada dunia lain dan berubah menjadi sebuah bantal karena terlalu lama tenggelam dalam kegalauan yang mendalam. Misi utama dari permainan ini adalah mengeluarkan tokoh utama dari dunia kegalauan dan kembali ke kehidupan nyata. Sambil mengumpulkan api semangat dalam perjalanannya yang menempuh 5 tingkat kesulitan untuk kembali ke dunia nyata, tokoh utama pun harus menghadapi berbagai rintangan dan musuh, dengan life time yang sangat terbatas. 3.3.2 Kontrol Karena permainan ini merupakan browser app, maka dibutuhkan bebrapa tombol pada keyboard yang perlu didefinisikan sebagai inputan permainan untuk bisa mengoperasikannya. Berikut adalah beberapa tombol yang anak digunakan dalam permainan: 

commit to user Untuk menggerakkan menggunakan left & right arrows





Untuk melompat menggunakan huruf ‘X’ pada keyboard



Tombol “Z” pada keyboard travel berpindah dimensi antara kegalauan dan kenyataan jika player memiliki cukup poin api semangat.

3.4 Alur Pembuatan Grafik dan Interface Permainan Langkah-langkah pembuatan design dari masing-masang objek dan gambar pada permainan ini adalah sebagai berikut: Sketch

Rough Design

Vector Drawing

Retouch/Finishing

Coloring

Gambar 3.2 Alur Perancangan Interface Game Sketch Rough

: Adalah tahap sketsa menggunakan pensil dan kertas. Design:

Pembuatan

gambar

kasar

dari

tiap-tiap

objek

menggunakan CorelDraw. Vector Drawing: Adalah proses pembuatan gambar pada CorelDraw yang bertujuan untuk membuat objek-objek. Coloring

: Proses pewarnaan objek menggunakan CorelDraw.

Finishing

: Adalah proses retouch dari objek-objek yang sudah jadi.

3.5 Perancangan Design Karakter Karakter yang akan digunakan disini adalah sebuah menusia yang terbungkus guling/bantal. Karakter seorang anak yang menanggis tersedu-sedu ini menggambarkan ekspresi sebuah padangan kosong, memberontak, kegalauan dan deperesi yang mendalam. Design awal dibuat menggunakan sketsa pensil, kemudian digambar menggunakan CorelDraw X5 yang basis vector. Berikut adalah gambar awal dari karakter utama yang akan digunakan pada permainan. commit to user



Gambar 3.3 Perancangan desain karakter tokoh utama, musuh, dan entity koin

3.6 Perancangan Sprite animasi Karakter dan Objek Sprite adalah salah satu teknik animasi yang menggambarkan gerakangerakan karakter pada setiap framenya. Sprite pada permainan ini dibuat menggunakan CorelDraw X5.

Gambar 3.4 Perancangan sprite animasi karakter tokoh utama

Gambar 3.5 Perancangan sprite animasi karakter musuh

Gambar 3.6 Perancangan sprite animasi entity koin

3.7 Perancangan Objek dan Dekorasi Permainan Adapaun object-object yang akan digunakan dalam permainan ini keseluruhannya dibuat menggunakan CorelDraw X5, kemudian diolah ulang commit to user menggunakan photoshop untuk retouchnya agar terlihat lebih nyata. Objek-



objek yang terdapat dalam permainan ini setelah dibuat disematkan langsung ke dalam tileset agar nantinya dapat dimasukkan ke dalam track permainan berekstensi .tmx.

Gambar 3.7 Rancangan objek-objek yang akan dimasukkan dalam tileset

3.8 Perancangan TileSet TileSet adalah sebuah file gambar yang berisikan blok-blok gambar yang menyusun sebuah map/peta dari set level dari sebuah game. Baik itu berupa blok-blok gundukan tanah, pohon, jembatan, tangga, ataupun objek-objek lainnya, dalam tileset semua objek dipecah dalam menjadi blok-blok pixel dengan ukuran yang sama. Tileset dapat dibuat menggunakan CorelDraw dan Adobe Photoshop. Pada permainan ini TileSet yang digunakan adalah tileset 32x32. Yang berarti ukuran masing-masing bloknya adalah 32pixel persegi. Berikut adalah rancangan tileset yang akan digunakan untuk permainan Guling Galau Rebotak.

commit to user



Gambar 3.8 Perancangan TileSet

3.9 Perancangan Level Perancangan tiap-tiap level pada permainan ini berbeda, tergantung dari tingkatan levelnya. Semakin tinggi, maka semakin rumit pula tingkat kesulitan yang harus dilalui oleh pemain. Perancagan awal dapat menggunakan sketch kasar sementara. Sketch dapat dibuat menggunakan pensil dan kertas. Berikut adalah contoh dari perancangannya. 3.9.1 Level 1 Runningman! Karena masih pada level pertama, maka tingkat kesulitan pada level ini sangat rendah. Track pada level ini akan dibuat berupa lintasan lurus naikturun, tanpa ada halangan seperti jurang dan musuh. Bertujuan untuk mengarahkan pemain bagaimana cara menggerakkan karakter utama. Berikut adalah sketch awal dari rancangan level 1:

commit to user



Gambar 3.9 Perancangan level 1 3.9.2 Level 2 – Jumper! Tingkat kesulitan pada Level 2 lebih sulit dibandingkan pada level pertama, karena pada level ini pemain diminta untuk melompati beberapa jurang dengan jarak dan ukuran yang bervarisasi. Tujuan dari level ini adalah agar pemain dapat melompatkan karakter utama untuk menghindari jurang. Berikut adalah sketch awal dari rancangan level 2:

Gambar 3.9 Perancangan level 2 3.9.3 Level 3 – Transform! Pada level 3, pemain akan disuguhi jurang panjang yang tidak mungkin bis dilompati dengan lompatan biasa. Untuk bisa melompatinya pemain harus bertransformasi ke bentuk ceria, sehingga di atas jurang yang tidak bisa dilompati tersebut akan muncul sebuah jematan. Jembatan ini hanya dapat ditemukan saat karakter utama bertransformasi, dan hilang saat karakter utama dalam bentuk biasa. Berikut adalah sketch awal dari rancangan level 3: commit to user



Gambar 3.10 Perancangan level 3 3.9.4 Level 4 – Hit the enemy! Pada level 4 pemain diminta untuk melompati jurang, bertransformasi untuk menemukan jembatan dan mengalahkan musuh dengan cara menginjaknya dari atas. Mulai level 4 dan seterusnya karakter guling akan sering muncul sebagai musuh. Berikut adalah sketch awal dari rancangan level 4:

Gambar 3.11 Perancangan level 4 3.9.5 Level 5 – Move on, make a finish! Level 5 adalah level terakhir, pemain diharuskan menghadapi kombinasi dari berbagai rintangan yang ada pada level-level sebelumnya sebelum pada akhirnya akan mencapai garis akhir. Dengan life time yang semakin menipis setelah menempuh level-level sebelumnya dan track yang sangat panjang, maka permainan pun akan terasa sangat terdesak dan lebih sulit. Berikut adalah sketch awal dari rancangan level 5:

commit to user Gambar 3.12 Perancangan level 5



3.10 Perancangan Screenpage dan Interface Menu Permainan 3.10.1 Halaman Intro Tampilan halaman intro pada permainan ini tersusun dari 3 buah halaman. Ketiganya akan dibuat menggunakan CorelDraw dan Adobe Photoshop. Halaman pertama merupakan cover permainan, halaman kedua adalah credits page untuk game engine, featured, dan presented. sedangkan halaman ketiga adalah plot/cerita dari permainan.

Gambar 3.13 Perancangan Halaman intro 1: Cover game

commit to user



Gambar 3.14 Perancangan Halaman intro 2: Built and presented

Gambar 3.15 Perancangan Halaman intro 3: Plot game commit to user



3.10.2 Perancangan Main Menu Main menu adalah halaman yang pertama kali akan diakses oleh pemain. Berisi menu pertama untuk start game, dan menu kedua adalah halaman instruksi permainan.

Gambar 3.16 Perancangan halaman Main Menu

commit to user



3.10.3 Halaman Instruksi Halaman instruksi permainan ini berisi peutunjuk bagai mana cara menggerakkan karakter, melawan musuh, dan petunjuk umum lainnya.

Gambar 3.17 Perancangan Halaman Instruksi

3.11 Perancangan Uji Coba Tahap uji coba pada permainan ini akan dilakukan pada beberapa jenis browser. Antara lain adalah: Maxthon 3.4.1, Chrome 19, Firefox 12, Opera Mobile, Safari 5.1, dan internet Explorer 9.

3.12 Perancangan Evaluasi Untuk mendapatkan hasil yang optimal dari evaluasi permainan ini, dibutuhkan sebuah kuisoner yang berfungsi mendapatan berbagai tanggapan dari pemain mengenai Run and Jump Game HTML5 Canvas, sehingga permainan ini akan dapat berkembang lebih baik. Berikut rancangan pertanyaan kuisioner yang akan diajukan:  

Apakah permainan “Guling Galau” ini sudah cukup menghibur commit to user Browser apa yang digunakan



     

Apakah permainan ini cukup stabil saat dijalankan Bagaimana tampilan visual dari permainan Adakah bug/error pada saat menjalankan permainan Bagaimana tingkat kesulitan yang dihadapi dalam memainkan game ini Bagaimana perasaan pemain setelah memainkan permainan ini Saran dan kritik

commit to user


digilib.uns.ac.id

BAB II LANDASAN TEORI

Dalam Laporan Tugas Akhir ini diperlukan beberapa definisi dan pengertian yang berhubungan dengan kebutuhan rancang pembuatan game Run and Jump menggunakan HTML5 canvas. Pembahasan dalam BAB II difokuskan pada referensi computer gaming, HTML5 javascript, game engine. 2.1 Computer Game Game diambil dari bahasa Inggris yang diterjemahkan yang artinya permainan. Pada era perkembangan teknologi yang pesat ini, seperti halnya permainan kartu, catur dan lain-lainnya dapat ditemui melalui dunia virtual atau yang biasa kita mainkan di dalam komputer. Dengan perkembangan teknologi sekarang ini munculah berbagai sarana permainan, misalnya Playstation 3, Xbox 360, Nintendo Wii, PSP, Nintendo DS, maupun PC dari yang berbasis individu ataupun multiplayer. Berikut adalah pengertian game komputer menurut beberapa ahli, dikutip dari Mark Overmars, dari PDF yang berjudul “Tutorial: What is a good game?” adalah sebagai berikut: Menurut Roger Callois, seorang sosiolog Perancis, dalam bukunya yang berjudul Les jeux et les homes menyatakan game memiliki enam sifat: “bebas” (bermain adalah pilihan, bukan kewajiban), “terpisah” (waktu dan tempat telah ditetapkan terlebih dahulu), memiliki hasil yang tidak pasti, “tidak produktif” (artinya tidak menghasilkan barang atau kekayaan), dipayungi sebuah aturan, dan “pura-pura” (dibarengi dengan kesadaran bahwa game bukan Kehidupan Nyata, tapi semacam realita yang terpisah tapi dimiliki bersama). Berdasarkan

buku

‘Rules

of

Play’

karya Katie

Salen dan Eric

Zimmerman, game adalah “Sistem tempat pemain melakukan konflik bohongan, yang ditentukan oleh aturan, dan memberi hasil terukur”. Menurut Agustinus

Nilwan dalam

bukunya

“Pemrograman

Animasi

dan Game Profesional” terbitan Elex Media Komputindo, game merupakan user dan metode animasi. Jika ingin permainan komputer yang dibuatcommit dengantoteknik

6


7 digilib.uns.ac.id

mendalami pengunaan animasi haruslah memahami pembuatan game atau jika ingin membuat game, maka haruslah memahami teknik dan metode animasi, sebab keduanya saling berkaitan. Menurut J. Von Neumann dan O. Morgenstern, Theory of Games and Economic Behavior (3d ed. 1953), game adalah Permainan yang terdiri atas sekumpulan peraturan yang membangun situasi bersaing dari dua sampai beberapa orang atau kelompok dengan memilih strategi yang dibangun untuk memaksimalkan kemenangan sendiri atau pun untuk meminimalkan kemenangan lawan. Peraturan-peraturan menentukan kemungkinan tindakan untuk setiap pemain, sejumlah keterangan diterima setiap pemain sebagai kemajuan bermain, dan sejumlah kemenangan atau kekalahan dalam berbagai situasi. 2.2

Klasifikasi Game Berikut ini adalah klasifikasi game berdasrkan pembatas usia, menurut

Entertainment Software Rating Board (ESRB), yaitu: Early Childhood (3+) memiliki isi yang mungkin cocok untuk usia 3 dan lebih tua. Tidak mengandung materi yang tidak pantas orang tua akan menemukan. Everyone (6+) memiliki konten yang cocok untuk usia 6 tahun dan lebih tua. Judul-judul dalam kategori ini berisi sedikit kartun, fantasi, tanpa kekerasan, dan menggunakan bahasa yang ringan. Everyone (10+) memiliki konten yang mungkin cocok untuk usia 10 dan lebih tua. Judul-judul dalam kategori ini berisi lebih banyak kartun, fantasi, kekerasan ringan, bahasa ringan, dan minimal tema sugestif. Teen (13+) memiliki konten yang mungkin cocok untuk usia 13 dan lebih tua. Judul-judul dalam kategori ini mungkin mengandung kekerasan, tema sugestif, humor kasar, sedikit darah, simulasi perjudian, dan jarang menggunakan bahasa yang kasar. Mature (17+) memiliki konten yang mungkin cocok untuk orang usia 17 dan lebih tua. Judul-judul dalam kategori ini berisi intens kekerasan, darah dan darah kental, konten seksual, dan bahasa yang kuat. commit to user

8 digilib.uns.ac.id


Adults Only (18+) memiliki konten yang hanya boleh dimainkan oleh orang-orang 18 tahun dan lebih tua. Judul-judul dalam kategori ini mungkin termasuk adegan yang intens kekerasan dan/atau grafik konten seksual dan ketelanjangan. RP (Rating Pending) telah disampaikan kepada ESRB dan sedang menunggu penilaian akhir. The Entertainment Software Rating Board (ESRB) adalah sebuah organisasi regulator mandiri yang menilai permainan video, panduan pengiklanan, prinsip privasi online permainan video dan software hiburan lainnya di Kanada dan

Amerika

Serikat.

(Entertainment

Software

Rating

Board

Guide,

http://www.esrb.org/ratings/ratings_guide.jsp) 2.3 Jenis-Jenis Genre Permainan Komputer 2.3.1 Simulasi Simulasi, video Game jenis ini seringkali menggambarkan dunia di dalamnya sedekat mungkin dengan dunia nyata dan memperhatikan dengan detil berbagai faktor. Video Game jenis ini membuat pemain harus berpikir untuk mendirikan, membangun dan mengatasi masalah dengan menggunakan dana yang terbatas. Contoh: Sim City, The Sims, Tamagotchi. Simulasi kendaraan. Video Game jenis ini memberikan pengalaman atau interaktifitas sedekat mungkin dengan kendaraan yang aslinya, muskipun terkadang kendaraan tersebut masih eksperimen atau bahkan fiktif, tapi ada penekanan khusus pada detil dan pengalaman realistik menggunakan kendaraan tersebut. Terbagi atas beberapa jenis: 

Perang. Video game simulasi kendaraan ini mengajak pemain untuk menaiki kendaraan dan berperang melawan kendaraan lainnya. Dan kebanyakan diantaranya memiliki judul sama dengan nama kendaraannya. Contoh: Apache 64, Comanche, Abrams, YF-23, F-16 fighting eagle.



Balap. Dari namanya sudah jelas, pemain yang mencampai garis finish terlebih dahulu dialah pemenangny. Terkadang malah pemain dapat memilih kendaraan, mendandani, upgrade mesin bahkan mengecatnya. commit to user

9 digilib.uns.ac.id


Contoh: Top Gear, Test Drive, Sega Rally Championship, Daytona, Grand Turismo, Need For Speed, Mario Cart, ManXTT. 

Luar

Angkasa. Jenis

subgenre

ini

memungkinkan

pemain

untuk

menjelajah luar angkasa, berperang dengan mahluk alien, mendarat di planet antah berantah atau sekedar ingin merasakan bagaimana menjadi kapten di film fiksi ilmiah. Contoh: Wing Commander, Freelancer, Star Wars X-Wing, Star Wars Tie Fighter, dll. 

Mecha. Subgenre Simulasi Mecha ini memungkinkan pemainnya untuk mengendalikan robot dan menggunakannya untuk menghancurkan gedung, helikopter dan robot lainnya. Contoh: Mechwarrior, Gundam Last war Chronicles, dan Armored Core.

2.3.2 Edukasi Edugames. Video Game jenis ini dibuat dengan tujuan spesifik sebagai alat pendidikan, entah untuk belajar mengenal warna untuk balita, mengenal huruf dan angka, matematika, sampai belajar bahasa asing. Developer yang membuatnya, harus memperhitungkan berbagai hal agar game ini benar-benar dapat mendidik, menambah pengetahuan dan meningkatkan ketrampilan yang memainkannya. Target segmentasi pemain harus pula disesuaikan dengan tingkat kesulitan dan design visual ataupun animasinya. Contoh edugames: Bobi Bola, Dora the explorer, Petualangan Billy dan Tracy. Puzzle. Video game jenis ini sesuai namanya berintikan mengenai pemecahan teka-teki, baik itu menyusun balok, menyamakan warna bola, memecahkan perhitungan matematika, melewati labirin, sampai mendorong-dorong kota masuk ke tempat yang seharusnya, itu semua termasuk dalam jenis ini. Contohnya adalah: Tetris, Minesweeper, Bejeweled, Sokoban dan Bomberman. 2.3.3 Entertainment Action–Shooting, (tembak-tembakan, atau adu tinju, tergantung cerita dan tokoh di dalamnya), video game jenis ini sangat memerlukan kecepatan refleks, koordinasi mata-tangan, juga timing, inti dari game jenis ini adalah tembak, tembak dan tembak. Termasuk didalam-nya: commit to user  First person shooting (FPS) seperti Counter Strike dan Call of Duty.





Drive n’ shoot, menggunakan unsur simulasi kendaraan tetapi tetap dengan tujuan utama menembak dan menghancurkan lawan, contoh : Spy Hunter, Rock and Roll. Racing, Road Rash.



Shoot em’ up, seperti Raiden, 1942, dan gradius.



Beat ‘em up (tonjok hajar) seperti Double Dragon dan Final Fight, lalu hack and slash(tusuk bebas) seperti Shinobi dan Legend of Kage.



Light gun shooting, yang menggunakan alay yang umumnya berbentuk seperti senjata, seperti Virtua Cop dan Time Crisis.

Fighting (pertarungan) Video game Jenis ini memerlukan kecepatan refleks dan koordinasi mata-tangan, dan inti dari game ini adalah penguasaan jurus (hafal caranya dan lancar mengeksekusinya), Pemain jenis fighting game ini baru teruji kemampuan sesungguhnya dengan melawan pemain lainnya. Seri permainan Street Fighter, Tekken, Mortal Kombat, Soul Calibur dan King of Fighter adalah contohnya. Aksi – Petualangan. Memasuki gua bawah tanah, melompati bebatuan di antara lahar, bergelayutan dari pohon satu ke pohon lain, bergulat dengan ular sambil mencari kunci untuk membuka pintu kuil legendaris, atau sekedar mencari telepon umum untuk mendapatkan misi berikutnya, itulah beberapa dari banyak hal yang karakter pemain harus lakukan dan lalui dalam video game jenis ini. Tomb Rider, Grand Theft Auto, dan Prince of Persia termasuk didalamnya. Petualangan. Bedanya dengan jenis video game aksi-petualangan, refleks dan kelihaian pemain dalam bergerak, berlari, melompat hingga memecut atau menembak tidak diperlukan di sini. Video Game murni petualangan lebih menekankan pada jalan cerita dan kemampuan berpikir pemain dalam menganalisa tempat secara visual, memecahkan teka-teki maupun menyimpulkan rangkaian peristiwa dan percakapan karakter hingga penggunaan benda-benda tepat pada tempat yang tepat. Termasuk didalamnya: 

Petualangan dengan teks atau sistem tunjuk dan klik, contoh: Kings Quest, Space Quest, Heroes Quest, Monkey Island, Sam and Max,



Novel atau film interaktif, seperti game “dating” yang banyak beredar di commit to user jepang, Dragons Lair dan Night Trap.





Run and Jump game, yaitu permainan petualangan klasik 2 Dimensi dengan sudut pandang dari samping. Umumnya mengisahkan pelarian sang tokoh utama untuk menyelamatkan sesuatu. Contoh: Super Mario bros.

Role Playing. Video game jenis ini memiliki penekanan pada tokoh/peran perwakilan pemain di dalam permainan, yang biasanya adalah tokoh utamanya, dimana seiring kita memainkannya, karakter tersebut dapat berubah dan berkembang ke arah yang diinginkan pemain dalam berbagai parameter yang ditentukan dengan naiknya level. Pengembang game Jepang biasanya membuat Role Playing Game (RPG) ke arah cerita linear yang diarahkan seolah karakter kita adalah tokoh dalam cerita itu, seperti Final Fantasy, Dragon Quest dan Xenogears. Sedangkan pengembang game RPG Eropa, cenderung membuat karakter kita bebas memilih jalan cerita sendiri secara non-linear, seperti Ultima, Never Winter Nights, baldurs gate, Elder Scroll, dan Fallout. Olahraga. Singkat padat jelas, bermain sport di PC atau konsol anda. Biasanya permainannya diusahakan serealistik mungkin walau kadang ada yang menambah unsur fiksi seperti NBA JAM. Contohnya pun jelas, Seri Winning Eleven, seri NBA, seri FIFA, John Madden NFL, Lakers vs Celtics, Tony hawk pro skater, dll. Multiplayer Online. Game yang sedang trend di Indonesia bahkan dunia, menjadi salah satu titik balik mengapa dunia game dan internet di Indonesia dapat berkembang. Dan karena dimainkan online dan dengan sistem pembayaran menggunakan voucher, pembajakan sudah tidak menjadi masalah lagi. Game yang dapat dimainkan secara bersamaan oleh lebih dari 2 orang (bahkan dapat mencapai puluhan ribu orang dalam satu waktu) membuat pemain dapat bermain bersama dalam satu dunia virtual dari sekedar chatting hingga membunuh naga bersama teman yang entah bermain di mana. Umumnya permainan tipe ini dimainkan di PC dan bertema RPG, walau ada juga yang bertema music atau action. Contoh: Ragnarok online, O2jam, World of Warcraft, Ayo Dance, Lineage, Rose online.

commit to user



Casual games. Sesuai namanya, game yang casual itu tidak kompleks, mainnya rileks dan sangat mudah untuk dipelajari (bahkan cenderung langsung bisa dimainkan). Jenis ini biasanya memerlukan spesifikasi komputer yang standar pada jamannya dan ukurannya tidak lebih dari 100 MB karena biasanya dapat di download versi demo-nya di website resminya. Genre permainannya biasanya puzzle atau action sederhana dan umumnya dapat dimainkan hanya menggunakan mouse (biasanya game lain menggunakan banyak tombol tergantung game-nya). Contoh: Diner Dash, Sally Salon, Bejeweled, Zuma, Feeding Frenzy, Insaniquarium. (http://www.gamexeon.com/forum/console-game-lounge/57020-jenis-jenis-gamesekitar-kita.html; http://pasarkreasi.com/talk/detail/game/3/buat-video-games-yuk-bag1-jenis-game, 02-06-09)

2.4 Macam-macam Platform Computer Game 2.4.1 Desktop Game Sebuah PC game, juga dikenal sebagai permainan komputer, adalah video game yang dimainkan di komputer pribadi, bukan pada konsol video game atau mesin arcade seperti pada umumnya. Game PC telah berevolusi dari grafis sederhana dan gameplay seperti ”Spacewar!” menjadi berbagai permainan dengan modern dengan tampilan visual yang jauh lebih maju. Game PC diciptakan oleh satu atau lebih pengembang game, dan diterbitkan secara independen atau melalui pihak ketiga penerbit. PC game ini kemudian dapat didistribusikan pada media fisik seperti DVD dan CD, atau secara virtual seperti Internet-download, sehingga dapat disebarkan dengan lebih mudah seperti perangkat lunak pada umumnya, atau melalui jasa pengiriman online seperti Direct2Drive dan Steam. Untuk bisa bermain PC game biasanya memerlukan software khusus di komputer pengguna, seperti generasi tertentu graphics processing unit atau koneksi internet untuk bermain online, meskipun persyaratan sistem bervariasi dari satu permainan ke permainan lain. (Maher, Tom. discusses the effects of computer game addiction on classroom teaching". commit to user dystalk.com)



2.4.2 Mobile Game Mobile game adalah game yang dimainkan pada mobile phone, smartphone, pda, portable computer, laptop, tablet PC, dan berbagai mobile communication device/computer lainnya. Dimana tidak termasuk didalamnya portable game console seperti Nintendo 3DS, PSP ataupun PlayStation Vita. Mobile game

dikembangkan menggunakan berbagai platform dan

teknologi pada OS mobilephone, seperti: Windows Mobile, Palm OS, Symbian, Adobe Flash Lite, NTT DoCoMo 's Doja, Sun 's Java ME, Qualcomm 's BREW, WIPI, Apple IOS, Windows Phone 7, atau Google Android. Java adalah platform yang paling umum digunakan pada mobile game, namun batas kinerjanya tetap tergantung pada penerapan berbagai format biner pada hanphone saat menjalankan permainan yang rumit dan berat. (http://www.gametechnologie.nl/;http://pusindovision.com/index.php?option=com_content&view=article&id=58&Itemid=65;) 2.4.3 Browsers Game Browsers game adalah sebuah permainan komputer yang dimainkan melalui Internet menggunakan web browser. Game browser dapat diciptakan dan dijlankan menggunakan teknologi web standar atau menggunakan plug-in. Game browser mencakup semua genre game baik single-player ataupun multiplayer. Game browser juga portabel dan dapat dimainkan pada perangkat yang berbeda, OS yang berbeda, bahkan web browser yang berbeda. Karena berjalan pada web browser, maka game browser dapat mengambil keuntungan dari teknologi yang berbeda dan dapat tetap berfungsi dengan baik. Teknologi web standar seperti HTML, CSS, dan JavaScript, dapat digunakan untuk membuat game browser. Tetapi ini memiliki tingkat kesuksesan yang terbatas karena masalah kompatibilitas dan kualitas browser. Teknologi ini secara kolektif disebut dynamic HTML, yang memungkinkan permainan untu dapat dijalankan dalam semua standar-compliant browser. (Devin, Pengantar teknologi game. http://torondevin.com; http://www.scribd.com/doc/68479491/5/Pengertian-Game-dan-Game-Online) commit to user



2.5 Konsep dan Komponen dalam Pembuatan Game 2.5.1 Game Engine Sebuah mesin permainan adalah sebuah sistem perangkat lunak yang dirancang untuk penciptaan dan pengembangan video game. Ada banyak mesin permainan yang dirancang untuk bekerja pada konsol video games dan sistem operasi desktop seperti Microsoft Windows, Linux, dan Mac OS X. Fungsional inti biasanya disediakan oleh mesin permainan yang mencakup mesin render ("renderer") untuk 2D atau 3D grafis, physics engine dan collision detection (dan collision response), suara, script, animasi, kecerdasan buatan, jaringan, streaming, manajemen memori, threading, dan scene graph. Proses pengembangan permainan sering dihemat karena sebagian besar permainan menggunakan kembali mesin permainan yang sama untuk menciptakan permainan yang berbeda. Game engine menyediakan tool pengembangan visual dengan tujuan komponen- komponen perangkat lunak tersebut dapat digunakan kembali. Alatalat ini umumnya diberikan dalam sebuah lingkungan pengembangan terintegrasi untuk memungkinkan disederhanakan, perkembangan pesat game di data-cara didorong. Mesin permainan ini kadang-kadang disebut "permainan middleware" karena, seperti bisnis dengan pengertian, mereka menyediakan fleksibel dan dapat digunakan kembali platform perangkat lunak yang menyediakan semua fungsionalitas inti yang diperlukan, langsung dari kotak, untuk mengembangkan suatu aplikasi permainan sambil mengurangi biaya, kompleksitas, dan waktu-kepasar-semua faktor-faktor kritis yang sangat kompetitif industri permainan video. Seperti solusi middleware lain, mesin permainan biasanya menyediakan platform abstraksi, yang memungkinkan permainan yang sama untuk dijalankan pada berbagai platform termasuk game konsol dan komputer pribadi dengan sedikit, jika ada, perubahan yang dibuat untuk permainan kode sumber. Sering kali, permainan middleware dirancang dengan arsitektur berbasis komponen yang memungkinkan sistem tertentu dalam mesin yang akan diganti atau diperpanjang dengan lebih khusus (dan sering kali lebih mahal) komponen middleware seperti fisika Havok, FMOD untuk suara, atau Scaleform untuk UI dan video. Beberapa commit bahkan to user dirancang sebagai serangkaian mesin permainan seperti RenderWare



komponen

terhubung

secara

longgar

middleware

selektif

yang

dapat

dikombinasikan untuk membuat mesin custom, bukan pendekatan yang lebih umum untuk memperpanjang atau menyesuaikan solusi terintegrasi yang fleksibel. Namun kemungkinan diperpanjang tercapai, hal itu tetap menjadi prioritas tinggi dalam permainan mesin karena berbagai menggunakan yang mereka diterapkan. Meskipun kekhasan nama, mesin permainan yang sering digunakan untuk jenis aplikasi interaktif real-time dengan persyaratan grafis seperti pemasaran demo, visualisasi arsitektur, latihan simulasi, dan pemodelan lingkungan. Beberapa mesin permainan hanya menyediakan real-time, bukan kemampuan render 3D dari beragam fungsi yang diperlukan oleh permainan. Mesin ini mengandalkan permainan pengembang untuk melaksanakan seluruh fungsi ini atau merakit dari komponen middleware permainan lainnya. Mesin jenis ini umumnya disebut sebagai "mesin grafis," "mesin rendering," atau "mesin 3D" bukannya yang lebih mencakup istilah "mesin permainan." Namun, terminologi ini tidak konsisten digunakan sebagai banyak fitur lengkap mesin game 3D disebut hanya sebagai "mesin 3D." Beberapa contoh dari mesin grafis adalah: RealmForge, Truevision3D, ogre, Crystal Space, Genesis3D, Irrlicht dan JMonkey Engine. Permainan modern atau mesin grafis umumnya memberikan adegan grafik, yang merupakan berorientasi objek representasi dari dunia permainan 3D yang sering menyederhanakan desain permainan dan dapat digunakan untuk rendering lebih efisien dari dunia maya yang luas. (Jeff

Ward,

04/29/2008,

“What

is

a

Game

Engine?”

http://gamecareerguide.com/features/529/what_is_a_game_.php; Ridyawan, 2009, http://riadyawan.com/2009/11/23/next-gen-game-engine/) 2.5.2 Game Development Tools Sebuah alat pengembang permainan adalah aplikasi/perangkat lunak khusus untuk membantu atau memfasilitasi pembuatan game komputer. Beberapa tugas ditangani oleh alat termasuk konversi aset (seperti 3D modeling, tekstur, dll) ke dalam format yang dibutuhkan oleh permainan, mengedit dan skrip tingkat commit to user kompilasi.



Hampir semua alat-alat pengembangan permainan dikembangkan oleh pengembang kustom untuk satu permainan. Meskipun alat dapat digunakan kembali untuk kemudian permainan, mereka hampir selalu mulai sebagai sumber daya untuk satu permainan. Sementara banyak Cots paket yang digunakan dalam produksi seperti permainan-paket 3D seperti Maya, Blender, dan 3D Studio Max, grafik editor seperti Adobe Photoshop, CorelDraw, Adobe Illustrator. Alat permainan mungkin atau mungkin tidak akan dirilis bersama dengan pertandingan final, tergantung pada apa alat ini digunakan untuk. Untuk permainan kontemporer, biasanya untuk mencakup tingkat setidaknya editor dengan permainan yang membutuhkan mereka. (http://torondevin.com/2010/02/pengantar-teknologi-game-2.html)

2.6 HTML5 HTML5 adalah revisi kelima dari HTML yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997. HTML5 saat ini memang masih dalam tahap pengembangan, namun telah mendukung teknologi multimedia terbaru. HTML5 juga mudah dibaca oleh manusia dan mudah dimengerti oleh mesin. HTML5 sendiri saat ini sudah didukung oleh semua perangkat mobile utama, berdasarkan hal itu pula, Adobe memutuskan untuk tidak lagi mengembangkan Flash di semua gadget Apple mobile, mulai dari iPod, iPhone, hingga iPad, karena HTML5 dianggap sebagai solusi terbaik untuk membuat dan menghadirkan konten browser pada semua platform mobile. HTML5 adalah sebuah prosedur pembuatan tampilan web baru yang merupakan penggabungan antara CSS, HTML sendiri, dan Java Script. Teknologi ini mulai diluncurkan pada tahun 2009, namun sampai saat ini masih dalam tahap pengembangan. Beberapa kelebihan yang dimiliki oleh HTML5 (sebagai hipotesis awal) adalah: •

Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks HTML5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara HTML, css dan java script. commit to user



•

Greater

consistency,

HTML5

telah

melakukan

banyak

sekali

penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web. •

Improved Semantics, dengan berbagai elemen kode di dalam HTML5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”.

•

Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenai halaman web.

•

Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini berada pada sisi client.

•

Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.

•

Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.

•

Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll)

•

Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi. (http://aninditasaktiaji.com/2011/02/kelebihan-html-5.html; commit to user http://www.w3schools.com/html5/; http://w3fools.com/)



2.6.1 HTML5 Canvas Canvas element adalah bagian dari HTML5 dan memungkinkan untuk digunakan secara dinamis, render bentuk 2D berdasarkan script, dan gambar bitmap. Ini adalah low level, procedural model yang meng-update bitmap dan tidak memiliki screne graph yang built-in. Canvas element awalnya diperkenalkan oleh Apple yang digunakan dalam komponen Mac OS X WebKit mereka pada tahun 2004. Yang digunakan untuk menjalankan aplikasi seperti widget Dashboard dan browser Safari. Kemudian, pada tahun 2005 diadopsi dalam versi 1,8 dari browser Gecko, dan Opera pada tahun 2006, dan distandarisasi oleh Web Hypertext Application Technology Working Group (WHATWG) sebagai spesifikasi baru yang diusulkan untuk teknologi web generasi berikutnya. (http://www.w3.org/TR/2010/WD-html5-20100624/the-canvaselement.html)

2.7 Tiled Map Editor Tiled map editor adalah software editor yang bertujuan utama untuk membuat sebuah pemetaan berbasis kotak. TIled map editor dibangun agar memudahkan pengerjaan berbagai game engine, baik itu game RPG, platformer atau breakout clone. Tiled map editor merupakan free software dan dibuat menggunakan C++, menggunakan

fitur

utama

Qt

application

framework

secara

singkat.

(http://www.mapeditor.org/) 2.8 Javascript Game Engine Javascript Game Engine Adalah sebuah javascript query yang memungkinkan kita untuk men-develop sebuah HTML5 Games yang dapat dijalankan pada browser desktop dan mobile. Karena Javascript Game Engine ini sangat ringan mudah digunakan, dan bersifat open-source. Karena beberapa diantara javascript game engine ini memilki demo serta dokumentasi yang baik, maka tak jarang menjadi andalan berbagai game developer. Meski game engine jenis ini kemampuan grafik dan fitur-fiturnya belum bisa commit to namun user dengan JS berbagai hal bisa disetarakan dengan XNA ataupun Unity,



dilakukan. Game engine ini tersedia berbagi jenisnya pada github. (Bebraw, https://github.com/bebraw/jswiki/wiki/Game-Engines; http://craftyjs.com) 2.8.1 MelonJs MelonJS merupakan sebuah simple javascript game engine library yang digunakan untuk mengintegrasi antara Tiled map format dan HTML5 Canvas. Dimana MelonJs ini akan dengan mudah mengakses berbagai gambar pada canvas mengguanakan Tiled map editor, dan memfokuskan pengembangan pada game itu sendiri tanpa perlu menggunakan software geme engine yang berbayar pada umumnya. (http://www.melonjs.org/)

2.9 Adobe Dreamweaver CS5.5 Merupakan sebuah software script editor profesional untuk mendesain secara visual dan mengelola situs web maupun halaman web. Perangkat lunak ini digunakan sebagai script editor dalam pembuatan website dengan menggunakan bahasa pemrograman web PHP, Javascript, dan HTML. (http://www.adobe.com/products/dreamweaver.html)

commit to user


digilib.uns.ac.id

BAB V PENUTUP

5.1 Kesimpulan Permainan ‘Run and Jump’ menggunakan MelonJS dengan memanfaatkan HTML5 Canvas ini telah dibuat sebagai hiburan dan berguna untuk mengasah ketangkasan, ketrampilan, dan refleks. Permainan ini memiliki 5 tingkatan level yang semakin tinggi semakin sulit. 5.2 Saran Saran yang dapat di berikan untuk run and jump game menggunakan HTML5 ini ialah pengembangan permainan yang lebih lengkap dan multiuser, sehingga permaianan dapat dimainkan dengan beberapa orang sekaligus secara bergantian dan dimuat pada sebuah website mobile game tersendiri, seperti tapjs.com, sehingga dapat diakses secara online dan bersamaan.

commit to user

66



DAFTAR PUSTAKA

Alfian, 2011, http://fian-switch.com/2011/02/sejarah-game-komputer.html Andi Martin, 2008, http://biskom.web.id/2008/08/21/andi-martin-pertumbuhangame-lokal-masih-slow.bwi Anonym, 2008, http://gamexeon.com/forum/console-game-lounge/57020-jenisjenis-game-sekitar-kita.html Anonym, 2008, http://cgrg.com/2008/03/12/definisi-computer-game/ Anonym, 2009, http://bahaskomputer.com/2009/05/tahap-pembuatan-game.html Anonym, 2012, http://cliw2012.com/2012/01/melonjs-and-enchantjs-gameengines.html Craig Lloyd. Remains of the Day: Adobe Dropping Flash from Android. JUN 29, 2012. http://lifehacker.com/5922466/remains-of-the-day-adobe-droppingflash-from-android Dan Rowinski, 12-6-2011, “Top 6 Trends In HTML5 In 2011” http://www.readwriteweb.com/archives/top_6_trends_in_html5_in_2011.php

Geryk, Bruce. 2009-01-09, "A History of Real-Time Strategy Games: Part I: 1989–1998". http://gamespot.com/gamespot/features/all/real_time/p2_01.html http://mapeditor.org/ Mark J. P. Wolf (2008). The video game explosion: a history from PONG to Playstation and beyond. ABC-CLIO. p. 103. http://melonjs.org/ Seidelin, Jacob. “Html5 Games: Creating Fun with Html5, Css3, and Webgl” One Morelevel, “HTML5 vs Flash Games”, 2-Feb-2012, http://onemorelevel.com/html-5-vs-flash-games/ commit to user



John P., Mello Jr., 11-11-2011, “What Did Apple Win With the Demise of Mobile Flash?” http://www.technewsworld.com/story/73737.html Jeff Ward, 04-29-2008, “What is a Game Engine?” http://gamecareerguide.com/features/529/what_is_a_game_.php Nindita Saktiaji, 2011, http://aninditasaktiaji.com/2011/02/kelebihan-html-5.html Ridyawan, 2009, http://riadyawan.com/2009/11/23/next-gen-game-engine/ Retno Ayu, 2010, http://retno-ayu-sp.com/2010/03/pengertian-game_23.html Thommy Kennedy, 2009, http://thommykennedy.com/2009/07/29/mari-membuatgame/ Toron Devin, 2010, http://torondevin.com/2010/03/analisis-gameengine.html;http://torondevin.com/2010/02/pengantar-teknologi-game-1.html; http://torondevin.blogspot.com/2010/02/pengantar-teknologi-game-2.html Williams, J. P., & Smith, J. H., eds. (2007). The players' realm: studies on the culture of video games and gaming. Jefferson, N.C.: McFarland & Co.

http://w3.org/TR/2010/WD-html5-20100624/the-canvas-element.html

commit to user

PEMBUATAN RUN AND JUMP GAME MENGGUNAKAN HTML5 CANVAS TUGAS AKHIR

Recommend Documents