Bagaimana Membuat Game Platformer [PDF]

Citation preview

Bagaimana membuat game platformer Construct 2 bisa digunakan untuk membuat berbagai game dua dimensi (2D). Dalam tutorial ini, kamu akan dibimbing untuk menguasai dasardasar pembuatan platform game di Construct 2. Jika kamu masih awam dengan Construct 2 dan lebih tertarik untuk membuat game berjenis topdown shooter, lihat tutorial alternatif berikut. Sudah siap membuat game platformer? Ayo kita mulai Catatan: Jangan bertanya atau mencari bantuan dengan menulis komentar di tutorial ini! Tapi masuklah ke forum kami untuk mendapat respon terbaik untuk semua pertanyaan yang kamu punya. Tutorial ini menggunakan sprite dari bundel Jungle Platformer yang kamu dapat saat membeli Construct 2. Setelah kamu membeli, klik link Download media bundle di menu About untuk mendapatkan bundel aset tambahan. Jika kamu menggunakan edisi gratis, kamu bisa menggunakan gambar kamu sendiri, atau coba gunakan panduan pemula alternatif yang sekaligus menyediakan semua sprite yang kamu butuhkan.



Menginstal Construct 2 Jika kamu belum punya Construct 2, kamu bisa unduh versi terbaru Construct 2 di sini. Program Construct 2 hanya tersedia untuk Windows, tapi game yang kamu buat bisa dimainkan di mana saja, seperti Mac, Linux, atau iPad. Construct 2 bisa di-install pada akun terbatas (yang bukan admin). Dan instalasinya pun portable, jadi kamu bisa install Construct 2 di USB flashdisk dan membawanya ke mana saja!



Memulai Setelah siap dan menginstall, jalankan Construct 2. Klik tombol File > New.



Pada pilihan New Project, kamu tidak perlu mangubah apa-apa, cukup klik Create project. Constuct 2 akan menyimpan seluruh data project dalam satu file .capx. Sekarang kamu akan melihat satu layout kosong, tampilan desain tempat kamu membuat dan mengatur posisi berbagai objek, seperti tampilan level dalam game atau layar menu. Dalam aplikasi lain, layout ini bisa juga disebut room,scene, atau frame. Ukuran layout



Pertama-tama, kita perlu ukuran layout (level) yang lebih besar dari ukuran bawaan. Klik kiri di area kosong di layout dan akan muncul Layout Properties diProperties Bar. Ganti ukuran level menjadi 4000 x 2048.



Saatnya untuk menata gambar latar belakang di sepanjang layout. Doubleclickarea kosong di layout, akan muncul pilihan Insert Object. Double click objekTiled Background untuk menambahkan latar belakang tersebut.



Kursor mouse akan berubah menjadi crosshair (tanda tambah). Tidak masalah dimana kamu menempatkan objek ini, pilih saja suatu tempat pada layout. Akan muncul Image editor agar kamu bisa memasukkan gambar untuk menjadi tile. Sekarang kita perlu import file Background Image\Background.png dari paket sprite. Klik icon Open untuk memasukkan gambar.



Pilih file Background Image\Background.png, lalu tutup image editor. Sekarang kamu akan melihat sebagian gambar background di layout. Kita perlu mengatur 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 level zoom saat ini. Kamu bisa coba zoom out untuk melihat gambar tersebut lebih baik. Tahan Control dan Scroll roda mouse ke bawah untuk zoom out. Atau kamu bisa pilih View - Zoom



out pada ribbon (menu di bagian atas Construct 2) beberapa kali. Kamu sekarang bisa melihat keseluruhan layout, dan akan terlihat seperti ini:



Perlu kamu tahu bahwa garis putus-putus di sisi kanan atas menunjukkan ukuran layar dibanding dengan ukuran layout keseluruhan. Tekan Crtl 0 untuk kembali ke level zoom 100% atau pilih View - Zoom to 100% di ribbon. Kemungkinan besar kamu akan melihat tengah-tengah layout sekarang, gunakan scrollbar untuk kembali ke bagian kiri atas dari layout. Kamu juga bisa click and drag tombol tengah mouse untuk bergerak dengan bebas di layout, atau tahan spasi untuk efek yang sama kalau kamu tidak punya tombol tengah mouse. Menambahkan layer



Sekarang kita perlu menambahkan beberapa objek lain. Tapi kita akan terus-menerus memilih objek latar belakang secara tidak sengaja kalau kita tidak bisa menguncinya (lock) dan membuatnya tidak bisa dipilih. Kita bisa menggunakan sistem layer untuk mencapai hal tersebut. Layout bisa terdiri dari beberapa layer, yang bisa kita gunakan untuk mengelompokkan objek. Bayangkan layer adalah sekumpulan lembaran kaca yang ditumpuk satu sama lain, dengan banyak objek 'dilukis' di setiap lembar. Ini akan memudahkan kita mengatur objek mana yang muncul di atas objek lainnya, dan layer bisa disembunyikan, dikunci, diberi efek parallax, dan masih banyak lagi. Contohnya, dalam game ini, kita ingin semuanya muncul di atas latar belakang, jadi kita bisa membuat layer lain di atas objek latar belakang tersebut. Untuk mengatur layer, klik Layers tab, yang biasanya ada di sebelah Project bar;



