Membuat Game Android Mudah dengan Intel XDK dan Construct 2
Toni Haryanto 16 Mei 2016
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. 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, 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.
[caption id="attachment_9715" align="alignnone" width="506"]
beberapa opsi ekspor game. Hanya baris opsi Web saja yang dapat digunakan pada versi free. Selebihnya seperti opsi Cordova untuk ekspor ke mobile app dinonaktifkan.[/caption]
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.
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:
[caption id="attachment_9718" align="alignnone" width="319"]
Tampilan hasil akhir dari game yang akan kita buat.[/caption]
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.
[caption id="attachment_9717" align="alignnone" width="700"]
Beberapa variasi game infinite jump, seperti menambahkan aktor antagonis dan objek interaksi lain[/caption]
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:
[caption id="attachment_9725" align="alignnone" width="530"]
Perbaiki collision polygon menjadi seperti pada ilustrasi baris kedua[/caption]
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:
[caption id="attachment_9760" align="alignnone" width="566"]
Posisi akhir objek-objek pada layout[/caption]
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 :DMencatat 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 `` setelah baris kode script jQuery, sekitar baris 84.