Oleh :

Fadjar Tjahjono, A. Md, S.ST, S.Pd, S.Kom

SMK Negeri 6 Malang
Nur Khasanah, S.Pd., S.Kom.
SMK PGRI 2 Malang
1. Buka Construct 2 dan buat file baru. Pilih “New
Empty Project”.
Pilih “layer” sisi bagian kanan. Tambahkan 3 layer baru dan
rename dengan nama layer:

Background : layer untuk tempat background game.

Pijakan : layer untuk tempat pijakan pemain
(lantai,jebakan,tangga,dll)
Hero & musuh: layer untuk tempat pemain dan musuh.
HUD : layer untuk tempat
kontrol, skor, nyawa, koin, waktu, dll.
• Klik kanan di sembarang tempat, dan “Insert
new object”, tambahkan “Tiled background”
• Klik disembarang tempat, maka akan muncul
kotak transparant warna biru.
• Dobel klik kotak biru, maka akan muncul
tampilan edit image. Klik open dan pilih gambar
yang mau dipakai (pijakan_rumput.png). Klik
close.
• Kecilkan menjadi 1 baris saja. Ini akan kita
pakai menjadi pijakan pemain.
• Jangan lupa me-rename menjadi
“lantai”dibagian object dan memasukannya ke
dalam layer “pijakan”di bagian properties.
• Klik “Behavior” di bagian Properties dan
tambahkan “Solid” agar lantainya bisa diinjak
oleh Player nanti.

• Atur tata letak “lantai” sesuai selera. Kamu bisa

melakukan copy-paste (CTRL+C & CTRL+V)
untuk menggandakan lantainya.
• Masukkan asset Player 1.png yang ada di CD
Asset, drag dan drop ke dalam project Construct
2.
• Klik player dan jangan lupa memasukan ke
dalam layer “hero & musuh”.
1. Klik Player tambahkan behavior “Platform” dan
behaviour “Scroll to”

2. Untuk mengubah kecepatan jalan dan melompat

kita bisa mengulak-alik di bagian platform.

3. Untuk melihat hasilnya, klik quick access Run

layout.
Setelah kita preview tadi akan terlihat bahwa player monoton diam
seperti patung. Agar pergerakannya menarik kita perlu membuat
animasi gerakannya. Langkah-langkahnya seperti berikut:
Dobel klik player untuk mengedit image. Klik “Zoom out”untuk
mengecilkan gambar.
1. Klik kanan di animation frame, pilih import
frame> from file

2. Masukan gambar player 2.png s/d player 6.png.

Klik open. Jangan lupa aturlah urutan slide-nya
• Ganti “Speed” menjadi 6 dan “Loop” menjadi Yes.

•Klik “Set collision polygon” untuk melihat area tabrakan player

ketika bersentuhan dengan object lain
Rubahlah collision polygon menjadi trapesium. Delete titik polygon
yang tidak diperlukan dan sisakan 4 titik. Lakukan juga untuk player
2.png s/d player 6.png. Klik close jika sudah selesai
• Untuk melihat hasilnya, klik quick access Run layout. Akan
terlihat player bergerak gerak untuk posisi diam

• Doble klik lagi player . Kali ini kita menambahkan animasi jalan-
nya. Dibagian Animation, Klik kanan >Add animation. Rename
menjadi “Jalan”
•Klik animation “Jalan” di Animation frames, Klik kanan di animation
frame, pilih import frame > frome file

•Masukan gambar jalan 1.png s/d Jalan 6.png. Klik open. Jangan
lupa aturlah urutan slide –nya
Ganti “Speed” mejadi 6 dan “Loop” menjadi Yes

Klik “Set collision polygon” dan rubahlah menjadi trapesium.

Lakukanlah juga untuk Jalan 2.png s/d Jalan 6.png . Klik close jika
sudah selesai

Kita telah berhasil menambahkan anmasi Jalan. Namun animasi ini

tidak bisa langsung dimainkan, tapi perlu dipanggil lewat event
sheet setelah ini
• Sebelum memulai menambahkan controller, kita perlu
menambahkan object input touch. Klik kanan > insert new
object > Touch
• Tambahkan asset game di folder Kontrol Hitam_Kanan.png,
Hitam_Kiri.png, Hitam_Atas.png, dan Hitam_Fire.png.
Aturlah peletakannya sesuai selera.
• Jangan lupa menaruh 4 (empat) tombol tadi di layer HUD.

