Membuat Karakter Berjalan di Construct 2

Pada tulisan sebelum nya saya telah menjelaskan bagaimana membuat sebuah game platform sederhana. Secara prinsip yang dibutuhkan adalah sprite "platform" yang kita beri behavior solid. Dan sprite player (Mario) yang kita beri behavior platform.

Dari hasil akhir yang masih sederhana, banyak hal yang bisa diperbaiki. Dalam tulisan ini, kita akan membuat sprite image dalam bentuk lain selain kotak dan membuat sprite tersebut bergerak (animasi) seperti orang berjalan.

Untuk membuat gambar karakter, tentu nya kita harus menggambar sendiri karakter yang kita inginkan. Misal nya apakah karakter player kita berbentuk manusia, robot, hewan kucing, dll. Pada dasar nya semua software / tools untuk menggambar bisa digunakan, seperti Adobe Photoshop, Coreldraw, dll. Software2 tersebut termasuk software yang berbayar. Bisa juga kita gunakan software free, seperti Inkscape.

Namun, untuk percobaan, kita gunakan free assets / gambar yang disediakan oleh Scirra (download freebundle.zip disini). Setelah di ekstrak, hasilnya ada beberapa folder seperti Ambient FX, Music, Sound FX dan Sprites. Silahkan di ubek2 folder Sprites untuk mencari gambar sprite yg diinginkan. Contoh nya disini saya akan menggunakan sprite Alien.

Kita buka kembali project platformer yang telah dibuat sebelumnya.

Perhatikan di pojok kanan, ada object Mario. Klik kanan dan Edit Animation

Nanti nya akan terbuka box, Edit image: Mario.

Klik pada icon Load an image from file. Lalu pilih file image yang diinginkan, yaitu file alienBlue_stand.png.

Maka sekarang, sprite kita sudah berganti dari kotak hijau menjadi image / gambar Alien. Disini sekaligus kita perbaiki collision polygon nya, yaitu bentuk polygon sebenarnya yang menentukan titik tabrakan. Kalau image sprite kita masih berbentuk kotak, maka polygon nya juga kotak. Namun apabila bentuk nya sudah bervariasi seperti Alien ini, maka kita perlu memperbaiki collision polygon nya. Contoh nya pada gambar di bawah ini, kita akan perbaiki bentuk polygon nya sampai mengcover kaki Alien nya.

Apabila hasil editing nya, sprite jadi terlalu kecil (atau terlalu besar) bisa dirubah2 ukurannya. Disini saya rubah ukurannya menjadi 44, 61.

Nah, sampai disini target pertama telah kita selesaikan, yaitu merubah image sprite dari bentuk kotak menjadi bentuk lain yaitu Alien.

Selanjutnya kita buat, bagaimana supaya apabila karakter kita gerakkan ke kanan atau kiri, maka akan terlihat seperti "berjalan".

Kita buka Edit Animation lagi seperti langkah di atas. Perhatikan di box yang kanan, yaitu box Animation, disitu terdapat kotak hijau kecil bertuliskan Default. Klik kanan di bawah nya, pilih Add Animation. Lalu kita beri nama animation baru tersebut "Jalan", seperti gambar berikut.

Setelah itu klik pada animation Jalan, dan perhatikan tampilan sprite nya masih kosong (hanya ada collision polygon bentuk kotak). Kemudian kita load image Alien yang lain yaitu alienBlue_walk1.png. Caranya sama seperti yang dijelaskan sebelumnya. Jangan lupa, collision polygon nya kita perbaiki juga sehingga hasilnya seperti gambar berikut.

Perhatikan di bagian / box Animation Frames. Disitu ada angka '0', yang berarti frame 0 sudah dibuat. Apabila kita baru membuat animation, biasanya di atas angka '0' tidak akan muncul gambar apapun. Silahkan di tutup dan buka lagi box Edit Animation, maka gambar / image Alien yang kita load sebelum nya akan muncul di atas angka '0'. Klik kanan di area Animation Frames, pilih Import Frames > From File.

Akan muncul box Open file, dan pilih file image alienBlue_walk2.png.

Sekarang kita sudah punya 2 frame (frame 0 dan 1) berikut image yang telah kita load.

Perhatikan untuk frame 1, bentuk collision polygon nya jadi kotak. Untuk memperbaiki nya, klik / pilih frame 0. Lalu klik kanan pada gambar sprite dan pilih Apply to whole animation. Ok, sekarang frame 1 sudah memiliki collision polygon yg sama bentuk nya dengan frame 0.