Kamu akan melihat Layer 0 di daftar layer (Construct mulai menghitung dari angka nol, karena lebih mudah saat dihubungkan dengan programming). Klik ikon pensil dan ganti nama layer itu menjadi Background. Sekarang klik ikon hijau add untuk menambahkan layer baru untuk objek lain kita, dan beri namaMain. Terakhir, klik ikon gembok di sebelah Background agar layer tersebut menjadi terkunci. Hal itu akan membuat kamu tidak bisa memilih apa-apa di layer tersebut. Ini akan memudahkan kita agar tidak sengaja memilih objek latar belakang karena tidak akan kita sentuh lagi. Tapi jika suatu saat nanti kamu perlu melakukan perubahan pada objek tersebut, kamu cukup klik ikon gembok agar layer tersebut kembali menjadi 'tidak terkunci'. Checkbox tersebut juga bisa membuat kita menyembunyikan layer, tapi saat ini kita tidak memerlukannya. Layer bar kamu seharusnya akan terlihat seperti ini:



Sekarang pastikan layer 'Main' terpilih di layer bar. Hal ini penting karena layer yang terpilih adalah layer yang aktif. Setiap objek baru yang dibuat akan dimasukkan ke layer yang aktif, jadi jika layer tersebut tidak



terpilih, kita bisa tidak sengaja menambahkan objek ke layer yang salah. Later yang aktif akan muncul di status bar, dan juga muncul di tooltip saat menempatkan objeck baru. Pastikan kamu memperhatikan hal ini.



Menambahkan tile Paket Jungle Platformer memiliki tileset di file Tiles\Tiles.png. Kita perlu import file ini ke objek sprite dan menggunakannya sebagai objek tile. Seperti yang kamu lakukan pada Tiled Background, double click di area kosong di layout untuk memasukkan objek baru. Kali ini pilih Sprite. Kursor mouse akan berubah kembali menjadi tanda tambah, klik di mana saja di sekitar tengah layar. Image Editor akan terbuka dengan beberapa window tambahan, karena Sprite bisa dianimasikan. Tapi saat ini kita tidak akan menjalankan animasi, dan kecepatannya seharusnya 0. Kita akan menyimpan satu tile dalam setiap frame animasi. Lalu kita bisa mengatur tile mana yang muncul dengan mengubah frame animasinya. Klik kanan area kosong di window Animation Frames di bawah, dan pilihImport sprite strip... Ini akan membuat kita bisa membuat kita mengambil gambar berdasarkan grid dalam sprite animasi, yang bisa juga kita gunakan di tile map.



Saat pilihan membuka file muncul, pilih file Tiles\Tiles.png dari paket sprite. Construct 2 perlu diberi tahu ada berapa tile dalam gambar tersebut. Kalau kamu perhatikan, Tiles.png terdiri dari 12x12 tile. Isi 12 dan 12 lalu klik OK.



Construct 2 akan memakan sedikit waktu untuk memotong-motong file tersebut. Sekarang kamu punya 144 tile yang diimport sebagai frame animasi. Kita tidak membutuhkan frame pertama yang kosong, jadi klik kanan dan pilihdelete.



Kamu mungkin perlu mengatur ukuran window Animation Frames untuk melihat tile-tile kamu lebih baik. Kamu juga bisa klik kanan di area kosong dan memilih ukuran thumbnail ke ukuran Large jika kamu mau. Pada awalnya kecepatan animasi adalah 5, yang berarti gambar pada setiap objek tile akan terus berubah. Kita ingin setiap tile gambarnya tetap sama, jadi kita perlu memastikan kecepatan animasinya 0. Pilih animasi Default di windowAnimations.



Sekarang Properties Bar akan menunjukkan properti animasi tersebut. Ubah nilai Speed menjadi 0.



Sekarang gambar pada tile tidak akan berubah-ubah. Tutup image editor dengan menekan ikon X di salah satu dari tiga window yang terakhir muncul. Sekarang Sprite tile kamu sudah muncul di layout.



Saat masih terpilih, ganti nama objek Sprite menjadi Tile di Properties Bar. Selalu ganti nama objek menjadi nama yang sesuai dan jelas. Membuat pemandangan dengan tile



Perhatikan bahwa objek Sprite memiliki properti Initial frame. Kita bisa gunakan ini untuk mengubah tile saat ini. Pilih objek tile dan ubah initial frame-nya menjadi 1.



Perhatikan pula perubahan gambar yang sesuai dengan frame animasi 1. Ini adalah cara kita untuk menampilkan berbagai jenis tile di dalam sebuah level.



Jika kamu tahan Control dan click-drag tile tersebut, kamu akan menghasilkan objek tile lain. Lakukan ini lagi dan akan kamu punya 3 tile dalam satu baris. Pilih yang di tengah dan ganti Initial frame-nya menjadi 10. Lakukan hal yang sama dengan yang di kanan, tapi nilainya 13. Kamu akan memiliki susunan objek seperti ini:



Jika kamu ingin tahu bagaimana cara memeriksa nomor frame suatu gambar dalam tile, double click tile tersebut. Image editor akan muncul bersama window animation yang bisa kamu gunakan untuk memeriksa frame-framenya. Ingat kamu bisa control drag sebuah tile dan membuat tile yang sama, jadi kamu tidak harus selalu mengetik initial frame-nya. Menyalakan snap to grid



Akan sangat sulit jika kita harus mengatur semua posisi tile agar sejajar dengan rapi. Kamu bisa menyalakan fitur grid untuk mempermudah mengatur objek. Klik View dan pilih Snap to grid pada ribbon. uUkuran awal grid adalah 32x32, karena tile kita berukuran 128x128 dan merupakan kelipatan dari 32 jadi akan bisa langsung kita gunakan untuk menyambung objek-objek tile kita dan masih memberikan sedikit kebebasan untuk meletakkan tile.



Cobalah menggeser-geser tile sekarang, objek tile akan mengacu pada grid 32x32 tersebut. Sekarang seharusnya lebih mudah unyuk 'menempelkan' tiga tile bersebelahan.



