## PEMBUATAN HTML5 GAME SEBAGAI MEDIA CERITA DAN PENGETAHUAN SEJARAH KEBUDAYAAN KOTA SOLO
Ainurrofiq Alfaiz (rebotak@gmail.com) Didik Nugroho(Didikhoho@gmail.com) Teguh Susyanto (Teguhsusyanto@gmail.com)

## ABSTRAK
Kraton Mangkunegaran Solo merupakan salah satu tempat paling bersejarah di Solo, juga merupakan obyek wisata yang paling banyak dikunjungi oleh wisatawan. Tak kurang dari 10.000 wisatawan  asing  mengunjungi  tempat  ini  setiap  tahun.  Namun,  berbagai  media  konvensional yang digunakan untuk menarik minat wisatawan masih kurang dapat diandalkan karena banyak keterbatasan  interaksi  dan  visualisasi  pada  penyampaiannya.  Sebuah  Mobile  Game  dapat digunakan  sebagai  cara  yang  berbeda  untuk  dapat  menyampaikan  nilai  kebudayaan  kota  solo dan menarik minat wisatawan. Dengan memanfaatkan fungsi komunikasi Game sebagai media naratif,  maka  dapat  dibuat  sebuah  game  yang  memuat  nilai  sejarah.Permainan  2D  Platformer menggunakan  HTML5  Canvas  berjudul  “Petualangan  Pangeran  Sambernyawa”  dikembangkan menggunakan game engine Construct 2. Menggunakan Adobe Photoshop dan CorelDraw untuk pembuatan design karakter, latar belakang, dan tampilan muka permainan. Dan memanfaatkan HTML5 Canvas sebagai display media dan dikonversi menggunakan CocoonJS agar berjalan di platform android.
Kata kunci: Mobile Game,  Pembelajaran, Sejarah,  Kota Solo.

## I.  PENDAHULUAN
Kraton  Mangkunegaran  bukan  hanya merupakan salah satu tempat paling bersejarah  di  kota  Solo,  tetapi  juga  obyek wisatayang  paling  banyak  dikunjungi  oleh wisatawan asing.
Namun  tidak  banyak  warga,  khususnya anak-anak,  Kota  Solo  yang  tahu  jika  Raden Mas  Said  alias  Pangeran  Sambernyawa, pendiri  Praja  Mangkunegaran,  merupakan salah  satu  Pahlawan  Nasional  Indonesia. Berbagai  media  dan  iklan  konvensional selama  ini  telah  digunakan  untuk  menarik minat  wisatawan,  namun  masih  kurang  dapat diandalkan.
Game merupakan media hiburan dengan pertumbuhan  paling  tinggi  di  antara  media audio  visual  lainnya  seperti  musik,  TV,  dan film.  Game  tidak  hanya  berfungsi  sebagai media  hibura,  namun  juga  memiliki  fungsi komunikasi dan media naratif. Dengan memanfaatkan  fungsi  game  sebagai  media edukasi,  maka  membuat  sebuah  game  yang mempelajari  sejarah  dengan  cerita,  concept art,  karakter,  dan  environment  yang  memuat informasi  budaya  Indonesia  diharapkan  dapat menjadi  sebuah  cara  yang  berbeda  dan menarik  untuk  dapat  menyampaikan  nilai sejarah kebudayaan Solo.
Tujuan  dari  penelitian  ini  adalah  untuk menemukan  keterkaitan  permainan  sebagai
media  pembelajaran  anak  tentang  sejarah Praja Mangkunegaran.

