BAB 1

Game Engine Construct 2

1.1 Tujuan
1. Mahasiswa mengenal lebih jauh user interface dari game engine Construct 2.

2. Mahasiswa dapat menambahkan objek, behavior dan event pada Construct 2

1.2 Game secara Umum

Saat ini, hampir semua orang pernah memainkan video game atau game kompu-
ter baik hanya sekedar untuk kesenangan maupun untuk tujuan lain, misalnya edukasi
atau pembelajaran. Dilihat dari segi positif dan negatif, bisa dikatakan keduanya selalu
mennjadi perbincangan yang menarik.
Kata game berasal dari bahasa Inggris yang secara harfiah berarti prmainan. Dilihat
dari segi positifnya, bermain game bukan hanya sekedar menghabiskan waktu, tetapi
juga dapat meningkatkan kreatifitas dan intelektualitas si pemain game, karena dalam
game tersebut terdapat cara maupun aturan yang harus diikuti untuk dapat mencapai
sebuah goal. Selain itu, pemain juga dituntut untuk dapat mengambil keputusan melalui
action secara cepat dan tepat.
Bermain game merupakan sebuah proses ”fine tunning” dari logika berpikir manusia
dengan aplikasi komputer. Pada saat itu juga, game juga dapat mempertajam daya
analisis pemain untuk mangatur informasi dan menentukan cara terbaik apa yang harus
dilakukan.
Untuk membuat game, saat ini sudah cukup banyak pilihan software yang dapat
digunakan untuk merancang dan membangun (develop) sebuah aplikasi game komputer

1
BAB 1. GAME ENGINE CONSTRUCT 2 2

baik yang berbasis desktop, web, maupun smartphone. Perangkat lunak yang diguna-
kan untuk membangun game komputer sering disebut sebagai game engine, dimana
didalamnya terdapat framework yang mempermudah dan meningkatkan produktivitas
perancang game. Banyak game engine yang dapat ditemukan di internet baik yang
berplatform 2 dimensi maupun 3 dimensi. Salah satu game yang memiliki platform
2 dimensi (2D) dan dapat digunakan dengan mudah oleh seorang pemula yang ingin
membuat game tanpa perlu memahami pemrograman adalah Construct 2.

1.3 Game Engine Construct 2

Construct 2 merupakan game engine atau game editor 2D berbasis HTML5 yang
dikembangkan oleh Scirra Ltd. Tujuan utamanya yaitu agar orang-orang yang bukan
berasal dari Programmer atau memiliki pengetahuan tentang pemrograman dapat mem-
buat game secara cepat dan mudah. Karena dalam game engine Construct 2 ini terdapat
editor yang dapat secara visual dapat dilakukan drag-and-drop. Selain itu, didalamnya
juga terdapat sistem logika berbasis behavior atau perilaku (behavior-based logic sys-
tem). Gambar 1.1 merupakan halaman start ketika Construct 2 pertama kali dijalankan.

Gambar 1.1: Halaman start dari Construct 2

BAB 1. GAME ENGINE CONSTRUCT 2 3

1.3.1 Fitur Construct 2

Menurut artikel yang tertulis di website resmi Construct 2 https://www.scirra.com/construct2,
game engine ini memiliki beberapa fitur yang bisa dimanfaatkan oleh pengguna, antara
lain:

1. Event system and behaviors.

Metode utama dari pemrograman aplikasi game pada Construct 2 adalah melalui
”event sheet”, yang mirip dengan file source code dalam bahasa pemrograman.
Setiap event sheet memiliki list event yang berisi statement kondisional atau trigger
(pemicu). Sekali saja ini terpenuhi, action atau fungsi dapat dikerjakan. Bahkan
logika OR dan AND dapat dikerjakan tanpa belajar bahasa pemrograman yang
mungkin relatif lebih sulit.

2. Pemilihan instance objek.

Tidak seperti environment pengembangan tradisional, Construct 2 menjauhkan
instance spesifik dari sebuah objek ketika menambahkan even, mendukung filter
melalui semua instance dari sebuah tipe objek pada screen. Ketika menambahkan
event, editor mengijinkan penguna untuk menentukan kondisi atau memeriksa
apakah harus diisi setiap instance objek pada screen sebelum event ditambahkan
atau jalan melalui objek ini.

3. Visual effect yang menakjubkan.

Terdapat 70 efek webGL-based pixel shader untuk melengkungkan, distort, blend,
blur, mask, re-color dan lain-lain.

4. Multiplatform Export
Seperti game engine kebanyakan saat ini, Construct 2 juga mendukung export ke
berbagai multiplatform berbasis HTML5 engine, antara lain melalui web pribadi,
Chrome Web Store, Facebook, Kongregate, NewGrounds, Firefox Marketplace
atau Scirra Arcade. Export game juga dapat dilakukan ke aplikasi desktop PC,
Mac dan Linux menggunakan Node-Webkit wrapper, bahkan juga bisa dipublish
ke Windows 8 Store atau sebagai aplikasi native Windows Phone 8, iOS, dan
Android.

5. Easy Extensibility.
Construct 2 memiliki dukungan lebih dari 20 built-in plugin, 20 behavior dan lebih
dari 70 visual effect, mulai dari text and sprites, sound and music playback, input,
data manipulation and storage, particle effects, movement presets, Photoshop-like
effects, dll.
BAB 1. GAME ENGINE CONSTRUCT 2 4

1.3.2 User Interface Construct 2

Saat pertama kali membuka project baru yang kosong pada Construct 2 maka akan
muncul user interface seperti yang terlihat pada gambar 1.2

Gambar 1.2: User interface Construct 2

1. File menu & tab

Construct 2 menggunakan interface ribbon yang memiliki desain toolbar milik
Microsoft Office sehingga menu dan tab-tab didalamnya sama persis. Bahkan
quick akses pun juga sama dengan Microsoft Office.

2. View tab
View tab memungkinkan pengguna untuk mengganti layout dan event sheet yang
diinginkan.