Menambahkan Sprite pemain 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 Kita perlu mengimpor sprite strip untuk animasi idle pemain. Seperti sebelumnya. klik kanan window Animation Frames dan pilih Import sprite strip....



Pilih file Player\Idle\Idle.png. Ingat bahwa itu adalah keseluruhan sprite strip animasi, bukan hanya satu frame animasi. Kamu bisa mengimpor filefile yang berurutan dengan pilihan Import frames..., tapi saat ini kita akan menggunakan cara pertama saja, Karena strip-nya tidak kotak, Construct 2 akan menebak jumlah frame. Seharusnya Construct 2 akan menebak dengan benar bahwa ada 11 frame. KlikOK dan frame-frame tersebut akan diimpor. Ingat bahwa kita masih punya frame kosong bawaan di awal. Klik kanan lalu hapus frame tersebut. Sekarang kamu akan punya 11 frame animasi untuk animasi Idle pemain.



Cropping



Kamu mungkin memperhatikan pemain punya area transparan di sekelilingnya. Hal ini sering terjadi setelah mengimpor gambar. Tapi untuk membiarkannya ada di situ adalah tindakan yang buruk, karena akan menghabiskan memory dan membuat deteksi tabrakan tidak akurat.



Ada cara cepat untuk menghilangkannya: tahan shift dan tekan tombol Crop di image editor.



Jika kamu tidak menahan shift, hanya grame yang aktif yang akan di-crop, jad pastikan kamu menahan tombol shift untuk meng-crop keseluruhan



animasi. Sekarang gambar pemain akan sudah ter-crop dengan tidak ada area yang tidak perlu di gambarnya.



Mengatur titik origin



Origin adalah titik pusat atau 'titik penting' objek yang bersangkutan. Dalam game platformer sebaiknya origin disimpan di kaki pemain. Ini akan membuat pemain akan tetap ada di lantai (dan berkembang ke atas, bukan menembus ke bawah lantai) walaupun ada frame animasi yang tingginya berbeda-beda. Untuk mengatur titik origin, klik Set origin and image points di image editor.



Kamu akan melihat titik merah muncul pada pemain, itu adalah titik origin. Kamu bisa klik pada gambar untuk mengubah posisi origin. Tapi karena kita ingin titik origin ada pada tengah-bawah gambar, kita bisa menekan tombol 2 pada num pad (dengan num lock menyala). Jika kamu tidak punya num pad (misalnya pada laptop), kamu bisa klik kanan Origin pada window Image pointsyang muncul, dan pilih Quick assign - Bottom. Akan merepotkan kalau kita harus melakukan ini untuk setiap frame, untungnya ada cara pintas: klik kanan Origin di window Image points, lalu pilih Apply to whole animation.



Sekarang titik origin seharusnya sudah diset di setiap frame animasi. Mengulang animasi



Klik animasi Default di window Animations, lalu ganti namanya menjadi Idle.



Di Properties Bar, ganti Speed animasi menjadi 9 dan atur Loop menjadi Yes.



Klik kanan animasi Idle di window Animations dan pilih Preview. Kamu akan lihat pemain bergerak atas bawah dengan pelan. Sekarang semua sudah selesai, tutup preview animasi dan image editor. Kamu akan melihat pemain kamu di layout. Ganti nama objek tersebut menjadi Player di Properties bar agar lebih rapi.



Menambahkan behavior Construct 2 memiliki banyak behavior bawaan, behavior ini akan membuat objek kita bekerja seperti yang sudah ditentukan sebelumnya, sehingga bisa menghemat banyak waktu. Kita bisa saja membuat ulang semua behavior menggunakan sistem event, tapi umumnya akan sulit dan memakan banyak waktu. Karena itulah behavior sangat cocok untuk menghemat waktu pembuatan game agar game kita lebih cepat bisa dimainkan! Platform behavior akan mengurusi secara teknis pergerakan karakter dalam game platformer. Ada tips penting dalam menggunakan behavior ini: gunakan behavior ini pada sebuah objek persegi yang tidak terlihat/tidak ditampilkan, dan gambar karakter ditampilkan di atasnya. Platform behavior bekerja lebih baik jika objek yang dipasangi behavior tersebut tidak beranimasi, karena mengubah frame animasi di tengahtengah deteksi tumbukan dapat membuat karakter menempel sebagian ke tembok dan membuat bingung Platform behavior. Hal ini juga dapat menghindarkan karakter kita menyangkut pada tembok di hidung atau pada barang yang dibawa oleh karakter kita. Jadi sekarang kita membutuhkan sebuah persegi tidak terlihat untuk pergerakan karakter. Double click layout untuk menambahkan sprite baru lagi, kali ini kita perlu impor kotak di bawah ini. (Klik kanan lalu 'save as' jika kamu membutuhkan gambar tersebut)



Seperti sebelumnya, kita mau titik originnya ada di bawah. Klik lagi Set origin and image points dan tekan 2 pada numpad (atau gunakan menu quick assign) untuk menempatkan titik origin di bawah kotak tersebut.



Setelah kamu tutup image editor, kamu akan lihat kotak tersebut di layout. Ubah ukurannya agar sama dengan ukuran badan pemain seperti di bawah ini. Ukurannya 53x107.



Ganti nama objek ini menjadi PlayerBox, karena objek tersebut adalah kotak untuk pergerakan dan pemeriksaan tumbukan untuk pemain. Atur Initial visibility menjadi Invisible di Properties bar karena kita ingin kotak ini tidak terlihat. Kita juga perlu tambahkan behavior platform ke PlayerBox agar memiliki pemeriksaan tumbukan yang lebih baik. Masih di properti PlayerBox (dalam properties bar), klik Add / Edit di bagian Edit behaviors. Pada window yang muncul, klik di tanda tambah.