• Klik Layer HUD. Dibagian Properties, gantilah nilai Parallax dari

100, 100 menjadi 0,0
Klik kanan >Edit event sheet. Masukan event untuk penggerakan arah player.
Event Pergerakan Arah Kanan

Add event > Touch > Is touching object

Object : Hitam_Kanan
Add action > Player > Simulate Control
Control : Right
Add action > Player > Set animation
Animation : ”Jalan”
From : Beginning
Add action > Player > Set mirrored
State : Not mirrored
Maksud kode di atas:
Selama tombol arah kanan ditahan maka:
- Player berjalan ke kanan
- Menjalankan animasi “jalan” yang di-loop
- Arah animasi tidak dimirror (tidak dibalik)
Event Pergerakan Arah Kiri
Add event > Touch > Is touching object
Object : Hitam_Kiri
Add action > Player > Simulate Control
Control : Left
Add action > Player > Set animation
Animation : ”jalan”
From : beginning
Add action > Player > Set mirrored
State : Mirrored
Maksud kode diatas:
Selama tombol kiri ditahan maka:
- player berjalan ke kiri
- menjalankan animasi “jalan” yang di-loop
- arah animasi dimirror (dibalik)
Event Pergerakan Melompat

Add event > Touch > On touched object

Object : Hitam_Atas
Add action > Player > Simulate Control
Control : Jump
Add action > Player > Set animation
Animation : “Default”
From : Beginning
Maksud kode diatas:
Selama tombol arah keatas dipencet maka:
- Pleyer melompat

- Menjalankan animasi “default” yang di-loop

Event Jika Tombol Arah Dilepas
Add event > Touch > On any touch end
Add action > Player > Set animation
Animation : “Default”
From : Beginning
Maksud kode diatas:
Ketika tombol dilepas, maka animasi “Default” muncul (diam)
• Untuk melihat hasilnya, klik quick access Run
layout. Jika kita menahan arah (kanan,kiri,atas)
maka animasi “jalan” akan muncul dan jika
tombol dilepas maka animasi “Default” akan
muncul.
Masukkan Asset musuh_air.png dan musuh_udara.png ke dalam
project game.
Jangan lupa menaruhnya di layer “hero & musuh”
Klik salah satu musuh dan tambahkan berhavior “Sine”. Lakukan
penambahan berhavior untuk semua gambar musuh_udara,
musuh_air dan musuh_darat.

Pilih dibagian properties Movement “Horizontal”, agar

pergerakannya ke kanan-kiri atau “Vertickal”agar pergerakannya
ke atas,bawah lakukan preview untuk melihat hasilnnya
Kamu bisa mengutak-atik pergerakan sine agar sesuai selera
(Period & Magnitude)-nya.
1. Masukkan Asset kayu_panjang.png ke dalam project game.
Jangan lupa atur collision polygon-nya menjadi persegipanjang.
Tambahkan behavior “Solid” dan behavior “sine”

2. Pilih dibagian properties Movement “Vertical”,

3. agar pergerakannya ke atas-bawah.
4. Anda bisa mengutak-atik pergerakan sine
agar sesuai selera (Peiod & Magnitude)-nya.
1. Masukkan Asset fireball.png jangan lupa memasukan ke
dalam layer “hero & musuh”
2. Tambahkan behaviour “Bullet”. Lakukan preview untuk
melihat hasilnya. Secara otomatis, fireball akan bergerak
kekanan.
3. Karena fireball.png ini akan kita panggil dengan
menekan tombol tembak, maka taruhlah fireball diluar
project.
4. Klik kanan > edit event sheet. Masukan event untuk
mengeluarkan tembakan fireball.
Event menggeluarkan fireball
Add event > Touch > On touched object
Object : Hitam_Fire
Add action > Player > Spawm another object
Object : Fireball
Layer : 0
Image point: 0
Add action > System > Wait
Second : 2
Add action > Fireball > Destroy

Maksud kode diatas:

Ketika tombol Hitam_Fire ditekan maka:
- Player menggeluarkan Fireball
- Setelah 2 detik, fireball menghilang
Event jika Fireball terkena Musuh Air
Add event > fireball > On collission with another object
Object : musuh_air
Add action > musuh_air > destroy
Add action > fireball > destroy

Maksud kode diatas:

Ketika fireball menyentuh musuh_air maka
musuh_air dan fireball menghilang
Event jika Fireball terkena Musuh Darat
Add event > fireball > On collission with another object
Object : musuh_darat
Add action > musuh_darat > destroy
Add action > fireball > destroy

