Membuat Game Tangkap Apel - Part 2

Setelah selesai tahap I.

Sekarang kita akan membuat “Apple” saat berbenturan dengan “Player” langsung hilang langsung saja kita ke Event sheet “Level01”

Add event > Sprite “Apple” > On collision with another object > Pilih Sprite “Player”
Add action > Pilih Sprite “Apple” > Destroy.

Logikanya ketika Sprite “Apple” berbenturan dengan Sprite “Player” maka system akan langsung menghancurkan Sprite “Apple” dari layar.


Lanjut lagi, kali ini kita akan membuat “Apple” saat berbenturan dengan “Ground” maka akan memudar (kalian bisa membuatnya menghilang jika mau).

Add event > Sprite “Apple” > On collision with another object > pilih Sprite “Ground”
Add action > Sprite “Apple” > Start fade

Nah untuk memberikan efek memudar kita terlebih dahulu harus menambahkan Behavior terlebih dahulu

Klick Sprite “Apple” > Add Behaviors > Pilih “Fade”
Logikanya ketika Sprite “Apple” berbenturan dengan Sprite “Ground” maka system akan mejalakan sifat memudar pada Sprite “Apple”

Sekarang kita akan membuat Score dan Health nya, jadi kita membuat Global variablenya terlebih dulu.

Buat saja dua Global variable kita berikan nama masing - masing “ScorePlayer” & “VarHealthbar”.
Terus kita sekarang tinggal berikan saja tindakan tambahan terhadap Sprite yang kita ingin hubungkan dengan Global variable yang kita inginkan.
Pada apel ketika berbenturan dengan dengan pemain maka kita berikan tindakan,
Add action > System > Add to > Pilih variable “ScorePlayer”, Set Value “1”.

Logikanya saat kondisi terpenuhi maka System akan menambakan 1 nilai pada Global variable “ScorePlayer”.

Pada apel ketikan berbenturan dengan dinding maka kita berikan tindakan,
Add action > System > Subtract from > Pilih variable “VarHealthbar”, Set Value “1”.

Logikanya saat kondisi terpenuhi maka System akam mengurangi 1 nilai pada Global variable “Varhealthbar”.

Sekarang bagaimana cara kita memunculkan hasil dari kedua Global variable tersebut?
Kita bisa menghubungkan Global variable tersebut dengan “Text” yang telah kita buat sebelumnya

Add event > Pilih Text “Score” > Is on layer > Layer “0”
Add action > Pilih Text “Score” > Set text > Text (“Score: ” &ScorePlayer)

Logikanya saat Text “Score” berada pada layer “0” maka Text “Score” akan menampilkan text tersebut pada layer menjadi Score: 0 dikarenakan,
“Score: ”             <= Text biasa
&ScorePlayer     <= memanggil variable yang kita ingikan untuk perubahan nilai pada Score


Lakukan hal serupa untuk memunculkan Health kita pada layar,

Add event > Pilih Text “Health” > Is on layer > Layer “0”
Add action > Pilih Text “Health” > Set text > Text (“Health: ” &VarHealthbar)

Logikanya saat Text “Health” berada pada layer “0” maka Text “Health” akan menampilkan text tersebut pada layar menjadi Health: 10 dikarenakan,
“Health: ”         <= Text biasa
&VarHealthbar     <= memanggil variable yang kita ingikan untuk perubahan nilai pada Score


Nah sekarang kita coba jalankan, ada yang aneh?

Ya.. disini saat “Apple” jatuh sekali akan mengurangi nilai dari VarHealthbar kita berkali - kali dan ketika “Apple” sudah jatuh ke tanah saat “Player” mendekati secara cepat maka akan terhitung sebagai Score

Ini terjadi karena nilai “Apple” saat jatuh ke tanah selalu dihitung berulang.

Cara mengatasinya kita akan bermain pada Local variable kali ini, kita buat saja variablenya
isFall (Boolean) > False agar System bisa membacanya lebih jelas

Nah sekarang kita kembali lagi ke Event sheet “Level01”

Pertama kita akan membenarkan kondisi dari “Health”, kita berikan saja Another condition pada “Apple” On collision with “Ground”

Klik kanan pada kondisi diatas
Add another condition > Pilih Sprite “Apple” > Is boolean instance variable set > Instance variable “isFall”.

Di Invert pada kondisi tambahan diatas
Add action > Pilih Sprite “Apple” > Set boolean > Instance variabale “isFall”, Value “True”


