BAB 3 : Game 2D Jenis Platformer

3.1 Tujuan Instruksional

o Dapat mengetahui dan memahami game berjenis platformer.
o Dapat membuat game 2D jenis platformer menggunakan Construct 3.

3.2 Pengantar
3.2.1 Pengertian Game Platformer
Platform games atau sering juga disebut dengan jump and run games,
adalah sebuah subgenre dari action game dimana pemain harus menggerakkan
karakter dari satu titik ke titik lain di suatu arena.
Genre game platformer dicirikan dengan desain berupa medan yang
tidak rata dan platform-platform dengan level ketinggian berbeda. Game ini
bergantung pada kemampuan karakter untuk melompat atau memanjat untuk
mencapai titik tertentu dan meraih goals.
Memanjat, berayun menggunakan tali, melompat dari tembok satu ke
tembok lain, melompat tinggi di udara, meluncur, sampai memantul merupakan
kemampuan-kemampuan karakter yang bisa ditemui di game genre platformer.

Gambar 3.1 : Game Mario Bros Merupakan Contoh Jenis Genre Game
Platform

3.2.2 Konsep Permainan dan Komponen Genre Game Platformer

Konsep game genre platformer terbilang cukup sederhana. Pemain perlu
menggerakkan karakter dari satu platform ke platform lain untuk mencapai

51
goal. Sepanjang perjalanan, karakter mungkin bertemu dengan musuh dan
harus menghindari rintangan dan jebakan. Kalau pemain gagal menghindari
rintangan-rintangan ini, karakter akan mati dan setelah kehabisan nyawa, maka
pemain harus mengulang dari awal. Game genre platformer biasanya sangat
dinamis dan menuntut kecepatan dan ketepatan pemain dalam menggunakan
kontrol.
Gambar yang digunakan untuk objek Tilemap adalah tileset. Merupakan
gambar yang berisi setiap petak berbeda yang dapat digunakan di peta petak.
Objek tile juga bisa diimbangi dan diberi jarak, namun terkadang tidak
diperlukan. Gambar tileset muncul di Tilemap Bar setelah memilih objek,
memungkinkan Anda memilih petak mana yang akan digunakan untuk
menggambar.

Gambar 3.2 : Objek Tilemap pada Construct 3

Pergerakan yang paling umum terdapat dalam game genre platformer

adalah berjalan, berlari, melompat, menyerang, dan memanjat. Game
platformer biasanya memiliki tampilan visual 2D dari samping dengan kamera
mengikuti objek player.

52
 Gambar 3.3 : Visual Game Platformer dengan Construct 3.

Varian game genre platformer yang lebih populer biasanya dengan

karakter yang terus bergerak cepat. Pemain harus mengarahkan karakter
secara tepat untuk mengambil point, menghindari kecelakaan seperti tertabrak
atau terkena jebakan, dan berusaha untuk mencapai tujuan secara tepat waktu.

3.3 Kegiatan Praktikum

3.3.1 Kegiatan 1: Membuat Tilemaps (area bermain)
1. Pada kegiatan 1 ini adalah membuat area bermain dengan menggunakan
objek Tile/Tilemaps.
2. Pertama buat terlebih dahulu project baru dengan nama Platformer_NIM
dengan viewport size 512 x 288 dan orientations Landscape.
3. Selanjutnya resize ukuran dari layout 1 menjadi 760 x 500.

Gambar 3.4 : Mengatur layout.

4. Memasukkan objek background dengan cara klik kanan pada area kerja
layout 1 $ insert new object $ cari dan pilih sprite (beri nama

53
 background) $ =,-./)# $ klik pada area layout 1, maka muncul jendela
animation editor.
5. Pada jendela animations editor, klik icon folder $ cari dan pilih gambar

[Link] dari folder bernama platformer $ ubah

origin atau titik pusat terletak di pojok kiri atas (top left) $ close jendela
animations editor.

Gambar 3.5 : Memasukkan background.

6. Pilih object background kemudian atur posisi nya pada properties bar
menjadi 0,0.

