Anda di halaman 1dari 17

Membuat Game Android Mudah dengan

Intel XDK dan Construct 2

Kamu punya ide game yang sudah lama ingin kamu realisasikan? Atau Kamu adalah penikmat
game dan masih penasaran pingin bikin game buatanmu sendiri? Dan, ngomong-ngomong, ada
yang udah kenal dengan Intel XDK?

Oke, mungkin Kamu pernah bikin game, tapi cuma game HTML atau game PC. Jangan bilang
'cuma', karena itu adalah prestasi yang pantas disyukuri. Tapi sekarang mungkin 'gengsi'nya
beralih dari game PC menuju game mobile, karena kita lihat sendiri jumlah pemilik smartphone
jauh lebih banyak ketimbang komputer. Orang yang ga punya komputer masih boleh jadi punya
smartphone. Sebuah riset yang dilakukan oleh eMarketer menyebutkan bahwa pengguna
smartphone di Indonesia pada tahun 2015 mencapai 52,2 juta jiwa, dan pada tahun 2018
diperkirakan akan mencapai 103 juta jiwa, hampir setengah dari populasi penduduk. Pada artikel
insight CodePolitan terdahulu yang berjudul Kategori Aplikasi Mobile yang Paling Populer
Dibuat Developer Indonesia, kita juga melihat bahwa pada bulan Januari 2016 diketahui ada
sekitar 3,79 milyar pengguna mobile. Dan diantara jenis aplikasi yang ada, game adalah jenis
aplikasi yang paling populer dibuat oleh developer di Indonesia.

Titik berat yang akan dibahas pada tutorial ini adalah tentang bagaimana membangun game
HTML menggunakan game engine Construct 2 dan bagaimana mengkonversi game HTML
kita ke dalam bentuk Android package (.apk) menggunakan Intel XDK. Kamu dapat
membuat game HTML menggunakan game engine atau game framework lain yang lebih expert
seperti Cocos2D, Pixi.js dan Phaser, dan kemudian mengkoversinya ke dalam bentuk apk
menggunakan Intel XDK. Tapi pada tutorial ini kita akan menggunakan Construct 2 karena game
engine ini sangat mudah digunakan, dan hampir tanpa memerlukan scripting dalam proses
pembuatan gamenya.

Setelah menyelesaikan tutorial ini, Kamu akan punya satu buah game Android buatanmu
sendiri, yang dapat Kamu kembangkan agar menjadi lebih indah dan asyik. Selain itu Kamu juga
akan punya gambaran umum dalam membangun sebuah game yang dapat kamu terapkan untuk
merealisasikan ide gamemu sendiri. Dengan mengikuti tutorial ini diharapkan Kamu dapat
mengalami dan meyakini bahwa membuat game Android itu tidak sesulit yang terbayang (karena
mungkin belum kebayang). Dari titik ini mudah-mudahan Kamu tergerak untuk menjadi bagian
dari pemain di negeri sendiri, tidak hanya sekedar penikmat dan konsumen. :)

Ok, mari kita mulai!

Mengunduh, Menginstal dan Registrasi Intel XDK


Intel XDK adalah developer tool yang dibangun oleh Intel dalam program Intel Developer
Zone untuk mendukung developer dalam mengembangkan aplikasi mulai dari tahap desain
hingga rilis di berbagai application store. Intel XDK sudah dilengkapi dengan Brackets code
editor untuk menulis kode program, emulator untuk mensimulasikan tampilan aplikasi, testing
langsung ke gadget yang ditargetkan untuk export, debugging, proses build ke target package
hingga publish ke app store yang diinginkan seperti Google Play, Amazon Store dan Apple App
Store. Selain itu Intel XDK dibangun menggunakan node-webkit sehingga bersifat cross
platform, dapat diinstal di berbagai OS seperti Windows, MacOS dan Linux distro.

Mengapa Menggunakan Intel XDK?

Kamu sudah baca tutorial Membuat Aplikasi Android Berbasis HTML5 dengan Cordova? Kita
tahu teknologi HTML5 sekarang semakin berkembang dan disinyalir akan menjadi teknologi
utama di masa depan karena dari satu basis kode program kita dapat membuat aplikasi untuk
berbagai platform. Salah satu kelebihan hybrid app adalah kita dapat membuat satu program
dengan satu kode sumber untuk deploy ke banyak platform seperti iOS, Android dan Windows
Store. Dan Cordova memegang peranan itu.

Tapi seperti kita lihat, untuk dapat menggunakan Cordova kita harus menginstal beberapa
dependensi aplikasi, seperti Java Development Kit, Apache Ant, Android SDK. Cukup banyak
dan lumayan menguras resource komputermu. Nah, dengan menggunakan Intel XDK, kita hanya
perlu menginstal satu aplikasi ini, dan sisanya akan ditangani oleh resource milik Intel.
Sederhananya, kita tinggal membuat aplikasi HTML kita, dan kita akan menyuruh mesin cloud
Intel untuk membuild source code HTML kita menjadi package android atau iOS. Cuma satu
saja modalnya, koneksi internet. Karena kita harus mengunggah source code kita ke server Intel
melalui Intel XDK dan hasil packagenya akan disediakan oleh Intel untuk kemudian kita unduh.
Untuk itu mari kita unduh terlebih dahulu Intel XDKnya.

Unduh dan Install Intel XDK