Maksud kode diatas:

Ketika fireball menyetuh musuh_darat maka
musuh_darat dan fireball menghilang
Event jika Fireball terkena Musuh Udara
Add event > fireball > On collissing with another object
Object :musuh_udara
Add action > musuh_udara > destroy
Add action > fireball > destroy

Maksud kode diatas:

Ketika fireball menyentuh musuh_udara maka
musuh_udara dan fireball menghilang
1. Tambahkan objek text untuk menampung
nilai skor. Caranya klik kanan di dalam layout
– pilih insert new object – pilih Text – klik
Insert – klik di dalam layout utk meletakkan
Text
2. Ubah layer objek text ke dalam layer HUD
agar skor selalu tampil di layar ketika game
dijalankan (Layer HUD Parralax 0,0)
3. Masuk ke event sheet dengan cara klik kanan
pada layout kemudian klik “Edit event sheet”
4. Klik kanan pada bagian atas, pilih “Add global
variable” (variabel yg akan digunakan utk
menyimpan skor)
5. Ganti name menjadi “skor” atau menggunakan
nama lain yg Anda inginkan. Kemudian klik OK
6. Tentukan skenario ttg bagaimana skor akan
bertambah
Misalkan skor akan bertambah jika peluru
berhasil menembak musuh air, maka kodenya
Add Action > System > Add to > Pilih variabel skor yg sudah
dibuat > Isi value, misal 10 saat bisa menembak 1 musuh air
> Done
Add Action > Text > Set text > Isi text dengan nama skor
(nama global variabel yg sudah dibuat)
7. Untuk melihat hasilnya, klik Run layout.
Coba untuk menembak musuh air untuk melihat
apakah skor berfungsi
Ketika berhasil menembak 1 musuh air maka
player akan mendapatkan skor 10.

Silahkan dicoba jika peluru berhasil menembak

musuh yang lain. Skor bisa diubah, tidak harus
10
• Untuk menambahkan layout baru, klik kanan di
bagian layout, klik “add layout”. Layout ini akan kita
gunakan untuk halaman game over atau finish.
• Mekanisme Game Over adalah jika Player menyentuh
musuh atau terjun ke jurang. Untuk eventnya,
masukkan sebagai berikut.

Event ketika player menyentuh musuh air

Add event > player > On collission with another object
Object : musuh_air
Add action > system > go to layout
layout : game over
Maksud kode diatas:
Ketika player menyentuh musuh_air maka menuju layout
game over
Event ketika player menyentuh musuh udara
Add event > player > on collission with another object
Object : musuh_udara
Add action > system > go to layout
layout : game over

Maksud kode diatas:

Ketika player menyentuh musuh_udara menuju
layout game over
Event ketika player menyentuh musuh darat
Add event > player > on collission with another object
Object : musuh_darat
Add action > system > go to layout
layout : game over

Maksud kode diatas:

Ketika player menyentuh musuh_darat menuju
layout game over
Event ketika player jatuh ke jurang
Add event > player > is outside layout
Add action > system > go to layout
layout : game over

Maksud kode diatas:

Ketika player jatuh kejurang (di luar layout)
maka menuju layout game over
1. Drag & Drop file background/klik kanan pada
layout – pilih Insert new object – pilih Tiled
Background – klik Insert
2. Akan muncul tampilan seperti di bawah ini.
Kemudian klik icon “open”. Cari dimana file
gambar untuk background berada.
3. Kalau sudah muncul gambar background,
kemudian klik “close”
4. Atur ukuran background sesuai ukuran
window size
5. Ubah layer objek background menjadi layer
“background”
6. Atur parallax layer “background” menjadi 0,0
7. Kunci layer background agar objek
background tidak bergeser
8. Untuk melihat hasilnya, klik Run layout
 Anda telah berhasil membuat Game Adventure,
yang perlu diperhatikan dibagian ini adalah
tentang :
- Behaviour solid untuk membuat batu pijakan
- Behaviour platform untuk membuat game
platfromer.
- Behaviour sine untuk membuat gerakan bolak-
balik
- Behaviour scroll to agar pergerakan kamera
mengikuti player
- Collision polygon untuk mengatur area tabrakan
antar abject
- Tombol kontrol untuk menjalankan player.
 Sebelum memulai melakukan explort