## II.  METODOLOGI  PENELITIAN 2.1. Metode Pendekatan
Anak-anak  Indonesia  dapat  mengetahui banyak hal tentang budaya dari luar Indonesia salah satunya melalui game sebagai medianya. Awal mula booming budaya jepang di  Indonesia  juga  dimulai  dari  game  dan  film kartun jepang.
Maka ketika penyebaran game serta film kartun  jepang  mejadi  pesat,  begitu  juga dengan  informasi-informasi  yang  terkandung didalamnya.  Kemudian  ketertarikan  mereka terhadap jepang tidak berhenti dilingkup game dan film kartun, tetapi merambah terhadap hal- hal  yang  umun  di  jepang  seperti  cara berpakaian,  bahasa,  seni  budaya,  kuliner, serta sejarah negaranya.
Ketertarikan-ketertarikan  yang  terhadap sejarah  dan  kebudayaan  tersebut  dapat dimulai  dari  hal  kecil  yang  bersinggungan dengan media seperti game, musik, dan film.
Menggunakan metode yang sama, budaya Indonesia dapat dikemas dalam media game  untuk  memulai  momentum  yang  akan menghasilkan  pemahaman,  apresiasi,  dan rasa  memiliki  terhadap  sejarah  dan  budaya Indonesia.
Guna  memenuhi  fungsi  itu  maka  dibuat sebuah  game  dengan  cerita,  concept  art karakter&environment  game  dengan  latar sejarah Praja Mangkunegaran dan perjuangan Raden Mas Said melawan penjajahan.
Dengan  demikian  game  tidak  hanya berfungsi  sebagai  media  bersenang-senang tetapi  juga  sebagai  media  komunikasi  yang memperkenalkan  cerita  sejarah  Indonesia yang telah dikemas di dalamnya.
Sehingga game ini pun dapat menciptakan ketertarikan  pemainnya  terhadap Kota  Solo  yang  akan  mejadi  penarik  minat berwisata.
Permainan 2D Platfomer berjudul “Petualangan  Pangeran  Sambernyawa”  akan dibuat  menggunakan  software  Construct  2, sebagai  game  engine;  CorelDRAW  X7, sebagai  pengolah  grafik  untuk  membuat berbagai  graphic  asset  pada  permainan;  dan Adobe  Photoshop  CS6,  untuk  visual  finishing asset-asset gambar yang telah dibuat 2.2. Metode Pembuatan
Adapun  tahapan  pembuatannyaadalah sebagai berikut:
1.  Konsep Permainan
Langkah  pertama  dari  pembuatan  game ini  adalah  menentukan  konsep  permainan yang  akan  dibuat.  Konsep  permainan  ini meliputi  gameplay,  target  audiens,  framework yang digunakan, dan kontrol permainan. 2.  Pengumpulan Materi
Diperlukan  berbagai  materi  awal  dan bahan mentah untuk membuat sebuah game.Yang nantinya dapat digunakan sebagai acaun  kemudian  diolah, dan digunakan dalam pembuatan pemainan.
3.  Pembuatan asset gambar
Pembuatan  komponen  gambar  pada game  meliputi  berbagai  macam  objek  yang ada  dalam  permainan.Contohnya  adalah: Karakter  utama,  musuh,  sprite  animasi  per- frame  dari  karakter  utama  dan  musuh, interface  game,  halaman  menu,  halaman instruksi,  serta  pepohonan,  dan  objek-objek lain sebagai latar belakang.
4.  Tahap Pembuatan Pembuatan game menggunakan software  construct  2  dimulai  dari  menata layout  dasar  setiap  state  pada  permainan, seperti  main  menu,  instruction  page,  credits page, dan scene utama yang berisi permainan 2D platformer.
5.  Uji Coba Setelah selsai dibuat dan dapat dijalankan,  permainan  akan  diuji  coba.  Tahap
uji  coba  pada  permainan  ini  akan  dilakukan pada berbagai jenis device android.
6.  Evaluasi Evaluasi yang digunakan terhadap permainan akan menggunakan evaluasi dengan  skala  likert.  Di  mana  evaluasi digunakan  untuk  mengukur  sikap,  pendapat dan  persepsi  seseorang  atau  sekelompok tentang  kejadian  atau  gejala  sosial  dengan tingkatan tertentu.
7.  Hasil
Setelah  dilakukan  evaluasi  dari  hasil pembuatan  game  yang  sesuai  dengan  alur pembuatan secara keseluruhan, maka didapatkan  sebuah  Android  Game  dengan judul “Petualangan Pangeran Sambernyawa”.