Silakan unduh terlebih dahulu Intel XDK pada halaman Intel XDK. Pada bagian Free Download
di sebelah kanan halaman, klik tombol Download for Windows. Ada beberapa pilihan
download aplikasi berdasarkan tipe OS yang digunakan, tapi karena kita akan membuat game
menggunakan Construct 2 yang mana untuk saat ini baru dapat berjalan di platform Windows,
maka kita juga akan menginstal Intel XDK untuk Windows. Setelah selesai mengunduh Intel
XDK, silakan instal di komputermu dengan mengikuti langkah-langkah instalasi yang sudah
tersedia pada installer.

Registrasi Intel Developer Zone

Untuk dapat menggunakan Intel XDK, kita harus login terlebih dahulu sebagai Intel User. Buat
Kamu yang belum punya akun Intel Developer, silakan registrasi dahulu dengan mengklik
tautan ini https://software.intel.com/registration</a>. User ID adalah username yang akan kita
gunakan untuk login ke Intel XDK. Setelah form registrasi disubmit, intel akan mengirimkan
tautan verifikasi ke email Kamu. Verifikasi emailmu dan Kamu siap menggunakan Intel XDK.
Buka aplikasi Intel XDK di komputermu dan login dengan menggunakan akun Intel yang sudah
Kamu buat.

Unduh dan Install Construct 2


Construct 2 adalah game engine untuk membuat game HTML5 tanpa memerlukan keahlian
ngoding/scripting. Kita tetap menuliskan kode program untuk membangun logika pada game tapi
kode program ditulis dengan menggunakan pemrograman visual / visual programming. Seperti
kita ketahui, HTML5 kini menjadi trend untuk pemrograman multiplatform karena
bermunculan program-program yang dapat membinding aplikasi HTML5 agar dapat berjalan
pada platform lain seperti node-webkit dan electron untuk desktop app, Apache Cordova untuk
mobile app, WinJS untuk Windows app, dan bahkan kini platform game console seperti Xbox
One dan PS4 pun memungkinkan untuk dapat memainkan game HTML5. Sekali lagi, dari sisi
bisnis ini adalah peluang kemaslahatan untuk developer game dan juga developer web hehe..

Ok. Sekarang download terlebih dahulu Construct 2 pada tautan


berikut https://www.scirra.com/construct2</a>, kemudian instal. Pada dasarnya saat kita
menginstal Construct 2 di komputer kita, versi yang berjalan adalah versi free, yang mana
memiliki beberapa keterbatasan seperti maksimum penggunaan 4 layer, 100 event, 2 effect serta
beberapa batasan fitur seperti tidak dapat search event, tidak dapat menggunakan fitur object
family, tidak dapat instant preview melalui jaringan wifi dan tidak dapat menonaktifkan
attribution (logo construct 2 pada spash screen game). Selain itu pada versi free juga kita tidak
boleh menggunakan hasil produk untuk kebutuhan komersialisasi, serta pilihan ekspor game
yang terbatas hanya ke dalam bentuk HTML5 game. Itu artinya pada versi free ini, fitur ekspor
ke Cordova dinonaktifkan. Untuk mengaktifkan fitur-fitur yang didisable, kita harus membeli
lisensi personal atau lisensi bisnis.Tapi khusus pada tutorial kali ini, kita akan coba 'paksa' game
hasil ekspor ke HTML5 kita agar dapat berjalan di Android. Sekedar info, setelah saya selidiki,
baik ekspor ke HTML5 maupun ke Cordova, output akhirnya sama yaitu source code HTML5.
Hanya saja bila kita ekspor ke Cordova ada beberapa file konfigurasi untuk cordova yang sudah
dibuatkan oleh Construct 2 dan juga beberapa baris kode yang khusus agar dapat berjalan mulus
pada mobile. Selebihnya seperti logika game pada script utama hasilnya sama. Saya
belum menemukan boleh jadi ada perbedaan kode pada saat kita menggunakan objek khusus
yang berkaitan langsung dengan platform seperti akses Game Center pada iOS menggunakan
Cordova API dan akses fitur spesifik pada Windows 8, tapi sejauh pengembangan modul tutorial
ini, semuanya berjalan lancar dan mulusss.

But wait! Kecuali Kamu punya lisensi personal atau bisnis, Kamu tidak boleh menggunakan
game hasil dari pembuatan dengan menggunakan edisi free ini untuk keperluan komersial,
seperti mempublikasikan game di app store dengan berbayar, menggunakannya pada project
komersial atau menambahkan iklan yang dapat menghasilkan revenue. Lebih lengkapnya terkait
apa yang boleh dan tidak boleh dilakukan dengan lisensi free ini, dapat Kamu lihat pada
halaman https://www.scirra.com/store/licensing#license2</a>.

Anyway, tidak ada salahnya mencoba membuat game menggunakan lisensi free ini. Kalo nanti
dari sini Kamu ternyata bisa membuat game yang berpotensi menghasilkan keuntungan, Kamu
bisa modal untuk beli lisensi personalnya dan mudah-mudahan dari situ Kamu bisa mendapat
keuntungan yang lebih baik. So, ayo kita belajar dulu. :)

Skenario Game
Kali ini kita akan mencoba membuat game sederhana infinite jumping seperti Doodle Jump.
Game ini memiliki tokoh yang terus menerus melompat ke atas setiap kali mendarat di pijakan.
Game berakhir ketika si tokoh tidak dapat mendarat di pijakan. Skor dihitung dari banyaknya
pijakan yang terlewati.