Kemudian untuk membuat animasi berjalan terus menerus, klik pada animation "Jalan". Perhatikan pada bagian properties di sebelah kiri Construct 2, ada attribut Loop. Kita rubah nilai nya menjadi Yes.

Selanjutnya kita ingin menggerakkan karakter, sekaligus membuat karakter seperti "berjalan". Pertama, kita masukkan dulu objek baru, yaitu keyboard. Klik kanan di Object types di bagian / kolom Projects, lalu pilih Insert new object. Box insert new object terbuka, dan pilih Keyboard.

Kemudian kita ingin menggerakkan karakter sekaligus melakukan beberapa pengecekan, misalnya apakah tombol panah kiri atau kanan yg di tekan.

Selama ini kita banyak berinteraksi dengan Layout untuk memasukkan gambar / sprite dan menata letak sprite di layar. Sekarang saat nya kita berkenalan dengan Event Sheet, yaitu sheet / halaman untuk meletakkan kondisi dan pengaturan pada game.

Klik / buka Event sheet, kemudian klik pada tulisan Add event. Box Add event akan terbuka, dan kita pilih Keyboard.

Klik tombol Next, berikutnya muncul pilihan untuk pengecekan kondisi. Disini kita pilih Key is down, yang artinya apabila ada tombol yang ditekan maka kita lakukan Action selanjutnya.

Klik tombol Next, selanjutnya muncul box Parameters for Keyboard: Keyboard is down. Klik pada bagian .

Muncul box berikutnya: Choose a key. Disini kita diminta untuk menekan tombol. Silahkan tekan tombol panah kanan di keyboard dan klik Ok.

Sekarang di Event sheet, kita telah memiliki event Keyboard > Right arrow is down. Di sebelah kanan nya ada tulisan Add action, klik tulisan Add action tersebut.

Box Add Action akan terbuka, pilih Mario dan klik Next. Pada box berikut nya, pilih Set mirrored di bawah grup Appearance dan klik Next. Kemudian box Parameter for Mario: Set mirrored terbuka, kita pilih State > Not mirrored dan klik Done.

Penjelasan dari langkah di atas seperti ini, apabila kita menekan tombol panah kanan maka state Mario akan dirubah menjadi Not mirrored atau sama dengan karakter menghadap ke kanan. Not mirrored artinya image tidak akan dibalik, atau sesuai dengan asli nya yaitu menghadap ke kanan.

Bisa ditebak action yang kita butuhkan apabila tombol panah kiri ditekan? Yap, state Mario dirubah menjadi Mirrored, yang berarti karakter Mario akan menghadap ke kiri. Mirrored, artinya image akan dibalik, yaitu kebalikan aslinya alias menghadap ke kiri.

Jika sudah selesai add event dan action untuk panah kanan dan kiri, kita akan mendapatkan tampilan seperti ini.

Selanjut nya kita tambahkan event baru, yang akan mendeteksi apakah karakter Mario sedang bergerak atau tidak. Klik Add event pilih Mario. Kemudian pada box Add event, kita pilih event Is moving dibawah grup Platform.

Untuk membuat Mario / alien berjalan, klik Add action. Pilih Mario dan klik Next. Pilih Set animation di bawah grup Animations dan klik Next. Kemudian muncul box Parameters for Mario: Set animation, dan pada bagian Animation kita isi dengan "Jalan".

Artinya disini, jika karakter Mario sedang bergerak (Is moving), maka animasi yang kita pilih adalah Jalan.

Bagaimana jika sedang tidak bergerak? Pertama kita Add event, pilih Mario dan pilih Is Moving. Kemudian klik kanan pada event Mario dan pilih Invert. Artinya disini sama dengan kebalikan dari Is moving, alias tidak bergerak.

Selanjutnya klik Add action, pilih Mario lalu pilih Set animation. Dan tuliskan "Default" pada bagian Animation.

Hasil akhirnya akan seperti gambar di bawah ini.

Selesai! Proses yang cukup panjang untuk membuat karakter kita "berjalan". Sampai disini masih dimungkinkan adanya beberapa perbaikan, contoh nya mungkin bisa ditambahkan animasi untuk karakter Mario apabila dia melompat (tombol panah atas ditekan). Coba jalankan game nya dan lihat hasilnya apakah sesuai dengan keinginan atau tidak.

Apabila teman2 ada pertanyaan, silahkan hubungi email saya yang ada di bagian Contact Me.