CONSTRUCT 2 TUTORIAL : PLAYER MOVEMENT (PLATFORMER)Beberapa bulan lalu saya di kasih komentar dari salah satu pembaca saya yang isinya lumayan panjang

kalau ditulis lewat komen, jadi akhirnya saya bikin saja postingan baru.

Isinya bertanya : bagaimana membuat player bergerak. Dan kemudian saya berpikir, oh iya belom pernah

saya tulis tutorial di Construct yang isinya bagaimana membuat player bergerak jika game nya bergenre

platformer.

Oke untuk menjawab pertanyaan bro Novan, saya coba buat tutorial nya.

Pertama, buka kanvas kosong di Construct 2 dengan ukuran layar berapapun yang Anda inginkan.

Tapi sebelum memulai tutorial ini, lebih baik unduh dulu file yang saya berikan untuk mempermudah

tutorial. Kamu bisa unduh disini.

Catatan : Disarankan agar Anda sudah paham bagaimana menggunakan Construct. Terlebih dahulu bisa

buka beberapa tutorial saya sebelumnya disini. Beberapa bagian dari tutorial ini yang sifatnya mendasar

tidak lagi dijelakan.

Masukkan Sprite kedalam layar, untuk pertama ini Anda masukkan terlebih dahulu landscape dimana

nantinya player akan berdiri.

 Masukkan behavior ‘Solid’ untuk objek tadi. Solid akan membuat objek memiliki collision.

Kemudian masukkan sprite kedua, yaitu untuk si player itu sendiri. Masukkan sprite idle dari objek yang

sudah Anda unduh tadi.

Ideal nya untuk player yang memiliki animasi adalah sprite ‘idle’. Yaitu ketika player dalam kondisi diam.

Ini adalah kondisi default ketika keyboard tidak disentuh.

 Selanjutnya, tambahkan ‘Platform’ behavior pada sprite penguin tadi.

Run game Anda. Sejauh ini sebetulnya sudah bisa dimainkan dan player bisa bergerak kanan-kiri dan

bahkan lompat. Namun tentunya kita butuh animasi dan player berbalik posisi ketika tombol kiri keyboard

disentuh.

Untuk itu pertama yang harus dilakukan adalah menambahkan beberapa sprite untuk animasi.

Klik 2x objek sprite penguin tadi, kemudian pada jendela Animations, klik kanan dan buatlah animasi

baru. Masukkan nama ‘run’. (Perhatikan gambar dibawah).

Kemudian masukkan satu sprite ‘000’ dari folder ‘run’. Jika sudah ada satu sprite di jendela Edit Image

disana, klik kanan jendela Animation Frame dan pilih Add Frame. Lakukan hal yang sama untuk

beberapa animasi running lainnya.

 Jika

langkah Anda benar, maka akan tampak seperti gambar dibawah.

Jangan lupa untuk memasukkan Keyboard kedalam proyek Anda. Klik pada kanvas kosong dan pilih

‘keyboard’

Selanjutnya bukalah Event Sheet, kemudian masukkan kode seperti gambar dibawah.

Kode diatas berarti, jika tombol kiri keyboard ditekan, maka objek sprite pinguin akan di mirror, kemudian

jika tombol kanan ditekan, Construct tidak melakukan mirroring alias tetap dalam keadaan aslinya.

Jalankan game kamu dan lihat perbedaannya.

Langkah selanjutnya adalah menambahkan animasi didalamnya seperti yang sudah kita pasang

sebelumnya di Edit Image, caranya, masukkan kode seperti gambar dibawah

Harap diingat bahwa penamaan sangatlah penting. Untuk nama “run” dan “Default” sangat bergantung

dari nama Animations yang Anda masukkan pada langkah sebelumnya. Kesalahan nama tidak akan

membuat animasi berjalan.

Jika Anda mainkan, maka animasi akan berhenti ketika objek sprite berjalan. Solusi untuk looping

masalah ini adalah, klik 2x sprite penguin tadi di kanvas untuk membuka window Animation, kemudian

pilih ‘Run’ dan pada toolbox sebelah kiri, aktifkan Loop. Seperti gambar dibawah.

Anda juga bisa mempercepat laju animasi atau memperlambatnya di ‘Speed’ pada jendela toolbox tadi.

Untuk animasi yang berjalan mulus, sebaiknya ubah collision menjadi bounding box. Klik sprite apapun

itu pada kanvas, kemudian klik kanan dan pilih ‘Set to bounding box’.

Lakukan ini untuk setiap sprite di setiap image yang Anda masukkan dalam proyek, termasuk landscape.

Jalankan kembali game Anda dan selamat, Anda sudah bisa membuat player bergerak sederhana di

Construct 2.

Tagged construct 2, game, gamedev, Tutorial

17/04/20148 COMMENTS

CONSTRUCT 2 TUTORIAL

TUTORIAL : CONSTRUCT 2 (BAGIAN 5)Tutorial kita kali ini akan menciptakan variable dan score. Harap diingat bahwa tutorial kita kali ini adalah

lanjutan dari tutorial sebelumnya.

Oke langsung saja

Untuk menampung score pemain, menampung nilai true or false, misalnya Anda ingin memberikan nilai

