Modul Praktikum Game Development

MODUL III

ANIMATIONS & CAMERA

(Pertemuan 6)

Tujuan:

1. Mahasiswa memahami cara membuat animasi gerakan sesuai input yang di berikan
pemain
2. Mahasiswa memahami teknik-teknik kamera dalam Construct 2

3.1 Animation

Salah satu implementasi dari animations adalah untuk membuat karakter atau objek lain
untuk bergerak sesuai event yang diberikan. Untuk membuatnya anda perlu mengakses sprite
editor dengan klik ganda pada sprite yang ingin diberikan animasi. Dalam sprite editor, animasi
dibagi menjadi dua, animations dan animation frame. Animations berisikan kumpulan animasi
yang akan dijalankan ketika suatu trigger aktif. Kita ambil contoh game Super Mario. Game
tersebut memiliki beberapa animasi untuk Mario, di antaranya saat idle, berjalan, dan juga ketika
mati. Ketika pemain memencet tombol kanan-kiri, maka sistem akan memainkan animasi
berjalan ke kanan-kiri. Begitu pula jika pemain memencet tombol missal “X” untuk melompat.
Ketika trigger di aktifkan, maka sistem akan memainkan animasi melompat.

Gambar 3.1 Kotak dialog sprite editor

Ketika mengedit sebuah sprite dalam sprite editor, menu yang ditampilkan dalam
properties bar juga ikut berubah. Berikut penjelasan mengenai properties bar untuk sprite editor:

Program Studi Teknik Informatika 22

Modul Praktikum Game Development
1. Speed: digunakan untuk mengatur seberapa cepat perpindahan frame. Makin besar nilainya,
maka makin cepat perpindahannya. Namun jangan memberikan nilai yang terlalu besar,
karena akan mengurangi performa untuk mobile devices.
2. Loop: ketika suatu animasi dimainkan pada suatu saat ia akan berhenti ketika suatu frame
sudah dimainkan. Namun ketika loop diaktifkan, animasi akan dimainkan kembali dari awal
ketika berhenti, begitu seterusnya sampai berulang-ulang tanpa berhenti.
3. Repeat to: misalkan anda memiliki lima frame, ketika animasi berhenti, maka sistem akan
menayangkan frame terakhir, yaitu nomor lima. Dengan repeat to, anda dapat memilih frame
nomor berapa yang ditayangkan ketika animasi berakhir.
4. Ping-pong: berfungsi untuk membalik urutan animasi yang dijalankan. Jika pertama kali
menampilkan animasi dari depan ke belakang (misalkan 0-5), maka animasi kedua akan di
tampilkan dari belakang ke depan (5-0).

Gambar 3.2 Properties bar untuk sprite editor

KEGIATAN PRAKTIKUM 3.1

MENAMBAH ANIMASI

Pada praktikum 3.1 ini kita akan belajar mengimplementasi animation secara umum
dengan membuka lagi file project yang kita buat pada modul II. Anda sudah membuat event
untuk menggerakan pemain dari berbagai input. Pada praktikum 3.1 anda tinggal menambahkan
animasi untuk membuatnya lebih realistis.

1. Klik ganda sprite pemain, maka akan muncul kotak dialog sprite editor. Pada bagian
Animations, tambahkan dua buah animasi dan beri nama “diam” dan “jalan” dengan cara
klik kanan > Add animation

Program Studi Teknik Informatika 23

Modul Praktikum Game Development

Gambar 3.3 Properties Bar Animations

Selanjutnya klik animasi jalan, dan klik kanan pada properties bar Animation Frame klik
Import frame > From files untuk memasukan gambar yang sudah di siapkan untuk
animasi jalan, lakukan hal yang sama pada animasi diam.

Gambar 3.4 Import gambar pada frames

2. Ganti tab ke event sheet 1. Di bawah ini simulate control untuk arah kanan, tambahkan
satu aksi dibawahnya.

Gambar 3.5 Eventsheet untuk tombol “D”

Lakukan juga simulate control arah selanjutnya.

Program Studi Teknik Informatika 24

Modul Praktikum Game Development
3. Lakukan playtest dan gerakan pemain. Animasi sudah berjalan, tetapi tetap playing
walaupun kita sudah tidak lagi menekan arah kanan maupun kiri. Penyebabnya antara
lain karena animasi yang dibuat hanya berjalan satu arah, yaitu dari animasi diam ke
animasi jalan.

4. Untuk mengembalikan animasi ke state semula, ketika tombol A atau D tidak lagi di
tekan, kembalikan lagi animasi ke diam. Tambahkan event sheet seperti dibawah ini.

Gambar 3.6 Eventsheet control animation

