Tutorial Pembuatan Game MathDefence

Pada kesempatan kali ini, kami akan membahas tutorial langkah demi langkah pembuatan game
MathDefence. Gameplay dari game ini persis seperti game “Plants vs Zombie”. Pada game ini,
musuh yang membawa soal bermunculan dari arah kanan layar. Untuk melawannya, pemain harus
menjawab soal tersebut dengan melakukan drag n drop angka jawaban ke arah musuh. Pemain
harus mencegah musuh mendapatkan daun yang ada pada kiri layar. Tampilan Game yang akan kita
buat dapat dilihat pada gambar di bawah ini:

Tampilan game MathDefence

Game Asset
 Sebelum mulai membuat game, kita membutuhkan asset berikut :

Musuh

Daun

Angka

Pasir

 Asset ini dapat diunduh pada tautan berikut:

https://drive.google.com/file/d/0B78J6pNaORYnWldXazFvd0RNUWM/view?usp=sharing
https://drive.google.com/file/d/0B78J6pNaORYnM214OG15SWZHM2M/view?usp=sharing
Penambahan Object
 Buka aplikasi Construct 2. Kemudian buat project baru dengan cara klik pada menu File > New.
Pilih New Empty Project.

 Setelah project baru terbuat, maka kita dapat mulai menambahkan asset pada ruang kerja
dengan cara klik kanan pada layar kerja > Insert new object > Sprite.
 Setelah itu klik sembarang pada layar kerja, maka akan tampil Image Editor seperti gambar di
bawah.
 Kemudian klik pada icon Open Folder dan pilih asset yang akan ditambahkan.

 Setelah asset dipilih, maka asset akan tampil pada Image Editor seperti gambar berikut.

 Tekan tombol close pada Image Editor dan asset tersebut sudah tampil pada layar kerja. Pada
panel sebelah kanan, di bawah folder Object types, terdapat tambahan object dengan nama
Sprite. Untuk memudahkan pengaturan object, maka disarankan untuk mengganti nama object
tersebut misal dengan nama “daun”.
 Lakukan dan ulangi langkah-langkah tersebut untuk menambahkan asset berikut :
o hud_0.png
o hud_1.png
o hud_2.png
o hud_3.png
o hud_4.png
o hud_5.png
o hud_6.png
o hud_7.png
o hud_8.png
o hud_9.png
Untuk object angka-angka tersebut, kita dapat melakukan duplikasi dengan cara klik kanan pada
object > Clone. Dan ganti asset tersebut pada Image Editor.

 Sehingga object kita bertambah seperti berikut:

Dari folder disamping, dapat ditambahkan ke layar kerja dengan melakukan drag n drop pada
lembar kerja.
 Langkah tersebut adalah untuk menambahkan asset yang statis. Khusus untuk musuh, kita akan
menambahkan asset yang berupa animasi dengan cara berikut. Klik kanan pada Animation
Frames > Import Frames > From sprite strip….

 Pilih asset bulbasaur_walk.png

 Sesuaikan jumlah sel tergantung pada asset yang dimiliki. Dalam gambar tersebut dapat kita
lihat terdapat 3 kolom gambar ke arah horizontal dengan 1 baris vertical. Centang untuk
merubah semua frame pada animasi.

 Maka gambar telah terbentuk pada panel Animation Frames

 Untuk mengatur animasi, klik kanan pada nama animasi “Default” dan lihat pada panel
Animation Properties di sebelah kiri. Sesuaikan Speed menjadi 10 (dapat diganti dengan
kecepatan animasi lain) dan Loop menjadi Yes. Kita dapat melihat animasi dengan cara klik kanan
pada nama animasi (“Default”) > klik Preview.
 Satu asset yang belum ditambahkan yaitu pasir. Khusus untuk asset tersebut kita pilih tipe object
sebagai TileBackground. Dengan TileBackground ini kita dapat menyesuaikan ukuran object
yang akan kita buat untuk memenuhi layar kerja.

 Pilih sand.png.

 Maka pasir akan tampil di layar kerja dan dapat kita sesuaikan ukurannya. Pasir tersebut akan
kita tempatkan di bawah semua asset yang telah kita tambahkan. Oleh karena itu kita klik kanan
pada asset pasir > Z Order > Send to bottom of layer.
 Selain asset tersebut di atas, kita membutuhkan pula teks. Untuk menambahkan teks, klik kanan