pada checkpoint pada lokasi tertentu, maka Anda butuh variable. Untuk tutorial kita kali ini, kita akan

membuat satu variabel nilai dan variabel waktu yang akan kita bahas nantinya.

Untuk membuat variabel, Anda cukup klik kanan pada Event sheet1 kemudian pada jendela popup pilih

Add global variable

Jika langkah Anda benar, maka akan muncul jendela ‘New global variable’.

Ketik nama variabel yang Anda inginkan. Oleh karena saya ingin membuat variabel yang menampung

nilai score pemain, maka saya akan memberinya nama score

Initial Value adalah nilai default pada variabel Anda. Oleh karena saya ingin semua score dimulai dari

angka nol, maka saya akan membiarkannya bernilai nol. Klik OK untuk melanjutkan

Jika langkah Anda benar, maka pada Event sheet1 terdapat variabel yang Anda buat, yaitu score = 0

Lalu bagaimana score bisa bertambah? Pertama, Anda harus memasukkan kondisi dimana score itu bisa

bertambah, misalnya menembak musuh. Kedua, Anda harus menampilkan score Anda ke pemain lewat

teks.

Kita akan melakukan langkah pertama, yaitu memasukkan musuh ke dalam layar. Saya tidak akan

menjelaskan secara detil lagi bagaimana Anda melakukannya, Anda bisa baca di tutorial saya

sebelumnya.

Masukkan Sprite baru kedalam layar, kemudian beri nama ‘musuh’ untuk sprite baru Anda. Perhatikan

letak musuh Anda itu pada layer. Jangan lupa perhatikan collision pada objek baru Anda tersebut.

Agar permainan lebih menantang dan tidak hanya menembak objek diam, saya akan memberi beberapa

behavior pada musuh saya, yaitu Sine dan Bullet. Yuk kita simak.

Masih ingat bagaimana menambahkan behavior pada objek? Jika lupa simak ini. Klik objek musuh Anda,

kemudian pada panel Properties disebelah kiri, klik teks Behavior. Jika langkah Anda benar maka akan

muncul jendela musuh:Behaviors.

Pilih dan masukkan Sine dan Bullet seperti gambar berikut

Behavior Sine akan membuat objek bergerak vertikal atau diagonal secara otomatis. Sementara Bullet

akan membuat objek Anda bergerak lurus.

Tutup jendela Behaviors kemudian play (F5) game Anda

Apa yang akan terjadi pasti tidak sesuai dengan keinginan Anda. Objek bergerak cepat kearah kanan dan

efek Sine tidak terlihat samasekali. Disini, kita butuh seting untuk mengubah pergerakannya.

Oke, pastikan objek musuh dalam keadaan terpilih, alihkan pandangan Anda pada panel Properties dan

scroll kebawah hingga Anda melihat parameter Sine dan Bullet disana.

Untuk Sine saya rasa seting default sudah benar. Jika Anda ingin mengubahnya, maka Anda bisa

menyesuaikannya dengan keinginan Anda. Ingat, proses trial error sangat mungkin terjadi.

Untuk behavior bullet, atur kecepatan menjadi 20 saja. Ini akan memperlambat laju secara signifikan.

Kemudian ubah Set angle ke No, sebab kita tidak ingin orientasi objek berubah saat kita modifikasi arah

gerak, kita ingin objek tetap pada posisi hadap nya.

Sekarang Anda bisa tekan F5 untuk mengetesnya. Yap, sekarang sudah lebih enak dilihat. Tapi masih

ada satu kekurangan lagi. Saya ingin, pesawat musuh muncul dari atas kebawah, bukan dari kiri ke

kanan sebagaimana nilai default Bullet.

Untuk memodifikasi ini, kita harus masuk ke Event sheet.

Buka event sheet Anda, kemudian di System on start of layout, klik Add action dan pilih musuh, kemudian

Next

Scroll kebawah hingga Anda ketemu dengan Set angle of motion.

Pilih Set angle of motion kemudian klik Next. Pada jendela Parameters, masukkan nilai 90 di Angle, klik

Done

Jalankan game Anda lagi (F5) dan lihatlah hasilnya.

Yup, sekarang gerak musuh sudah seperti yang saya inginkan. Agar Anda paham, Anda bisa ubah

beberapa parameter pada musuh kemudian jalankan game Anda lagi untuk melihat hasilnya. Misalnya,

cobalah untuk set Yes pada Set angle di behavior Bullet, atau, ubah angle pada Parameter Bullet dan

lihat perbedaannya.

Untuk saat ini, saya save pekerjaan saya.

Musuh sudah ada, variabel sudah di set, masalahnya sekarang adalah musuh saya belum bisa ditembak.

Logika dasarnya adalah: saat peluru mengenai musuh, maka musuh akan hancur.

Untuk melakukannya, masuklah ke event sheet, kemudian klik Add event dan pilih musuh.

Di jendela Add event, scroll kebawah dan pilihlah On collision with another object.

Jika langkah Anda benar, maka jendela parameter untuk musuh muncul. Klik button object kemudian pilih

Bullet dan klik Done

Jika benar, maka akan tampil seperti gambar diatas. Itu artinya, saat musuh bertabrakan dengan Bullet,

