commit to user
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
commit to user
commit to user
commit to user
iv
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.
commit to user
v
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.
commit to user
vi
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.”
commit to user
vii
HALAMAN PERSEMBAHAN
commit to user
viii
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
commit to user
ix
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
commit to user
HALAMAN PENGESAHAN ... iii
ABSTRACT ... iv
HALAMAN MOTTO ... vi
HALAMAN PERSEMBAHAN ... vii
commit to user
xi
2.5.3 Browsers Game ... 13
2.5 Konsep dan Komponen dalam Pengembangan Game ... 14
2.5.1 Game Engine ... 14
BAB III ANALISIS KEBUTUHAN DAN PERANCANGAN ... 20
3.1 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.4 Alur Pembuatan Grafik dan Interface Permainan ... 25
3.5 Perancangan Design Karakter ... 25
commit to user
xii
3.7 Perancangan Objek dan Dekorasi Permainan ... 26
3.8 Perancangan TileSet ... 27
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
4.2.2 Pembuatan Karakter Musuh ... 37
4.2.3 Pembuatan Entiti Koin ... 37
commit to user
xiii
4.7 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
commit to user
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-from-android)
Salah satu alasan adobe flash mulai ditinggalkan adalah karena adobe
flash sudah tidak lagi berjalan pada perangkat mobile buatan Apple, yang
commit to user
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
masing-masing 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-Vs-Flash-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
commit to user
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
commit to user
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
commit to user
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
commit to user
3.1.1.1Kebutuhan 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,
commit to user
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.1Kebutuhan 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
commit to user
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.2Langkah 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 dalam
perancangannya. Langkah pengembangan game ini adalah sebagai berikut:
Konsep Pengumpulan
commit to user 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
commit to user
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.3Perancangan 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 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.4Alur 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
Coloring Retouch/Finishing
Gambar 3.2 Alur Perancangan Interface Game
Sketch : Adalah tahap sketsa menggunakan pensil dan kertas.
Rough 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.5Perancangan 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
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
gerakan-gerakan 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
Objek-commit to user
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
commit to user
Gambar 3.8 Perancangan TileSet
3.9Perancangan 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 1Runningman!
Karena masih pada level pertama, maka tingkat kesulitan pada level ini
sangat rendah. Track pada level ini akan dibuat berupa lintasan lurus
naik-turun, tanpa ada halangan seperti jurang dan musuh. Bertujuan untuk
mengarahkan pemain bagaimana cara menggerakkan karakter utama.
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
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
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.
commit to user
Gambar 3.14 Perancangan Halaman intro 2: Built and presented
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.
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
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
commit to user
6
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.1Computer 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 PDFyang 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 gamememiliki 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, gameadalah “Sistem tempat pemain melakukan konflik bohongan,
yang ditentukan oleh aturan, dan memberi hasil terukur”.
Menurut Agustinus Nilwan dalam bukunya “Pemrograman Animasi
commit to user
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
commit to user
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
commit to user
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
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
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,
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-game-sekitar-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 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://pusindo-vision.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;
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.
Alat-alat 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-ke-pasar-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 to user
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
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.6HTML5
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
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 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-canvas-element.html)
2.7Tiled 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.8Javascript 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 user
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.
commit to user
66
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
commit to user
Craig Lloyd. Remains of the Day: Adobe Dropping Flash from Android.JUN 29,
2012. http://lifehacker.com/5922466/remains-of-the-day-adobe-dropping-flash-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,
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-membuat-game/
Toron Devin, 2010,
http://torondevin.com/2010/03/analisis-game-engine.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.