3. Properties bar
Tempat untuk mengatur properti yang dimiliki sebuah objek, layout, layer, animasi,
dll.

4. Layout view
Merupakan visual editor atau workspace yang menempatkan objek-objek untuk
melihat game, merancang level dan stage game, membuat screen menu, dll.

5. Project bar & Layer bar

Projects bar Berfungsi untuk menampilkan segala sesuatu yang terdapat dida-
lam project, sementara Layers bar dapat digunakan untuk menambah layer atau
memilih layer yang aktif.
BAB 1. GAME ENGINE CONSTRUCT 2 5

6. Tab Project bar dan Layer bar

Memungkinkan pengguna untuk berpindah dari Projects bar ke Layers bar atau
sebaliknya.

7. Objects bar
Terdapat daftar objek game yang sedang dikerjakan saat ini.

1.3.3 Behavior
Behavior merupakan fungsionalitas pre-packaged pada Construct 2. Sebagai contoh,
kita bisa menambahkan platform behavior pada sebuah objek, behavior solid pada lantai,
atau secara mudah dapat melompat seperti platformer. Beberapa behavior yang terdapat
pada Construct 2 antara lain adalah:

• 8 Direction movement. Menggerakkan objek menggunakan tombol panah, mi-

salnya menggerakkan player

• Bullet movement. Menggerakkan objek kedepan pada angle saat itu, misalnya
peluru dari pemain.

• Scroll to. Membuat screen untuk mengikuti objek bergerak yang biasa disebut
dengan scrolling.

• Bound to layout. Akan menghentikan objek meninggalkan area.

• Destroy outside layout. Sangat bermanfaat untuk peluru yang hilang setelah
ditembakkan

• Fade. Menghilang secara perlahan.

1.3.4 Event
List event dalam Construct yang bisa dilihat pada Event sheet editor dinamakan
event sheet, dan dapat memiliki event sheet berbeda untuk setiap bagian yang berbeda
pada project game. Event sheet dapat juga ”masuk” kedalam event sheet lain, sehingga
memungkinkan untuk digunakan ulang pada multiple level.
Construct 2 menjalankan semua hal pada event sheet per detik (tick). Seperti yang
kita ketahui bahwa kebanyakan monitor melakukan update display 60 kali per detik,
sehingga Construct 2 akan berusaha untuk menyamakan dengan itu untuk mendapatkan
display yang paling smooth. Ini berarti bahwa event sheet pada Construct 2 menjalankan
60 kali per detik, sehingga setiap waktu diikuti dengan penggambaran ulang (redrawing)
sebuah screen. Event sheet dijalankan urut dari atas ke bawah, sehingga event sheet
yang berada paling atas akan dijalankan pertama kali.
BAB 1. GAME ENGINE CONSTRUCT 2 6

Event terdiri atas kondisi (condition) yang harus dipenuhi, action yang berjalan,
sub-event opsional yang menguji kondisi kriteria tertentu, contohnya ”Apakah spacebar
jatuh?”, dll. Event juga memungkinkan untuk membuat sub-event. Sebagai contoh
berikut:
Apakah ada event?
→ Yes : Menjalankan event action
→ No : go to the next event (tidak termasuk sub-event)

Gambar 1.3: Diagram event

Event terbangun atas 3 bagian, seperti yang terlihat pada Gambar 1.3:

• event block, yang terdiri atas kondisi.

• Kondisi (conditions), yang tertera pada event block.

• Aksi (actions).

1.4 Kegiatan Praktikum

1.4.1 Kegiatan 1: Memulai Construct 2

1. Buat file project game baru menggunakan Construct 2, File → New → New
Empty Project.

2. Tambahkan background tile dengan cara Klik kanan pada bagian layout view
→ Insert new object → Tiled Background → letakkan kursor di bagian
layout view.

Gambar 1.4: Menambahkan tiled background

BAB 1. GAME ENGINE CONSTRUCT 2 7

3. Texture editor akan terbuka, dan masukkan gambar apapun yang akan digunakan
sebagai background aplikasi game dengan cara klik Load an image form a file,
jika sudah selesai tutup texture editor.

4. Atur properties sehingga posisi x, dan y terletak pada posisi x=0, y=0, dan atur
ukuran background sesuai keinginan.

5. Perhatikan Layer bar yang terletak disamping Projects bar, maka akan terlihat
layer 0 yang kondisinya dalam keadaan kunci terbuka.

6. Ganti nama layer 0 tersebut menjadi Background, karena ini merupakan layer
background yang digunakan pada aplikasi game, kemudian kunci layer tersebut
dengan cara double klik pada padlock sehingga layer tersebut tidak bisa dilakukan
editing lagi.

7. Tambahkan layer baru dengan cara klik button plus sehingga akan muncul layer
baru.

8. Ganti nama layer menjadi ”Main”, kemudian geser sehingga posisinya berada di
atas layer Background. Sama dengan kebanyakan editor gambar bahwa layer aktif
adalah layer yang terseleksi. Jadi, jika layer tersebut tidak aktif berarti salah
menempatkan objek.

Gambar 1.5: Tumpukan layer

9. Tambahkan objek input baru pada layer aktif, yaitu ”Main” (layer tidak terkun-
ci), dengan cara double klik atau klik kanan → insert new object kemudian
pilih Mouse. Lakukan hal yang sama dengan input Keyboard, perhatikan gambar
1.6.
Catatan: Input objek (yaitu Mouse dan Keyboard) tersebut tidak perlu ditempatk-
an pada koordinat tertentu di layout karena tersembunyi dan secara otomatis akan
bekerja saat ada input dari keyboard maupun mouse. Begitu juga dengan input
yang lain seperti Gamepad dan Touch.
BAB 1. GAME ENGINE CONSTRUCT 2 8

Gambar 1.6: Jenis input pada Construct 2

10. Tambahkan objek baru sebagai player, monster, peluru, dan ledakan dengan
cara klik kanan → insert new object → Sprite (bagian General). Selain
dengan cara double klik dan klik kanan, cara lain yang bisa digunakan untuk
menambahkan objek game (sprite) yaitu dengan cara drag-and-drop pada layout.