pada layar kerja > Insert New Object pilih Text.

 Tambahkan dua teks yaitu score_txt dan soal_txt.

 Semua asset telah ditambahkan, sekarang kita harus menyusun asset tersebut.
Penempatan Asset pada Layar
 Untuk memudahkan penempatan asset, kita aktifkan grid dengan cara klik View dan centang
pada opsi Snap to Grid dan Show Grid. Jika dibutuhkan sesuaikan Grid Width dan Height.

 Maka grid akan tampil pada layar kerja.

 Setelah itu, atur object yang sudah ditambahkan. Apabila dibutuhkan, kita dapat menduplikasi
object dengan cara klik kanan pada object > Copy.
 Klik pada lembar kerja dan klik Paste kemudian klik kembali secara sembarang.

 Setelah semua siap, atur object menjadi seperti pada tampilan berikut:

 Usahakan agar asset musuh dan soal_txt bersinggungan seperti gambar berikut:

Setelah penempatan asset siap, kita lanjutkan pada pengaturan awal.

Penambahan Instance Variable
 Dalam game ini, musuh akan membawa soal berikut jawabannya. Untuk itu kita tambahkan
Instance Variables kepada musuh dengan cara klik pada asset musuh yang berada di layar kerja
kemudian lihat pada panel Properties sebelah kiri. Tekan Add Instance Variables maka akan
muncul kotak dialog musuh:Instance Variables.

 Tekan icon plus untuk menambahkan variable. Akan muncul kotak dialog New Instance Variable
dan tambahkan variable jawaban dengan tipe Number dan Initial value -1 kemudian tekan OK.
 Maka variable tersebut telah ditambahkan pada panel Properties.
Events
 Kita akan mulai menambahkan events dalam game ini. Klik pada tab “Event sheet 1”.

 Kita membutuhkan dua global variable. Caranya klik kanan pada lembar event > Add Global
Variable.

 Tambahkan dua global variable : random_line dan random_soal.

o random_line

o
 o random_soal

 Events saat ini menjadi :

 Dalam game ini, soal berikut jawabannya akan kita tempatkan pada sebuah Array. Array
memungkinkan kita untuk menyimpan data terindeks dalam jumlah banyak. Bayangkan sebuah
array merupakan sebuah loker yang mempunyai indeks sebagai berikut:

Dalam construct, kita dapat mengakses loker tersebut dengan NAMA_ARRAY.AT(INDEKS).

Kita harus menambahkan terlebih dahulu array yaitu klik pada tab “Layout 1” tambahkan object
baru dan pilih Array.
 Maka objek akan muncul pada panel kanan. Tambahkan satu array lagi yaitu array_jawaban.

 Setelah itu, kembali ke tab “Event sheet 1” Klik add event

 Pilih System

 Pilih On start of layout

 Kemudian tambahkan action dengan klik Add Action dan pilih array_soal.

 Dan pilih opsi Set X.

 Kemudian akan muncul kotak dialog Parameters for array_soal: Set at X. X tersebut merupakan
indeks, dan value merupakan nilainya. Isikan X dengan 0 dan Value dengan soal (contoh “1+1=”).
Klik tombol Done.

 Maka akan muncul event berikut

 Ulangi langkah tersebut untuk menambahkan soal lain dengan menaikkan index X dan
mengganti value nya. Dalam tutorial ini kita hanya akan membuat 5 soal. Kita dapat
menambahkan event dengan cepat dengan cara melakukan copy paste pada event dengan
memilih event atau action dan tekan Ctrl+C dan Ctrl+V). Sehingga tampilan pada layar event
menjadi sebagai berikut:
 Tambahkan juga action untuk array_jawaban dengan cara yang sama, sehingga tampilan event
menjadi sebagai berikut:

 Setelah kita menambahkan array soal dan jawaban, kita ingin mengacak soal berikut jawabannya
dan menyimpan nilainya ke dalam variable random_soal. Add action > System > Set Value dan
isikan value seusai dengan tampilan berikut dan tekan Done.

Fungsi floor tersebut untuk membulatkan ke bawah nilai yang didapatkan dari fungsi random
sehingga nilai tersebut menjadi salah satu diantara nilai (0,1,2,3,4).
 Sehingga layar Events menjadi sebagai berikut:

 Pada awal layout ini, kita ingin menampilkan soal pada soal_txt. Maka kita dapat menambahkan
teks tersebut dengan menambahkan action > soal_txt > Set text.

 Kita juga harus menyimpan jawaban tersebut kepada Instance Variable Jawaban di object musuh