maka Construct akan mengeksekusi sesuatu. Tapi sesuatu itu belum tahu, sebab action belum Anda

pasang.

Klik Add action disebelahnya, kemudian pilih musuh, klik Next

Pada jendela Add action, scroll dan pilih Destroy dan klik Done

Klik Add action sekali lagi dan pilih Bullet kemudian Destroy seperti pada gambar dibawah

Itu artinya, saat musuh bertabrakan dengan Bullet, maka musuh akan hancur, demikian pula Bullet

(peluru) itu.

Tekan F5 dan mainkan game Anda. Tembaklah pesawat musuh dan perhatikan apa yang terjadi.

Namun masalahnya sekarang, Anda masih belum mendapatkan score. Anda butuh score untuk itu.

Membuat variabel bekerja masih sama mudahnya dengan mengatur parameter pada objek.

Masih pada Event sheet, klik Add action tepat dibawah Bullet Destroy

Anda mungkin bertanya, “mengapa harus dibawah Bullet”

Saya ingin pemain mendapatkan score tepat ketika ia sudah menghancurkan musuh. Dan kondisi itu

harus ketika musuh itu sudah hancur.

Klik Add action kemudian pilih System

Scroll kebawah dan temukan Add to (seperti gambar diatas)

Pada jendela Parameters for System: Add to, pastikan bahwa variabel tertuju pada score dan nilai value

adalah berapapun nilai yang Anda inginkan ketika musuh itu hancur. Saya memasukkan angka 15 yang

artinya, score untuk menghancurkan musuh adalah 15

Klik Done untuk melanjutkan

Jika Anda mainkan, tembaklah musuh namun semua tampak tidak terjadi perubahan apa-apa.

Sebenarnya ada, yaitu variabel sudah diisi oleh score 15. Yang kurang adalah penyampaiannya ke

pemain. Untuk itu Anda membutuhkan teks untuk menampilkan score.

Buatlah objek baru, namun kali ini Anda klik Text

Lanjutkan dengan mengklik tombol Insert

Letakkan text dimanapun yang Anda inginkan di layout. Pada panel properties, ubahlah propery teks

dengan mengosongkannya

Dari tutorial yang sudah kita pelajari sebelumnya, bisakah Anda membuat event seperti gambar

dibawah? Event tersebut akan memerintahkan Construct untuk mengupdate tiap detik apa yang terjadi

pada game dan menyampaikannya kepada pemain lewat teks.

Jika Anda bingung, mari kita simak caranya.

Klik Add event, kemudian pilih System. Pada jendela Add event, pilih Every tick kemudian klik Done.

Pada Add action disebelahnya, klik dan pilih Text kemudian Next. Selanjutnya pada jendela Add action,

scroll kebawah dan pilih Set text kemudian klik Next. Jika langkah Anda benar, maka akan muncul

jendela Parameters for Text

Pada textbox, ketik score dan pilih score yang tertera pada dropdown list. Score yang dimaksud disini

adalah score variabel

Klik Done untuk melanjutkan.

Mainkan kembali game Anda kemudian tembaklah musuh tadi. Selamat, game Anda sudah memiliki

score dan sudah bisa dimainkan.

Gambar berikut adalah keseluruhan event sheet dari yang sudah kita pelajari.

Tampaknya terlalu boring hanya dengan satu musuh pada layar. Di tutorial kita berikutnya, kita akan

memberikan sedikit tantangan pada pemain. Untuk saat ini, Anda bisa save pekerjaan Anda dan jangan

lupa ikuti tutorial saya berikutnya.

Tagged construct 2, game, gamedev

16/04/20142 COMMENTS

CONSTRUCT 2 TUTORIAL

TUTORIAL : CONSTRUCT 2 (BAGIAN 4)Sudah saatnya kita bahas Event Sheet di tutorial kita kali ini setelah 3 tutorial sebelumnya membahas

prosedur awal tentang bagaimana memulai membuat game dengan Construct,

Saya mengasumsikan Anda mengikuti tutorial sebelumnya sebelum mengikuti tutorial ketiga kali ini. Tan

basa-basi lagi, yuk kita mulai.

Pastikan bahwa Anda memiliki sebuah objek dan behavior seperti yang sudah kita lakukan di tutorial

sebelumnya.

Untuk mengakses Event Sheet, Anda bisa mengkliknya dari panel Projects sebelah kanan. Klik ganda

Event sheet1

Jika langkah Anda benar, maka akan muncul tampilan kosong pada layout Anda. Disini, Anda akan

menambahkan event yang bisa Anda pergunakan untuk modal membuat game.

Disebelah kiri atas tab Event sheet1, klik teks ‘Add event’ untuk memulai

Jika langkah Anda benar, maka akan muncul jendela Add event.

Jumlah item yang tertera pada jendela Add event bergantung pada jumlah objek yang Anda pasang pada

layout/kanvas. Semakin banyak objek Anda, akan semakin banyak item yang terpampang disana. Untuk

saat ini, saya hanya memiliki 3 (tiga), yaitu roket yang saya beri nama Player, peluru yang saya beri

nama Bullet dan System yang secara default sudah ada pada sistem.

Sekarang adalah, apa yang akan Anda pikirkan tentang game Anda untuk pertamakali? Banyak, mungkin