Gambar 3.6 : Mengatur posisi background.

54
7. Untuk background sudah selesai, selanjutnya adalah menambahkan objek
tile pada layout 1.
8. Dengan cara, pada layout 1 klik kanan $ insert new object $ cari dan

pilih tilemap $ &,-./)#$ klik pada area layout 1, maka akan muncul jendela
animations editor.
9. Pada jendela animations editor klik icon folder $ cari dan pilih gambar

[Link] pada folder Platformer $ tutup jendela animations

editor.

Gambar 3.7 : Memasukkan tilemaps.

10. Kemudian drag and drop object tilemap dari project bar ke layout 1 $ atur
posisi pada properties bar menjadi 0,0. Pada Bar Layers pojok kanan
bawah pilih Tilemaps bar.

55
 Gambar 3.8 : Memasukkan tilemaps area ke layout 1.

11. Untuk memasukkan objek tile ke layout, dengan cara : pada menu tilemap
bar, pilih objek tilemap yang ingin dimasukkan $ klik icon draw tiles $
tempatkan objek tile dengan cara klik pada layout.

Gambar 3.9 : Memasukkan objek tiles.

12. Kreasikan area bermain game platformer pada project kalian masing-
masing menggunakan objek tiles. Atau dapat seperti pada gambar
dibawah ini.

56
 Gambar 3.10 : Contoh area bermain game platformer.

13. Selamat Berkreasi !

3.3.2 Kegiatan 2: Sprite Animation

1. Kegiatan 2 akan menambahkan objek player yang memiliki Sprite
Animation. Penjelasan detailnya akan disampaikan oleh aslab. Langkah
pertama yaitu tambahkan Objek Sprite pada Layout 1 dan beri nama
“Player”, letakkan pada di atas platform tanah hijau kiri atas.
Klik kanan 6"'"#C"@1*)#\#$#Pilih =,-./)#[.0#R23.4)#$#pilih objek bernama

Sprite# $# :./&# ,"5"# 6"'"# (1+15# 2"0"7# '.,>",# VPlayer”# $# ?+&(# Insert# $#

51*-.#"(",#2./2.,)*(#61-&)&;B#+.)"((",#123.(#)./-.2*)#6"'"#6+");1/5#)","7#

7&3"*#(&/&#")"-#'.,>",#(+&(#(&/&#6"'"#51*-.B#5"("#"(",#5*,4*+#3.,'.+"#2"/*#

@"&)*#3.,'.+"#Animation Editor:Player

2. C"(*(",#&561/)#;/"5.#'.,>",#(+&(#(",",#6"'"#2">&",#]/"5.#'&2"0"7#$#E&+&7#

Import Frames $#From Strip

57
 Gambar 3.9 : Import Strip Animation.

Lalu, pilih gambar yang bernama [Link]# $# -.).+"7# &)*# "(",# 5*,4*+#

3.,'.+"#(.4&+#*,)*(#5.,>")*/#Import Sprite Strip, atur Number of Horizontal

Cells menjadi 6, dan Number of Vertical Cells menjadi 2, centang juga
Replace entire animation#$#-.).+"7#&)*#(+&(#&561/)9
Hasilnya akan terdapat 12 Frame seperti gambar dibawah ini. Jangan
ditutup dulu jendela Animation Editornya, biarkan seperti gambar dibawah
ini!

Gambar 3.10 : Setelah berhasil Import Animation.

58
3. Setelah berhasil kita import frame karakter Player kita, berikutnya akan
melakukan membuat 3 jenis animation, yaitu Idle, Moving, dan Jump.
Pertama, pada Animations Bar, terdapat 1 jenis Animation bernama
Animation 1, ubah nama tersebut menjadi Idle dan lakukan beberapa
setting yang berada di bawahnya seperti atur Speed menjadi 10 dan Loop
menjadi aktif (dicentang).

Gambar 3.12 : Melakukan