Saya sudah siapkan asset yang akan kita gunakan pada tutorial ini. Silakan download pada link
berikut tutorial-game-assets.zip. Hasil akhir dari game yang akan kita buat akan tampak seperti
gambar berikut:Pada gambar di atas, kita dapat lihat ada beberapa objek yang akan kita
masukkan ke dalam game, diantaranya tokoh, pijakan, background, awan, tombol kiri-kanan, dan
skor. Setelah game ini diekspor ke dalam bentuk aplikasi Android, user dapat mengontrol
gerakan tokoh ke kiri dan ke kanan dengan menggunakan tombol kiri-kanan. Setiap kali tokoh
mendarat di pijakan, maka dia akan langsung meloncat naik dan harus mendarat lagi di pijakan.
Pijakan memiliki 3 variasi ukuran, yaitu pijakan panjang, sedang dan pendek. Setiap pijakan
yang berhasil dilalui akan ditambahkan ke dalam hitungan skor. Bila tokoh tidak dapat mendarat
di pijakan, maka game berakhir.

Kita akan batasi variasi game sampai situ agar tutorialnya tidak terlalu panjang. Setelah Kamu
menyelesaikan tutorial ini, Kamu bisa menambahkan sendiri variasi dan detail lain pada game
seperti menambahkan tembakan, tokoh antagonis, skor tambahan, variasi background dan lain
sebagainya.

Memulai Membuat Project

Kamu dapat mengakses template game infinite jumping seperti ini pada saat membuat project
baru di Construct 2. Tapi untuk kali ini mari kita membuat game dari nol. Buka aplikasi
Construct 2 lalu pilih menu File > New, dan pilih New empty project. Maka akan
muncul halaman awal yang masih kosong untuk membuat game.
Pada bagian Projects di sebelah kanan aplikasi Construct 2, klik folder New Project*.
Kemudian pada bagian Properties di sebelah kiri, ganti beberapa properti seperti berikut,
sesuaikan dengan keinginanmu:

Name: Infinite Jumping Description: Game hasil tutorial Intel XDK ID:
com.codepolitan.infinitejumping Author: Toni Haryanto Website: https://www.codepolitan.com
Window Size: 320, 480 Fullscreen in browser: Crop Orientations: Portrait

Kemudian pilih Layouts/Layout 1 pada bagian Projects, lalu di bagian Propertiesnya set
properti Layout Size ke 320, 480, dan set properti Unbounded Scrolling menjadi Yes. Kalo
semua pengaturan awal sesuai, ruang kerja Construct 2 akan tampil seperti ini:

Klik menu File > Save, lalu pilih folder dan beri nama untuk menyimpan project.

Memasukkan Asset Gambar


Sekarang kita masukkan satu per satu asset gambar ke dalam ruang kerja Construct 2.

Menambahkan Latar Belakang

Pada bagian Layout, klik kanan lalu pilih menu Insert New Object untuk menambahkan objek
baru pada layout. Pada Jendela Insert New Object pilih object Tiled Background, kemudian klik
tombol Insert dan klik pada area layout untuk menyimpan objek. Akan muncul jendela Edit
Image untuk mengatur gambar background.

Pada toolbar Edit Image, pilih ikon Open untuk memuat gambar dari file, kemudian pilih file
asset yang sudah didownload sebelumnya, yang bernama bg.png. Gambar akan dimuat di
jendela Edit Image. Klik ikon Resize pada toolbar, kemudian pada jendela Resize image
canvas, set kolom Width menjadi 1 pixel dan set kolom Image menjadi Align top-left. Klik
OK. Gambar background akan berubah ukurannya menjadi 1 x 600 pixel. Kita buat demikian
supaya asset background tidak terlalu besar, dan juga karena kita akan membuat backgrounya
berulang (tiled) secara horizontal.

Tutup jendela Edit Image. Masih pada objek background dalam keadaan aktif, pada bagian
Properties di sebelah kanan, set properti Name menjadi Background, properti Size menjadi
400, 600 dan properti Position menjadi -40, -60.

Menambahkan Aset Pijakan

Pada bagian sebelah kanan, klik tab Layers di sebelah tab Projects untuk menampilkan bagian
Layer. Disitu sudah ada Layer 0. Klik ikon plus untuk menambah layer sehingga kini ada dua
buah layer pada list, yakni Layer 1 dan Layer 0 dengan Layer 1 berada di atas Layer 0. Urutan
ini menunjukan urutan lapisan layer, yang paling atas berarti menindih layer di bawahnya. Klik
Layer 1 untuk bekerja pada Layer 1, karena kita akan menambahkan objek baru pada Layer 1.

Klik kanan pada area layout lalu pilih menu Insert New Object. Pilih objek bernama Sprite, lalu
klik tombol Insert. Klik pada area layout untuk menyimpan objek Sprite. Akan muncul jendela
Edit Image: Sprite, diikuti jendela Animations dan Animation Frames. Jendela Edit Image
berfungsi untuk memodifikasi gambar sprite, sedangkan jendela Animation untuk membuat
animasi sprite dan jendela Animation Frames untuk mengatur urutan animasi gambar untuk
setiap list animasi.