Anda akan melakukan seting awal berupa score, atau dimana jagoan Anda ditempatkan, atau berapa

nilai waktu pada saat dimulai dan sebagainya. Semua yang Anda pikirkan itu bisa diakses lewat Event

sheet. Sekarang, yang saya pikirkan adalah saya tidak mau peluru bergerak saat game baru dimulai.

Untuk melakukannya, ikuti langkah berikut dan saya akan jelaskan di akhir tutorial.

Pertama klik System.

Kemudian akan muncul subsystem yang tertera banyak. Namun untuk saat ini, saya akan memilih On

start of layout kemudian klik Next

Jika langkah Anda benar, maka pada Event sheet1 Anda akan muncul list pertama.

Untuk saat ini, Construct diperintah untuk melakukan sesuatu saat layout dimulai (On start of layout), tapi

perintah apa? Belum tahu, sebab kita belum memberitahukannya. Jika Anda perhatikan, disebelah list On

start of layout tersebut terdapat teks Add action. Disanalah kita akan memberi perintah pada Construct

apa yang akan dilakukannya saat layout dimulai.

Klik Add action saat ini

Akan muncul jendela Add action yang mirip dengan jendela Add event. Namun untuk kali ini, saya akan

klik Bullet.

Akan tampak parameter yang berada pada Bullet Anda. Disana, Anda bisa memilih apa saja yang akan

dilakukan si Bullet. Untuk saat ini, saya akan memilih ‘Set disabled’ kemudian klik Next

Jendela parameter Bullet akan muncul, saya pastikan State : Disabled kemudian saya klik Done.

Sekarang Construct sudah memiliki satu perintah yang jelas, yaitu saat layout dimulai, peluru (Bullet)

tidak akan aktif. Untuk mengetesnya, Anda bisa tekan tombol F5 dan perhatikan bahwa peluru tidak

aktif/tidak jalan.

Yang harus Anda ingat adalah, jika dalam satu objek Anda memasukkan behavior, maka parameter dari

behavior itu akan muncul di parameter action pada sebuah objek. Jika saja saya tidak memasang

behavior Bullet pada peluru saya, maka parameter Bullet tidak akan muncul disana.

Satu catatan kecil, saya tidak menginginkan peluru saya berada di layout selama permainan. Anda bisa

menggesernya diluar layar seperti yang saya lakukan, jadi pemain tidak perlu melihatnya.

Untuk beralih dari Event sheet ke Layout, Anda cukup klik tab yang tertera disana

Berikutnya, apa yang Anda butuhkan ketika bermain game via PC? Keyboard. Keyboard tidak otomatis

ditambahkan Construct pada game Anda, jadi Anda harus memasukannya secara manual. Tapi tenang

saja, caranya sangat mudah.

Aktifkan Layout1 Anda, kemudian klik 2x pada layar

Pada jendela Insert New Object, scroll kebawah dan pilih Keyboard > Insert

Sekarang, Anda bisa memanfaatkan parameter keyboard untuk menggerakkan aksi roket Anda pada

game.

Masuk kembali ke Event sheet1, kemudian klik Add event

Pilih Keyboard pada jendela Add event

Kemudian pada parameter keyboard tadi, pilih Key is down

Selanjutnya akan muncul jendela Parameter for Keyboard: Key is down. Klik tombol <click to choose>

Jika proses Anda benar, maka akan muncul lagi jendela Choose a key. Tekan pada keyboard tombol

apapun yang Anda inginkan saat roket Anda memuntahkan peluru. Disini saya akan menggunakan

tombol Spacebar. Jadi saya akan menekan tombol Spacebar kemudian klik OK

Jika langkah Anda benar, maka jendela Parameter for Keyboard akan menampilkan nama button yang

diaktifkan saat Anda ingin menembakkan peluru. Selanjutnya klik Done.

 

Langkah selanjutnya adalah memasukkan action pada saat keyboard Anda tekan. Logika ini sama seperti

langkah Anda sebelumnya saat layout dimulai.

Klik Add action disebelah teks Keyboard (perhatikan gambar dibawah)

Kemudian pilih Player

Scroll kebawah pada jendela Add action

Cari dan klik Spawn another object kemudian klik Next

Selanjutnya pada jendela parameter Player, klik button Object dan pilih peluru. Pada layer, masukan nilai

pada layer apa yang akan aktif untuk memunculkan peluru. Masukkan nilai 1 pada Image point atau

berapapun nilainya tergantung pada berapa image point yang Anda buat.

Jika sudah, klik Done.

Jika langkah Anda benar, maka akan seperti gambar berikut Event Sheet Anda

Ada bisa tes game Anda dengan menekan tombol F5 pada keyboard. Tekan keyboard dan tekan tombol

arah untuk menggerakkan objek Anda

Selamat, roket Anda sudah bisa menembak. Tapi rasanya, tembakannya rada aneh. Saya ingin ada jeda

diantara satu peluru dengan peluru lain dan tidak berkesan seperti peluru laser.

Untuk melakukan jeda, Anda membutuhkan parameter waktu

Klik Add event pada Event Sheet, kemudian pilih System

Scroll dan cari parameter Every X seconds

