Tutorial Membuat Menu dan Pilihan Level Sederhana menggunakan Construct 2

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