(a) (b) (c) (d)

Gambar 1.7: Objek game

Ganti nama Sprite yang baru dimasukkan tersebut menjadi ”player, monster,
ledakan, dan peluru”. Pindahkan objek peluru dan ledakan sehingga tidak
terlihat pada scene game.

1.4.2 Kegiatan 2: Menambahkan Behavior

1. Untuk menambahkan behavior pada sebuah player, pilih objek player dan perha-
tikan properties bagian Behaviors.

2. Klik Add/Edit dan pilih button plus kemudian pilih behavior sesuai dengan kei-
nginan, misalnya 8 direction.

3. Lakukan hal yang sama pada player untuk menambahkan behavior Scroll To untuk
membuat screen mengikuti player, dan juga Bound to layout agar player tetap
berada di layout. Sehingga dialog window behavior terlihat pada gambar 1.8.

4. Jalankan pada browser dan gunakan tombol panah untuk menggerakkan player.
BAB 1. GAME ENGINE CONSTRUCT 2 9

Gambar 1.8: Behavior pada dialog window

1.4.3 Kegiatan 3: Menambahkan Event

1. Pilih tab Event sheet, kemudian double klik pada layout event sheet tersebut untuk
menambahkan event baru. Cara lain bisa dilakukan dengan klik kanan → Add
event.

2. Pilih System → tekan tombol next → pilih Every tick (pada bagian General) →
Done.

Gambar 1.9: Menambahkan event tick

3. Tambahkan action yang membuat player selalu melihat mouse dengan cara klik
Add action → Pilih player dan tekan next → perhatikan bagian Angle dan pilih
Set angle toward position → next → pilih Mouse atau isikan Mouse.X pada
kolom X, dan Mouse.Y pada kolom Y.

4. Jalankan project dan perhatikan bahwa palyer selalu bergerak mengikuti arah ge-
rakan mouse.
BAB 1. GAME ENGINE CONSTRUCT 2 10

Gambar 1.10: Mouse event

1.5 Tugas
1. Lakukan eksplorasi terhadap beberapa behavior yang terdapat pada Construct 2
selain 8 direction movement. Tulis fungsi dan kegunaan behavior tersebut!

2. Tambahkan beberapa event action, dan lakukan analisa terhadap event-event yang
terdapat pada Construct 2!
 BAB 2

Fungsionalitas Game

2.1 Tujuan
• Mahasiswa mengetahui beberapa fungsionalitas game pada Construct 2.

• Mahasiswa dapat menambahkan instance variable pada Construct 2.

2.2 Menambahkan Fungsionalitas

Construct 2 merupakan game engine 2D yang menggunakan kumpulan event untuk
menjalankan aksi pada game. Selain itu juga bisa memiliki beberapa sub-event dan
kondisi yang harus dipenuhi supaya aksi yang dikehendaki dapat dikerjakan. Pada modul
sebelumnya telah dijelaskan bahwa dalam menambahkan suatu kondisi atau keadaan
pada Construct 2 dapat dilakukan dengan beberapa cara antara lain:

• Double-click untuk menambahkan event baru, atau klik Add action untuk me-
nambahkan action.

• Double-click object condition atau action yang terdapat di event sheet editor.

• Double-click condition/action yang diinginkan.

• Masukkan parameter yang diinginkan.

Dengan demikian, event akan dideskripsikan sebagai objek yang diikuti condition/action,
diikuti oleh parameter. Sebagai contoh pada modul 1, saat menambahkan event baru

11
BAB 2. FUNGSIONALITAS GAME 12

pada objek peluru, maka dapat ditulis menjadi :

Add condition System → Every tick
Add action Player → Set angle towards position → X: Mouse.X, Y: Mouse.Y
Kelanjutan contoh game dari modul sebelumnya, pada saat player melakukan klik kiri
pada mouse berarti pemain menembakkan peluru. Secara mudah, pada Construct dapat
dilakukan dengan menambahkan action berupa Spawn an object pada objek player,
sehingga akan menciptakan instance baru dari objek tersebut pada posisi dan angle yang
sama. Untuk menggerakkan peluru, tambahkan behavior Bullet Movement sehingga
ketika mouse di klik, peluru (instance) yang diciptakan oleh player akan dikeluarkan dan
bergerak maju.

2.3 Instance Variable

Variabel instance (instance variable) memungkinkan suatu objek, misalnya karakter
monster, untuk menyimpan nilai health miliknya sendiri. Dimana variabel itu merupak-
an sebuah nilai yang dapat diubah secara mudah dan setiap instance memiliki variabel
sendiri-sendiri. Contoh kasus misalnya sebuah monster harus ditembak beberapa kali
agar bisa mati dan hilang. Untuk dapat melakukan itu, sebuah variabel harus ditam-
bahkan dan menyimpan nilai. Nilai tersebut digunakan sebagai acuan harus berapa
kali melakukan tembakan supaya monster mati. Jika nilai acuan tersebut terpenuhi,
kemudian monster dapat mati/hilang serta memunculkan ledakan yang lebih besar.

Gambar 2.1: Instance variable

Variabel instance memiliki beberapa parameter yang perlu diisi saat digunakan untuk
membuat game, antara lain:

• Name : menyatakan nama variabel instance yang digunakan sebagai rujukan saat
digunakan.

• Type : merupakan tipe data yang digunakan, yaitu : Number untuk angka,
Boolean, dan Text
BAB 2. FUNGSIONALITAS GAME 13

• Initial value : Merupakan nilai awal yang harus diisi, dimana jika tipe datanya
menggunakan text maka tipe ini diijinkan tanpa menggunakan isian atau kosong.
Untuk menuliskan text tidak perlu menggunakan tanda petik dua (quote);

• Description: merupakan kolom isian opsional yang tidak perlu diisi jika memang
tidak diperlukan.

2.4 Kegiatan Praktikum

2.4.1 Kegiatan 1: Membuat player menembak