5. Jalankan lagi playtest dan lihat perubahannya. Animasi sudah bisa kembali ke state
semula, dan di sini pemain saat berjalan ke kanan maupun ke kiri hanya menghadap satu
arah, cara mengatasinya kita bisa menambahkan perintah Set Mirrored seperti di bawah
ini agar pemain bisa menghadap berbalik arah sesuai tombol yang di tekan.

Gambar 3.7 Eventsheet Set Mirrored control animation

Program Studi Teknik Informatika 25

Modul Praktikum Game Development
KEGIATAN PRAKTIKUM 3.2
MENAMBAH KAMERA DENGAN SCROLL TO BEHAVIOR

Pada praktikum 3.2 ini kita akan belajar membuat kamera mengikuti pemain kemanapun.
Di dalam Construct 2 ada behavior yang bisa kita gunakan agar seolah-olah kamera mengikuti
pemain yaitu Scroll to behavior.

1. Cobalah mendesain sebuah level game bergenre platformer. Usahakan agar ukuran layout
lebih besar dari ukuran windows size.

2. Beri nama karakter yang digunakan “Hero”.

Gambar 3.8 Pastikan layout lebih besar dari windows size

3. Berikan platform behavior pada karakter, dan solid behavior atau jump-thru behavior
pada platform yang digunakan sebagai tempat berpijak.

Gambar 3.9 Tambah Behavior Platform pada karakter Hero

Gambar 3.10 Tambah Behavior Solid pada pijakan

Program Studi Teknik Informatika 26

Modul Praktikum Game Development
4. Gerakan karakter ke kanan, dan ia akan menghilang dari layar. Padahal level belum
selesai dimainkan.

5. Untuk mengatasinya, berikan scroll to behavior pada karakter Hero agar kamera akan
mengikuti kemana pun karakter pergi. Tambahkan juga bound to layout behavior pada
karakter Hero, sehingga karakter anda tidak akan jatuh ketika berada di pinggir layout.

Gambar 3.11 Tambah Behavior Scroll to & Bound to layout pada karakter Hero

6. Jalankan playtest dan gerakan karakter maka kamera akan fokus ke karakter yang kita
gerakan kemana pun bergerak.

KEGIATAN PRAKTIKUM 3.3

LERP & DUMMY CAMERA

Pada praktikum sebelumnya kita sudah berhasil membuat kamera mengikuti pergerakan
karakter, namun pergerakan kamera masih kasar. Hal itu karena sistem menempatkan karakter
sebagai titik pusatnya (berada ditengah layar), sehingga sekecil apapun karakter bergerak,
kamera akan memposisikan karakter anda di tengah-tengah layar. Oleh karena itu pada
praktikum 3.3 ini kita akan perhalus gerakan kamera dengan ekspresi lerp dan scroll.

1. Buatlah satu sprite bernama “Camera” dengan initial visibility=invisible agar tidak
terlihat ketika di mainkan, untuk pengaturan visibility berada di properties bar dengan
cara klik sprite Camera. Berikan juga warna untuk mempermudah mencari posisinya di
dalam layout.

Gambar 3.11 Sprite “Camera” dengan warna biru

Program Studi Teknik Informatika 27

Modul Praktikum Game Development

Gambar 3.12 Sprite “Camera” di invisible

2. Remove scroll to behavior yang kita buat pada karakter, dan sebaliknya, berikan behavior
tersebut pada Sprite Camera.

Gambar 3.13 Remove scroll to behavior pada karakter Hero

Gambar 3.14 Tambah scroll to behavior pada sprite Camera

3. Buat event agar kamera mengikuti gerakan karakter seperti dibawah ini.

Add event > System > Every tick

Add action > Camera > Set position

X = lerp(Self.X, Hero.X, 0.02)

Y = lerp(Self.Y, Hero.Y-130, 0.02)

Program Studi Teknik Informatika 28

Modul Praktikum Game Development

Gambar 3.15 Event sheet gerakan kamera

Anda memberi tiga buah nilai dalam ekspresi di atas. Pertama adalah posisi awal,
kedua adalah posisi akhir, dan ketiga adalah waktu yang di butuhkan untuk bergerakn
dari posisi awal ke akhir. Self.X dan Self.Y adalah posisi awal kamera, sedangkan
Hero.X dan Hero.Y adala posisi dari player. Nilai 0.02 dapat diganti dengan angka
berapa pun. Makin kecil angkanya, maka gerakan kamera makin lembut dan pelan.

4. Jalankan playtest dan gerakan karakter maka akan terlihat sangat halus gerakan kamera
mengikuti posisi karakter Hero.

Program Studi Teknik Informatika 29