Double-click pada Platform behavior.



Kamu sekarang bisa melihat ada beberapa properti baru untuk pergerakan platform muncul dalam Properties bar. Kamu bisa mengatur opsi pergerakan seperti kecepatan dan percepatan. Kita perlu membuat lompatan pemain lebih baik, atur Jump strength ke 1100 dan Gravity ke 2500. Kita juga ingin layarnya mengikuti pemain, jadi klik lagi tombol tambah dan tambahkan behavior Scroll to. Setelah kita tambahkan kedua behavior tadi, tutup window Player behaviors. Menambahkan behavior Solid



Behavior platform perlu tahu objek apa saja yang bisa dia injak. Pemain akan jatuh menembus semua objek yang tidak memiliki behavior Solid. Jadi pilih objek Tile dan tambahkan behavior Solid. Kita perlu tahu posisi pemain di atas PlayerBox. Pindahlah ke Event Sheet 1. Di sini kita akan menetapkan logika game menggunakan sistem event pada Construct 2. Membuat event



Event bekerja dengan menguji apakah suatu condition dipenuhi, jika iya, actionyang bersangkutan akan dijalankan



Dalam kasus ini, kita ingin posisi pemain selalu ada di atas PlayerBox. Untuk melakukan hal ini kita perlu mengupdate posisi pemain setiap tick, atau frame dalam game kita. Double click area kosong di Event Sheet View untuk membuat event baru.



Doubel click objek System, yang menyimpan kondisi Every tick.



Sekarang ktia memiliki event kosong yang akan menjalankan aksinya setiap tick:



Klik 'Add action'.



We want to position Player, so double-click 'Player'. Kita ingin mendapatkan posisi pemain (Player), jadi double click 'Player'.



Double click Set position to another object. Untuk Object, klik dan pilih PlayerBox. Biarkan Image point bernilai 0 (mengacu pada titik origin).Klik 'Done''. Tampilan eventnya akan seperti ini:



Semoga ini masuk akal untuk kamu: kita selalu mengatur posisi pemain di atas objek PlayerBox, yang merupakan objek dengan behavior pergerakan. Jalankan game dengan klik tombol play di kiri atas title bar.



Bergerak dan loncatlah menggunakan tombol panah. Sekarang versi awal dari game platformer kamu sudah bisa dimainkan! Beberapa masalah



Jika kamu coba main-main maka akan terlihat beberapa masalah: 1. Pemain tidak bisa menghadap kiri 2. Belum ada animasi lain. Ayo kita perbaiki hal-hal ini! Pertama, kita perlu buat pemain bisa menghadap kiri dan kanan. Pertama-tama, kembali ke tampilan layout menggunakan tab di bagian atas.Double click layout untuk memasukkan objek, pilih objek Keyboard. Karena objek tersebut adalah sebuah objek input, jadi tidak perlu kita tempatkan di mana pun, fungsinya hanya membuat input keyboard bisa diakses oleh project. Kita tidak perlu membuat animasi lengkap di mana pemain menghadap kiri, kita bisa menggunakan aksi Set mirrored, yang akan secara otomatis membalik arah objek agar menghadap ke arah sebaliknya (dalam kasus ini pemain akan menghadap ke kiri). Kembalilah ke Event Sheet. Kita akan membuat event baru dengan kondisi "Saat tombol panah kiri ditekan", dan aksi "Set pemain menjadi mirrored". Double click area kosong untuk membuat event baru, atau klik link Add event.Double click objek Keyboard agar bisa menggunakan kondisi saat tombol ditekan.



Daftar semua kondisi untuk objek Keyboard akan muncul. Double click eventOn key pressed.



Construct 2 perlu tahu tombol apa yang ingin kamu deteksi. Klik tombol , tekan tombol panah kiri lalu tekan OK. Klik Done.



Sekarang kita perlu menambahkan aksi kita: "Set pemain menjadi mirrored". Seperti sebelumnya, pilih objek, lalu pilih tipe kondisi atau aksi, lalu masukkan parameter yang dibutuhkan. Klik link Add action di sebelah kanan event kita sebelumnya. (Pastikan kamu tidak salah klik Add event!)



Double click Player > Double click Set mirrored > Biarkan statenya Mirrored lalu klik Done. Sekarang kamu akan memiliki event seperti ini:



Sekarang tambahkan sebuah event lain, double click area kosong atau klik linkAdd event. Sekarang kita lakukan proses yang sama, tapi buat event Saat tombol panah kanan ditekan, dan set pemain Not mirrored. Hasil akhirnya akan seperti ini:



Sekarang saat kita tekan kiri, gambar pemain akan menghadap kiri, dan jika kita tekan kanan gambarnya kembali menjadi menghadap kanan. Mainkan gamenya dan cobalah! Menambahkan lebih banyak animasi



Sekarang kita tambahan animasi pemain yang lain. Pertama, kita perlu tambahkan beberapa platform untuk pemain melompat-lompat sehingga kita bisa lihat saat animasinya nanti bekerja. Kembali ke Layout view di mana kamu bisa melihat pemain dan tile lantai. Click dan drag untuk memilih ketiga tile tersebut, tahan Control dan drag tile-tile tersebut untuk membuat salinannya. Lakukan ini beberapa kali dengan ketinggian yang berbeda untuk membuat beberapa pijakan untuk melompat-lompat. Ada baiknya kita melakukan zoom out.



Untuk melihat lebih baik, kita bisa perbesar ukuran window. Klik nama project di bagian atas Project Bar untuk menampilkan properti project ini, ubah Window Size ke 800,600.



