Construct 2 - Membuat Game Mewarnai

November 02, 2016 in #Construct 2 #Coding | | | Share on Google+

Dengan Construct 2, membuat game mewarnai termasuk sangat mudah. Kamu hanya perlu menggunakan tambahan plugin Canvas yang berfungsi sebagai media / kertas mewarnai.


Persiapan

1.) Install plugin

Download plugin canvas di sini lalu copy paste folder di lokasi_install/exporters/html5/plugins

Jika sudah, buat project baru, lalu pasukkan objek canvas



Membuat Palet Warna

Untuk bisa melakukan pewarnaan, kita perlu melakukan setting warna, besar warna, dan posisinya.

2.) Membuat palet warna

Buat objek bernama Palet lalu masukkan warna yang diinginkan ke dalam animation frame.

Buat instance variable color yang berisi warna paletnya. Nilainya bisa warna umum (red, green, blue, black), atau kode warna (hex, rgb, rgba, hsl, hsla).

Set initial frame sesuai dengan warnanya, lalu animation speed menjadi 0.



Mewarnai Media

3.) Memilih warna

Set nilai variabel Color menjadi nilai color milik Palet.

4.) Penggambaran canvas

Buat global variable dengan nilai :

  • Color (text) = menyimpan warna yang dipilih
  • BrushSize (number) = menyimpan ukuran warna (value 8)
  • FirstDot (number) = menggambar di canvas (value 1)

Masukkan kode berikut :

  • Ketika canvas disentuh, lakukan penggambaran canvas. Set posisi ke Touch.X, Touch.Y (baris 5).

  • Berikan pewarnaan dengan nilai variable Color, dengan besar BrushSize (baris 4).

Hasil sementara :



Menggeser Palet

Jumlah palet warna akan banyak, minimal 12 warna. Dikarenakan ukuran layar yang terbatas, tidak semua warna kita tampilkan.

Kita akan gunakan fitur scroll untuk mengganti tampilan palet warna.

5.) Menggunakan behavior LiteTween

Download behavior di sini lalu letakkan di lokasi_install/exporters/html5/plugins

6.) Trigger scroll

Untuk melakukan scrolling, gunakan suatu sprite sebagai tombol.
Buat sprite bernama Next lalu berikan instance variable value dengan nilai "prev" dan "next" (ada dua buah)

Pastikan baris semua palet ada di bagian tengah-bawah canvas. Lihat gambar :

Perhatikan juga ada dua buah tombol Next di sebelah kiri dan kanan.

7.) Setting behavior

Berikan behavior LiteTween pada Palet, lalu masukkan setting berikut :

8.) Scroll

Masukkan event berikut :

  • Lakukan deteksi scroll ke kiri (baris 10) atau ke kanan (baris 11) lalu set perpindahan 100 pixel.

  • Batasi banyak scrolling dengan variabel Scroll sebanyak n kali (milik saya ada 6 kali)

  • Karena cuma menggeser posisi X, maka posisi Y tetap (baris 12)

  • Geser semua Palet ke lokasi yang sudah ditentukan di baris 9atau 10 (baris 11)

  • Lakukan scrolling hanya ketika animasi sudah selesai (progress = 1) atau tidak aktif (progress = 0) (baris 9)



Hasil

Kamu bisa download hasil akhir tutorial ini di sini

Mohon juga like facebook fanpagenya untuk dapat update tutorial terbaru :
Bikin Game & Puntodamar

November 02, 2016 in #Construct 2 #Coding | | | Share on Google+