## 2.3. Metode Implementasi
Implementasi dilakuan dengan cara mendistibusikan  Android  Application  Package (APK)  atau  paket  instalasi  via  Bluetooth. Penerima  kemudian  melakukan  instalasi  APK ke  smartphone  android.  Selain  itu  APK  dapat di-upload  ke  G-drive/Dropbox,  kemudian  link diberikan  kepada  user  melalui  media  sosial. Atau  dapat  juga  dipasarkan  melalui  Google PlayStore.

## III. TINJAUAN PUSTAKA

## 3.1  Mobile Game
Game berasal  dari  kata  bahasa  inggris yang berarti „permainan‟. Permainan dalam hal ini  merujuk  pada  pengertian  kelincahan intelektual  yang  juga  bisa  diartikan  sebagai arena keputusan dan aksi pemainnya.[1]
Menurut    Roger  Caillois  (1961),  seorang sosiolog Prancis, 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).[2]
Sedangkan mobile game sendiri adalah computer  game yang  dimainkan  khusus untuk  mobile  phone,  termasuk  di  dalamnya smartphone, iPod, dan tablet.
3.2  HTML5 HTML5 adalah versi terbaru dari HyperText  Markup  Language.HTML5.  HTML
pertama  kali  dijadikan  standarisasi  sebagai bahasa  yang  digunakan  untuk  halaman  web pada 1993. HTML menggunakan tag <> dalam mendefinisikan  fungsi  dan  konten  halaman web.
HTML5  Canvas  adalah  bagian  pada HTML5  yang  merupakan  bitmapped  area  dan dapat  dimanipulasi  dengan  menggunakan JavaScript.HTML5  Canvas  dapat  digunakan untuk mengolah dan menampilkan data dalam bentuk grafik pada HTML.[3]

## 3.3  Game Engine
Game  Engine  adalah  sebuah  sistem perangkat lunak yang dirancang untuk membuat  dan  mengembangkan  video  game. Ada  banyak  mesin  permainan  yang  dirancang untuk  bekerja  pada  konsol  video  games  dan sistem  operasi  desktop  seperti  Microsoft Windows, Linux, dan OS X. Fungsi utama dari game  engine  umumnya  mencakup:  renderer untuk  grafik  2D  atau  3D,  physics  engine, collision  detection,  collision  response,  suara, script,  animasi,  kecerdasan  buatan,  jaringan, streaming, manajemen memori, threading, dan scene graph. [4]

## IV. HASIL DAN PEMBAHASAN 4.1 Konsep Permainan
Permainan  ini  dibuat  dengan  tujuan pembelajaran  sejarah  dan  digunakan  sebagai media cerita,  maka pada setiap level permainan akan menggunakan storyline berdasarkan sejarah terbentuknya Praja Mangkunegaran.
Untuk  memperjelas  sejarah  perjuangan yang  terjadi,  maka  dibuat  sebuah  misi  untuk mengumpulkan object berupa lembaran- lembaran  kertas  perjanjian  Salatiga,  yaitu perjanjian  yang  menyatakan  berdirinya  Praja Mangkunegaran.
Di  dalam  permainan,  lembaran  yang dikumpulkan karakter utama ini akan menyampaikan  kisah  sejarah  pada  setiap levelnya.  Dengan  aturan  penyampain  cerita sebagai berikut:
-  Setiap  level  memiliki  latar  belakang cerita  yang  berbeda,  maka  concept  art  pada permainan pun harus berbeda setiap levelnya.
- Setiap level terdapat berberapa collectable  object  berupa  lembaran-lembaran perjanjian Salatiga.
-  Collectable  object  digunakan  sebagai trigger munculnya storyText pada permainan.
-  StoryText  berisi  semua  cerita  sejarah yang digunakan pada permainan.
-  Setelah  StoryText  diambil,  maka  score pemain akan bertambah.

## Gambar. 1. Penyampaian cerita