Sekarang karena sudah ada platform untuk melompat dan layar yang lebih besar sehingga kita bisa melihat lebih banyak hal, kita akan tambahkan animasi pemain yang lain. Ingat kita menggunakan aksi Set mirrored untuk membalik pemain ke kanan dan kiri, jadi kita cukup mengimpor animasi dengan pemain menghadap ke kanan. Double click pemain di tampilan Layout untuk memunculkan animations editor. Ada empat animasi yang akan kita import: 1. Idle ke lari (tween) 2. Lari 3. Lompat ke lari 4. Lari ke berdiri



Untuk setiap animasi di atas, proses menambahkannya adalah sebagai berikut: 1. Klik kanan di animation bar (kemungkinan window yang melayang di kanan yang berisi animasi Idle) dan pilih Add animation. 2. Masukkan nama animasi. Gunakan nama yang mudah dimengerti sepertiIdleToRun. 3. Klik animasi tadi untuk pindah ke animasi tersebut. Saat ini seharunya hanya ada satu frame kosong. 4. Klik kanan di Animation frames bar dan pilih Import sprite strip...**. (kemungkinan ada di bawah dan berisi frame-frame animasi yang bersangkutan) 5. Temukan sprite strip yang diinginkan. Perlu diketahui pake Jungle sprite juga tersedia dalam PNG yang terpisah dan bisa diimpor per frame, tapi biasanya akan lebih cepat menggunakan sprie strip. Jadi sekarang pilih strip animasi yang lengkap 6. Periksa apakah jumlah sel-nya sudah benar, lalu klik OK. 7. Hapus frame kosong yang pertama, kita tidak akan membutuhkannya. 8. Di frame pertama, tempatkan origin di kaki pemain. Cobalah untuk menyamakan posisinya dengan animasi Idle. Terapkan ke semua frame animasi seperti yang kita lakukan pada animasi Idle (klik kanan titik Origin pada daftar dan pilih Apply to whole animation). 8. Tahan shift dan tekan Crop untuk memotong (area sisa yang transparan) di semua frame sekaligus. 9. Di Properties Bar, pastikan setiap animasi memiliki properti berikut: Speed: 22 pada animasi JumpFromStand, 15 untuk sisanya Loop: Yes pada animasi Run, No untuk sisanya Lakukan ini untuk setiap animasi sehingga kita punya lima animasi untuk pemain.



Tutup animation editor. Sekarang kita perlu memberi tahu objek pemain kapan suatu animasi perlu dijalankan. Untuk melakukan ini, behavior platform menyediakan animation trigger - event yang akan dijalankan dalam kondisi pemain perlu mengganti animasi. Kita cukup menggunakan



aksi Set animationpada objek pemain. Perhatikan bahwa Platform behavior ada pada objekPlayerBox sedangkan animasi ada pada objek Player. Perhatikan pula kita memiliki animasi IdleToRun, artinya saat kita mulai bergerak, animasi akan berjalan seperti berikut ini: Berhenti: Idle Mulai bergerak: IdleToRun Saat IdleToRun selesai: Run Hal ini juga bisa dengan mudah kita atur dengan event. Mengatur event animasi



Semoga sekarang kamu sudah terbiasa dengan proses membuat suatu event: 1. Pilih objek. 2. Pilih kondisi atau aksi. 3. Opsional: masukkan parameter jika perlu. Pindah kembali ke tampilan Event Sheet. Pertama, kita perlu set animasi menjadi IdleToRun saat kita bergerak. Kita akan menggunakan trigger On moveddari behavior Platform pada objek PlayerBox:



Ketika animasi IdleToRun selesai, kita perlu kembali ke animasi Run. Kita melakukan ini menggunakan trigger On animation finished di objek Player:



Jika pemain berhenti dari kondisi berlari, kita perlu kembali ke animasi Idle. Kita lakukan ini menggunakan trigger On stopped pada objek PlayerBox:



Jalankan gamenya. Sekarang pemain sudah bisa berubah dari lari ke berhenti dengan animasi IdleToRun dijalankan di antaranya. Tapi animasi lompat belum bisa dijalankan. Karena kita punya dua animasi lompat, kita perlu set animasi lompat yang berbeda tergantung permain sedang berlari atau tidak. Hal ini bisa dicapai dengan event berikut:



Open full size image



Perhatikan sekarang kita sudah menggunakan sub-event, yang akan muncul di bawah event on Jump. Sub-event akan diperiksa setelah event 'induk' sudah dijalankan. Hal ini cocok dengan logika yang ingin kita terapkan: saat behavior Platform melompat, jika sedang bergerak set dengan JumpFromRun, jika tidak set dengan JumpFromStand. Untuk membuat sub-event, klik kanan di event induk dan pilih Add -> Add sub-event, atau pilih event tersebut dan tekan S. Untuk membuat event di atas kamu akan perlu melakukan invert terhadap sebuah kondisi (dan akan muncul tanda silang merah). Kondisi yang diinvert berarti kebalikan dari yang tertulis. Dalam kasus ini, invert dari kondisi "Platform is moving (sedang bergerak)" adalah "Platform is NOT moving (sedang TIDAK bergerak)". Untuk menginvert sebuah kondisi, tambahkan kondisinya seperti biasa, klik-kanan pada kondisi tersebut lalu pilih Invert, atau pilih dan tekan tombol I. Tinggal satu hal lagi yang perlu kita lakukan: pemain akan terus berada di dalam animasi Jump setelah melompat, bahkan setelah mendaratpun animasinya masih lompat. Kita perlu set secara manual animasinya menjadi Idle atau Run saat pemain mendarat. Hal ini mirip dengan event sebelumnya: pada trigger animasi On land, jika pemain bergerak set "Run", jika tidak set "Idle".



Open full size image