dengan cara add action > musuh > Set Value.
 Sehingga layar Events menjadi sebagai berikut:
Tambahkan Musuh Secara Acak
 Dalam game ini, kita ingin mengacak posisi baris musuh. Musuh dapat muncul pada baris 1, 2,3
atau 4 setiap 10 detik sekali. Dan juga kita ingin mengacak soal yang muncul.
 Maka tambahkan pada lembar Event
Add event > System > Every X seconds : Ubah Interval (seconds) menjadi 10.0

 Add action > System > Set Value

 Dan copy action untuk melakukan random soal, sehingga tambahan lembar Events menjadi
sebagai berikut:
 Setelah itu, kita tambahkan Sub Event untuk masing-masing baris yang dihasilkan dari proses
pengacakan.
Klik kanan pada Event > Add > Add Sub-Event (S)

 Pilih System > Compare variable. Kita akan membandingkan jika random_line mempunyai nilai
1. Tekan Done.

 Kemudian tambahkan action > System > Create Object. Dan isikan nilai berikut :
 Dengan cara yang sama, kita juga akan membuat object soal_txt dengan isian sebagai berikut:
 Sehingga lembaran Event menjadi sebagai berikut:

 Selanjutnya kita harus menampilkan soal pada soal_txt dan menyimpan jawaban pada musuh.
Kita dapat menduplikasi action untuk menampilkan soal dan menyimpan jawaban yang sudah
kita buat sebelumnya.
 Sehingga lembaran Event menjadi sebagai berikut:

 Lakukan hal yang sama untuk masing-masing nilai dari random_line (2,3,4) dengan cara yang
sama tetapi dibedakan posisi dari musuh dan soal_txt.
 Sehingga lembaran Event menjadi sebagai berikut:
 Setelah kita tentukan musuh berada di baris mana, kita harus membuat musuh tersebut dapat
berjalan ke arah daun pada layar. Kita akan membuat musuh dapat berjalan setiap 1 detik.
Add event > System > Every X seconds dan masukkan isian berikut:

 Tambahkan action > musuh > Move forward dan masukkan isian berikut:

 Kita juga harus membuat soal berjalan mengikuti musuh dengan cara yang sama.
 Tambahkan action > soal_txt > Move forward dan masukkan isian berikut:
 Sehingga tambahan lembaran Event menjadi sebagai berikut:

 Sampai di sini, kita dapat mencoba game tersebut dengan cara menekan tombol Play pada ujung
sebelah kiri program.

 Jika kamu sudah mengikuti langkah-langkah dengan benar, maka kita akan melihat musuh dan
soal yang bergerak masuk ke dalam layar.
Menjawab Soal
Untuk dapat menjawab soal, pemain harus melakukan drag n drop jawaban yang berupa angka
tersebut mengenai musuh. Untuk itu kita harus menambahkan perilaku / behaviour drag n drop
terhadap object jawaban. Langkah-langkahnya adalah sebagai berikut:

 Klik object angka > pada object properties klik Add/edit Behaviours > Klik icon tanda tambah.
 Kemudian pilih Drag & Drop.

 Sehingga behaviour Drag & Drop tersebut ditambahkan ke dalam object angka.
 Lakukan langkah-langkah tersebut untuk masing-masing object angka dari 1 sampai 9.
 Setelah itu kita beralih ke tab “Event sheet 1” untuk menambahkan events.
Tambahkan Global variable baru : score.
Klik kanan > Add global variable.

 Sebelum terlupa, kita harus menampilkan score pada score_txt. Oleh karena itu, kita akan
menambahkan satu action pada event On Start of Layout.
Add action > score_txt > Set text.

 Sehingga lembaran event pada On Start of Layout menjadi sebagai berikut:

 Selanjutnya, kita akan melakukan pengecekan apakah object angka yang dipilih dan dikenakan
terhadap musuh tersebut benar ataukah salah.
 Add event > pilih object angka (misal 0) > On collision with another object > pilih musuh.

 Setelah itu tambahkan action > pilih object angka > Set position. Tentukan posisi X dan Y sesuai
dengan object angka yang ada pada lembar kerja.

 Maka X dan Y tersebut X=160, Y=448.

 Sehingga lembaran event tersebut menjadi sebagai berikut:

 Kita akan menambahkan Sub Event dengan cara klik kanan pada event tersebut > Add > Add