Klik Next untuk melanjutkan

Pada jendela Parameters for System: Every X seconds, masukkan nilai jeda waktu yang dibutuhkan

Player untuk memuntahkan satu peluru ke peluru lain. Disini saya memasukkan nilai 0.2 dan klik Done

Jika langkah Anda benar, maka akan tampak seperi gambar dibawah.

Selanjutnya klik dan tahan action Player dan geser kebawah, tepat disebelah event System

Jika Anda benar, maka akan tampak seperti gambar dibawah

Saat Anda tekan F5 dan memainkannya, roket dengan otomatis akan menembak dengan sendirinya,

tanpa harus Anda tekan tombol keyboard. Mengapa?

Karena kita sudah mengubah logika nya. Jika Anda bisa membaca nya, system setiap 0.2 detik akan

mengeluarkan (spawn) peluru. Disini, keyboard menjadi kosong. Construct tahu Anda memasukkan

perintah tekan spacebar pada keyboard, tapi kemudian melakukan apa? Action sekarang sudah kosong.

 

Logika sekarang adalah : roket akan memuntahkan peluru setiap 0.2 detik

sementara

Logika yang kita butuhkan adalah : saat saya tekan keyboard, maka roket akan memuntahkan peluru

setiap 0.2 detik.

 

Lalu bagaimana caranya Construct membaca itu

Klik header System (yang saya beri tanda panah pada gambar diatas) hingga seluruh event dan action

system terpilih dan berwarna kuning

Klik tahan dan geser ke atas perlahan, tetap dibawah event keyboard kemudian lepas. Jika langkah Anda

benar, maka akan tampak seperti gambar dibawah

Kondisi demikian memberikan logika pada Construct bahwa “setiap saya tekan keyboard, maka tiap 0.2

detik roket (Player) akan memuntahkan peluru”

Ingat, kondisi diatas sama dengan perintah “If” jika kita memprogram.

Tekan F5 untuk menjalankannya dan tekan keyboard untuk menembak. Lepas keyboard Anda dan

kondisi roket tidak lagi menembak.

Yup, langkah Anda sudah benar. Berikut penjelasannya.

Nomor dua adalah kondisi keyboard saat ditekan. Tapi apa yang terjadi setelah itu? Untuk itulah sub-

event akan dieksekusi, yaitu system setiap 0.2 seconds. Apa yang dilakukan system saat keyboard

spacebar saat ditekan? Yaitu spawn objek Bullet pada Player.

Sejauh ini, event sheet sudah cukup jelas saya terangkan. Jangan lupa save pekerjaan Anda. Di tutorial

kita yang kelima kita akan bahas event sheet ini lebih dalam lagi.

Tagged construct 2, game, Tutorial

15/04/2014LEAVE A COMMENT

CONSTRUCT 2 TUTORIAL

TUTORIAL : CONSTRUCT 2 (BAGIAN 3)Oke, kita sudah bahas 2 topik pada tutorial sebelumnya, yaitu interface dan objek. Sekarang kita akan

masuk untuk membahas behavior pada objek dan manipulasi objek.

Langsung saja kita mulai.

Buatlah dokumen baru (atau gunakan dokumen project sebelumnya), kemudian masukkan satu objek

pada layout (pernah kita pelajari sebelumnya).

Klik objek Anda pada layout (dalam contoh saya menggunakan objek roket berwarna merah), kemudian

perhatikan bagian kiri layar Anda, yaitu pada panel Properties. Scroll kebawah hingga Anda menemukan

Behaviors

Klik teks biru Behaviors.

Jika langkah Anda benar, maka akan muncul jendela baru Behaviors. Untuk saat ini jendela tersebut

memang kosong, karena Anda belum memasukkan apapun disana.

Oke sebelum kita melanjutkan, mungkin Anda bertanya pada saya, “apa itu behavior?” Behavior pada

Construct merujuk pada tindakan sebuah objek. Jadi apabila Anda menginginkan objek yang bergerak

naik-turun, maka objek itu bisa dipasang behavior yang memiliki opsi demikian. Atau, misalnya Anda

ingin membuat game platformer seperti Mario, maka Construct juga memiliki behavior yang memfasilitasi

nya. Singkatnya, behavior adalah tingkah laku dari suatu objek. Anda bisa memiliki lebih dari satu

behavior dalam satu objek.

Untuk saat ini, sesuai dengan tutorial saya, saya akan menambahkan sebuah behavior agar roket saya

bisa bergerak naik-turun, kanan dan kiri. Untuk melakukannya, klik icon ‘+’ pada pojok kiri atas jendela

Behaviors.

Jika langkah Anda benar, maka Anda akan bertemu dengan jendela Add behavior seperti pada gambar

dibawah.

Masing-masing behavior memiliki keunikannya sendiri. Untuk kasus pada game saya, maka yang saya

kerjakan adalah meng-scroll nya kebawah dan menemukan icon bernama 8 Direction.

8 Direction memungkinkan roket saya bergerak dengan gaya klasik 8 direksi seperti yang saya inginkan,

seperti gerak atas, bawah, kanan, kiri dan tentu saja diagonal.

Klik 8 Direction kemudian klik Add. Jika langkah Anda benar, maka akan muncul satu list seperti gambar