1. Buka project game yang telah dibuat pada kegiatan modul 1 sebelumnya, pastikan
bahwa event sheet editor telah dibuka.

2. Double-click pada event sheet editor sehingga muncul dialog add event, berikutnya
penuhi syarat berikut:
Condition: Mouse → On click → Left clicked (default)
Action: Player → Misc → Spawn another object → Object, pilih objek peluru.
Layer, isikan nilai 1 karena layer ”Main” adalah 1. Ingat bahwa Construct 2
menghitung layer dimulai dari indeks ke-0. Sementara biarkan Image point : 0.

(a) (b)

Gambar 2.2: Menambahkan action pada event

3. Jalankan projek, maka ketika mouse diklik akan mengeluarkan (spawn) peluru dari
objek player yang munculnya dari tengah player.

4. Supaya keluar dari depan player lakukan editing dengan cara klik kanan player →
Edit animations → muncul image editor, dan perhatikan dialog Image points.

5. Tambahkan Imagepoint menggunakan tombol plus lalu pindahkan Set origin

and image points berada di depan player. Sehingga, peluru yang ditembakkan
nanti akan muncul dari depan atau berasal dari image point tersebut.

6. Kembali ke tab event sheet, lakukan editing pada field Image point menjadi 1.
Maka ketika project dijalankan, dan mouse diklik, objek peluru akan muncul dari
depan player.
BAB 2. FUNGSIONALITAS GAME 14

Gambar 2.3: Pengaturan image point

7. Untuk membuat peluru bergerak maju, edit behavior dan tambahkan Movement
Bullet.

8. Saat peluru ditembakkan, ada kemungkinan meleset. Supaya tidak menumpuk di

game yang menyebabkan pembengkakan memory, tambahkan behavior Destroy
outside layout (bagian General).

9. Supaya monster hilang ketika terkena peluru, tambahkan event berikut:

Condition: peluru → Collision → On collision with another object → pilih monster.
Action: Monster → Misc → Destroy.
Action: peluru → Misc → Spawn another object → pilih gambar ledakan, layer 1.
Action: peluru → Destroy

Gambar 2.4: Destroy monstert

10. Jalankan project, tembakkan peluru ke monster.

2.4.2 Kegiatan 2: Efek ledakan & Monster mendekati player

Salah satu yang membuat menarik dari game adalah efek yang dimilikinya, misalnya
ledakan. Pada kegiatan 1, terlihat bahwa peluru yang mengenai monster akan memun-
culkan (spawn) objek baru berupa gambar ledakan. Akan tetapi bagian border ledakan
masih terlihat berwarna hitam sehingga menyebabkan game menjadi kurang menarik.
BAB 2. FUNGSIONALITAS GAME 15

Untuk menambahakan efek ledakan menggunakan sprite atau objek gambar (bukan dari
sistem bawaan Construct 2), perhatikan langkah-langkah berikut:

1. Pilih sprite ledakan, dan ubah properties Blend mode dari normal menjadi addi-
tive.

Gambar 2.5: Efek ledakan

2. Saat terjadi collision (benturan) antara peluru dengan monster, maka sprite efek
ledakan akan muncul. Untuk menghilangkannya setelah beberapa detik, tambahk-
an action berikut:
Action → System → Time → Wait → isikan 0.09 detik.
Action → ledakan → Misc → Destroy.

3. Aturlah waktu tunggu ledakan hilang sesuai keinginan. Jalankan project dan tem-
pak monster tersebut agar mengeluarkan efek ledakan dan hilang.

4. Supaya terlihat menarik, buat monster bergerak mendekati player dengan cara
mengatur:
Behavior : Bullet movement
Condition : System → Start and end → On start of layout
Action : Monster → Angle → Set angle → random(360)

Condition : Monster → Size & position → Is outside layout

Action : Monster → Angle → Set angle toward → isikan x : player.X, y : player.Y

2.4.3 Kegiatan 3: Menambahkan instance variable

1. Pilih sprite monster, dan perhatikan bagian properties Instance variables.

2. Klik Instance variable tersebut, tambakan variable health. Gunakan tipe (type)
data Number, dan isi initial value dengan nilai 5.
BAB 2. FUNGSIONALITAS GAME 16

3. Kembali ke event sheet editor, ubah action monster menjadi Substract 1 from
health dengan cara Klik kanan action monster → Replace action → Instance
variables → Subtract from → instance variable : health, value : 1

4. Ubah event sehingga memenuhi parameter berikut:

Condition: Monster → Compare instance variable → Health, Less or equal, 0
Action: Monster → Spawn another object → ledakan, layer 1
Action: Monster → Destroy

2.5 Tugas
1. Lakukan uji coba terhadap properties efek-efek pada Construct 2 minimal 5 efek!

2. Buat efek ledakan kecil ketika monster terkena tembakan namun belum mati.

3. Buat supaya monster selalu muncul (spawn) dalam rentang waktu beberapa detik,
dan bergerak menyerang player.

4. Tambahkan sound effect tembakan kecil dan ketika monster mati supaya game
lebih menarik.
 BAB 3

Sistem Skor

3.1 Tujuan
• Mahasiswa dapat membuat sistem scoring pada game yang tampil sebagai HUD.

• Mahasiswa dapat menambahkan spawn objek enemy.

3.2 Pengantar

3.2.1 Variabel Global

Salah satu komponen utama untuk mengikat (engage) pemain (player ) game agar
tetap memainkan game yang dimainkan adalah dengan cara memberi reward atau hadiah
atas permainan yang telah dicapainya. Untuk memberikan reward kepada pemain dapat
dilakukan dengan sistem scoring atau memberikan skor. Dengan demikian, permainan
menjadi lebih menarik.
Pada game engine Construct 2 atau pada kebanyakan game engine yang lain, untuk
menambahkan sistem skor memerlukan sebuah variable yang digunakan untuk menyimp-
an nilai skor. Variable yang biasa digunakan adalah variable global (atau biasa disebut
”global” saja). Seperti pada instance variable, global variable juga dapat menyimpan
nilai berupa text atau angka. Selain global variable juga memungkinkan untuk membuat
lokal variable.

