LAPORAN PRAKTIKUM

GAME EDUKASI

MODUL 4
ANIMASI SPRITE

Oleh:
Inas Nur ‘Afifah A710190093

Program Studi Pendidikan Teknik Informatika

Fakultas Keguruan dan Ilmu Pendidikan
Universitas Muhammadiyah Surakarta
2022
Mata Kuliah : Praktikum Game Edukasi Ttd
Program Studi : Pendidikan Teknik Informatika
Nama : Inas Nur ‘Afifah
NIM : A710190093
Submit pertama : 15 April 2022
Accepted : 15 April 2022

MODUL 4
ANIMASI SPRITE

A. DASAR TEORI
Animasi merupakan salah satu aspek yang menyebabkan suatu game menarik
untuk bisa dimainkan. Animasi bisa dibuat dengan menambahkan animasi sprite
karakter pada player ataupun pada karakter bukan player. Karakter player yang
dimasukkan akan melakukan suatu gerakan animasi jika pemain game melakukan
penginputan. Dan sebaliknya, jika karakter player tidak dilakukan penginputan dari
game player, maka animasi tersebut akan diam. Hal tersebut terjadi kecuali kondisi
default dari sprite tersebut dapat melakukan animasi.
Karakter yang bukan pemain biasanya dapat menggerakkan animasi tanpa
memperoleh suatu input maupun peranan dari player game sendiri. Karakter yang
bukan pemain ini dapat berupa monster (enemy) yang bisa melakukan interaksi
secara langsung dengan player ataupun game environment dengan tujuan sebagai
penambahan daya tarik game tersebut. Tanpa adanya environment yang
ditambahkan, suatu game tidak akan menarik untuk dimainkan.
Diketahui bahwa animasi yaitu berupa susunan gambar yang diam (statis
graphics) yang telah dibuat efek seakan-akan seperti bergerak. Animasi yang telah
dibuat tersebut berjalan secara berurutan atau sequence pada waktu tertentu
(sesuai timeline) sehingga menciptakan suatu gambar yang dapat bergerak.
Beberapa susunan gambar tersebut menghasilkan gambar 2D, karena pada animasi
2 dimensi dan 3 dimensi mempunyai proses maupun cara berbeda untuk bisa
menjalankan suatu animasi yang diinginkan.
Pada aplikasi Construct 2 yang merupakan suatu game engine yang dipakai
sebagai pembuatan game berbasis 2 dimensi. Maka animasi yang akan dijalankan
pada aplikasi tersebut juga merupakan kumpulan gambar 2 dimensi yang telah
disusun secara berurutan. Dalam Construct 2 ataupun game engine yang lainnya
dengan berbasis 2 dimensi untuk dapat menganimasikan biasa disebut dengan
sprite. Gambar pada animasi 2 dimensi tersebut telah tersusun pada beberapa
gambar tunggal yang diam atau sprite secara bergantian dengan waktu yang
ditentukan seakan-akan gambar tersebut bergerak seperti melakukan suatu
animasi.
Sprite
 Sprite merupakan suatu gambar tunggal yang telah digabungkan menjadi satu