dibawah

Untuk saat ini, objek roket saya sudah memiliki behavior 8 Direction. Saya bisa hapus kapan saja saya

mau dengan memilihnya kemudian mengklik icon tong sampah.

Anda bisa tutup jendela Behaviors untuk saat ini.

Ketika Anda kembali ke layout, tampak seperti tidak terjadi apa-apa. Tenang, efek behavior akan berasa

setelah Anda menjalankan game nya.

Untuk menjalankan game, Anda bisa klik tombol Run layout atau shortcut F5

Bang! Anda bisa memainkan game Anda di browser. Selamat! Anda bisa menggerakkan objek Anda

menggunakan tombol arrow key pada keyboard.

Tapi masalahnya, gerakan roket saya tidak seperti yang saya harapkan. Ada yang salah, yaitu orientasi

roket nya. Roket menghadap atas, tapi ketika saya tekan tombol atas, roket justru menghadap samping,

meskipun memang benar bahwa roket bergerak keatas.

Untuk mengatasi masalah ini, kita akan masuk ke jendela Edit image seperti sebelumnya.

Untuk masuk ke jendela Edit image, klik dua kali pada objek Anda tadi. Kemudian, pada jendela Edit

image, alihkan perhatian Anda pada dua icon yang sepintas mirip icon undo dan redo.

Ya, yang saya lakukan adalah me-rotate objek saya untuk mendapatkan orientasi yang saya inginkan.

Setelah selesai saya rotate, saya bisa tutup jendela Edit image dan kembali ke layout.

Sekarang pada layout, roket saya menjadi ‘tiduran’. Lalu bagaimana jika saya ingin roket saya

menghadap atas pada layout? Mudah, Anda bisa me-rotate nya di layout.

Untuk me rotate objek pada layout, Anda bisa menggunakan 2 cara, yaitu cara manual atau cara lebih

presisif. Pada cara manual, Anda hanya cukup mengklik tahan objek yang saya berikan tanda panah biru

pada gambar diatas

Atau, pada cara presisif, Anda bisa memasukkan nilai pada Angle di panel Properties

Pada kasus ini saya memasukkan nilai -90 agar roket menghadap keatas.

Setelah semua langkah ini selesai, saya bisa menjalankan game saya lagi dengan menekan tombol F5

Yap, semuanya berjalan lancar dan roket saya tidak mengalami kesalahan orientasi seperti pada

awalnya.

Kita balik ke behavior. Mungkin Anda bertanya, adakah properties khusus untuk tiap behavior? Ya,

jawabannya ada. Anda bisa mengatur seting behavior, seperti misalnya menentukan seberapa tinggi

jagoan Anda melompat, atau seberapa cepat mobil Anda melaju.

Untuk melihat seting behavior, pastikan bahwa behavior tersebut telah terpasang pada objek Anda.

Selanjutnya pastikan objek Anda dalam keadaan terpilih. Pada panel Properties, Anda bisa melihat

behaviors yang terpasang pada objek Anda.

Karena saya memilih behavior 8 Direction, maka akan muncul seting properties dari behavior tersebut.

Disana saya bisa menentukan kecepatan gerak objek saya pada Max speed, akselerasi, deselerasi,

direksi dan sebagainya.

Catatan : Masing-masing behavior bisa memiliki nilai yang sama atau berbeda-beda. Dalam hal ini Anda

bisa mencoba-coba, dan bisa dipelajari sendiri (self explanatory)

Oke, sekarang apa lagi?

Tentu saja menembak. Saya ingin roket saya bisa memuntahkan peluru. Bagaimana caranya? Masih

ingat saat Anda membuat Imagepoint pada tutorial sebelumnya? Nah, pada kesempatan ini kita akan

memanfaatkan itu untuk menembakkan peluru.

Namun masalahnya kita tidak punya peluru. Anda bisa import image seperti Anda import objek Anda

sebelumnya. Atau pada kesempatan kali ini saya akan membuat image saya sendiri di Construct.

Pertama, pastikan saya memilih layer tempat dimana peluru saya ditempatkan. Saya bisa membuatnya

sama seperti letak objek roket saya pada sebuah layer. Kemudian saya klik dua kali pada kanvas hingga

akhirnya jendela Insert New Object muncul. Klik Sprite > Insert

Kemudian di jendela Edit image, klik icon Fill (A). Selanjutnya jendela Color Palette akan muncul. Pilih

warna yang Anda inginkan (B), kemudian di kotak kosong (C) klik untuk ‘menumpahkan’ warna tadi.

Nah, sekarang Anda bisa menutup jendela tadi

Di layout Anda saat ini, Anda akan menemukan sebuah kotak biru (atau warna apapun yang Anda

masukkan tadi) yang barusan Anda buat. Harap diingat bahwa objek ini sama layaknya objek yang Anda

import, Anda bisa memberikan behavior dan event kedalamnya.

Untuk saat ini, objek tadi masih terlalu besar untuk sebuah peluru. Apa yang akan saya lakukan adalah

mengecilkannya.

Sama seperti ketika Anda me-rotate objek, ada dua cara yang bisa digunakan, yaitu manual dan presisif.

Untuk presisif, Anda bisa memasukkan nilai Size pada Properties