17
BAB 3. SISTEM SKOR 18

3.2.2 Heads-up Display (HUD)

Variable global tersebut tidak akan tampil jika tidak dimunculkan pada layar ga-
me. Cara untuk memunculkan nilai variable global tersebut dapat dilakukan dengan
menggunakan sistem HUD (heads-up display ), yaitu interface yang digunakan untuk
menampilkan informasi health player, skor, maupun informasi lain yang ada di game.
HUD selalu berada pada tempat yang sama di layar meskipun di scroll keatas, ke kan-
an dan sebagainya. Untuk menjaga agar tetap pada lokasi yang sama di layar, pada
game engine Construct 2 dapat dilakukan dengan membuat layer baru yang disebut de-
ngan Parallax setting. Parallax memungkinkan penggunaan layer yang berbeda untuk
melakukan scroll pada tingkat yang berbeda untuk pengurutan efek semi-3D.

3.3 Kegiatan Praktikum

3.3.1 Kegiatan 1: Menambahkan sistem skor

1. Tambahkan variable global dengan cara klik kanan di bagian bawah pada event
sheet editor → Add global variable → Isikan pada dialog box yang keluar, misal-
nya seperti Gambar 3.1, sehingga di bagian atas event sheet akan muncul ”Global”
diikuti dengan nama variable global dan tipe data serta inisial nilainya.

Gambar 3.1: Global variable

2. Tambahkan event baru untuk menambahkan nilai 1 pada skor setelah monster
Destroy yaitu:
Condition → health ¡= 0
Event → System → bagian Global & local variable, pilih Add to → pilih variable:
Score, value : 1

3. Seperti yang dijelaskan pada pengantar diatas bahwa untuk menampilkan sistem
skor dan informasi lain memerlukan HUD. Buat layer baru dengan nama HUD
BAB 3. SISTEM SKOR 19

dan pastikan bahwa layer tersebut berada pada layer paling atas.

4. Pastikan bahwa layer HUD aktif (terpilih), dan perhatikan bagian properties, atur-
lah nilai Parallax menjadi (0,0), artinya nilai X = 0 dan nilai Y = 0.

5. Tambahkan objek text dengan cara klik kanan → Insert new object → pilih
Text dan aturlah posisinya sesuai keinginan, misalnya berada di bagian kiri atas
layar.

6. Kembali ke event sheet editor dan tambahkan action sehingga:

Condition : System → Every tick → Text → lihat bagian Text dan pilih Set Text
dan isikan nilainy seperti pada Gambar 3.2.

Gambar 3.2: Teks pada layer HUD

Dalam tanda petik dua merupakan isi variabel teks, sedangkan tanda & merupakan
cara pemanggilan variable Score yang sudah dibuat pada langkah pertama.

3.3.2 Kegiatan 2: Spawn monster dan Player mati

1. Untuk membuat monster dapat muncul dalam rentang waktu sekian detik dapat
dilakukan dengan pengaturan sebagai berikut:
Condition: System → Every X seconds → 3
Action: System → Create object → Monster, layer 1, 980 (untuk X, sesuaikan
dengan panjang layout), random(500) (untuk Y, sesuaikan lebar Y)

2. Tambahkan event dimana kondisi ketika monster menabrak player, maka player
akan mati dengan pengaturan berikut:
Condition: Monster → On collision with another object → Player
Action: Player → Destroy

3.4 Tugas
1. Carilah sebuah sprite karakter (player dan enemy) yang berisi sekumpulan gambar
sehingga dapat dianimasikan pada Construct 2.

2. Buat game baru dengan sprite yang sudah Anda temukan tersebut dilengkapi
dengan gerakan animasi player dan enemy.
 BAB 4

Animasi Sprite

4.1 Tujuan
• Mahasiswa dapat membuat animasi menggunakan sprite pada game engine Con-
struct 2

• Menambahkan obstacle pada objek.

4.2 Pengantar
Salah satu aspek yang membuat game menjadi menarik untuk dimainkan adalah
adanya animasi. Animasi dapat dilakukan pada sprite karakter player maupun karakter
non-player. Karakter player akan melakukan animasi jika mendapat inputan dari pemain
game, artinya animasi akan dijalankan jika ada campur tangan atau interaksi dari pemain
game. Sebaliknya, jika karakter tersebut tidak memperoleh input dari pemain game maka
animasi seharusnya diam, kecuali jika memang kondisi default sprite tersebut adalah
melakukan animasi.
Karakter non-player biasanya menjalankan animasi tanpa memperoleh input atau
campur tangan dari pemain game. Dimana karakter non-player ini bisa berupa enemy
yang dapat berinteraksi langsung dengan karakter player, maupun game environment
yang tujuannya adalah untuk menambah daya tarik game. Bayangkan jika sebuah ga-
me tanpa ada environment tambahan tentu saja game menjadi kurang menarik untuk
dimainkan.
Seperti diketahui bahwa, animasi merupakan susunan gambar diam (static graphics)
yang dibuat efek sehingga seolah-olah ”tampak” bergerak. Animasi tersebut berjalan

20
BAB 4. ANIMASI SPRITE 21

secara sequence atau berurutan pada tenggang waktu (timeline) tertentu sehingga ter-
cipta sebuah ilusi gambar bergerak. Tentu saja susunan gambar yang dimaksud adalah
berupa gambar 2D, karena animasi 2D dan 3D memiliki cara dan proses yang berbeda
untuk menjalankan sebuah animasi.
Construct 2 merupakan game engine yang digunakan untuk membuat game berbasis
2D, sehingga animasi yang berjalan pada game engine ini juga akan menggunakan kum-
pulan gambar 2D yang disusun secara sequence. Dalam Construct 2 maupun game engi-
ne lain yang menggunakan gambar 2D untuk dianimasikan biasa disebut Sprite. Gambar
animasi 2D disusun atas beberapa gambar tunggal diam (sprite) yang berganti-ganti da-
lam rentang waktu tertentu seolah-olah gambar tersebut terlihat bergerak melakukan
animasi.