Pada jendela Edit Image, klik ikon Open untuk memasukkan gambar. Pilih gambar dengan nama
file platform0.png lalu klik OK sehingga gambar pijakan panjang muncul di jendela Edit Image.
Kemudian pada jendela Animation frames, klik kanan kemudian pilih menu Add frame
sehingga sekarang ada dua frame yakni frame 0 dan 1. Klik frame 1 lalu klik ikon Open dan pilih
gambar dengan nama file platform1.png. Buat satu frame lagi lalu isi dengan file
platform2.png. Tutup jendela Edit Image.

Sampai sini Animation default sudah memiliki 3 buah frame gambar, masing-masing gambar
pijakan panjang, sedang dan pendek. Kalau Kamu menjalankan game dengan menekan tombol
F5 pada keyboard, maka Kamu akan lihat gambar pijakan pada layout akan berubah dari panjang
menjadi sedang dan pendek. Itu terjadi karena frame akan dijalankan untuk menampilkan
animasi. Karena kita tidak membutuhkan animasi untuk pijakan, melainkan dipasang secara
random, maka kita akan menonaktifkan animasinya. Caranya adalah dengan mengklik
Animation Default dari objek pijakan tersebut, kemudian pada bagian Properties untuk
animations, set nilai Speed menjadi 0. Tutup jendela Edit Image. Masih dalam keadaan objek
pijakan aktif, set properti Name menjadi 'Pijakan'. Kemudian pada properti Behaviors, klik link
Behaviors hingga muncul jendela Pijakan: Behaviors. Klik ikon plus lalu pilih behavior
Jumpthru. Tutup jendela Behaviors. Fungsi behavior adalah memberikan sifat tertentu pada
objek. Behavior Jumpthru membuat objek pijakan dapat dilewati dari bawah tapi dapat
digunakan untuk mendarat oleh objek tokoh nantinya.

Sekarang sudah ada objek pijakan di layout. Kita akan memperbanyak dan menyimpannya
secara random pada layout. Klik kanan objek lalu pilih Copy, kemudian klik kanan pada area
layout dan pilih Paste lalu klik pada posisi tertentu untuk menyimpan salinan objek. Lakukan
seperti itu hingga objek pijakan dirasa cukup memenuhi layout. Pada setiap objek Pijakan, Kamu
dapat mengeset properti Initial frame ke 0, 1 atau 2 untuk memilih mau mengunakan gambar
pijakan yang panjang, sedang atau pendek. Hasil akhirnya kira-kira seperti ilustrasi berikut:

Menambahkan Animasi Tokoh

Klik kanan pada area layout lalu pilih menu Insert New Object. Pilih objek bernama Sprite, lalu
klik tombol Insert. Klik pada area layout untuk menyimpan objek Sprite. Pastikan Layer 1
sedang aktif karena kita akan menempatkan objek tokoh ini pada layer 1. Kalo Kamu
terlanjur menyimpan objek tokoh ini di layer 0, maka Kamu tinggal set ulang properti Layer
untuk objek ini ke Layer 1.
Pada jendela Animations, sudah ada satu animasi dengan nama Default. Pada jendela Edit
Image, klik ikon Open untuk memasukkan gambar. Pilih file asset bernama idle0.png. Buat
frame baru pada jendela Animation Frames. Klik frame 1 lalu klik ikon Open dan masukkan
file bernama idle1.png. Ulangi langkah tersebut untuk file idle2.png. Animasi ini akan kita
gunakan pada saat tokoh hendak mulai loncat.

Pada jendela Animations, klik kanan lalu pilih menu Add animation sehingga muncul
Animation2. Klik kanan Animation2 lalu pilih menu Rename dan ganti nama animasi menjadi
'Jump'. Dalam keadaan animasi Jump aktif, masukkan file asset jump0.png ke frame 0,
jump1.png ke frame 1, dan seterusnya hingga file jump4.png.

Perhatikan gambar-gambar pada animasi Jump. Pada animasi tersebut gambar tokoh sedang
dalam keadaan meloncat dengan gambar gas di bawah kakinya. Bila Kamu mengklik ikon Set
collision polygon yang ada di sebelah kiri paling bawah pada toolbar samping di jendela Edit
Image, akan nampak garis biru yang mengelilingi gambar. Garis tersebut adalah batas tumbukan
antar objek pada layout. Untuk gambar pada frame 1 - 5 pada saat tokoh melayang di udara, garis
biru mengelilingi tidak hanya tubuh si tokoh, tapi juga dengan bagian gambar gasnya. Ini akan
jadi masalah ketika proses animasi berjalan nantinya, karena tumbukan terjadi meskipun tubuh si
tokoh sudah tidak menempel pada pijakan.

Selain itu, bila kamu mengklik ikon Set origin and image points yang ada di sebelah atas ikon
Set collision polygon, akan nampak simbol plus dengan lingkaran di tengah yang muncul di atas
gambar tokoh. Simbol tersebut adalah patokan posisi koordinat dari objek tokoh. Simbol tersebut
di semua frame terletak di tempat yang sama, yakni tengah-tengah dari ukuran frame. Ini akan
menimbulkan ketidakkonsistenan posisi tokoh karena tubuh tokoh melayang dan tidak berada di
tempat yang sama saat animasi berjalan. Untuk itu ubah garis poligon dengan menggeser node
kotak berwarna merah seperti pada gambar berikut:Perbaiki juga posisi origin untuk semua
frame agar berada di posisi yang sama:
Lakukan hal yang sama juga untuk setiap frame di animation Default.