Sub-event (S).

 Pilih musuh > Compare instance variable dan sesuaikan isian value. Langkah ini akan membandingkan
jawaban pada musuh dengan object angka (saat ini kita sedang menambahkan pengecekan untuk object
angka 0 maka value tersebut disikan dengan nilai 0).

 Tambahkan action > pilih musuh > Destroy.

 Ketika pemain menjawab dengan benar, kita harus menambahkan score untuk itu tambahkan
action > System > Add to > cari variable score dan tambahkan score sebanyak 10 seperti berikut.

 Setelah itu, kita juga harus menampilkan score tersebut dengan menambahkan action >
score_txt > Set text.
 Selain itu, kita juga harus menambahkan Sub-event pada Sub-event pengecekan jawaban untuk
menghilangkan soal.

 Klik kanan pada event pengecekan jawaban pada musuh > Add > Add Sub-event (S).
 Pilih musuh > Is overlapping another object > pilih soal_txt.

 Tambahkan action > pilih soal_txt > Destroy.

 Sehingga event tersebut menjadi sebagai berikut:
 Ulangi langkah-langkah tersebut untuk object angka 1 sampai 9 dengan merubah jawaban dan
posisi object angka. Agar tidak mengulang pekerjaan, kita dapat melakukan duplikasi event
tersebut dengan cara memilih event.

 tekan tombol Ctrl+C dan Ctrl+V.

 Kita dapat mengganti object event dengan cara klik kanan pada event tersebut > Replace Object.

 Pilih object angka.

 Kemudian pilih object pengganti, misal angka 1.

 Rubah tiap isian yang berkaitan dengan object angka angka lihat kotak merah pada gambar
berikut.

 Setelah mengulangi langkah-langkah tersebut, object 0-9 akan memiliki events sebagai berikut:
Kondisi Kalah
Dalam game ini, apabila musuh dapat memakan 4 buah daun yang tersedia maka kita dinyatakan
kalah. Untuk itu, kita tambahkan global variable jumlah_daun.

 Pada tab “Event sheet 1”, klik kanan > Add global variable. Beri name=jumlah_daun dengan
Type= Number dan Initial value=4.

 Setelah itu, kita akan menambahkan pengecekan apabila musuh dapat mencapai daun.
 Tambahkan event > pilih daun > pilih On Collision on another object > pilih musuh.

 Setelah itu tambahkan action > pilih daun > pilih Destroy.
 Kita juga harus mengurangi nilai dari global variable jumlah_daun dengan cara add action > pilih
System > Substract from > pilih jumlah_daun dan isikan nilai 1.
 Sehingga event tersebut menjadi sebagai berikut:

 Ketika semua daun sudah dimakan dan menghilang, maka kita nyatakan pemain kalah.
 Buat event yang baru > pilih System > Compare variable > dan input isian berikut :

 Kemudian Tambahkan action > pilih System > pilih Go to Layout (by name) > input nama layout
yang dituju (kita akan menambahkan layout “GameOver” kemudian).

 Sehingga event tersebut menjadi sebagai berikut:

Layout GameOver
Kita akan menambahkan layout baru yaitu layout GameOver.

 Klik kanan pada folder Layouts > Add layout.

 Kemudian pilih opsi Add Event Sheet.

 Dan beri nama layout baru tersebut menjadi “GameOver”

 Pada layout “GameOver” ini, tambahkan asset gambar Game Over dan Play Again. Kemudian
tambahkan pada layout seperti berikut ini:

 Pada layout tersebut tambahkan juga object mouse dengan cara Insert New Object > pilih
Mouse.
 Setelah ditambahkan, maka akan tampil pada panel Projects sebelah kanan sebagai berikut

 Setelah itu, kita ingin pemain dapat memainkan game kembali. Beralih ke “Event sheet 2”.

 Tambahkan event > pilih Mouse > pilih On object clicked > pilih object playagain pada opsi object
clicked.

 Setelah itu tambahkan action > pilih System > pilih Go to layout > pilih layout “Layout 1”.
 Kemudian tambahkan action > pilih System > pilih Reset global variables.
 Sehingga, lembaran event tersebut menjadi sebagai berikut:

 Sampai di sini, game tersebut sudah dapat dimainkan.

 Cobalah untuk memainkannya dengan pindah ke “Layout 1” dan menekan tombol Play.

 Berikut preview game tersebut dalam browser.

Selamat & Semangat Belajar!