Logikanya ketika kondisi “Apple” berbenturan dengan “Ground” dan ketika “Apple” “isFall” = False sudah terpenuhi,
maka Boolean di “Apple” akan mengset isFall = True saat “Apple” membentur “Ground”

Jadi system hanya akan mengurangi 1 dari “VarHealthbar” ketika “Apple” isFall = True, jadi ketika “Apple” jatuh untuk berikutnya maka system tidak akan menginputnya sebagai poin untuk mengurangi “VarHeatlhbar”.

Lakukan hal yang sama untuk kondisi “Apple” On collision with “Player”

Add another condition > Pilih Sprite “Apple” > Is boolean instance variable set > Instance variable “isFall”.
Di Invert pada kondisi tambahan diatas

Logikanya ketika kondisi “Apple” berbenturan dengan “Player” dan “Apple” “isFall” = False sudah terpenuhi,

Maka System tidak akan input “Apple” yang sudah jatuh ke “Ground” sebagai poin untuk Score, karena hanya “Apple” yang bernilai False yang dibaca oleh system sebagai input poin untuk “ScorePlayer”

Nahh tinggal langkah terakhir :D, sekarang kita buat bagaimana jika kondisi darah sudah mecapai “0”

Kita buat saja seperti ini,
Add event > System > Compare variable > Variable “VarHeatlhbar”, Comparation “Equal to”, Value “0”
Add action > System > Go to layout > Layout “Game Over”

Logikanya ketika “VarHealthbar” = “0” maka system akan memindahkan kita ke layer Game Over



Nahh sekarang pasti ketika di Run sudah berjalan dengan baik kan? :D

kalau begitu sampai disini ya pembahasan kita tentang membuat game sederhana, semoga ilmunya bermanfaat brotha sekalian.

Terimakasih! :D

File Capx download disini

Membuat Game Tangkap Apel - Part 1

Halo brotha, kita sekarang akan membuat sebuah game sederhana yang nanti bisa kalian kembangkan sendiri kelanjutannya.

Disini kita akan membuat game menangkap buah, jadi nanti kita akan memunculkan buah - buahan yang akan jatuh secara acak dari atas dan kita sebagai Player nanti akan menangkapnya, jika kita berhasil menangkapnya maka kita akan mendapatkan Score +1 dan jika kita gagal menangkapnya maka Health -1 dan jika kita gagal terus menerus maka permainan akan berakhir.

Nah langsung saja ya, pertama kita buat saja langsung 2 buah Layouts berikan nama “Level01” & “Game Over” jangan lupa ganti nama Event Sheetnya. Sekarang kita siapkan beberapa Sprite seperti;

- “Bglevel01”

- ”BgGameOver”   => Untuk layout Game Over

- “Apple”

- “Player”

- “Ground”

Jangan lupa Texts & Input juga:

- “Health”

- “Score”

- “Gameover”        => Untuk layout Game Over

- “Keyboard”         => Input

Jika sudah, sekarang kita tempatkan semua pada Layout kita seperti dibawah ini:

1. Layout Level01

2. Layout Game Over

Jika sudah sekarang kita akan masuk ke perubahan bentuk Polygon, sekarang kita double click saja gambar yang ingin kita rubah bentuk polygonnya. Untuk sekarang kita double click dulu di Spite “Player”nya lalu dimenu bar sebelah kiri pilih “set collision polygon”.

Nah sekarang kita akan melihat bahwa Sprite “Player” dikellingi oleh garis berwarna biru dan titik berwarna merah, kalian dapat menyesuaikan bentuk polygon untuk Sprite tersebut dengan cara mengdrag titik merah pada gambar lalu kita sesuaikan dengan bentuk gambar tersebut.

Sesuaikan seperti contoh dibawah ini:

Kemudian kita lakukan hal yang sama untuk Sprite “Apple”, disini kita akan memberikan polygon tambahan untuk apel, ada 2 cara disini

1. Kita bisa klik kanan pada gambar yang sudah masuk di menu “set collision polygon” kemudian pilih “Guess polygon shape” 

Kita mengaturnya sendiri dengan mengklik kanan titik merah di polygon kemudian pilih “add poin” sesuaikan banyaknya dengan bentuk gambar yang ada, kurang lebih seperti gambar dibawah ini.

Ohh iya hampir lupa, untuk Sprite “Ground” kalian hanya perlu membuatnya 1 saja kemudian kalian bisa bisa mengcopynya.

NB: Alasan kita mengatur polygon pada Sprite adalah agar kita bisa menentukan titik benturan dari Sprite tersebut dengan Sprite lain, karena jika tidak diatur polygonnya maka titik benturan gambar akan terlihat aneh dilayar saat dijalankan.