bagian pada adegan yang ukurannya lebih besar. Sprite ini merupakan salah satu
cara yang dapat digunakan untuk membuat suatu adegan pada game egine dengan
ukuran yang lebih kompleks dan besar. Kita dapat melakukan manipulasi pada
setiap sprite secara terpisah. Hal ini bertujuan untuk memberikan suatu control
yang lebih untuk melakukan pengaturan pada adegan dalam gambar yang ada pada
game, serta cara pemain untuk melakukan inteeraksi pada adegan dalam game yang
dibuat.
Terdapat satu hal yang umum saat membuat game dengan sprite yang
jumlahnya banyak. Biasanya masalah akan muncul saat sprite-sprite tersebut
terjadi secara individualnya. Hal tersebut karena game membutuhkan memori dan
pemrosesan yang jumlahnya cukup besar. Solusi yang dapat dilakukan untuk dapat
memecahkan permasalahan seperti diatas, yaitu dengan menggunakan spritesheet
(kumpulan beberapa sprite).
Spritesheet merupakan beberapa sprite yang dikumpulkan dan digabungkan
menjadi satu gambar. Selain itu, spritesheet juga diguanakn untuk melakukan
percepatan proses menampilkan gambar-gambar kedalam layar. Dengan
menggunakan sprotesheet ini, kita dapat dengan mudah menampilkan satu gambar
menjadi bagian-bagian tertentu dengan lebih cepat daripada menggunakan metode
yang memuat banyak gambar kemudian diperlihatkan satu per satu dan itu menyita
waktu pembuatan. Metode spritesheet ini sebenarnya hanya menampung
spritesheet secara berurutan secara cepat, sehingga akan muncul ilusi gerakan
animasi yang sesuai dengan karakter sprite yang dimasukkan. Hal ini sama dengan
cara yang dipakai proyektor dalam menampilkan film pada layar.
Komponen-komponen yang terdapat pada spritesheet terbagi menjadi 2
komponen, yaitu frame dan putaran, yang dijelaskan seperti berikut:
1. Satu frame spritesheet merupakan satu gambar yang terdapat dalam spritesheet
(frame)
2. Saat frame-frame tersebut ditampilkan dengan urut sehingga menciptakan ilusi
gerakan pada animasi, maka hal ini disebut dengan satu putaran animasi
(putaran)
Kode pemorgraman yang digunakan untuk menciptakan animasi spritesheet
ada tiga. Tiga hal tersebut dilakukan untuk membuat suatu kode pemrograman
animasi berbentuk spritesheet, yaitu:
1) Menciptakan suatu objek gambar animasi
2) Mengupdate setiap objek pada gambar di setiap frame dalam animasi
3) Menampilkan suatu frame gambar pada layar
Spritesheet yang dipakai untuk membuat sutau game mempunyai ukuran
frame yang berbeda satu sama lain, maka perlu memasukkan suatu parameter
ukuran tinggi dan lebar pada frame dalam spritesheet tersebut. Hal ini untuk
mempermudah kita dalam melakukan perhitungan secara akurat Perlu diketahui
dan diingat bahwa ukuran pada stiap frame yang terdapat dalma spritesheet
mempunyai ukuran tinggi dan lebar yang sama, sehingga tidak sulit untuk dapat
menampilkan animasi pada layer game.
Mengupdata Objek Gambar
Untuk melakukan updata suatu gambar pada animasi, kita perlu melakukan
pergantian untuk setiap frame gambar yang ingin diperlihatkan. Pada setiap frame
yang akan dijalankan dalam game nanti, akan dilakukan update gambar yang akan
diperlihatkan. Akan tetapi, jika kita tidak menginginkan setiap frame pada gambar
tersebut langsung mengalami pergantian, maka perlu melakukan pengaturan
berapa banyaknya frame yang akan diperlihatkan pada spritesheet dan berama
waktu yang diperlukan untuk menunda sebelum frame pada gambar berganti ke
frame gambar berikutnya.
Dalam menambahkan frame gambar pada spritesheet kita perlu mengingat
bahwa animasi yang akan ditampilkan tidak boleh berisi frame gambar yang
kosong. Hal ini karena akan merusak ilusi pada gambar agnimasi yang akan
ditempilkan akbibat terdapat gambar yang kosong pada bagian tengah animasi.
Untuk mengantisipasi hal tersebut, maka diperlukan memasukkan suatu parameter
nomor yang telah diurutkan terakhir pada frame gambar pada bagian fungsi yang
terdapat pada spritesheet,
Menampilkan gambar pada layer
Untuk menampilkan gambar yang terdapat pada spritesheet kedalam layar,
yaitu dengan cara melakukan penampilan gambat yang ada pada sebuah tile map.
Pertama kita menghitung jumlah baris pada gambar yang akan ditampilkan dengan
cara melakukan perhitungan modulo pada frame saat ini serta jumlah frame setiap
barisnya. Kemudian, kita menghitung jumlah kolom dengan cara membagi frame
sekarang dengan frame setiap barisnya. Dengan melakukan perhitungan tadi, bisa
untuk menentukan suatu koordinat yang ada pada frame yang akan dilihat dengan
melakukan perkalian hasil perhitungan yang tadi dengan frameWidth dan
frameHeight.
Menampilkan Beberapa Animasi Dari Spritesheet yang sama.
Kode yang telah dibuat tadi hanya akan menampilan satu animasi saja. Tetapi,
pada umumnya dalam satu spritesheet biasanya terdiri dari lebih satu karakter
animasi. Untuk dapat menampilkan lebih daru saty animasi, bisa dilakukan dengan
cara melakukan perubahan fungsi pada spritesheet supaya dapat mengatasi
animasi yang lebih dari satu.
Membuat Objek Gambar
Terdapat 2 fungsi yang dapat digunakan untuk membagi spritesheet dengan
animasi yang sama. Fungsi pertama untuk menangani gambar dan kedua untuk
menangani setiap animasi pada spritesheet. Kedua fungsi tersebut akan melakukan
penyimpanan informasi mengenai gambar serta ukuran pada frame yang digunakan
 untuk membuat animasi game, sehingga bisa digunakan untuk membuat objek
gambar animasi pada spritesheet.
B. TUJUAN PRAKTIKUM
 Mahasiswa dapat membuat animasi menggunakan sprite pada game engine Construct
2
 Menambahkan obstacle pada objek

C. HASIL DAN ANALISA

Kegiatan 1: Menambahkan Karakter

Gambar 4.1 Karakter Animasi

Pada kegiatan 1, yaitu menambahkan karakter sprite dan membuat karakter
tersebut bisa berjalan kekanan, kiri, atas, maupun bawah pada Construct 2. Setelah
sprite animasi ditambahkan kitab isa melakukan pengaturan pada bagian animation
frame dengan membuat frame baru dan mengatur arah gerak animasi berdasarkan
gambarnya (Bawah, atas, kanan, dan kiri). Jadi, pada setiap arah animasi
mempunyai 4 gambar (mempunyai 3 frame dimulai dari indeks 0 sampai indeks 3).
Kemudian, menambahkan suatu behavior berupa 8-direction dan menambahkan
event (add event) pada event sheet seperti pada gambar 4.1. Maka animasi akan
bergerak keatas, bawah, kanan, dan kiri sesuai dengan keyboard yang dipilih oleh
pengguna dan sesuai dengan gambar yang telah diatur pada animation frame.