Atau Anda bisa mengklik holder dari objek biru tadi dan men-drag nya hingga sesuai dengan ukuran yang

Anda inginkan.

Untuk saat ini, saya rasa nilai 10,10 sudah cukup untuk mewakili sebuah peluru.

Jangan lupa untuk memberi nama objek peluru Anda. Disini saya akan memberinya nama Bullet. Anda

bisa melakukan ini dengan terlebih dahulu memilih objek peluru tadi dan mengubah Name pada

Properties.

Bullet dan objek sudah ada dalam layout, sekarang tugas kita adalah memberi behavior pada bullet agar

ia bertindak layaknya peluru.

Oke, sekarang pilih objek bullet tadi. Kemudian klik Behavior dan pilih Bullet pada jendela Add Behavior

Sekarang bullet Anda sudah bisa bergerak seperti peluru. Jika Anda mau, Anda bisa menempatkan

peluru tadi pada layout kemudian jalankan game (F5).

Lihat apa yang terjadi? Yap, peluru akan berjalan melintasi layout tanpa bisa dikendalikan. Yang kita

inginkan adalah : peluru tidak muncul sebelum player menekan tombol tembah, peluru bergerak ke arah

yang telah ditentukan pemain.

Untuk mengatur semua itu, kita akan masuk ke sesi Event Sheet.

Sejauh ini, Anda bisa save pekerjaan Anda.

To be continue, jangan kemana-mana, seri tutorial ini masih berlanjut. Di tutorial selanjutnya, kita akan

bahas bagaimana memasukkan event sheet pada objek agar bisa berinteraksi dengan pemain.

Tagged construct 2, game, Tutorial

15/04/20142 COMMENTS

CONSTRUCT 2 TUTORIAL

TUTORIAL : CONSTRUCT 2 (BAGIAN 2)Di tutorial kita yang kedua ini, saya akan bahas bagaimana Anda menggunakan dan berinteraksi dengan

objek. Harap dicatat bahwa tutorial kedua ini belum masuk ke event sheet. Tanpa basa-basi lagi yuk kita

mulai.

Sediakan file yang sudah kita ikuti sebelumnya, atau Anda bisa bikin proyek baru di File > New.

Sebelum meletakkan objek, ada satu hal yang penting untuk Anda ketahui, yaitu Layer.

Untuk membuat layer, klik tab Layer di panel bagian kanan layar Anda.

Akan tampak bahwa secara default, Construct sudah memberikan satu layer disana dan itu adalah Layer

0. Untuk menambah layer, klik tombol plus (seperti pada gambar) sebanyak 4 kali.

Anda mungkin berpikir kenapa hanya tersedia 4 layer? Ya, itu karena kita pakai edisi free dari Construct.

Jika Anda membeli versi full version, maka Anda bisa memanfaatkan layer lebih dari itu. Tapi untuk saat

ini, kita cukup dengan empat layer tadi.

Balik ke topik, Anda bisa memberikan nama pada layer dengan cara klik icon pulpen untuk rename.

Pada umumnya cara kerja layer adalah sama seperti kebanyakan software pengolah grafis lain, seperti

Photoshop atau Illustrator. Disini, yang harus Anda catat adalah, pertama pilih terlebih dahulu layer nya,

kemudian Anda bisa masukkan objek nya.

Jika Anda tidak menginginkan sesuatu bergeser pada layar, satu cara terbaik adalah mengunci nya.

Anda bisa mengunci layer dengan cara mengklik icon gembok. Untuk membuang layer, Anda bisa

mengklik tombol tempat sampah.

Oke, untuk memasukkan objek. Klik ganda di layout/kanvas Anda. Pastikan Anda memilih layer yang

Anda inginkan sebelum memasukkan objek. Biasanya, layer 0 adalah layer untuk background, jadi

usahakan tidak memasukkan objek bergerak selain background sdi layer ini.

jika langkah Anda benar, maka akan muncul jendela Insert New Object seperti gambar diatas. Scroll

kebawah dan klik icon Sprite dan klik Insert

Kursor mouse Anda akan berubah menjadi simbol ‘+’. Klik di manapun pada kanvas dan perhatikan

bahwa Construct akan memunculkan beberapa jendela baru untuk Anda. Mari disimak.

A : Adalah tempat Anda memasukkan image, edit image, mengedit collision dan sebagainya.

B : Adalah tempat animasi frame by frame Anda tampil. Disini Anda bisa potong, atau duplikat image

untuk dianimasikan.

C : Adalah tempat Anda mengkategorikan animasi Anda. Misalnya, Animasi berjalan, berlari, melompat

dan sebagainya. Disini Anda bisa menduplikat animasi, menghapus dan sebagainya.

Untuk saat ini, klik icon folder di pojok kiri atas jendela Edit image

Jika langkah Anda benar, maka Anda bisa browsing image yang Anda inginkan. Tapi bagaimana jika

Anda cancel? Coba tutup jendela Edit image tadi tanpa me-load image apapun dan perhatikan.

Perhatikan pada bagian kanan bawah panel Anda. Pada panel Objects, Anda akan melihat Spritenamun

tanpa objek apapun disana (perhatikan gambar dibawah)

