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/2014

8 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/2014

2 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 subevent 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/2014

LEAVE 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/2014
2 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.