Setelah kamu set semua event tadi, jalankan gamenya. Selamat! Sekarang kamu sudah membuat karakter pemain yang beranimasi! Perhatikan animasi-animasi yang berbeda jika kamu melompat dari keadaan diam atau melompat dari keadaan berlari. Perhatikan pula saat kamu mendarat, kamu akan melihat animasi Idle atau kembali ke animasi Run, tergantung kamu bergerak atau tidak. Sekarang saatnya kita membuat karakter musuh!



Menambahkan musuh Semoga sekarang kamu sudah familiar dengan proses menambahkan sprite dan animasi. Jadi untuk menyingkat tutorial, langkah-langkah lengkapnya tidak akan diulang. Sekarang tambahkan sebuah sprite baru untuk musuh. 1. Tambahkan objek Sprite baru di layout. 2. Import sprite strip Enemies\Snail. 3. Hapus frame animasi pertama yang kosong. 4. Atur animasi menjadi looping, dengan kecepatan animasi 15. 5. Atur titik origin ke dasar gambar keong, dan terapkan ke semua frame dalam animasi. 6. Crop semua frame. (Shift + Crop) 7. Tutup editor animasi dan ganti nama objek menjadi "SnailEnemy". 8. Tempatkan di tanah seperti pada gambar.



Sekarang kita perlu mengimplementasi logika berikut: - Jika pemain menabrak keong dari samping, pemain akan menyala dan terluka. - Jika pemain melompat dan mendarat di atas keong, keong tersebut akan mati.



Untuk membuat pemain menyala, pilih objek pemain dan tambahkan behavior Flash. Pastikan memilih objek pemain, bukan objek PlayerBox (karena objek pemain yang terlihat yang ingin kita buat menyala). Kita akan gunakan action 'Flash' dari behavior tersebut. Pindah ke sheet view, tambahkan sebuah event baru: PlayerBox -> On collision with another object -> SnailEnemy Event ini akan dijalankan ketika kita bertabrakan dengan SnailEnemy dari sudut manapun. Lalu kita bisa menggunakan sub-event untuk memeriksa apakah pemain melompati musuh dari atas atau berlari dari samping. Pertama kita perlu memeriksa apakah pemain ada di atas tanah. Tambahkan sebuah sub-event pada event collision sebelumnya: PlayerBox -> Is falling Kita juga perlu memeriksa apakah pemain ada di atas musuh. Hal itu akan mencegah musuh keong tanpa sengaja mati jika kita jatuh dari pinggiran platform. Klik-kanan di kondisi 'Is falling' dan pilih 'Add another condition'. Ingat semua kondisi harus dipenuhi agar suatu event dijalankan. Tambahkan kondisi sebagai berikut: PlayerBox -> Compare Y -> Less than, SnailEnemy.Y Sumbu Y bertambah ke bawah, jadi jika koordinat Y pemain lebih kecil dari keong, artinya pemain ada di atasnya. Di event ini, tambahkan action: SnailEnemy -> Destroy Kita juga bisa membuat pemain memantul dengan membuat action tambahan: PlayerBox -> Set vector Y -> -700 'Set vector Y' akan mengatur kecepatan vertikal dari pergerakan objek platform, mengatur nilainya menjadi negatif akan membuatnya bergerak ke atas (ingat bahwa sumbu Y membesar ke bawah). Nilai 700 sedikit lebih kecil dari kekuatan lompat (1100), sehingga ini akan membuat pemain memantul atau seperti melakukan lompatan kecil.



Open full size image



Kita belum selesai: Klik-kanan di bagian luar event "is falling' (area di sebelah kiri icon PlayerBox), dan pilih Add -> Else. 'Else' adalah kondisi khusus yang akan dijalankan ketika event sebelumnya tidak dijalankan. Sehingga event ini hanya akan dijalankan jika kita bertabrakan dengan keong tapi kita tidak menginjaknya dari atas, misalnya karena kita menabraknya dari samping. Di event ini kita akan membuat pemain terluka. Tambahkan action: Player -> Flash -> (biarkan nilai default dan pilih Done) Ingat bahwa behavior Flash ada di objek Player, bukan PlayerBox.



Open full size image



Saat ini pemain belum bisa mati, hanya menyala ketika terluka. Tapi kita sudah bisa membedakan apakah pemain menabrak musuh dari samping atau menginjaknya dari atas. Tutorial ini tidak akan membahas semua aspek dalam game platformer, tapi semoga kamu sudah punya gambaran bagaimana cara membuat efek pemain mati (cobalah dengan membuat sebuah sprite 'poof' saat musuh mati dengan menggunakan aksi 'Spawn object' pada objek SnailEnemy), dan bagaimana cara mengurangi darah pemain (pada event yang membuat pemain menyala). Kamu bisa pelajari implementasi darah/nyawa pemain di Tutorial topdown shooter, yang ada baiknya kamu lihat setelah tutorial ini. Sekarang kita perlu buat musuh keong bergerak mondar mandir sepanjang platform.



Menggerakkan musuh