4.3 Kegiatan Praktikum

4.3.1 Kegiatan 1:
1. Buatlah file project baru dan atur ukuran (size) layout, misalnya 800 x 480.

2. Import spritesheet karakter Jedi pada film Star Wars Gambar 4.1 dengan cara klik
kanan di layout → Insert new object → Sprite, maka akan muncul image editor
dan dibawahnya terdapat window Animation frames.

Gambar 4.1: Karakter Jedi pada film Star Wars

3. Klik kanan pada Animation frames editor tersebut dan pilih Import frames
→ Import sprite strip seperti pada gambar 4.2, dan pilih gambar Jedi.

4. Berikutnya akan muncul dialog window Import sprite strip yang berisi tentang
jumlah baris dan kolom. Pada kasus sprite gambar 4.1 ini terdiri dari 4 baris dan 4
BAB 4. ANIMASI SPRITE 22

Gambar 4.2: Import spritesheet

kolom, untuk itu isikan ”Number of horizontal cells: 4” dan ”Number of horizontal
cells: 4”.

5. Setelah diimport maka akan muncul beberapa gambar pada window Animation
frames sebanyak 17 frame yang dimulai dari indeks ke-nol seperti pada Gambar
4.3.

Gambar 4.3: Sprite pada Animation frames

6. Hapus gambar kosong pada frame indeks ke-0 tersebut karena tidak akan diguna-
kan lantaran kosong dengan cara klik kanan dan pilih delete. Dengan demikian
jumlah frame tersebut menjadi 16.

7. Ubah animation properties yang terletak pada sebelah kiri atas bagian Loop dari
No menjadi Yes untuk menjadikan animasi berjalan secara kontinu. Sprite yang
terdiri dari 16 frame tersebut seharusnya memiliki animasi sebanyak 4, yaitu ani-
masi berjalan ke arah: bawah, kiri, kanan, dan atas. Akan tetapi secara default, 16
frame tersebut merupakan satu kesatuan animasi yang bernama ”Default”. Untuk
itu perlu dipotong seusai dengan nama animasi yang dibutuhkan.

8. Selanjutnya buat animasi jalan ke bawah, dimana animasi tersebut tersusun atas
frame indeks ke-0 sampai ke-3. Cara termudah yaitu dengan melakukan duplikasi
animasi Default dengan cara klik kanan pada animasi bernama Default dibagian
window Animations dan pilih Duplicate, lalu beri nama ”jalanBawah”. Lalu hapus
frame yang tidak diperlukan, yaitu frame indeks ke-4 sampai ke-15.

9. Buat animasi baru dengan nama jalanKiri, jalanKanan, jalanAtas seperti pada
langkah diatas, yaitu dengancara Duplicate dan menghapus frame yang tidak diper-
lukan. Dengan demikian dalam window Animations memiliki 4 animasi tambahan
selain Default seperti pada Gambar 4.4.
BAB 4. ANIMASI SPRITE 23

Gambar 4.4: Nama animasi pada window Animations

10. Empat animasi yang baru saja dibuat tersebut akan berjalan secara terus-menerus
alias looping meskipun tidak berjalan, sehingga perlu animasi yang standby saat
diam. Untuk itu Duplicate 4 animasi baru tersebut dan beri nama standBawah,
standKiri, standKanan, dan standAtas. Kemudian pilih gambar diam dan
hapus 3 frame lain yang tidak diperlukan pada masing-masing animasi tersebut.
Hapus 15 frame lain dan sisakan satu frame pertama untuk kondisi animasi default.

11. Tutup window editor animasi tersebut dan ubah nama objeknya dari Sprite menjadi
playerAnimations seperti pada Gambar 4.5 (a).

(a) (b)

Gambar 4.5: Objek playerAnimations dan Behavior pada objek player

12. Buat objek sprite baru dengan nama player dan biarkan kosong tanpa gambar,
atur ukurannya sama persis dengan besarnya playerAnimations yaitu 32x48, atur
posisinya (x,y) pada satu lokasi yang sama dengan playerAnimations pada bagian
properties.

13. Jadikan satu antara sprite player dan playerAnimations menggunakan behavior
pin dengan cara klik kanan objek playerAnimations dan tambahkan behavior pin.

14. Tambahkan event yang akan dijalankan saat layout di-load untuk menjadikan sa-
tu antara objek playerAnimations dan player dengan cara Add event → System
→ On start of layout (bagian Start & end). Tambahkan Action → playerAni-
mations → Pin to object (bagian Pin) → pin to: player.
BAB 4. ANIMASI SPRITE 24

15. Atur objek player supaya dapat menerima inputan melalui behavior 8Direction,
sehingga saat keyboard panah ditekan player akan berjalan, yaitu dengan cara klik
kanan objek player → Behavior → Tambahkan 8Direction.

16. Jika project tersebut dijalankan maka akan terlihat sedikit aneh karena objek player
dapat berjalan ke 8 arah, untuk itu perlu diubah Behavior bagian Directions dari
8 directions menjadi 4 directions, dengan demikian arah gerakan sprite akan lebih
terprediksi. Perhatikan properties bagian Set Angle, ubah menjadi No dan atur
properties lain seperti pada gambar 4.5 (b).

17. Atur animasi sesuai dengan arah keyboard yang dijalankan oleh pengguna dengan
cara menambahkan grup event baru, dengan cara Add event → player → Is
moving.

18. Construct 2 tidak mengenali arah gerakan terakhir yang dijalankan player, untuk
itu perlu membuat instance variable yang digunakan sebagai acuan, dengan cara
klik kanan objek player → Instance variables → tambahkan instance variable
baru dan beri nama ”Direction” dengan tipe ”Text” seperti pada gambar 4.6.

Gambar 4.6: Instance variable sebagai acuan

19. Tambahkan sub-event baru dengan cara klik kanan pada event yang baru saja
dibuat diatas → Add → Add sub-event (s) → System → Compare two
values, dan isikan seperti pada Gambar 4.7 (b).