## 4.2 Storyline
Karena  permainan  dibuat  dengan  tujuan pembelajaran  sejarah  dan  digunakan  sebagai media cerita,  maka pada setiap level permainan akan menggunakan storyline berdasarkan sejarah
lahirnya Praja
Mangkunegaran.  Storyline  yang  digunakan adalah berikut:

## 1.  Level Pertama
Level pertama bercerita tentang pelarian yang  dilakukan  Raden  Mas  Said  yang  terjadi pada  tahun  1471  ketika  ia  berusia  16  tahun. Pelarian  ini  disebabkan  karena  Sebagai Pewaris  tahta  yang  sah  ia  diintai  banyak bahaya  dari  pihak  pamannya  sendiri,  yaitu Mangkubumi.  Maka  Ia  pun  melarikan  diri meninggalkan kraton ketika terjadi pemberontakan rakyat untuk menyerang Kraton Kartasura yang berpihak pada Belanda.
Pada  level  ini  latar  belakang  arena  berupa padang  rumput,  dengan  musuh  hewan-hewan liar.  Tingkat  kesulitan  arena  pun  masih tergolong mudah.
2. Level Kedua Perang  besar  R.M.  Said  yang  pertama terjadi  pada  tahun  1752M  di  desa  Kasatriyan. Level  kedua  ini  menceritakan  perang  di  Desa Kasatrian,  Ponorogo.  Desa  ini  terbakar  habis karena  pemberontakan  melawan  Pasukan Mangkubumi.  Pada  perang  ini  R.M.  Said mengalahkan  ratusan  pasukan  Mangkubumi. Mengambil alih Desa Kasatriyan serta menjadikannya sebagai markas pasukkannya.
Pemain  akan  dihadapkan  dengan  latar belakang  arena  berupa  pedesaan  yang  telah terbakar  habis  dan  musuh  berupa  pasukan Kraton dari Mangkubumi.
3. Level Ketiga Level  ketiga  menceritakan  perang  besar kedua  yang  dihadapi  Raden  Mas  Said. Pangeran  Sambernyawa  mengalahkan  dua detasemen  VOC  sekaligus.  Perang  ini  terjadi di  hutan  Sitakepyak,  sebelah  selatan  Kota Rembang pada tahun 1756 dan
mengakibatkan  korban  yang  begitu  besar  di
pihak  Belanda.  Kapten  Van  Der  Pool  dan Kapten  Beiman,  pemimpin  pasukan  Belanda, mati di tangan Pangeran Sambernyawa.
Latar  belakang  permainan  berupa  hutan pada  malam  hari  dan  musuh  berupa  Pasukan VOC Belanda.
4. Level Keempat
Perang  terakhir  yang  dihadapi  Raden Mas Said terjadi pada tahun 1757M. Peristiwa ini  dipicu  oleh  kekalutan  tentara  VOC  yang mengejar  Mangkunegara  sambil  membakar dan  menjarah  harta  benda  penduduk  desa. Mangkunegoro murka  dan  ia  balik  menyerang pasukan VOC dan Mataram. Setelah memancung kepala Patih Joyosudirgo,
Mangkunegara  membawa  pasukannya  untuk menyerang  Benteng  Vredeburg  dan  Keraton Yogyakarta. Latar belakang permainan berupa Benteng  Vredeburg  pada  malam  hari  dan musuh berupa Pasukan gabungan antara VOC Belanda dan Kraton Jogjakarta.

## 4.3 Flowchart Permainan
Start Switch Splash screen Menu Utama Start How To About Quit Game Intro Tutorial About Quit Game Tampilan Tutorial Ke Menu End Tdk Tampilan About Game Ke Menu Tdk Memainkan Permainan End Tampilan Game Over Kalah Main Lagi? Tdk Ya Tampilan Game Ending Menang
Gambar. 2. Penyampaian cerita