Ya, Construct tidak otomatis menghapus objek Anda, sekalipun Anda tidak sempat untuk me-load

gambar. Sebenarnya, Anda masih bisa mengaksesnya dengan cara double click Sprite tadi untuk

memunculkan kembali jendela Edit image, atau, Anda bisa menghapusnya dengan menekan tombol

Delete pada keyboard.

Ulangi langkah diatas, masukkan Sprite pada layout, kemudian pada jendela Edit image, klik icon folder

dan masukkan gambar yang Anda inginkan. Jika langkah Anda benar, maka akan muncul image pada

jendela Edit image.

Sebelum Anda menutup jendela Edit image, ada beberapa hal yang harus Anda perhatikan, yaitu

menentukan Collision polygon dan mengatur image point atau origin.

Perhatikan dua icon kecil disebelah kiri agak kebawah jendela Edit image. Hover pointer mouse Anda

maka akan muncul popup notification bertuliskan ‘set collision polygon’ dan ‘set origin and image points’.

Untuk saat ini, klik ‘set collision polygon’ (icon terbawah)

Jika Anda benar, maka objek Anda akan dikelilingi garis biru dengan dot merah (catatan : gambar saya

akan berbeda dengan gambar Anda)

Garis biru adalah collision pada objek Anda. Semakin banyak garis biru maka akan semakin detil collision

objek Anda, tapi harap dicatat bahwa semakin banyak collision maka akan semakin berat game Anda

mengkalkulasi.

Untuk mengedit collision tadi, Anda bisa klik dan geser dot merah dan menentukan seperti apa collision

yang Anda inginkan. Untuk menghapusnya, Anda cukup pilih dot tersebut dan klik Delete pada keyboard.

Untuk menambahkan dot, Anda bisa pilih salah satu dot kemudian klik kanan dan pada jendela popup

muncul, pilihlah ‘Add point’.

Untuk saat ini, objek saya sangat sederhana jadi bisa diwakili dengan sebuah box. Untuk itu saya cukup

klik kanan pada objek, kemudian pilih ‘Set to bounding box’ dan hasilnya seperti tampak gambar

dibawah.

Selesai dengan urusan collision, sekarang saya akan masuk ke set origin and image points. Untuk itu

saya memilih icon tersebut.

Segera setelah saya mengkliknya, akan muncul jendela baru ‘Image points’ yang secara default berisi

satu list ‘Origin’. Itu adalah sumbu putar pada objek Anda. Secara default, sumbu ini sudah otomatis

terpasang di badan objek. Dalam beberapa kasus game, Anda butuh untuk mengubah posisinya, tapi

bisa juga untuk tidak merubahnya.

Untuk merubah sumbu putar (Origin) tersebut, Anda cukup memilih Origin pada jendela Image points

tersebut, kemudian mengklik bagian tertentu pada badan objek game Anda tadi.

Selesai dengan Origin, sekarang saatnya Anda menambahkan Imagepoint. Apa itu Imagepoint? Ketika

pesawat Anda dibuat untuk bisa menembak, maka Anda harus menentukan dimana letak peluru itu

keluar bukan? Ya, di Imagepoint lah pesawat Anda memuntahkan peluru.

Untuk itu, klik icon ‘+’ pada jendela Image points. Jika langkan Anda benar, maka akan muncul list baru

disana, yaitu Imagepoint1

Anda bisa menambahkan lebih dari satu Imagepoint, misalkan saja pesawat Anda bisa menembak dari

sisi kanan dan kiri sayap, maka Anda butuh menambahkan lagi satu Imagepoint.

Masih dalam keadaan Imagepoint1 terpilih, saya akan mengklik objek saya yang nantinya akan menjadi

tempat keluarnya peluru, maka saya memilih moncong roket saya. Segera setelah Anda memilih

Imagepoint1 atau Origin, maka kursor Anda akan berubah, hati-hati untuk tidak mengklik objek dengan

tidak disengaja.

Setelah selesai, maka akan muncul sebuah kotak kecil yang mewakili Imagepoint saya. Pada kasus

gambar roket tadi, saya akan memunculkan peluru tepat di moncongnya.

Jika Anda telah selesai, tutup ‘Set origin and imagepoints’ tadi dengan kembali mengklik icon nya.

Oke sekarang semua setup sudah jadi, Anda sudah bisa menutup jendela Edit Image sekarang.

Dan, lihatlah apa yang terjadi, sekarang objek Anda sudah berada di layout. Untuk menggesernya, Anda

bisa mengklik + drag objek tersebut ke lokasi yang Anda inginkan. Atau, Anda bisa memperkecil

ukurannya (self explanatory)

Oke, sekarang objek sudah berada dalam layout dan setup sudah selesai. Apalagi sekarang? Jangan

lupa layer.

Jika kebetulan Anda salah menempatkan objek pada layer yang salah, jangan khawatir, Anda bisa

mengubah posisi objek tersebut pada layer dengan mengklik kanan objek, kemudian pilih Move to layer >

(nama layer)

Pastikan objek Anda terpilih, kemudian pada panel Properties, ubahlah nama objek Anda menjadi nama

yang mudah dikenali, misalnya Player.

Jangan lupa save pekerjaan Anda.