(a) (b)

Gambar 4.7: Penambahan sub-event baru

BAB 4. ANIMASI SPRITE 25

20. Pada gambar 4.7 (b), nilai Second value adalah 90, digunakan sebagai acuan untuk
gerak ke Bawah. Untuk itu tambahkan Action → player → Set value → Isikan
nilai value : ”Bawah”.

21. Buat tiga sub-event baru lagi dan tiga action seperti pada saat membuat sub-event
sebagai acuan untuk animasi gerakan Bawah. Dengan demikian, secara keseluruh-
an terdapat 4 sub-event dengan masing-masing action seperti pada Gambar 4.8.

Gambar 4.8: Sub-event beserta masing-masing action

22. Atur animasi supaya animasi dapat bergerak sesuai dengan acuan (Bawah, Atas,
Kanan, Kiri) dengan cara Add sub-event (s) → Compare instance variable →
Value : ”Bawah”. Kemudian tambahkan action pada sub-event ini dengan cara
Add action → playerAnimations → Set animation → animation : ”jalanBawah”.

23. Tambahkan 3 sub-event baru lagi seperti langkah sebelumnya sehingga event-sheet
layout editor terlihat seperti gambar 4.9.

Gambar 4.9: Sub-event player sebagai kondisi acuan

24. Animasi tersebut akan tetap bergerak meskipun tidak ada input dari pemain. Un-
tuk itu perlu dibuat kondisi agar animasi tidak bergerak saat tidak ada input, yaitu
dengan cara Add event → player → Is moving. Berikutnya klik kanan pada
event yang baru saja dibuat, dan pilih Invert.

25. Tambahkan sub-event untuk event yang yang baru saja dibuat dengan cara Add →
Add sub-events(s) → player → Compare instance variable → Value : ”Ba-
wah”. Sub-event ini digunakan untuk standby ketika player berjalan ke bawah.
Berikutnya, tambahkan action baru dengan cara Add action → playerAnima-
tions → Set animation → Animation ”standBawah”.
BAB 4. ANIMASI SPRITE 26

26. Ulangi langkah membuat sub-event baru tersebut untuk animasi standAtas, stand-
Kanan, dan standKiri sehingga pada event sheet akan memiliki event dan action
seperti Gambar

Gambar 4.10: Player moving dilakukan invert

4.3.2 Kegiatan 2: Menambahkan obstacle

1. Obstacle merupakan sebuah objek yang menghalangi jalan dari objek player. Untuk
membuat obstacle, tambahkan objek baru pada layout dengan cara Klik kanan
→ Insert new object.

2. Berikan warna apa pun pada obstacle tersebut dan pastikan warnanya berbeda
dengan warna background lalu tambahkan Behavior solid dari bagian properties.

3. Dengan demikian, saat project dijalankan maka objek player tidak akan menembus
obstacle tersebut.

4.4 Tugas
1. Buat game sederhana mirip pacman yang didalamnya terdapat beberapa scene
(dapat disebut sebagai layout pada Construct) yaitu:
a) Scene Main menu, berisi : Start button (untuk mulai bermain game), Help
button (petunjuk cara bermain), Setting button (pengaturan game).
b) Scene untuk bermain game.
b) Scene untuk petunjuk cara bermain game.
c) Scene untuk pengaturan game.

2. Player berjalan mencari koin pada ruang obstacle labirin, jika menangkap koin
maka poin akan bertambah.

3. Tambahkan enemy yang ketika ditabrak player akan mati dan game over.

4. Setiap halaman scene (layout) harus ada back button yang jika ditekan akan
kembali ke scene utama, halaman depan.
 BAB 5

Sifat Fisika Game

5.1 Tujuan
• Mahasiswa mengetahui dan dapat menerapkan sifat fisika pada game.

• Mahasiswa mengetahui physics engine lebih lanjut (force, impulse, torque, dan
joint) game.

5.2 Physics Engine

5.2.1 Physics Engine Dasar

Game engine Construct 2 sudah mendukung behavior untuk memperlakukan sifat-
sifat hukum fisika kedalam game. Sehingga ini memungkinkan penerapan objek untuk
dapat bergerak seperti pada kehidupan nyata (real-world). Hukum-hukum fisika yang
bisa disimulasikan menggunakan Construct 2 gravitasi (gravity ), gesekan (friction), ben-
turan (collision), elastisitas (elasticity ), dan kepadatan (density ). Sifat fisika tersebut
dibangun menggunakan physiscs engine Box2DWeb, yaitu sebuah perangkat lunak yang
digunakan untuk penerapan hukum fisika berbasis dua dimensi (2D). Berikut beberapa
sifat fisika yang dimiliki Box2DWeb dan diterapkan pada game engine Construct 2.

Gravity

Gravity merupakan penyebab semua objek jatuh dapat jatuh ke bawah. Tanpa adanya
gravity ini maka objek dalam game hanya akan tetap diam dan tidak akan pernah jatuh
kebawah. Gravity default pada COnstruct 2 memiliki nilai 10. Jika gravity bernilai 0

27
BAB 5. SIFAT FISIKA GAME 28

maka semua objek tidak memiliki gravitasi, karena pengaturan gravity pada Construct
2 berlaku untuk semua objek.

Collision mask

Properties ini digunakan untuk mengatur bentuk benturan (collision) suatu objek.
Secara default menggunakan model benturan ”polygon”, dimana bentuk ini dapat diubah
melalui polygon tool pada image editor, namun perlu diperhatikan poin polygon yang
digunakan karena jika semakin banyak maka akan bisa membuat game menjadi berat
atau lambat. Jika properties pada Collision mask diatur menggunakan Bounding box
atau Circle maka pengaturan menggunakan poligon pada image editor akan diabaikan.

Prevent rotation

Jika diaktifkan, objek tidak akan berputar bahkan jika dipukul pada bagian sudut
objek. Ini berguna jika ingin mengontrol sudut pemain sendiri. Misalnya, dalam per-
mainan platform, dimana ketika pemain tersandung maka tidak akan terpengaruh dan
tidak jatuh.

