Dalam tutorial hari ini, kita akan belajar membuat game Magic Touch.
Kalau belum, bisa lihat dulu gamenya seperti apa di sini.
Inti dari permainannya adalah membuat spell dengan gerakan tangan sesuai simbol yang ditunjukkan pada balon.

Agar kamu bisa menguasai cara pembuatannya, kamu harus terlebih dulu menguasai tentang stack yang bisa kamu pelajari dari materi workshop saya, atau tutorial saya di forum scirra.

Edit : Oh ya, ternyata hasilnya agak beda dengan game aslinya. Gak papa ya? Yang penting kamu sudah tau dasarnya, dan bisa diedit-edit sendiri kalau mau lebih mirip sendiri


Persiapan

Agar lebih mudah membuat game ini, kamu perlu memiliki plugin On Stroke Gesture Listener yang bisa kamu download di sini.
Copy-paste folder 'Gesture Recognizer' ke [lokasi install]/Construct 2/exporters/html5/plugins/ terus restart Construct mu.

*1.) Sprite *

Buat tiga buah Sprite bernama Baloon, Pattern, dan String.

  • Baloon = objek balon
  • String = tali
  • Pattern = menampilkan pattern yang harus dibuat

  • Berikan pin behavior pada String dan Pattern.

  • Berikan bullet behavior pada Baloon.
  • Miringkan Baloon 45 derajat ke kanan

2.) Gesture

Pilih gesture mana yang kamu sukai, lalu kamu buat animation frame-nya pada Pattern. Jangan lupa set animation speed = 0.

Saya memilih pola gesture berikut :
triangle, x, check, circle, zig-zag

3.) Relasi

Karena Baloon, Pattern, dan String adalah satu kesatuan, maka lebih enak kalau dibuat relasi parent-child dengan container 1.

Pilih String > set container (lihat properties bar) > Baloon

Entah kenapa di tempat saya Baloon tidak bisa contain Pattern. Oleh karena itu buat instance variable number parentUID pada Pattern, lalu nanti kita reference parent dari Pattern dengan menggunakan pick by comparison 2.

Buat array bernama arrPattern, lalu set width nya dengan 0.
Jika sudah, set container ke Pattern.


Balon

4.) Penyimpanan gesture

Buat global variable bernama PatternID yang akan menyimpan gesture yang dilakukan pemain apa.

5.) Membuat balon

Buat fungsi "Create Baloon".
Hal ini digunakan agar balon dapat dispawn di berbagai tempat.

Condition : Function > On function

Action :

Penjelasan :

  1. Objek String dan Pattern tidak perlu dibuat karena sudah otomatis dilakukan

  2. Set gerakan bullet ke Self.Angle+45 supaya turun ke bawah


Random Balon

Coba lihat lagi screenshoot di atas.
Setiap Robot terikat pada balon yang jumlahnya beda beda. Gimana caranya?
Kita akan mulai menggunakan stack di sini.

6.) Jumlah random

Buat blank sub event di bawahnya. Lalu buat local variable angka bernama stackDepth.
Supaya random, set nilainya dengan int(random(1,4))

Dengan rumus di atas, balon dibuat secara acak antara 1 sampai 4 buah.

7.) Pattern random

Buat sub event di bawahnya.
Gak cuma jumlah balon, tapi pattern gesture juga akan dibuat random. Syaratnya, gak boleh ada pattern yang sama.

Buat lagi local variable bernama i dan randomPattern

Event sheet untuk langkah 6-7 adalah seperti berikut :

Penjelasan :

  1. Setelah ngeset kedalaman stack (baris 3), set juga array arrPattern dengan angka acak untuk menyimpan pattern.

  2. Dengan perulangan while, set nilai randomPattern dengan angka acak antara 1-5 (karena jumlah pattern saya 5).

  3. Jika nilai randomPattern belum ada dalam stack arrPattern (baris 4), lakukan push.

  4. Ulangi sampai stack terisi penuh.


Create Balon

Setelah fungsi Create Baloon dibuat, kita bisa membuat balon dengan lokasi X sesuka hati.

Dalam screenshoot di atas, saya memanggil fungsi dua kali, dengan letak balon berada dalam X 100, dan 650.

8.) Supaya dapat memberikan parameter pada fungsi, klik Add parameter.

Conditon : Function > Call function

Hasil Sementara :

Perhatikan jika pattern berganti-ganti setiap dibuat.


Deteksi Input

9.) Touch

Sekarang, kita tinggal membuat event untuk mendeteksi input touch dari pemain.

10.) Ketika selesai touch, panggil fungsi lain bernama "Check Answer" untuk ngecek jawabannya benar atau tidak.

Penjelasan :

  1. Perintahkan plugin Gesture Recognizer untuk mengenali gesture yang dilakukan

  2. Hasil akan berupa string, masukkan ke global variable Result (buat dulu jika gak ada)

  3. Setelah cek jawaban, hapus (clear) untuk deteksi gesture selanjutnya.


Cek Jawaban

11.) Cek pattern

Set PatternID sesuai dengan hasil gesture yang dibuat pemain.

Dengan For each 3 cek setiap balon apakah sedang menampilkan pattern yang dibuat.

Jika ada yang sama ganti ke pattern selanjutnya (baris 17). Namun jika itu pattern terakhir, destroy balon (baris 18).

Gunakan pick untuk menghapus balon yang merupakan parent dari Pattern.

Hasil Akhir :


Sekian tutorial saat ini.
Kalau kamu pengen buat gesture sendiri, buat pakai file GestureCreator.capx yang sudah disertakan.

Kamu juga bisa download full source code tutorial ini
di sini.

Jangan lupa like facebook fanpage BikinGame untuk dapat update tutorial terbaru.

Dan facebook fanpage pribadi saya Puntodamar.

Footnote :

  1. container itu apa? baca dokumentasinya.

  2. tonton tutorial saya di youtube tentang ini.

  3. tutorial buat yang belum paham