Sekarang kita masuk ke bagian Behaviors untuk masing - masing object, caranya adalah dengan mengklik satu kali pada Sprite yang kita inginkan kemudian klik “Behaviors” dimenu Properties lalu klik lagi icon (+) pada jendela baru kemudian kita pilih Behaviors yang kita inginkan.

Sebagai contoh kita akan memberikan Behaviors pada Sprite “Apple”

Click Sprite “Apple” > Add Behaviors > Pilih “Physics” kemudian Enter

Lakukan juga hal yang sama untuk Sprite lainnya seperti :

Klick Sprite “Ground” > Add Behaviors > Pilih “Physics” (Immoveable : Yes), dan “Solid”

Klick Sprite “Player” > Add Behaviors > Pilih “Platform”, dan “Solid”

Rasanya persiapan awalnya sudah ok ini, kalau begitu kita masuk saja ya ke Event sheetnya untuk Layout “Level01”.

Sekarang kita akan membuat bagaimana “Apple” akan jatuh secara acak dari atas layar ke bawah, pertama kita lihat lagi Layout “Level01” kemudian kita klik Sprite “Apple” yang kita telah letakan seperti digambar.

Di tab Properties kalian bisa melihat posisi dari Sprite tersebut dan yang akan kita lakukan adalah membuat “Apple” jatuh sepanjang sumbu “X”yang berarti sumbu “Y” menjadi statis, nah bagaimana cara kita menentukan “Apple” jatuh disepanjang Sumbu “X”?

Kita bisa menentukannya dengan cara mengerakan pointer mouse kita secara Horizontal disepanjang Sumbu “X” kita buat saja dengan titik A ~ B cara untuk melihat koordinat pada pointer mouse kita adalah dengan melihat dipojok kanan bawah dari window Construct kita. (Status bar kalau gak salah :D)

Ok jadi sekarang kita sudah tau ya koordinat dari masing - masing sumbu yang kita kehendaki, kemudian kita langsung saja atur kondisi dan tindakannya untuk memunculkan “Apple”

Add event > System > Every X seconds > Masukan (detik) 

Add action > System > Create object > Pilih Sprite ”Apple” > set Layer “0” > set X random(A~B) > set Y random(Y).

 

Logikanya setiap “X’ detik yang kalian input maka System akan membuat object “Apple” pada Layer “0” disepajang sumbu X yang telah kalian set dan secara random, dan sumbu Y random

Lanjut ke part II ya, jangan lupa di save dulu!

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

Buat Game Cepat dan Mudah dengan Construct 2

Pertumbuhan mobile game sekarang semakin cepat, di Google Playstore saja tiap harinya ada ratusan sampai ribuan mobile game baru dirilis.

Para developer game pun berlomba-lomba untuk membuat game pada perangkat android, tidak hanya harus bagus di tampilan dan gameplay, tetapi developer harus memperhatikan waktu untuk develop game itu sendiri, makin cepat makin bagus, nanti keburu idenya disusul orang lain.

Construct 2 yang di ciptakan oleh Scirra, merupakan 2D game engine berbasis HTML5 dan javascript yang dapat di jalankan multi platform.

Membuat mobile game di Construct 2 Cepat dan Mudah, kenapa? karena tidak memerlukan kodingan sama sekali, tapi tentu saja butuh logika yang kuat untuk membuat satu game jadi. Tapi itu semua bisa dilatih di tutorial-tutorial yang ada, mulai dari yang simpel sampai yang rumit.

Kekurangan Construct 2 untuk develop mobile game sama seperti game engine multiplatform lainnya adalah ukuran file yang akan lumayan besar karena game yang diekspor perlu menggunakan runtime crosswalk untuk menjalankan HTML5, javascript dan fitur native pada android. Game simpel saja mungkin bisa sampai 10 - 20 Mb.

Kekurangan lainnya adalah performa, dimana untuk di device low-end performa game bisa menurun dibandingkan game engine lain, disini diperlukan optimisasi pada tekstur, animasi ataupun kode game tersebut oleh si developer sendiri.

Untuk mencoba Construct 2 kalian bisa mengunduh versi Trialnya, dimana fiturnya akan dibatasi, tapi lumayan untuk mencoba-coba sebelum beli versi fullnya di website www.scirra.com atau di Steam

Untuk kalian developer yang tidak ingin ketinggalan suatu momen, ingin membuat game cepat jadi sebelum momen itu "basi". Maka Construct 2 adalah pilihan yang tepat!