## 4.4 Karakter Utama
Karakter  yang  akan  digunakan  disini adalah  seorang  Pangeran  bernama  Raden Mas Said, yang dikisahkan memimpin
berbagai  peperangan  melawan  belanda  di berbagai penjuru Karesidenan Surakarta.
Berikut  adalah  proses  pembuatan  dari karakter Raden Mas Said yang akan digunakan  pada  permainan  ketika  tampak depan:
Gambar. 3. Karakter Utama Permainan

## 4.5 Karakter Musuh
Karakter musuh dalam permainan memiliki beberapa variasi, antara lain: seorang tentara, hewan-hewan liar, dan prajurit kerajaan musuh.
Gambar. 4. Karakter Musuh Permainan

## 4.6 Spritesheet Animation
Sprite  animation adalah  sebuah  animasi yang  menggunakan  gambar  berupa  objek tunggal  yang  berbeda  di  setiap  frame-nya tanpa  latar  belakang.  Sehingga  ketika  sebuah gambar diputarsecara berurutan akan menghasilkan  animasi.  Sedangkan  sprite sheet  adalah  kumpulan  beberapa  sprite  yang digunakan dalam animasi.
Berikut  ini  adalah  frame-frame  animasi yang digunakan pada playerAnimator:
Jump: Idle: Walk: Falling:
Gambar 5. Spritesheet Karakter Utama

## 4.7 Layout Permainan
Dalam  pembuatannya  setiap  layout terdapat  sekitar  6-10  layer.  Layer-layer  ini merupakan kombinasi dari 3 komponen utama penyusun permainan.
Ketiga komponen tersebut adalah:
- Layer Touch (1 Layer)
Berisi  tombol-tombol  control  permainan.
Layer terletak pada lapisan paling atas.
- Layer Interface (1 Layer)
Berisi user  interface dan storyText .  Layer terletak  pada  lapisan  ke-dua,  di  bawah layer Touch.
- Main (1 Layer)
Layer utama dari permainan, berisi semua elemen permainan. Seperti karakter
utama,  musuh  dan  rintangan.  Terletak  di antara layer Interface dan layer background. - Background (3-5 Layer) Berisi background
permainan.
Membutuhkan  lebih  dari  1  layer  dengan tujuan  untuk  menciptakan  efek parallax pada permainan. Efek parallax adalah ilusi visual  yang  membuat  sebuah  objek  pada background  bergerak  dengan  kecepatan berbeda-beda,  tergantung  jarak  objek dengan  kamera.  Layer  ini  terletak  pada lapisan paling bawah layout.
Pada  level  pertama  pemain  dihadapkan dengan  arena  berupa  padang  rumput  dan pepohonan. Menceritakan tentang masa kanak-kanak  raden  mas  Said  di  tempat pengasingan.
Gambar. 6. Level Pertama
Level kedua menceritakan perang pertama  yang  dihadapi  Radjen  Mas  Said, arena  berupa  sebuah  desa  yang  terbakar. Untuk  mengesankan  sebuah  peperangan, arena dibuat menggunakan kombinasi berbagai  Object  Type  yang  berkesan  gelap, mencekam,  dan  dramatis.  Api,  asap,  dan rumah-rumah yang hancur terbakar menghiasi layout.
Gambar. 7. Level Kedua
Level ketiga menceritakan tentang
perang  besar  kedua  yang  dihadapi  Pangeran Sambernyawa.Background berupa sebuah
hutan  rimbun  dan  gelap.  Pepohonan  yang rindang  menjadi  latar  belakang  utama  dari layout ini
Gambar. 8. Level Ketiga
Level  terakhir  pada  permainan  ini menceritakan  tentang  penyerbuan  ke  benteng Vredeburg dan Kraton Yogyakarta.Background pada  level  terakhir  adalah  sebuah  benteng Vredeburg,  lengkap  dengan  pepohonan  dan lampu-lampu  jalanan  pada  zaman  dahulu. Musuh juga disebar di berbagai penjuru arena permainan untuk memberikan tingkat kesulitan tertinggi.
Gambar 9. Level Keempat