Kegiatan 2: Menambahkan Obstacle

 Gambar 4.2 Obstacle
Pada kegiatan 2, yaitu menambahkan obstacle pada game. Obstacle merupakan
penghalang animasi, jadi animasi tidak bisa berjalan apabila didepannya terdapat
suatu obstacle. Caranya dengan insert new object spriye (memilih warna).
Obstacle yang dimasukkan pada kegiatn 2 ini berupa kotak berwarna biru.
Kemudian obstacle diberikan behavior solid supaya saat player memainkan game,
karakter yang dimainkan tidak bisa melewati atau menembus obstacle tersebut.

PENYELESAIAN 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).

Gambar 4.3.1.1 Scame Main Menu

b) Scene untuk bermain game.

 Gambar 4.3.1.2 Play

c) Scene untuk petunjuk cara bermain game.

Gambar 4.3.1.3 Help

d) Scene untuk pengaturan game.

Gambar 4.3.1.4 Setting

 Pada tugas nomor 1, yaitu membuat main menu yang berisi, yaitu play
(start button : untuk memulai permainan), setting button (pengaturan pada
game) dan help button (petunjuk penggunaan game) yang masing-masing
saling terhubung satu sama lain. Pada main menu ketika kita menekan salah
satu pilihan baik play, help, maupun setting, maka akan membuka layout
yang diinginkan sesuai yang dipilih. Adapun add event maupun add action
digunakan untuk melakukan input pada isi dari scane main menu.

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

Gambar 4.3.2
Pada tugas nomor 2, yaitu player akan berjalan mencari koin dan jika
menangkap koin poin pada player akan bertambah. Caranya dengan
menambahkan variable global yang diberi nama “Scroe”, tipe “Number, dan
initial value “0”. Setelah itu kita pilih add event systemglobal & local
variablepilih add to pilih variable score. dengan value:1. Selain itu, kita juga
menginputkan add eventsystemevery ticktext dengan mengisi bagian
text dengan “ Score:”&Score.

3. Tambahkan enemy yang ketika ditabrak player akan mati dan game over.
 Gambar 4.3.3
Pada tugas nomor 3, yaitu menambahkan enemy dan saat menabrak
player akan mati dan game akan berakhir. Caranya dengan menambakan event
add eventPlayerAnimationOn collision with another objectenemy dan
menambhakan aksi yaitu add actionsystemrestart layout. Artinya ketika
player ditabrak oleh enemy, maka player akan mati dan akan kembali ke layout
awal lagi.

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

Gambar 4.3.4
Pada tugas nomor 4, yaitu menambahkan back button dimana jika ditekan
akan kembali pada halaman depan. Caranya dengan menanbahkan event, yaitu add
eventmouseon left button clicked on back actionsysntemgo to main
menu.

D. KESIMPULAN DAN SARAN

 Animasi merupakan salah satu aspek yang menyebabkan suatu game menarik
untuk bisa dimainkan. Animasi bisa dibuat dengan menambahkan animasi sprite
karakter pada player ataupun pada karakter bukan player.
  Sprite merupakan suatu gambar tunggal yang telah digabungkan menjadi satu
bagian pada adegan yang ukurannya lebih besar. Sprite ini merupakan salah satu
cara yang dapat digunakan untuk membuat suatu adegan pada game egine
dengan ukuran yang lebih kompleks dan besar.
 Spritesheet yang dipakai untuk membuat sutau game mempunyai ukuran frame
yang berbeda satu sama lain, maka perlu memasukkan suatu parameter ukuran
tinggi dan lebar pada frame dalam spritesheet tersebut. Hal ini untuk
mempermudah kita dalam melakukan perhitungan secara akurat

E. DAFTAR PUSTAKA
[1] indrapermanahadi.wordpress.com. (2014). Diakses 11 April 2022, dari
https://indrapermanahadi.wordpress.com/category/construct-2-tutorial/.
[2] teknosecaret.wordpress.com. (2019). Diakses 12 April 2022, dari
https://teknosecret.wordpress.com/2019/03/28/tutorial-mekanik-pergerakan-
dan-animasi-karakter-menggunakan-construct-2/.
[3] elgaretsahara.blogspot.com. (2019). Diakses 12 April 2022, dari
http://elgareysahara.blogspot.com/2019/04/membuat-karakter-berjalan-di-
construct-2.html.
[4] mynextawakening.wordpress.com. (2018). Diakses 12 April 2022, dari
https://mynextawakening.wordpress.com/2018/12/16/tutorial-membuat-karakter-
berjalan-di-construct-2/ .
[5] srliansyahazhary.blogspot.com. (2015). Diakses 11 April 2022, dari
http://arliansyahazhary.blogspot.com/2015/02/membuat-menu-utama-pada-game-
dengan.html.