Setelah semua collision polygon dan origin disesuaikan posisinya, close jendela Edit Image.
Pada kondisi objek sprite tokoh ini dalam keadaan aktif terpilih, set properti Name dengan
'Tokoh'. Kemudian pada properti Behaviors, klik tautan Behaviors sehingga muncul jendela
Tokoh: Behaviors. Klik ikon plus pada toolbar jendela Behaviors, lalu pilih behavior Platform.
Tutup jendela Behaviors. Behavior Platform memberikan sifat platformer pada objek Tokoh,
sehingga si tokoh ini dapat dikendalikan menggunakan keyboard dan tertarik gravitasi.

Kalo kamu coba jalankan game ini dengan menekan tombol F5, maka kamu akan lihat objek
tokoh akan jatuh tertarik gravitasi dan juga dapat digerakkan ke kiri-kanan dan melompat dengan
menekan tombol panah pada keyboard. Karena kita ingin supaya si tokoh ini tidak meloncat saat
ditekan tombol panah atas, maka kita akan nonaktifkan properti Default Controls dengan
mengeset nilainya ke No.

Menambahkan Caption Skor

Buat Layer 2 terlebih dahulu. Kita akan menempatkan caption, tombol dan teks pada layer 2.
Klik kanan area layout dan pilih menu Insert new object. Pilih objek Text dan tempatkan di
kiri atas layout. Set properti berikut:

Name: capHighscore Color: 255, 255, 255 Text: 'Highscore:'

Buat lagi objek Text untuk menampilkan nilai highscore, tempatkan di sebelah kanan objek teks
capHighscore lalu set properti berikut:

Name: txtHighscore Color: 255, 255, 255 Text: 0

Buat lagi objek Text untuk menampilkan nilai skor, tempatkan di bawah capHighscore lalu set
properti berikut:

Name: txtScore Color: 255, 255, 255 Text: 0 Font: Arial(20)


Menambahkan Tombol Kontrol

Buat objek Sprite baru dan isi dengan file gambar bernama arrow_circle.png. Beri properti
Name dengan value Arrow_right. Set properti Position menjadi 270, 430. Kemudian klik
kanan objek Arrow_right lalu pilih menu Clone object type. Tempatkan pada layout lalu set
properti Name menjadi Arrow_left. Set Position menjadi 50, 430 dan set properti Angle
menjadi 180.

Buat objek Sprite lagi dan isi dengan file gambar play.png. Set properti Name menjadi Play
dan set Position menjadi 160, 430.

Pastikan semua objek tombol berada pada Layer 2.

Yosh, kita sudah menempatkan semua asset ke dalam layout. Hasil akhir layout mestinya tampil
seperti ini:

Menambahkan Objek Touch dan Local Storage

Klik kanan area layout lalu pilih menu Insert new object. Pilih objek Touch, klik tombol Insert.
Lakukan hal yang sama untuk memasukkan objek dengan nama Local Storage. Objek Touch ini
akan kita gunakan untuk membuat event user menyentuh layar handphone, dan objek Local
Storage akan kita gunakan untuk menyimpan data highscore.

Menuliskan Kode Program


Buka tab Event Sheet 1. Disinilah kita akan menuliskan program. Program yang kita
tulis berbasis event-action, artinya kita mendefinisikan kondisi atau event yang akan terjadi dan
menentukan aksi apa yang harus dilakukan pada saat event tersebut terjadi. Agar lebih paham
kita langsung praktekkan.

Klik kanan pada area Event sheet, lalu pilih Add global variable. Muncul jendela New global
variable. Set Name dengan 'play', Type dengan Number dan Initial value dengan 0. Yang kita
lakukan barusan adalah membuat sebuah variabel bernama play dengan tipe data number dengan
nilai 0.

Kemudian kita akan mendaftarkan sebuah event. Klik kanan lalu pilih Add event. Muncul
jendela Add event. Dobel klik objek Touch, kemudian dobel klik action Is touching object.
Pada jendela parameter, klik parameter Object dan pilih objek tombol Play.

Klik link Add action yang ada di samping event Touch - Is touching Play, hingga muncul
jendela Add action. Dobel klik objek System, kemudian dobel klik action Set value,
kemudian pilih variable play dan set parameter Value menjadi 1.

Klik link Add action yang ada di samping event Touch - Is touching Play, hingga muncul
jendela Add action. Dobel klik objek tombol Play, lalu pilih action Set Y. Set parameter Y
menjadi 700.
Dengan demikian kita sudah memasang satu buah event untuk mengangani ketika user
menyentuh layar di atas objek tombol Play, yang kemudian akan mengeset variabel play menjadi
1 dan menyembunyikan tombol Play ke bawah layout. Tampilan event sheetnya harusnya seperti
ini.

Untuk selanjutnya menambahkan event, action dan parameter tahapannya selalu seperti itu.
Mudah bukan? :D

Membuat Tokoh Meloncat

Buat event System, pilih action Compare Variable. Cek variabel play apakah sama dengan 1.

Kemudian klik kanan pada event System - Play = 1, pilih menu Add, lalu pilih menu Add sub-
event. Buat event untuk Tokoh, pilih kondisi Is on floor. Pada event Tokoh - Is on floor, dobel
klik objek Tokoh, lalu buat action Simulate Control. Pilih parameter Control : Jump.