## 4.8 Pengujian
Pengujian  dengan  skala  likert  dilakukan terhadap  pengguna  dengan  menggunakan survey (kuisioner). Untuk
mengetahui tanggapan  dan  penilaian  pengguna  terhadap aplikasi ini.
Setelah  dihitung  nilai  kuisioner  per-poin, kemudian  diambil  rata-rata  nilai  dari  hasil bobot kuisioner. Dengan pengecualian pertanyaan  kuisioner  nomer  satu,  karena pertanyaan  tidak  berkaitan  dengan  aplikasi yang  sedang  diteliti.  Maka,  didapatkan  hasil dalam tabel berikut:
Tabel 4.1 Tabel Hasil Kuisioner
No Pertanyaan Nilai  Persen 1 Pengunjung butuh alternative media penyampaian cerita selain buku dan brosur 3.4 85% 2 Media game lebih menarik  dan  asik  bagi pengunjung untuk memahami sejarah yang ada 3.5 87.5% 3 Infromasi yang ada dalam  permainan  sudah mudah dimengerti 3.3 82.5%
No Pertanyaan Nilai  Persen 4 Permainan sudah mudah  digunakan  oleh orang awam 3.2 80% 5 Karena menggunakan game,  pengunjung  jadi lebih tertarik untuk mengetahui sejarah yang ada 3.6 90% 6 Karena  game  termasuk media  informasi  digital, maka lebih mudah didistribusikan  daripada media cetak 2.8 70% 7 Aplikasi multi media lebih mendorong promosi? 3.5 87.5% 8 Responden menyukai game  sebagai  media cerita alternative? 3.3 82.5% Rata-Rata 3.33  83.13%
Setelah  didapatkan  nilai  rata-rata,  maka dapat disimpulkan bahwa menurut perhitungan diatas  permainan  ini  telah  memenuhi  target penulis. Yaitu: Game dapat digunakan sebagai media  cerita  sejarah  alternative. Karena  hasil kuisioner  memiliki  nilai  3.33  dari  target skalanya adalah 3 (Baik).

## V. PENUTUP

## 5.1  Kesimpulan
Berdasarkan  hasil  implementasi  dan pengujian  permainan  secara  analisa  data menggunakan  pre-test  dan  post-test  terhadap pemain,  maka  permainan  “Petualangan Pangeran Sambernyawa” yang dibuat sebagai media  penyampaian  cerita  sejarah,  penulis mengambil kesimpulan sebagai berikut:
- Telah  dibuat  sebuah  permainan  2D platformer berjudul
“Petualangan
Pangeran Sambernyawa”.
- Berdasarkan  hasil  pengujian  permainan kepada  responden  berupa  anak-anak dengan  umur  14  tahun  atau  lebih,  82.5% responden  menyatakan  menyukai  game sebagai media cerita alternative.
- Berdasarkan hasil kuisioner menggunakan skala likert kepada responden, permainan “Petualangan  Pangeran  Sambernyawa” dapat  digunakan  sebagai  media  cerita sejarah  alternatif  dengan  hasil  kuisioner memiliki  score  3.33  dari  target  skalanya adalah 3 (Baik).

## 5.2  Saran
Saran  yang  dapat  diberikan  untuk  run and jump game menggunakan HTML5 ini ialah pengembangan  fitur  permainan  yang  lebih lengkap,  seperti  senjata, life  limit , multi-player scoring ,  dan  menggunakan  background  story dari  sejarah-sejarah  kerajaan  lain,  sehingga permaianan  dapat  dibuat  sekuelnya  dan dimainkan dengan lebih menantang.

## DAFTAR PUSTAKA
[1]  The DICT Development Group. 2014.
[2]  Mark Overmars. 2007. Designing Good Game.
[3]  Steve  &  Jeff  Fulton.  2013.  HTML5 Canvas. O‟Reilly. CA, USA.
[4]  Jeff  Ward.  2008.  What  is  a  Game Engine.http://www.gamecareerguide.co m/features/529/what_is_a_game_.php BritishLibraryCataloguing-in-
PublicationData. USA.