Gambar 3.11 : Mengatur
duplikasi 2 kali dan beri nama
kecepatan animasi dan
menjadi Moving dan Jumping.
perulangan gambar.

Lakukan duplikasi sebanyak 2 kali dan beri nama hingga seperti Gambar
3.12
4. Pertama kita akan membuat animasi Idle, klik Animation Idle pada kanan
atas. Setelah itu perhatikan pada Frame Bar yang berada dibawah. Bagian
frame yang diblok biru tersebut pada gambar 3.13 adalah bagian animasi
yang digunakan pada animation Idle, maka selain frame tersebut, bisa
kalian hapus.

59
 Gambar 3.13 : Frame yang digunakan pada Animation Idle.

Untuk dapat memilih lebih dari satu gambar yang akan dihapus, kalian bisa
klik kiri pada gambar kemudian tekan Ctrl secara bersamaan agar dapat
memilih gambar yang akan dihapus jika gambar lebih dari satu secara
bersamaan.
5. Lakukan hal yang sama pada animation Moving dan Jump dengan
pengaturan seperti gambar 3.14 dan 3.15 !

Gambar 3.14 : Frame yang digunakan pada Animation Moving.

60
 Gambar 3.15: Frame yang digunakan pada Animation Jump.

6. Jika sudah, kalian bisa preview animasi yang telah kalian selesaikan dengan
menekan tombol Ctrl + P atau klik Preview

Gambar 3.16 : Preview Animasi yang yang telah dibuat.

7. Mengatur Bounding Box. Pada Tools Animation Editor, cari tool yang
bernama Edit collision polygon, seperti Gambar 3.17. Kemudian ubah
bentuk semula masih Polygon dengan klik kanan pada gambar player
tersebut $ ubah menjadi Set to bounding box contoh seperti Gambar 3.18.

61
 Gambar 3.17 : Edit Gambar 3.18 : Atur menjadi Set to bounding
Collision pada Player. box.

Atur bounding box nya lebih kecil yang semula seperti Gambar 3.19
menjadi tampak seperti pada Gambar 3.20

Gambar 3.19 : Hasil sebelum di

Gambar 3.20 : Hasil sesudah di
edit Bounding Box.
edit Bounding Box.

8. Terakhir, lakukan Apply to all Animations dengan cara klik kanan pada
gambar player tersebut. kemudian pilih Apply to all Animation. Jika sudah
tutup jendela Animation Editor Player.

Gambar 3.21 : Langkah terakhir bagian Animasi Sprite.

9. Menambahkan Behaviour pada Player tersebut yaitu Solid, Platform, dan

Bound to layout dan Behavior pada Tilemaps cukup Behavior Solid saja.

62
 Gambar 3.23 : Behaviour yang
ditambahkan pada Player.
Gambar 3.22 : Cara Edit
Behaviour.

Gambar 3.24 : Behavior yang ditambahkan pada Tilemaps.

10. Pada Properties Bar Player, atur Double Jump nya menjadi aktif dengan
mencentang Double Jump pada bagian Behavior Platform.

Gambar 3.25 : Mengaktifkan Double Jump.

63
 Sampai sini, kalian bisa coba Jalankan gamenya, dapat dilihat bahwa player
dapat bergerak dengan menggunakan arrow keyboard, namun animasi
yang kita buat belum dapat berjalan dengan baik.
11. Menambah Event untuk Animasi. Pindah ke bagian Event Sheet 1, kita akan
menambahkan sebuah event kondisi yang membuat Player tersebut dapat
bergerak sesuai animasi yang telah kita buat.
H''# FG.,)# $# Pilih E+"@./# $# cari di kategori Platform kemudian pilih is
moving.

Tambahkan kondisi lagi dengan klik kanan pada bagian Player $#E&+&7#Add

Another Condition#$#E&+&7#Player $#cari di kategori Platform kemudian pilih

is on floor.

Gambar 3.26 : Event Menjalankan animasi bergerak.

12. Setelah membuat event kondisinya, kita akan menambahkan Actionnya

