Tutorial Construct 2
Tutorial Construct 2
Construct 2
disusun oleh :
Muhammad Mustajib
Indra Permana
M.ihza Nur Firdaus
Daftar isi
tutorial construct 2
GATOTKACA
1.membuat layout
1.buka construct 2
2.pilih le - new -new empty object - open
3.ganti nama project menjadi gatotkaca dan atur besar windows menjadi
900,500 serta ganti nama layout dan event sheet menjadi mainmenu
tutorial construct 2
GATOTKACA
2.menambahkan background
tutorial construct 2
GATOTKACA
3.menambahkan object
lihat hasilnya dengan menekan tombol f5 atau klik ikon run layout
tutorial construct 2
GATOTKACA
4.membuat link
tutorial construct 2
GATOTKACA
4.membuat link
3.setelah itu kita klik add action - pilih system - go to layout - next - maka
akan muncul jendela parameters for system : go to layout - pilih layout
gameplay - done
maka munculah logika seperti dibawah ini ,artinya jika mouse mengeklik
object button maka sistem akan membawa kita ke layout gameplay.
tutorial construct 2
GATOTKACA
berdiri
jalan
loncat
tutorial construct 2
GATOTKACA
1.klik add event - pilih sprite karakter - next - pada grup platform pilih
is on oor - done
2.buat lagi event dibawahnya, add event - karakter - next - is moving - done
lalu add action - karakter - next - set animation - next - muncul jendela baru ,
pada animation ketik jalan - done
3.add event - system - else - done - lalu add action - karakter - next set animation - next - muncul jendela baru , pada animation ketik berdiri done
4.buat lagi event dibawahnya, add event - karakter - next - is jumping - done
lalu add action - karakter - next - set animation - next - muncul jendela baru ,
pada animation ketik loncat - done
5.add event - system - compare two value - next - pada rst value ketik
karakter.Platform.VectorX - comparison pilih greater than - second value
0 - done ,lalu set action - karakter - set mirrored - next - not mirrored - done
6.add event - system - compare two value - next - pada rst value ketik
karakter.Platform.VectorX - comparison pilih less than - second value
0 - done ,lalu set action - karakter - set mirrored - next - mirrored - done
tutorial construct 2
GATOTKACA
3.untuk menyusunya kita copy saja terain yang sudah ada sifat solidnya
lalu dipaste ,ditata hingga membentuk suatu rintangan permainan,
contohnya seperti gambar berikut
tutorial construct 2
GATOTKACA
10
menampilkan dan
menyembunyikan
object didalam layer
memindah
layer ke atas
memberi nama layer
memindah layer
ke bawah
tutorial construct 2
GATOTKACA
11
dan inilah akhir pembahasan dari membuat karakter dan terain untuk
menguji game kita ,bisa lihat di browser kita masing-masing,
jika karakter sudah bisa berjalan beranimasidan dapat hadap kanan kiri
berarti logika yang kita buat telah berhasil ,jika belum bisa simak kembali
cara - cara sebelumnya.
hasilnya jika berhasil seperti ini :
sebuah game platform tidak cukup hanya dengan karakter bisa berjalan
beranimasi
kesana - kesini tapi kita juga membutuhkan rintangan biasanya berwujud
object lain yamg di sebut musuh.
selain itu juga harus ada skore dan nyawa
dan juga harus ada tujuan karakter bermain yaitu sebuah piala maksudnya
jika si karakter menyentuh atau sampai pada kondisi tertentu maka akan
sampai pada layout nish.
selain itu juga ada layout game over , untuk lebih jelasnya kita simak tutorial
selanjutnya.
tutorial construct 2
GATOTKACA
12
msebelum membuat nyawa dan musuh kita akan mempelajari layout apa saja
yang harus kita buat, yaitu : main menu, gameplay, game over, nish ,dan
layout tambahan seperti help dan credit.
tutorial construct 2
GATOTKACA
13
keterangan :
1.h5 = gambar nyawa full
2.h4 = gambar nyawa 4
3.h3 = gambar nyawa 3 dan seterusnya sampai h1
logikanya adalah si gatotkaca mempunya nyawa berjumlah 6 dan jika
menyentuh musuh akan berkurang 1 dan jika 0 maka akan game over
untuk membuatnya kita perlu memasukan logika di event sheet gameplay
lanjut halaman berikutnya >>
tutorial construct 2
GATOTKACA
14
tutorial construct 2
GATOTKACA
15
3.diberi sift sine dan solid ,sine berfungsi memberi gerakan vertikal / horizontal
dan atur pada jendela behaviors sine
Jika sudah selesai copy enemy yang sudah berisi sifat ,tempatkan di
beberapa tempat hingga terbentuk suatu rintangan ,
misalnya seperti ini :
tutorial construct 2
GATOTKACA
16
1.add event - karakter - on collision with another object - cari sprite musuh
- done
2.add action - system - restart layout
3.add action - system - subtract 1 from nyawa
4.add action - system - set value - vaiable diisi skore ,value diisi 0 - done
untuk yang nomer 4 perlu diketahui bahwa kita harus membuat 2 global
variable ,yaitu score dan nyawa, perhatikan gambar berikut :
tutorial construct 2
GATOTKACA
17
1.buat text biasa dengan cara klik dua kali pilih text
2.atur ukuran warna dan jenis font dan letakan pada layer HUD
4.letakan koin pada layer dekorasi ,dan tata seperlunya misalnya seperti ini
tutorial construct 2
GATOTKACA
18
cara membuatnya :
1.add event - karakter - on collision wint another object - pilih sprite koin done
2.add action - koin - destroy
3.add action - system - add to - variable skore , value 1 - done
4.add event - system - every tick - add action - tetx score yang tadi sudah
dibuat - set text - pada jendela text ketik "Score :"&skore - done
inilah tampilan jika semua langkah telah terselesaikan ,jika karakter menabrak
koin dan score bertambah 1 serta menghilang maka pembuatan skor telah
berhasil.
tutorial construct 2
GATOTKACA
19
8.membuat gameover
pertama buat layout game over atur ukuran layar seperti ukuran layout
gameplay beri gamber / text yang menyatakan gameover ,misalnya seperti
ini :
game over terjadi ketika nyawa si karakter bervalue 0 ,yang telah kita buat
pada halaman 14
pada logika gameover bisa diisi seperti ini :
cara membuatnya :
1.add event - system - on start layout - add actions - system reset global
variable to default
2.add action - system - wait - isi 3 / berapa terserah
3.add action - system - go to layout - pilih main menu
jika berhasil yang terjadi adalah jika si karakter nyawa = 0 maka akan menuju
layout gameover skore dan nyawa reset menunggu 3 detik menuju
mainmenu.
tutorial construct 2
GATOTKACA
20
2.buat logika
cara membuatnya :
1.add event - karakter - on collision with another object - pilih sprite tukuan done
2.add action - sprite tujuan - destroy
3.add action - system - wait -isi 3/terserah
4.add action - system - go to layout - nish
jika berhasil maka bila si karakter menabrak sprite tujuan yang terjadi sistem
akan masuk ke layout nish.
tutorial construct 2
GATOTKACA
21
langkah selanjutnya adalah menata layout nish contohnya bisa seperti ini :
di dalam layout nish kita tampilakan perolehan skor serta kita buat button
menuju main menu .
buat seperti gambar diatas / buat sesuai keinginanmu.
untuk skore kita bisa copy dari layout gameplay.
logika layout nish
1.copy logika score dari layout gameplay paste pada layout nish
2.add event - mouse - on object kliked - object pilih button menu -done
- add action - system - go to layout - pilih main menu - done
inilah tahap terakhir dari pembuatan game platform gatotkaca ,tetapi
untuk membuat game lebih hidup kita memerlukan suara / sound
yang akan kita pelajari pada pembahasan berikutnya.
tutorial construct 2
GATOTKACA
22
10.memasukan suara
tutorial construct 2
GATOTKACA
23
10.memasukan suara
Untuk sekedar contoh kita akan memasukan musi pada layout mainmenu
dan layout gameplay serta sound effect untuk koin dan terluka jika
ingin ditamabah yang lagi nanti caranya akan sama, ok langsung untuk
yang pertama musik pada main menu ,ikuti langkah berikut :
keterangan :
pada event sheet mainmenu tambah action seperti gambar di atas
add action - audio - stop all
add action - audio - play - pilih sound start yang sudah kita import tadi
untuk layout gameplay caranya sama saja hanya diganti audio start
menjadi stage.
setelah itu kita buat sound effect untuk karakter terluka dan menabrak koin
caranya sama seperti di atas hanya untuk musik fungsi loop diaktifkan
dan untuk sound effect diubah menjadi not looping.
loop artinya pengulangan .
tutorial construct 2
GATOTKACA
24
11.eksport game
Kegiatn paling ujung dari sebuah product adalah publikasi ,untuk itu kita harus
tahu caranya mengeksport game,
dalam contruct ada beberapa macam pilihan eksport tapi yang paling sering
digunakan adalah html 5 .
mari kita simak cara di bawah ini :
1.takan f5 untuk menampilkan jendela seperti dibawah ini.
tutorial construct 2
25
Untuk membuat software edukasi tidak jauh beda dengan membuat game
platform, malah untuk membuat aplikasi belajar huruf hijaiyah itu jauh
lebih mudah daripada membuat game, kita tidak membutuhkan logika
permainan hanya membutuhkan beberapa link dan input audio.
untuk tutorial yang ini akan lebih simple karena kita sudah mempelajari
tekniknya pada pembuatan game ,
oke langsung saja simak gambar berikut,
3
1
keterangan :
1.Atur nama serta ukuran layer seperti biasanya
2.masukan background, boder ,title ,dan masukan sprile link play dan keluar
3.buat urutan layer sesuai kebutuhan
4.buat layout mainmenu dan buat beberapa layout untuk pembelajaran
huruf hijaiyah
tutorial construct 2
26
Untuk membuat link disini caranya sama persis pada pembuatan link pada
game platform,
untuk tambahan saja kita akan mempelajari membuat link keluar
link keluar hanya berfungsi jika aplikasi di eksport untuk html5 jika sudah
menjadi android maka tidak berfungsi lagi.
lihat gambar berikut,
cara membuat :
1.add event - mouse - on object kliked - pilih button exitnya - done
add action - browser - pilih close
(untuk input browser bisa di masukan di layout main menu klik dua kali pilih
input broser)
2.untuk suara : add action - input audio - play - pilih sound yang sudah
di import
Hover
hiver adalah istilah jika mouse / cursor menyentuh object maka terjadi
animasi pada object tersebut.
untuk itu kita membutuhkan dua jenis button misalnya gelap dan terang
s1
s2
tutorial construct 2
27
buat hover pada setiap button yang ada ,untuk membuat button beda
warna bisa gunakan photoshop atur brighnest dan contrast.
tutorial construct 2
28
tutorial construct 2
29
keterangan :
1.semua caranya sama dari membuat link ,hover dan memasukan suara
2.untuk suara 1 adalah logika untuk huruf alif
untuk suara 2 adalah logika untuk huruf ba
untuk suara 3 adalah logika untuk huruf ta
3.stop all di bawah sendiri itu berfungsi untuk menghentikan suara dari layout
sebelumnya,cara membuatnya :
1.add event - sysytem - on start of layout
add action - audio - pilih stop all.
dan selesailah software edukasi ini, buat layout sampai pada huruf akhir
hijaiyah, jika selesai eksport seperti yang sudah diterangkan sebelumnya.
tutorial construct 2
penutup
30
penutup
salam penulis.
tutorial construct 2
pengenalan
31
construct 2
User Interface
Bagian berikut menjelaskan beberapa komponen penting pada user
interface Construct 2 disertai penjelasan umum dari setiap komponennya.
tutorial construct 2
pengenalan
32
construct 2
2.Layout view
Layout view merupakan visual editor atau workspace dimana kita
menempatkan objek-objek untuk membuat game, mendesain level dan
stage pada game, membuat screen menu, dan sebagainya.
3.View tab
View tab memungkinkan anda untuk mengganti-ganti layout dan event
sheet yang ingin dikerjakan pada layout view.
4.Properties bar
Properties bar merupakan tempat dimana kita mengatur sifat-sifat objek
yang diklik. Objek-objek yang dapat diganti tersebt diantaranya adalah
layout, objek, layer, animasi dan sebagainya.
5.Projects Bar dan Layers Bar
Secara default Projects Bar dan Layers Bar diposisikan di sini. Project bar
berfungsi menampilkan segala sesuatu yang terinclude dalam proyek.
Sedangkan Layers bar dapat digunakan untuk menambahkan layer atau
7.Objects Bar
Pada bar ini terdapat list objek-objek yang terinclude pada proyek game
yang sedang dikerjakan. Kita dapat melakukan drag and drop objek dari bar
ini ke dalam layout untuk meletakannya. Selain itu, dengan fungsi klik-kanan
kita dapat memilih bagaimana objek dalam bar ditampilkan
tutorial construct 2
pengenalan
33
construct 2
8.Status Bar
Pada bagian bawah layar editor terdapat Status Bar yang menampilkan :
Long-running task yang sedang dikerjakan oleh Construct 2, seperti
mengekspor dan menyimpan proyek.
Berapa banyak event yang terdapat pada proyek dan perkiraan size le
game
Layer yang sedang aktif, dimana objek akan diletakan.
Koordinat pointer mouse pada layout
Zoom level saat ini
9.Top-right buttons
Tombol atas-kanan memuat tombol-tombol umum pada window seperti
minimize, maximize, dan close. Selain itu terdapat juga tombol Pin Ribbon
untuk mengatur apakah tab ribbon ingin selalu ditampilkan atau tidak, serta
tombol About untuk membuka dialog window yang menampilkan credits
serta informasi mengenai software Construct 2.
tutorial construct 2