Sampai titik ini, Kalau Kamu menjalankan game, maka Tokoh akan meloncat-loncat setelah
tombol Play ditekan. Kamu bisa memainkan tinggi loncatan dengan mengeset properti
Behaviors > Platform > Jump strength milik objek Tokoh ke nilai yang lebih tinggi. Saya
mengeset Jump strength ke 1000.

Mengontrol Tokoh

Sekarang kita akan buat supaya objek tokoh bisa bergeser ke kiri dan ke kanan bila tombol panah
kiri dan kanan ditekan.

Buat Sub-event dari event System - Play = 1, pilih objek Touch. Pilih kondisi Is touching
object. Isi parameter object Arrow_left. Kemudian buat action untuk event ini, pilih objek
Tokoh, pilih action Simulate Control, pilih parameter Control Left. Buat lagi action untuk
event yang sama untuk objek Tokoh, pilih action Set mirrored, pilih parameter State Mirrored.

Buat lagi Sub-event dari event System - Play = 1, pilih objek Touch. Pilih kondisi Is touching
object. Isi parameter object Arrow_right. Kemudian buat action untuk event ini, pilih objek
Tokoh, pilih action Simulate Control, pilih parameter Control Right. Buat lagi action untuk
event yang sama untuk objek Tokoh, pilih action Set mirrored, pilih parameter State Not
mirrored.
Menjalankan Animasi Tokoh

Kita sudah punya dua buah animasi untuk Tokoh, yaitu Default dan Jump. Animasi Jump akan
kita mainkan saat Tokoh meloncat, dan animasi Default kita mainkan saat Tokoh mulai jatuh.

Buat event untuk objek Tokoh. Pilih kondisi On jump. Buat action Set animation untuk objek
Tokoh, isi parameter dengan animation "Jump".

Buat event untuk objek Tokoh. Pilih kondisi On fall. Buat action Set animation untuk objek
Tokoh, isi parameter dengan animation "Default".

Sampai sini, Tokoh akan meloncat dengan animasi, serta dapat digerakkan ke kiri dan ke kanan.

Menaikkan Layar

Tokoh harus terus naik setiap kali loncat. Maka kita akan menambah Pijakan sertiap kali pijakan
yang lama turun.

Buat Global variable dengan nama minScroll, beri value 600. Variabel ini akan kita gunakan
untuk menyimpan posisi Y dimana layar harus scroll. Buat event System dengan kondisi Every
thick, lalu tambahkan action Set scroll Y pada objek System dengan nilai parameter Y
: minScroll. Event ini akan membuat layar terus discroll terus hingga mencapai posisi minScroll.

Buat event baru untuk objek Tokoh, pilih kondisi Compare Y, pilih parameter Comparison
dengan < less than, dan parameter Y co-ordinate dengan minScroll. Tambahkan action untuk
event ini, pada objek System, pilih aksi Set value, pilih parameter Variable dengan minScroll
dan parameter Value dengan Tokoh.Y.

Sampai sini objek tokoh akan meloncat dan naik melewati pijakan-pijakan. Tapi background dan
tombol pun ikut terlewati. Kita ingin agar background dan tombol tetap pada posisinya dan
hanya pijakan saja yang terlewati. Disinilah fungsi distribusi objek pada layer. Karena
background sudah ada pada Layer 0 dan objek tombol dan teks sudah ada pada layer 2, maka kita
akan memanipulasi properti Parallax untuk Layer 0 dan 2. Klik Layer 0 lalu pada panel
Properties, set properti Parallax ke 0,0. Lakukan hal yang sama pada Layer 2.

Selain itu pijakannya pun habis setelah Tokoh sampai di atas. Kita harus membuat pijakan baru
setiap kali pijakan terakhir sudah melewati batas minimum dari garis atas layer. Untuk itu kita
buat variabel nextPijakan dengan nilai 0. Variabel ini akan kita set dengan nilai posisi Y
dimana sistem harus membuat objek pijakan selanjutnya. Kemudian buat sub-event baru di
bawah event Tokoh : Y < minScroll, pilih objek System, pilih kondisi Compare variable. Pilih
parameter Variable dengan nextPijakan, parameter Comparison dengan Greater or equal,
dan isi parameter Value dengan ViewportTop("Layer 1"). Event ini untuk mengecek apakah
nilai variabrl nextPijakan sudah melewati batas atas layer 1. Kemudian buat action untuk objek
System, pilih aksi Create Object, isi parameter Object to create dengan objek Pijakan,
parameter Layer dengan "Layer 1" (menggunakan kutip), parameter X dengan random(10,
310), dan parameter Y dengan ViewportTop("Layer 1"). Kemudian tambahkan lagi action
untuk objek System, pilih aksi Set value, pilih parameter Variable dengan nextPijakan, dan isi
parameter Value dengan ViewportTop("Layer 1") - random(100, 140).

Jalankan game, dan sekarang mestinya game sudah bisa dimainkan sesuai target game kita.
Gambaran keseluruhan program yang sudah kita tulis dapat dilihat pada gambar di bawah ini.

Menyempurnakan Gameplay
Sampai titik ini gamenya memang sudah bisa dimainkan, tapi masih belum sempurna, belum
bisa mencatat skor, restart game, bahkan game overnya pun belum ada. Oleh karena itu, mari
kita sempurnakan gamenya supaya layak untuk dimainkan :D

Mencatat Skor dan Highscore