project terlebih dulu kita mempersiapkan
beberapa hal diantaranya:
1. Pastikan project properties sudah diisi dengan
benar. Klik View – Name bisa diganti, Isi
description, author, dan email
2. Kita bisa menggunakan Construct 2 versi free
(gratis) atau paid (berbayar) untuk
mengexplort ke android. Namun untuk versi
PC komputer harus menggunakan versi paid
(berbayar).
Jika sudah memiliki Lisensi C2 berbayar,
jangan lupa melakukan upgrade di bagian
menu upgrade. File lisensi bernama
“c2license.txt”.
3. Pastikan tersedia koneksi internet. Karena
untuk melakukan compile ke android butuh
website pihak ketiga dan akses internet.
selain itu, perlu juga menginstal program
(tidak harus)
- browser google crome
- notepad, wordpad atau notepad++
- winzip, winrar atau 7zip
4. Jika sudah, maka kita siap untuk mengeksport
project game yang sudah dibuat.
 Export project ke HTML5 merupakan satu-satunya
opsi yang disediakan oleh contruct 2 versi free atau gratis
agar bisa menjadi aplikasi android. Jika construct 2 kita
adalah versi free, pergunakan langkah-langkah berikut ini:
1. Klik menu file > export project…pilih HTML5 website
dan klik tombol next.
2. Pilih lokasi export (C:\android\media) atau lokasi lain (buat
folder baru). Jangan lupa bagian minify script
(recommended) dihilangkan (jangan dicentang). Kemudian
klik tombol next.
3. Pilih normal style dan klik export, maka proses eksport akan
berjalan. Tunggulah beberapa saat sampai berhasil.
4. Jika export telah selesai maka akan muncul
tampilan dibawah ini. Pilihlah “open
destination folder”. Maka akan terbuka folder
hasil export.
5. Project berhasil di export. Buka index.html
dengan browser internet (IE, firebox, crome dll)
untuk menjalankan websitenya. Caranya dengan
membuka folder hasil export yang ada
index.html. Klik kanan index.html dan pilih salah
satu:
-edit with notepad++ (rekomendasi)
-open with > notepad
6. Jendela notepad akan terbuka dan muncul
baris-baris kode. Scroll sedikit ke bawah dan
carilah baris ke 48 yang ditandai dengan
tulisan <script>.
7. Blok semua baris ke 48 yang ditandai dengan
tulisan <script> sampai dengan baris ke 57 yang
ditandai dengan tulisan </script>, hapuslah (delete)
semua baris tersebut.
8. Simpan (CTRL+S) perubahan yang telah
dilakukan dan close notepad-nya.
9. File-file yang nanti kita pergunakan untuk
dicompile menjadi android berada didalam
folder yang tadi telah dibuat.
 Untuk menjadikan aplikasi android, kita memerlukan
website pihak ketiga yaitu PHONEGAP (bisa juga
menggunakan MONACA) yang fungsinya untuk mengubah
file HTML5 menjadi aplikasi android.
Untuk lebih jelasnya, ikutilah langkah-langkah berikut ini:
1. Pastikan laptop atau PC komputer kita sudah terkoneksi
dengan internet
2. Gunakan browser Google Crome (wajib) dan bukalah
http://build.phonegap.com
3. Klik “sign in” di pojok kanan atas. Isikan biodata
diri.
 4. Pilih GET AN ADOBE ID untuk free registrasi
 Isikan email untuk mendaftar dan isi juga bagian
passwordnya. Jika sudah klik “Create Free Account”
5. Lengkapi identitas
dan email

 Membuat
password berupa
kombinasi huruf
kecil, huruf besar,
angka/simbol
 Minimal 8 karakter

Klik SIGN UP
6. Klik UPLOAD A ZIP FILE
7. Pilih nama file .ZIP hasil compress HTML5 tadi
9. Tunggu sampai proses Uploading selesai
9. Pilih : READY TO BUILD
10. Pilih : ICON ANDROID jika sudah berwarna biru untuk
mendownload file APK
11. Copykan File .APK ini ke HP Android.
(Pakai kabel data atau kirim lewat WA / email.
12. Instal APK tersebut
(Pakai kabel data atau lewat WA/email.
13. Buka Aplikasi dan Jalankan
Selamat !!!
kita telah berhasil membuat aplikasi android (android-
release.apk). File tersebut bisa langsung kita copy ke smartphone
android dan diinstal atau nanti di upload ke google play.
Tambahan :
Untuk menjadikan file Android, selain PhoneGap bisa juga
menggunakan monaca.io
Modul dan Tutorialnya sudah disertakan dan bisa dicoba.