Tantangan utama menggerakkan keong adalah bagaimana cara mendeteksi kapan dia mencapai ujung sebuah platform. Cara termudah untuk melakukan ini adalah dengan membuat objek penanda 'ujung'. Penanda ini hanyalah sprite yang tidak terlihat yang akan membalik arah keong ketika mereka menyentuh penanda. Kita bisa juga menggunakan behavior Platform juga untuk keong musuh. Ini akan memudahkan karena: - Musuh akan bisa bergerak ke kanan dan kiri - Musuh akan menaiki dan menuruni bukit seperti pemain - Musuh bisa jatauh dari pinggiran platform jika kita ingin seperti itu - Jika kita ingin membuat musuh yang bisa melompat, kita bisa membuat musuh otomatis melompat dengan menggunakan action 'Simulate control'. Tambahkan behavior Platform ke sprite SnailEnemy. Karena kita tidak akan menggunakan animasi yang kompleks untuk objek ini, kita aman menggunakan behavior platform langsung pada objek tanpa menggunakan objek kotak tidak terlihat seperti pada objek pemain. Perlu diketahui kalau kamu membuat platform game dengan musuh yang membutuhkan animasi kompleks, kamu perlu menggunakan teknik kotak tidak terlihat seperti yang kita gunakan untuk objek pemain. Kita tidak ingin pemain mengontrol SnailEnemy, kita ingin mengaturnya untuk bergerak otomatis. Kita bisa lakukan ini dengan mengatur Default controlsmenjadi No, lalu gunakan action Simulate control. Karena keong cukup lambar, atur Max speed menjadi 50 dan Acceleration dan Deceleration menjadi 100! Kita juga memerlukan penanda ujung platform. Tambahkan sebuah objek Sprite baru dan masukkan sebuah kotak transparan. Beri nama EdgeMarker. Atur ukuran objek menjadi 40 x 40 dan atur Intial visibility menajdi Invisible agar kita tidak bisa melihatnya. Tempatkan satu objek tersebut di masing-masing ujung platform keong seperti pada gambar, dan ingat kamu bisa membuat salinan instance objek dengan menahan Control dan lakukan drag.



Keong musuh juga perlu tahu ke arah mana dia sedang bergerak, antara ke kiri atau ke kanan. Kita bisa lakukan ini dengan Instance variable, yang merupakan angka atau teks yang disimpan di setiap instance objek yang bersangkutan. Jika kita memiliki banyak keong, masing-masing akan menyimpan instance variabel mereka masing-masing secara terpisah. Hal ini membuat mereka bisa memiliki nilai nyawa/darah dan arah yang berbeda. Cara sederhana untuk membuat banyak musuh bergerak secara otomatis adalah dengan membuat instance variable bernama "action" yang akan menyimpan status aksi musuh tersebut. Misalnya, nilainya bisa "run away", "chase player", atau "idle". Dalam tutorial ini kita hanya menggunakan "left" dan "right", tapi akan ada gunanya juga membuat variabel instance seperti apda contoh. Pilih objek SnailEnemy. Pada bagian properti, klik Add/Edit pada bagian 'Instance variables'.



Sebuah dialog berisi semua instance variabel untuk suatu objek akan muncul. Klik icon 'add' dan tambahkan yang baru. Atur namanya menjadi action, lalu kelik text, dan nilai awal untuk right (untuk bergerak ke kanan).



Klik OK dan tutup dialog instance variable, lalu pindahlah ke event sheet. Kita perlu implementasi logika berikut: - Jika action bernilai "right", simulasikan pergerakan objek platform seperti menahan tombol kanan agar keong bergerak ke kanan. - Jika action bernilai "left", simulasikan pergerakan objek platform seperti menahan tombol kiri agar keong bergerak ke kiri. Dan: - Jika keong menabrak EdgeMarker, putar balik nilai action (jika "left" menjadi "right", dan jika "right" menjadi "left"). Kita bisa atur pergerakan dengan menggunakan dua event berikut: Event: SnailEnemy -> Compare instance variable -> action equal to "right" (gunakan tanda petik untuk menandakan nilai berupa teks) Action: SnailEnemy -> Simulate control -> Right Kita perlu buat event dan action yang serupa untuk arah kiri. Kita juga perlu memutar gambar keong ke kanan dan kiri seperti yang kita lakukan untuk objek player. Jadi tambahkan SnailEnemy -> Set mirrored -> Mirrored pada event kiri, dan SnailEnemy -> Set not mirrored -> Not mirrored di event kanan. Hasil akhirnya akan seperti ini:



Open full size image



Sekarang untuk membalik arah keong di ujung platform: Event: SnailEnemy -> On collision with another object -> EdgeMarker Subevent: SnailEnemy -> Compare instance variable -> action equal to "right" Action: SnailEnemy -> Set value -> action to "left" Subevent: Else Action: SnailEnemy -> Set value -> action to "right" Penting untuk menggunakan else, karena semua event akan dijalankan dari atas ke bawah. Jika kita tidak menggunakan else dan hanya action equal to "left", perhatikan bahwa event sebelumnya baru saja mengubah nilai action menjadi "left", langsung berubah lagi nilainya menjadi "right", tanpa memberikan dampak yang berarti. Dengan menggunakan else, kita mencegah event kedua dijalankan jika event pertama dijalankan.



Jalankan projectnya. Perhatikan sekarang keong bergerak bolak balik di platformnya, dan membuat platform tersebut lebih sulit untuk dilompati. Ini adalah contoh sistem intelenjensi buatan atau AI yang sederhana, tapi semoga kamu sekarang memiliki bayangan bagaimana cara membuat musuh yang lebih pintar dengan mengatur pergerakannya dengan lebih banyak event, bahkan mungkin membuat mereka bisa jatuh dari platform, atau menggunakan penanda lain untuk membuat musuh melompat seakan-akan tahu bagaimana cara melompat dari platform ke platform. Cobalah membuat platform dengan dua keong, perhatikan bahwa mereka mengatur pergerakannya masing-masing, karena tiap keong memiliki variabelinstance yang menyimpan nilai action mereka masing-masing. Semoga dengan ini kamu mulai bisa melihat seberapa pentingnya instance variable untuk mengatur instance objek secara independen (mereka tidak harus melakukan hal yang sama persis satu sama lain di saat yang sama).