Kita sudah punya dua objek Text untuk menampilkan skor dan skor tertinggi. Skor dihitung dari
nol setiap kali bermain. Apabila skor melebihi skor tertinggi sebelumnya, maka skor tertinggi
diisi oleh skor tersebut. Skor tertinggi kemudian disimpan di local storage agar dapat diakses
kembali.

Buat dua buah variable bernama score dan highscore dengan nilai default 0.

Buat sebuah event untuk objek LocalStorage, pilih kondisi On item missing. Isi parameter Key
dengan "highscore" (gunakan kutip). Buat action untuk objek LocalStorage, pilih aksi Set item.
Isi parameter Key dengan "highscore" (gunakan kutip), dan parameter Value dengan highscore.
Event ini mengecek jika pada local storage tidak ditemukan key 'highscore', maka kita buat item
dengankey 'highscore' dan value 0 (value dari variabel highscore).

Buat event untuk objek System, pilih kondisi On start of layout. Event ini dijalankan saat
pertama kali layout dimuat. Buat action untuk objek LocalStorage, pilih aksi Check item exists,
isi parameter Key dengan "highscore". Karena local storage ini bersifat asynchronous (tidak
langsung mengembalikan nilai), maka kita harus memanggil fungsi callbacknya untuk
mendapatkan hasil dari aksi yang sudah diminta sebelumnya.

Buat event untuk objek LocalStorage, pilih kondisi On item exists, isi parameter Key dengan
"highscore". Buat action untuk objek LocalStorage, pilih aksi Get item. Isi parameter Key
dengan "highscore" (dengan kutip). Event ini memastikan apakah data 'highscore' sudah ada di
local storage, sehingga kita dapat memanggil data tersebut.

Buat event untuk objek LocalStorage, pilih kondisi On item get, isi parameter Key dengan
"highscore". Kemudian buat action untuk objek System, pilih aksi Set value, pilih parameter
Variable dengan highscore, dan isi parameter Value dengan LocalStorage.ItemValue.
Kemudian buat lagi action untuk objek txtHighscore, pilih aksi Set text, isi parameter Text
dengan highscore.

Sekarang kita akan mencatat setiap pijakan yang sudah terlewati sebagai nilai skor. Buat event
untuk objek Pijakan, pilih kondisi Is outside layout. Buat action untuk objek Pijakan, pilih aksi
Destroy. Aksi ini berfungsi untuk menghapus objek pijakan yang sudah keluar dari layar dan
tidak digunakan lagi, agar tidak memakan resource memori. Buat lagi action untuk objek
System, pilih aksi Add to. Isi parameter Variable dengan score dan isi parameter Value dengan
1. Buat satu lagi action untuk objek txtScore, pilih aksi Set text, lalu isi parameter Text dengan
score. Kedua aksi ini untuk menambah 1 dari nilai sebelumnya pada variabel score dan
menampilkannya pada objek txtScore.
Kita akan save highscore ke local storage setelah game berakhir. Katakanlah indikator game
berakhir adalah bila variabel Play (yang sudah kita buat sebelumya) bernilai 2. Maka buatlah
event untuk objek System, pilih kondisi Compare variable, pilih parameter Variable dengan
play, parameter Comparison dengan Equal to, dan parameter Value dengan 2. Buat lagi sub-
event di bawah event System : play = 2, untuk objek System, pilih kondisi Compare
variable, pilih parameter Variable dengan highscore, parameter Comparison dengan Less
than, dan parameter Value dengan score. Buat action pada sub-event ini, untuk objek System,
pilih aksi Set value, isi parameter Variable dengan highscore, dan parameter Value dengan
score. Buat lagi action untuk objek txtHighscore, pilih aksi Set text, isi parameter Text dengan
highscore. Dua aksi ini untuk menampilkan highscore terbaru. Buat satu lagi action untuk objek
LocalStorage, pilih aksi Set item, isi parameter Key dengan "highscore" dan parameter Value
dengan highscore. Aksi ini untuk menyimpan data highscore terbaru di local storage.

Hasil dari save data ini akan terlihat bila Kamu sudah membuat kondisi game over. Lanjut ke
langkah di bawah ini.

Membuat Kondisi Game Over

Game berakhir ketika objek tokoh tidak dapat mendarat di pijakan. Sedangkan pada langkah
sebelumnya kita telah menghapus objek pijakan bila melebihi batas bawah layar. Maka cara
termudah untuk menentukan objek Tokoh tidak dapat mendarat adalah dengan membandingkan
posisi Y objek tokoh dengan batas bawah layar.

Buat event untuk objek Tokoh, pilih kondisi Compare Y, pilih parameter Comparison dengan
Greater or equal, dan isi parameter Y co-ordinate dengan ViewportBottom("Layer 1").
Buat action untuk objek System, pilih aksi Set value, pilih parameter Variable dengan play dan
isi parameter Value dengan 2. Buat satu lagi action untuk objek Tokoh, pilih aksi Destroy.

Sekarang coba mainkan gamenya. Mestinya highscore berhasil disimpan di local storage browser
dan dia akan dapat diambil meskipun Kamu sudah menutup browsernya.

Membuat Restart Game

Agar user tidak perlu merestart game untuk bermain kembali, kita harus memfasilitasi mereka
untuk mengulang permainan. Untuk itu, kita akan siapkan satu tombol untuk merestart game.
Pada tab Layout 1, Insert new object bertipe Sprite, isi sprite tersebut dengan file gambar
bernama restart.png. Set properti Name dengan Restart. Simpan objek tombol Restart tersebut
di luar area layout.

