Bab 2

Platformer

A. KOMPETENSI DASAR
• Memahami konsep platformer
• Membuat game edukasi berbasis platformer
• Membuat Enemy / Musuh Player

B. ALOKASI WAKTU
2 js (2x50 menit)

C. PETUNJUK
• Awali setiap aktivitas dengan do’a, semoga berkah dan mendapat kemudahan.
• Pahami Tujuan, dasar teori, dan latihan-latihan praktikum dengan baik dan benar.
• Kerjakan tugas-tugas dengan baik, sabar, dan jujur.
• Tanyakan kepada asisten/dosen apabila ada hal-hal yang kurang jelas.

PROJECT 1
Membuat Layout Game Edukasi

1. Buat Project baru:

2. Pilih New Empty Project, maka ukuran layout akan tersetting secara default, lalu klik Open.
Sekarang akan muncul satu layout kosong. Layout ini digunakan untuk meletakkan berbagai
objek game seperti tampilan level dalam game atau layar menu. Dalam aplikasi lain, layout ini
bisa juga disebut room, scene, atau frame.
3. Pertama-tama, setting ukuran layout . Klik kiri di area yang masih kosong pada layout. Akan
muncul Layout Properties di Properties Bar. Ganti ukuran level menjadi 4000 x 2048.

4. Saatnya untuk menata gambar latar belakang (background) di sepanjang layout. Double-click
area kosong di layout, akan muncul pilihan Insert New Object. Double click objek Tiled
Background untuk menambahkan latar belakang tersebut.

5. Kursor mouse akan berubah menjadi crosshair (tanda tambah). Klik pada sembarang tempat di
dalam area layout. Akan muncul Image Editor untuk memasukkan gambar menjadi tile.
Sekarang import file Background Image\TileBackground.png dari paket sprite. Klik Open untuk
memasukkan gambar
6. Atur ukuran latar belakang untuk menutup keseluruhan layout. Pastikan objek tadi sudah dipilih
(klik kiri pada gambar tersebut di layout), lalu propertinya akan muncul di Properties Bar.
Untuk menutupi keseluruhan layout, atur Position menjadi 0,0 dan Size menjadi 4000, 2048
(sama dengan ukuran layout). Gambar latar belakang ini cukup besar, jadi akan sulit melihat
keseluruhannya dengan tingkat zoom saat ini. Zoom out untuk melihat keseluruhan gambar.
Tahan Control dan Scroll roda mouse ke bawah untuk zoom out. Atau pilih View - Zoom out
pada ribbon (menu di bagian atas Construct 2) beberapa kali.
Modul Game Edukasi TE – UM

7. Sekarang keseluruhan layout sudah terlihatt, dan akan terlihat seperti Gambar dibawah
ini: Bukalah Base Pack Aset (disertakan dalam modul) dan pilihlah sprite beserta objek
yang sesuai (Buatlah Sesuai Kreatifitas Kalian)!

GE 2017 Ahmad Mursyidun Nidhom

Modul Game Edukasi TE – UM

PROJECT 2
Membuat Animasi Karakter
1. Sekarang kita perlu tambahkan sprite untuk pemain. Sama seperti
sebelumnya,double click area kosong di layout untuk menambahkan objek baru lalu
pilihSprite. Saat muncul crosshair, klik di atas tile, lalu akan muncul Image Editor
2. Kita perlu mengimpor sprite untuk animasi idle pemain. Seperti sebelumnya, namun
kali ini jika frame idle hanya 1, maka klik kanan window Animation Frames dan pilih
Import From files.

3. Buat object solid sebagai lantai bagi player

4. Setelah Object Latar dan Player Sudah berada pada layer untuk membuat karakter
beranimasi ke arah kiri, kita tidak perlu menyediakan gambar animasi khusus karakter
menghadap ke kiri. Fitur mirror sprite bisa kita gunakan untuk mengubah arah

GE 2017 Ahmad Mursyidun Nidhom

Modul Game Edukasi TE – UM

animasi. Kita perlu buat event untuk mendeteksi apakah pemain menghadap kanan
atau kiri. (Pastikan game kita sudah memiliki objek Keyboard)
5. Langkah pertama pilih objek player kemudian berikan behavior platfrom

6. Kemudian klik kanan pilih insert new object dan pilih keyboard

GE 2017 Ahmad Mursyidun Nidhom

Modul Game Edukasi TE – UM

7. Kemudian Ke Even Sheet 1 (Sebelah Kanan Layout 1) dan Add Event:

GE 2017 Ahmad Mursyidun Nidhom

Modul Game Edukasi TE – UM

8. Add event > Keyboard > Is key down > tekan tombol kanan. Add Action > Pemain > Set
mirrored > Not mirrored. Event ini akan memastikan saat pemain bergerak ke kanan
animasinya akan mengarah ke kanan.

GE 2017 Ahmad Mursyidun Nidhom

Modul Game Edukasi TE – UM

8. Maka Player akan berganti arah kekiri ketika tombol keyboard diklik kekiri

Studi Kasus 1

Ulangi Langkah tersebut sehingga Anda terbiasa dengan ADD EVENT

GE 2017 Ahmad Mursyidun Nidhom

Modul Game Edukasi TE – UM

PROJECT 2
Membuat Animasi Karakter Jumping, Idle dan Walk

1. Klik Kanan Player dan pilih add animation

2. Ganti Nama Default menjadi Idle, kemudian add animation dan rename menjadi walk
3. Setelah terdapat animation walk kemudian pilih open file dan pilih sprite object walk

GE 2017 Ahmad Mursyidun Nidhom

Modul Game Edukasi TE – UM

4. Buat Event Seperti dibawah ini:

GE 2017 Ahmad Mursyidun Nidhom

Modul Game Edukasi TE – UM

Studi Kasus 2 (Wajib) :

Buatlah Sprite Musuh (Enemy) yang dapat bergerak ke kanan dan kekiri
menggunakan behavior FLASH (Bila terkena enemy ditandai dengan player
yang berkedip)!
Note : Berikan animasi player ketika terkena musuh

GE 2017 Ahmad Mursyidun Nidhom