Density

Digunakan untuk menentukan massa atau berat benda. Massa mendefinisikan se-
berapa keras objek tersebut bergerak. (Perhatikan bahwa ”berat” bukanlah istilah yang
tepat, karena berat tergantung pada gravitasi, dan objek masih memiliki massa pada
gravitasi nol. Objek dengan massa besar masih sedikit sulit untuk bergerak pada gravi-
tasi nol). Massa benda ditentukan oleh density dikalikan dengan area bentuk tabrakan.
Jadi benda yang besar memiliki massa jauh lebih besar dari sebuah benda kecil, bahkan
jika memilik density sama.

5.2.2 Physics Engine Lanjut

Sifat fisika berikutnya yang didukung Box2DWeb pada Construct 2 adalah force,
impulse, torque, dan joint. Apa dan bagaimana cara kerja sifat-sifat fisika tersebut,
berikut penjelasannya.
Force atau gaya adalah sebuah influence (pengaruh) yang menyebabkan objek lain
mengalami perubahan kecepatan atau arah. Biasanya penerapan gaya pada suatu obyek
dalam waktu yang lama menyebabkan semakin cepat benda tersebut bergerak.
Impulse seperti akibat yang terjadi secara tiba-tiba pada suatu objek. Misalnya
sebuah bola dipukul dengan pemukul dalam sebuah game akan menerapkan impuls.
Torque atau torsi adalah gaya rotasi, yang secara bertahap dapat mempercepat laju
rotasi.
BAB 5. SIFAT FISIKA GAME 29

Joint constrain merupakan gerakan antara dua benda yang terhubung melalui be-
berapa cara. Sebagai contoh, pemberian engsel pada dua objek secara bersamaan, kedua
objek masih bisa berrotasi secara besbas tetapi posisi satu sisi dua benda tersebut pada
satu posisi yang sama.Terdapat dua joint dalam Construct yaitu Revolute joint, dapat
dibayangkan seperti perilaku engsel pada sebuah pintu dan Distance joint, bayangkan
sebuah koin yang digantung dengan tali kemudian digerak-gerakkan seperti pendulum.

5.3 Kegiatan Praktikum

5.3.1 Kegiatan 1: Menambahkan Sifat Fisika

1. Buatlah sebuah projek game baru dan tambahkan sebuah objek sprite berbentuk
balok, lalu berilah warna objek tersebut.

2. Tambahkan behavior Physics pada objek tersebut dengan cara melalui object
bar, klik kanan objek tersebut → Behavior → Physics. Ketika projek tersebut
dijalankan maka objek akan terlihat jatuh dari atas ke bawah.

3. Buatlah landasan dibawahnya agar objek tersebut tetap terlihat pada layar saat
objek terjatuh. Tambahkan behavior Physics agar bisa berbenturan dengan objek
pertama yang Anda buat, namun jangan lupa untuk mengganti properties Prevent
rotation dari Yes menjadi No.

4. Cari dan tambahkan objek berupa bola ke dalam layout, kemudian berikan behavior
Physics seperti pada langkah-langkah sebelumnya.

5.3.2 Kegiatan 2: Penerapan Force dan Impulse

1. Ubah gravity bola (yang sudah dibuat pada kegiatan sebelumnya) menjadi 0, de-
ngan cara Add event → System → On start of layout → Add action →
Sprite bola → Set world gravity → 0.

2. Tambahkan sifat fisika force sehingga ketika mouse klik kiri ditekan maka gaya
akan ditambahkan pada bola tersebut dengan cara : Add event → Mouse →
Mouse button is down → Add action → Sprite bola → Apply force towards
position → Isikan Force = 5, X = Mouse.X, Y = Mpuse.Y, Image point = 0;

3. Sifat fisika impulse hampir sama dengan force, perbedaannya adalah jika impul-
se berpengaruh secara cepat, namun pengaruh force hanya berlaku sedikit-demi
sedikit.

4. Untuk melihat perbedaannya, ganti Event mouse dari ”Mouse button is down”
menjadi On left button clicked, dan biarkan action-nya seperti semula.
BAB 5. SIFAT FISIKA GAME 30

5.3.3 Kegiatan 3: Penerapan Joint

1. Buatlah dua buah sprite yang berbeda, misalnya yang pertama berbentuk balok
panjang dan satu lagi berbentuk bulat seperti bola. Berikanlah behavior Physics
pada kedua objek tersebut. Jangan lupa untuk menambahkan landasan diam agar
kedua objek yang dibuat tidak jatuh ke bawah.

Gambar 5.1: Penerapan sifat fisika pada objek balok dan bola

2. Letakkan objek balok dan bola tersebut secara berdampingan, misalnya balok se-
belah kiri dan bola sebelah kanannya.

3. Tambahkan image point untuk sprite balok dan tentukan lokasinya berada diu-
jung sebelah kanan balok.

4. Tambahkan Revolute joint pada balok pada saat layout dijalankan dengan cara:
Add event → System → On start of layout → Add action → balok →
Create revolute joint → Image point=1, pilih Object : Bola, dan jalankan
project tersebut.

5. Untuk melihat hasilnya, tambahkan event dan action dengan cara : Add event
→ Mouse → Mouse button is down → Mouse button = left → Add
action → balok → Apply force towards position → Isikan Force = 50, X
= Mouse.X, dan Y = Mouse.Y.

6. Jalankan project dan gerakkan balok dengan cara menekan mouse kiri untuk me-
lihat hasilnya.

5.4 Tugas
1. Lakukan percobaan untuk menguji sifat fisika pada Construct 2 berupa torque
atau torsi dan Distance joint, dan tuliskan langkah-langkahnya.

2. Buatlah game sederhana yang memiliki sifat fisika (gravity, friction, joint,dll.)
menggunakan Construct 2. Contoh game yang menggunakan sifat fisika : Angry
birds, flappy bird, bowling, bilyard, dll.