yaitu sebuah tindakan ketika kondisi tersebut benar. Klik H''#H4)&1,#$#Pilih

E+"@./#$#cari di kategori Animations kemudian pilih Set animation $#Atur

isi kolom Animation menjadi “Moving” kemudian langsung klik Done. Hasil
akhir akan seperti Gambar 3.27

Gambar 3.27 : Action mengubah animasi bergerak.

13. ?&)"#'*6+&(")#'"/&#FG.,)#)./-.2*)#'.,>",#(+&(#(&/&#6"'"#-"56&,>#)*+&-",#E+"@./#

T@",># (1-1,>^'&-.2*)# 2">&",# <"/>&,U# 6./7")&(",# D"52"/# _9`Q# B# (.5*'&",#

(+&(# (",",# $# E&+&7# M16@# $# C"+*# E"-).# ^# 5.,>>*,"(",# (.@21"/'# M)/+# aM#

(.5*'&",#M)/+#a#X

64
 Gambar 3.28 : Memblok seluruh event.

14. Lakukan invert pada kondisi Platform is moving dan ubah animation
semula Idle menjadi Moving pada Event yang telah di copy-paste.

Gambar 3.29 : Invert Platform is Gambar 3.30 : Edit Animation menjadi

Moving. “Idle”.

Gambar 3.31 : Hasil akhir ketika Animasi player bergerak dan kondisi diam.

15. Lakukan hal yang sama seperti Kegiatan 2 nomor 11 namun cukup Platform
is jump saja pada player dan atur animasi menjadi Jump

Gambar 3.32 : Animasi Player ketika meloncat.

16. Tambahkan object Keyboard pada Project kita dengan cara klik kanan pada
Object Types#$#4"/&#'",#E&+&7#Keyboard $#?.5*'&",#).(",#)1521+#Insert
(tanpa harus mengubah nama)

65
 Gambar 3.33 : Object Type Keyboard ditambahkan.

17. Buat Event baru dengan klik H''#FG.,)#$#Pilih object nya ?.@21"/'#$#cari

di kategori Keyboard lalu pilih R,# (.@# 6/.--.'# $# tekan tombol <click to
choose> kemudian tekan tombol keyboard arrow left/kiri pastikan tertulis
left arrow# $# (+&(# R(# $# (+&(# A1,.9##

%"52"7(",# "4)&1,# '.,>",# 4"/"# Add Action# $# 6&+&7# Player $# 4"/&# 6"'"#

(").>1/&# Appearance kemudian pilih Set mirrored# $# ")*/# 2">&",# 8)").#

5.,3"'&#Mirrored $#(+&(#Done. Tambahkan action baru lagi dibawah Set

Mirrored tersebut, Add Action# $# Player $# 4"/&# '&# (").>1/&# Platform pilih

Simulate control#$#")*/#-)").#M1,)/1+#5.,3"'&#Left $#A1,.9

Gambar 3.34 : Mengubah tampilan Player arah ke kiri.

18. Lakukan hal yang sama dengan membuat event baru seperti langkah 17,
namun arah keyboard menjadi right arrow, Set mirrored menjadi Not
Mirrored dan Simulate control menjadi right.

66
 Gambar 3.35 : Mengubah tampilan Player arah ke kanan.

19. Wall Jump. Memungkinkan Player dapat memanjat dinding, pertama kita
membuat event baru terlebih dahulu dengan cara Add Event# $# 6&+&7#

123.(,@"# Keyboard $# 4"/&# '&# (").>1/&# Keyboard pilih On key pressed# $#

).(",#)1521+#b4+&4(#)1#4711-.c#(.5*'&",#).(",#)1521+#(.@21"/'#arrow atas
/up pastikan tertulis up arrow. Setelah event telah berhasil kita tambahkan,
kita perlu menambahkan kondisi lainnya (Add another condition), terdapat 3
kondisi yang perlu kita tambahkan. Hasilnya akan seperti Gambar 3.36.

H''#",1)7./#41,'&)&1,#$#E+"@./#$#cari di kategori
Platform pilih &-#2@#0"++#$#atur side menjadi Right $#
A1,.

H''#",1)7./#41,'&)&1,#$#E+"@./#$#cari di kategori
Platform pilih #&-#1,#;+11/#$#Done $#Kemudian atur
menjadi Invert

H''#",1)7./#41,'&)&1,#$#?.@21"/'#$#cari di kategori
Keyboard pilih ?.@#&-#A10,#$#?.@#S&>7)#H//10#

Gambar 3.36 : Hasil Event yang telah ditambahkan.

20. Menambahkan aksi (Add Action). Tekan tombol Add Action#$#6&+&7#Player

$#4"/&#'&#(").>1/&#Platform pilih Set vector X#$#")*/#,&+"&#X.4)1/#N#5.,3"'&#-

1000#$#A1,.9#%"52"7(",#"4)&1,#+">&#'&2"0"7#"4)&1,#)"'&B#Add Action#$#6&+&7#

67
 Player $#4"/&#'&#(").>1/&#Platform pilih Set vector Y#$#")*/#,&+"&#X.4)1/#!#

5.,3"'&#-300 $#A1,.9

Gambar 3.37 : Hasil Event setelah ditambahkan Actionnya.

21. Lakukan hal yang sama seperti Langkah 19 hingga 20, namun ubah bagian
Another conditionnya

H''#",1)7./#41,'&)&1,#$#E+"@./#$#cari di kategori
Platform pilih &-#2@#0"++#$#atur side menjadi Left$#A1,.

H''#",1)7./#41,'&)&1,#$#?.@21"/'#$#cari di kategori
Keyboard pilih ?.@#&-#A10,#$#?.@#C.;)#H//10#

Serta bagian Actionnya, nilai Vektor X nya menjadi nilai positif (1000)

Gambar 3.38 : Hasil Menambahkan Wall Jump Kiri dan Kanan.

22. Terakhir matikan double jumpnya pada Behavior Platform Player

68
 Gambar 3.39 : Menonaktifkan double-jump pada behavior Platform Player.

23. Sebagai memastikan, kalian bisa lihat untuk kegiatan 2 terdapat event yang
nantinya akan seperti gambar dibawah

Gambar 3.40 : Hasil akhir Event Sheet Kegiatan 2.

3.3.3 Kegiatan 3 : Following Camera and Alternative Key

1. Pada kegiatan 3 adalah membuat following camera dan alternative key
dimana nantinya kamera akan secara otomatis mengikuti pergerakan player.
2. langkah untuk membuat following camera adalah kita harus menambahkan
behavior ScrollTo pada objek player. langkah pertama kita pergi pada layout
1 kemudian klik kanan pada objek player dan pilih edit behavior#$#Add New

Behaviour$#4"/&#'",#6&+&7#ScrollTo.

Gambar 3.41 : Menambahkan Behaviours.

3. ?.5*'&",# (&)"# 5.52*")# "+)./,")&G.# (.@# *,)*(# 5.,>>./"(",# 6+"@./9# 6./>&#

6"'"#.G.,)-7..)#\#$#6&+&7#add event#$#Keyboard#$#on key pressed#$##*2"7#

(.@#5.,3"'&#W.

69
 Gambar 3.42 : Membuat alternative key untuk dapat menggerakkan Player.

4. kemudian tambahkan action supaya ketika tombol W ditekan maka player

akan melompat. pilih Add Action#$#E&+&7#Player#$#E&+&7#Simulate Control#$#
Jump.

Gambar 3.43 : Menambahkan action.

5. Lakukan langkah yang sama (langkah 3&4) untuk membuat tombol A=Left
dan D=Right.

Gambar 3.44 : Menambahkan tombol baru untuk menggerakkan Player.

6. Tambahkan Action baru pada event keyboard on A pressed. pilih add

action##$#E&+&7#Player#$#Set Mirrored$#6&+&7#-)").#5.,3"'&#Mirrored.
7. lakukan langkah 6 pada event keyboard on D Pressed namun ubah state
menjadi Not Mirrored.

Gambar 3.45 : Menambahkan action.

3.3.4 Kegiatan 4 : Collectable Coins & Power Up

1. Pada kegiatan 4 adalah membuat player dapat mengambil koin dan
menambahkan power up.

70
2. langkah awal adalah menambahkan objek koin dengan cara beralih pada
layout 1#$#(+&(#(",",#$#&,-./)#,.0#123.4)#$ pilih Sprite kemudian berikan
nama Coin kemudian insert.
3. Masukkan object atau klik pada Layout View. Pada animation editor, klik
kanan bagian H,&5")&1,# ]/"5.-# $# =561/)# ]/"5.-# $# ]/15# 8)/&6# $# pilih
gambar dengan nama [Link].

Gambar 3.46 : Meng-import frames.

4. Setelah memilih object maka akan muncul pop up Import Stripe Strip. Ubah
number of horizontal cells menjadi 10 kemudian klik import.

Gambar 3.47 : Import stripe strip.

5. Pilih Animations 1 $ checklist loop $ atur speed bernilai \L# $ close

Animations Editor .

Gambar 3.48 : Animations properties.

6. Posisikan objek koin sesuai keinginan.

71
 Gambar 3.49 : Mengatur posisi object koin.

7. Tambahkan global variable baru dengan nama Score. pergi pada

eventsheet 1 kemudian klik kanan $ pilih Add Global Variabel $ ubah
nama menjadi Score.
8. kemudian tambahkan Event baru. pilih H''#FG.,)$ Pilih E+"@./#$ Pilih#=-#

RG./+"66&,>#H,1)7./#R23.4)$ pilih object menjadi Coin.

Gambar 3.50 : Menambahkan event baru.

9. Tambahkan Action baru untuk membuat koin menghilang ketika mengenai

player. pilih H''#"4)&1,#$ pilih Coin $ pilih Destroy.

10. Tambahakan Action lagi untuk menambahkan Score. pilih H''# H4)&1,# $#

8@-).5#$#H''#)1#$ pilih variabel menjadi Score dan value menjadi 1.

Gambar 3.51 : Menambahkan action.

11. Selanjutnya menambahkan Power Up untuk membuat player

dapatmelompat menjadi 2 kali.
12. pilih layout \$#(+&(#(",",#$#&,-./)#,.0#123.4)#$#pilih object Sprite kemudian
berikan nama Power_Up, lalu insert
13. Pilih Fill (F) lalu pilih warna sesuai selera masing-masing, kemudian ubah
ukuran (resize (ALT + R)) menjadi width (pixels) = 25, Height (pixels) = 25
lalu klik OK.

72
 Gambar 3.52 : Memberikan fill.

14. kemudian tambahkan Eventbaru. pilih H''# FG.,)$ Pilih E+"@./# $ Pilih# =-#

RG./+"66&,>#H,1)7./#R23.4)$ pilih object menjadi Power_Up.

15. Tambahkan Action baru untuk membuat Power_IP menghilang ketika

mengenai player. pilih H''#"4)&1,#$ pilih E10./YP6$ pilih Destroy.
16. Tambahkan Action baru untuk membuat player dapat melompat 2 kali ketika
mengenai Power Up. pilih Add Action $ pilih E+"@./# $ Pilih 8.)# A1*2+.#

d*56#$ ubah State menjadi Enable.

Gambar 3.53 : Menambahkan action.

17. Lakukan pengujian (run / preview) terhadap project game.

3.4 Tugas & Latihan

1. Cari dan gantilah di internet untuk bentuk Objek Sprite Power Up menjadi
lebih menarik dengan menggunakan Sprite Animation!
2. Buatlah event baru untuk memberikan efek Power Up hanya aktif selama 5
detik, kemudian setelah 5 detik efek Power Up akan menghilang!
Lakukan Screenshot dengan Debug Layout dan pastikan terlihat
perbedaannya sebelum dan sesudah!

73