Halo brotha kali ini kita akan membahas cara membuat Main
menu dan Level select yang sederhana.
Hal pertama setelah kita membuka Construct kita langsung
buat project baru dengan cara klik menu
File > New > New Empty Project
Jangan lupa kita beri nama dulu untuk layout & event sheet yang sedang kita
gunakan, supaya lebih mudah untuk digunakan nantinya
Caranya adalah :
Dengan mengklik kanan menu Layout 1 dibagian Projects lalu
kita ganti nama sesuai dengan kebutuhan kita, untuk saa ini kita rubah saja
menjadi “Main Menu” lakukan hal yang sama dibagian Event sheet 1, Nah jika
sudah kita masih harus membuat satu buah Layout lagi
Caranya adalah :
Dengan mengklik kanan menu Layouts dibagian Projects
kemudian kita tambahkan Layout baru, jangan lupa tambahkan Event
sheetnya juga. Kali ini kita berikan nama pada Layout dan Event sheet ini
dengan nama “Level Select” lakukan seperti pada Layout sebelumnya nah jangan
lupa untuk mengDouble Click Event sheet “Level Select” yang ada dibagian
Projects untuk dapat memunculkannya.
OK, sekarang kita langsung saja ya masuk ke layar Main Menu,
disini kita akan membuatnya secara sesederhana mungkin
Sekarang kita ke bagian Layout Main Menu kemudian klik kanan pada latar
belakangnya lalu pilih Sprite dibagian General jangan lupa untuk memberi nama
untuk Sprite (BgMainMenu) tersebut agar lebih mudah dalam pengunaannya.
Kemudian setelah mengklik Insert klik kanan pada latar
belakang dan nanti akan muncul Window baru seperti :
Disini kita bisa memberikan tampilan sederhana seperti
dicontoh atau kalian dapat memasukan gambar milik kalian sendiri memalui “Load
an image from a file” (Icon Forlder) kemudian tekan Enter lalu sesuaikan
dengan ukuran layar.
Lalu kita buat lagi sebuah Sprite “Playbutton”, klik kanan
lagi pada latar belakang kemudian buat Input “Mouse” di Insert new object
Nah sekarang kita masuk ke Event sheet “Main menu”, klik
“Add event” dipojok kiri jendela Event sheet lalu pilih Mouse > On object
clicked > Pilih object yang kita inginkan (“Playbutton”)
Kemudian tambahkan tindakan yang kita inginkan setelah kita
menentukan kondisi Mouse tadi dengan cara “Add action” lalu pilih System
> Go to layout > Pilih layout (“Level Select”).
Jadi logikanya saat klik kiri Mouse pada Sprite “Playbutton”
maka system akan langsung memindahkan kita ke Layout “Level Select”.
Nah sekarang kita akan masuk ke “Layout Level Select”
Buatlah beberapa Sprite disini, yaitu
”BgLvlSelect”, “Level01”, “Level02”, “Level03”, & “Backbutton”.
Kita bisa membuat “BgLvlSelect” sama seperti kalian membuat
“BgMainMenu” sebelumnya,
Lalu bisa membuat Sprite “Level01” sama seperti halnya membuat Sprite
“Playbutton” kita bisa membuatnya dengan sederhana dengan membuat kotak
berwarna polos atau menggunakan gambar milik kalian, begitu pula dengan
“Backbutton” kita bisa menggunakan tanda panah kekiri sederhana atau gambar
milik kalian.
Nah sekarang kita buat animasi pembeda antara Level yang
terbuka dan Level yang belum terbuka, caranya kita bisa double click pada
Spirte “Level02” kemudian klik kanan dijendela “Animations” lalu pilih menu
Add
Animation dan jangan lupa diberi nama sesuai kebutuhan kita agar mudah saat
dipanggil nanti.
Kita berikan nama “Locklevel02” lalu klik Animasi tersebut
maka gambarnya akan berubah menjadi kosong, disini kita bisa masukan gambar
dengan warna yang berbeda sebagai pembeda antara animasi awal dan yang baru
kita buat atau kalian bisa memasukan gambar yang kalian miliki, lalukan hal
yang sama untuk Sprite “Level03”.
Nahh persiapan di Layout “Level Select” kita sudah selesai
sekarang saatnya kita ke Even sheet “Level Select”
Kita mulai dengan membuat Global Variable untuk pemicu
pembuka “Level” nanti, caranya adalah kita klik kanan dilatar belakang Event
sheet kemudian Add Global Variable berikan nama sesuai kebutuhan dengan
Type : Number dan Nilai : 0, disini kita membuat isCompleteLevel01 = 0 dan
isCompleteLevel02 = 0.
Sekarang di Event sheet “Level Select” kita tambahkan
kondisi baru yang pertama
Mouse > On object clicked > Pilih object yang kita inginkan
(Level01) kemudian tambahkan tindakan yang kita inginkan setelah memilih
kondisi Mouse tadi System > Set value > Pilih Variable
(“isCompleteLevel01”) berikan nilai 1
Logikanya Ketika klik kiri mouse pada Sprite “Level01” maka
System akan mengSet nilai Global Variable “isCompleteLevel01” mejadi “1” yang
sebelumnya adalah “0”.
Kemudian berikan lagi sebuah kondisi dibawahnya;
Add Event > System > Compare variable > Pilih
Variable (“isCompleteLevel01”) lalu berikan perbandingan “Equal to”(Setara
dengan) dan berikan nilai 1
Kemudian berikan tindakan,
Add Action > Sprite “Level02” > Set animation
“Locklevel02” pada frame saat itu.
Logikanya saat Global Variable “isCompleteLevel01” = 1 maka
System akan mengset Animasi Sprite “Level02” yang sebelumnya “Default” menjadi
“Locklevel02” pada frame saat itu.
Lakukan hal serupa untuk Sprite “Level03” dan jangan lupa
untuk menganti Global Variablenya :D
Sekarang coba kalian Run gamenya dari Construct
Nah bagaimana, bisa jalankan? :D
ehh tunggu tapi ada yang aneh, waktu kita klik Sprite “Level02” Sprite
“Level03” langsung bisa terbuka ya?
Ada yang tau kenapa?
Jadi itu karena tidak ada kondisi pembatas yang jelas saat mouse melakukan klik
pada Object Sprite “Level01” maupun “Level02”
Coba sekarang kita tambahkan kondisi lain di kondisi Mouse
Sprite “Level02” dengan cara
klik kanan pada kondisi Mouse Sprite “Level02” > Add another condition
> System > Compare variable > Pilih Variable “isCompleteLevel01”
lalu berikan perbandingan “Equal to” dan nilai 1.
Logikanya adalah saat klik kiri Mouse di Sprite “Level02”
maka System akan memeriksa apakah Global Variable “isCompleteLevel01” sudah
mencapai nilai “1”?, jika belum maka System tidak akan mengangapnya sebagai
inputan. Karena syarat atau kondisi yang ada pada Sprite “Level02” adalah
“isCompleteLevel01” = 1
Jadi sekarang saat kita mencoba mengklik Sprite “Level02” System akan tetap
mengangap nilai “isCompleteLevel02” tetap “0”, karena tidak memenuhi kondisi di
Sprite “Level02”.
Nah sekarang tinggal satu hal terakhir saja, sekarang kita
buat agar dari jendela “Level Select” untuk kembali ke jendela “Main Menu”
caranya sama seperti yang kita telah gunakan untuk berpindah ke “Level Select”
Add condition > Mouse > On object clicked > Pilih Object
“Backbutton” kemudian tambahkan tindakan System > Go to layout “Main
Menu”.
Logikanya ketika klik kiri Mouse pada Sprite “Backbutton”
maka System akan memindahkan kita ke Layout “Main Menu”.
Jadi untuk pembahasan Main Menu & Level Select kali ini
kita sudahi sampai disini dulu ya, semoga ini bisa menjadi bahasan yang berguna
bagi kita semua.Terimakasih.
Sample CAPX :
download di sini