Objek yang bisa ditembus Jika kamu sudah meletakan beberapa tile, kamu akan lihat bahwa kalau kamu melompat tepat di bawah platform kamu akan menabrak platform tersebut di kepala dan akan jatuh kembali ke bawah. Bagaimana cara membuat platform yang bisa kita naiki dari bawah? Ini adalah kegunaan behavior Jump-thru. Kamu bisa berdiri di atas objek Jump-thru seperti platform lain, tapi pemain bisa melompat menembus platform ini dari bawah. Sekarang kita perlu buat versi Jump-thru dari objek Tile kita. Klikkanan objek Tile dan pilih Clone object type. Ini akan membuat objek terpisah Tile2 yang bisa memiliki behavior yang berbeda. Hapus behavior Solid dan tambahkanbehavior Jump-thru. Gunakan tile 134 dan 135 untuk membuat platform jump-thru seperi ini:



Jalankan game kita. Perhatikan bahwa kamu bisa melompati platform tersebut dari bawah. Semoga sekarang kamu cukup menguasai cara mendesain satu level lengkap. Ini adalah tampilan zoom out dari level design yang sudah dibuat, untuk menunjukkan seperti apa yang bisa dicapai dengan level design. Perhatikan penggunaan penanda di beberapa platform untuk membuat keong tidak jatuh dari platform.



Open full size image



Parallax



Coba tambahkan efek parallax untuk membuat background terlihat lebih jauh. Pilih layer Background di daftar layer. Di bagian properties, set nilai Parallaxmenjadi 50, 50 (setengah dari kecepatan bergerak layer lainnya). Perhatikan bagaimana background bergerak lebih lambat dan membuat kesan jauh. Gunakan beberapa layer dengan nilai parallax yang berbeda untuk membuat kesan 3D pada game 2D.



Kesimpulan Tutorial ini sudah membahas banyak hal, kamu mungkin perlu untuk membaca ulang tutorial ini suatu saat nanti. Berikut adalah beberapa poin penting: - Untuk behavior Platform pada objek pemain, sebaiknya kita menambahkan behavior tersebut ke sebuah kotak yang tidak terlihat yang tidak beranimasi. Posisikan objek pemain yang beranimasi di atas kotak tersebut. Hal ini akan mencegah pergerakan platform dipengaruhi kondisi sprite yang berubah-ubah dalam animasi. - Sebuah level dapat dibangun menggunakan banyak tile. - Action Set mirrored dapat menghemat waktu pembuatan animasi karena kita tidak perlu membuat animasi yang menghadap ke arah lain. - Kadang kita perlu untuk melakukan banyak langkah untuk memasukkan animasi, mengatur nilai kecepatan dan looping yang tepat, dengan titik origin yang benar, dan semua frame yang sudah di-crop. Kamu juga perlu untuk mengubah collision mask, walaupun hal tersebut tidak dibahas di



tutorial ini. - Musuh juga bisa diatur dengan behavior platform. Ubah nilai Default controlsmenjadi No dan gunakan action Simulate control untuk mengatur pergerakan secara otomatis. - Kamu bisa memeriksa apakah pemain 'menginjak' musuh atau menabrak dari samping dengan menguji apakah pemain sedang jatuh (Is falling) dan posisinya ad di atas musuh pada sumbu Y saat bertabrakan. Jika tidak (gunakan Else), pemain pasti sedang berlari menabrak musuh dan harusnya menjadi terluka. - Instance variable bisa menyimpan angka atau teks yang berbeda pada setiap instance objek. Ini membantu kita untuk mengontrol objek secara terpisah, yang bisa digunakan untuk membuat intelejensi buatan atau AI. - Penanda ujung platform adalah cara cepat dan mudah untuk membuat musuh bergerak maju mundur di sebuah platform. - Jump-thru adalah platform yang bisa dilompati dari bawah. - Parallax adalah efek yang mudah namun menarik untuk ditambahkan pada game platform. Bisa kamu lihat kita belum memiliki satu game platformer yang lengkap, tapi tutorial ini sudah membahas beberapa aspek paling sulit namun mendasar dari game platformer yang perlu diketahui oleh semua pembuat game platformer. Dari sini diharapkan kamu sudah memiliki gambaran bagaimana melengkapi komponen lainnya dari game platform. Akan butuh waktu untuk membiasakan diri dengan Construct 2, namun mencoba hal baru bisa menyenangkan sekaligus mengajari kita banyak hal. Jadi jangan ragu untuk meluangkan waktu bermain-main dengan fungsi yang ada, merusak, atau memperbaiki berbagai fitur, dan lihat sendiri game seperti apa yang bisa kamu hasilkan! Selamat berkarya! Bacaan lanjutan



Kamu mungkin akan tertarik dengan panduan pemula alternatif, yang merupakan tutorial membuat top-down shooter. Tutorial tersebut membahas beberapa hal yang berbeda seperti membuat tampilan antarmuka, dan lebih jauh tentang instance variable. Dua hal ini adalah fitur yang bisa diterapkan juga pada platform game, jadi pasti akan ada manfaatnya jika kamu mengikuti tutorial tersebut setelah ini. Jika kamu ingin menambahkan musik dan efek suara, lihat bagian Sound & Music di panduan. Jika kamu ingin tahu lebih lanjut tentang bagaimana kerja event dalam



Construct 2, lihat bagian How Events Works pada panduan. Sangat disarankan untuk kamu membacanya agar kamu bisa bekerja lebih cepat dalam membuat game! Dan untuk informasi lebih banyak lagi, jangan lupa ada dokumentasi lengkap dalam panduan.



Unlock your full gamedev potential Upgrade to the Personal Edition of Construct 2, it has way more features and won't holding back from making money and using your full creativity like the free edition does. It's a one off payment and all Construct 2 editor updates are free for life!



View deals Plus, it's got a lot of additional features that will help you save time and make more impressive games!