Kembali ke Event sheet 1, pada event Tokoh : Y >= ViewportBottom("Layer 1") yang sudah
kita buat sebelumnya, tambahkan action untuk objek tombol Restart, pilih aksi Set Position, isi
parameter X dengan 160 dan Y dengan 430.

Buat lagi event untuk objek tombol Touch, pilih kondisi On tap object, pilih parameter Object
dengan objek tombol Restart. Buat action untuk objek System, pilih aksi Reset global variable.
Buat lagi action untuk objek System, pilih aksi Restart layout. Event ini akan membuat game
kembali ke posisi awal saat layout dimuat ketika tombol Restart ditekan.

Menggabungkan Kedua Sisi Kiri dan Kanan Layar

Supaya game lebih menarik lagi, kita buat supaya objek tokoh tidak dapat lari kemana-mana.
Seperti yang Kamu lihat, hingga titik ini, game sudah terbilang layak main. Tapi masih ada celah
yang harus ditangani, yakni ketika objek tokoh kita geser ke kiri atau ke kanan hingga melewati
batas samping layar, objek kita akan menghilang dan jatuh karena tidak terlihat dan tidak ada
pijakan di luar layar. Maka ada 3 solusi untuk itu, 1) membiarkannya seperti itu dan
menjadikannya sebagai bagian dari aturan main, 2) membatasi objek Tokoh supaya tidak
dapat melewati batas kiri kanan layar, dan 3) membuat supaya sisi kiri dan kanan layar seolah
saling terhubung, yang mana bila objek tokoh melewati batas kiri layar, maka dia akan
muncul dari batas kanan layar, dan begitu juga sebaliknya. Kali ini kita akan gunakan opsi ke-3.

Buat event untuk objek Tokoh, pilih kondisi Compare X, pilih parameter Comparison dengan
Less than, dan parameter X co-ordinate dengan -10. Buat action untuk objek Tokoh, pilih aksi
Set X, isi parameter X dengan LayoutWidth + 10.

Buat lagi event untuk objek Tokoh, pilih kondisi Compare X, pilih parameter Comparison
dengan Greater than, dan parameter X co-ordinate dengan LayoutWidth + 10. Buat action
untuk objek Tokoh, pilih aksi Set X, isi parameter X dengan -10.

Menambahkan Aksesoris

Kamu bisa menambahkan gambar cover atau judul, menambah latar yang lebih meriah, atau
menambahkan item lain yang bisa menambah poin permainan supaya game Kamu lebih menarik
dan asyik dimainkan. Tapi untuk project tutorial ini saya cukupkan sampai sini
penjelasannya. Untuk step selanjutnya kita akan fokus tentang bagaimana supaya game
Construct 2 Kamu bisa dikonversi ke dalam bentuk game Android tanpa menggunakan lisensi.

Export Project dan Modifikasi Kode


Ekspor game Kamu dengan mengklik tombol Export project pada toolbar ribbon Home, lalu
pilih opsi HTML5 website, klik Next. Pilih folder lokasi dimana Kamu akan menyimpan file
hasil ekspor, misalnya di C:\gamesaya\infinite-jumping. Klik Next. Pilih opsi template
Normal. Klik Export.

Setelah selesai ekpor, buka aplikasi Intel XDK dan login dengan akun Intel. Klik gambar folder
bertuliskan PROJECTS di kiri atas aplikasi, lalu klik tombol plus bertuliskan START A NEW
PROJECT di kiri bawah. Pilih menu Import Your HTML5 Code Base. Pada kolom Import
from di sebelah kanan, pilih folder project game Kamu, lalu klik tombol Continue di kanan
bawah. Pada popup New Project Name, isi kolom Project Name dengan nama gamemu,
misalnya 'InfiniteJumping', lalu klik Create. Pada popup Project importer results klik
Continue. Maka akan terbuka tab DEVELOP dengan file index.html dalam keadaan terbuka.
Kita akan mengedit file index.html tersebut.
 Cari baris script berisi alert("Exported games won't work.. dst. lalu hapus satu tag
script tersebut beserta kontennya.
 Tambahkan baris kode <script src="cordova.js"></script> setelah baris kode
script jQuery, sekitar baris 84.

Testing di Smartphone menggunakan App Preview


Kembali ke halaman project dengan mengklik ikon folder bertuliskan PROJECTS di kanan
atas aplikasi. Pada bagian HYBRID MOBILE APP BUILD SETTINGS, pada bagian Build
Settings, tab Android, isi kolom-kolom pada form tersebut. Yang harus Kamu perhatikan adalah
bagian checkbox Fullscreen yang harus dicentang supaya gamemu fullscreen pada
handphone dengan layar yang lebih besar. Kemudian Pada kolom Orientation pilih opsi
portrait. Kemudian pada kolom Developer Certificate, pilih Developer Certificate punyamu.

Build ke dalam Bentuk .apk


Buka tab BUILD, lalu pada bagian Cordova Hybrid Mobile App Platforms, klik opsi Android.
Lalu klik tombol Start Builds yang ada di kiri atas. Pastikan Kamu sudah men-unlock certificate.
Tunggu sampai proses upload, process dan build selesai. Setalah itu link download apk akan
tersedia untuk Kamu download. Kamu bisa mencoba menginstal aplikasinya di hape androidmu.
Mudah bukan? :D
Nn

ft
f
G.’}}
>