Construct 2 - Volume Control dengan Slider Sprite

June 23, 2016 in #Construct 2 #Coding | | | Share on Google+

Objek slider bawaan C2 jelek bentuknya, sehingga tidak 'masuk' dengan tampilan gaya UI atau game kita.

Nah,
sekarang saya akan mengajarkan cara membuat slider dengan menggunakan sprite untuk membuat volume control.


CLAMP

Apa itu clamp ?
Gampangnya sih itu penyingkatan dari kondisi if-else.
Di dalam dialog system expressions, dijelaskan bahwa clamp berfungsi :

returns x if between two numbers, else the upper or lower bound

Paham gak maksudnya?
Jadi gini, clamp butuh tiga parameter, yaitu :
clamp(x,lower,upper)

Misalkan kita akan melakukan set variable dengan menggunakan clamp dengan parameter clamp(75,50,100).

Oke, terus berapa nilai variabelnya sekarang?
lihat lagi parameternya di atas :

clamp(x , lower , upper)

clamp(75 , 50 , 100)

Karena 75 lebih besar dari 50, dan lebih kecil dari 100, maka nilai variabel nya adalah 75.

Bagaimana kalau clamp(40,50,100) ? 40.
Kalau clamp(200,50,100) ? 100.

Paham sampai sini?


Ekspresi clamp() ini buat apa sih?
Buat ngeset volume maksimal dan minimalnya.



Persiapan

Untuk membuat slider, kamu perlu dua buah sprite, satu sebagai tuner (tombol ganti volume), satu lagi untuk garis penanda.

Misalnya :

Untuk sprite penanda, letakkan image point 'Origin' di ujung kiri.


Coding

1.) Buat empat buah variabel

  • minVolume = nilai volume minimal
  • maxVolume = nilai volume maksimal
  • size = besar pergeseran tuner
  • volume = volume saat ini

2.) Set kondisi awal

Kenapa set minVolume dan maxVolume ke ujung kiri dan kanan?

Karena logikanya, di ujung kiri volumenya 0 (mati), dan ujung kanan volume 100 (maksimal).

Penjelasan :

  • pertamakali, kondisi volume game maksimal (100)
  • mainkan musik yang diinginkan

3.) Geser tuner dengan touch



BUG

Kalau kita coba test, tuner hanya akan bergerak kalau pemain benar benar menekan tombolnya.

Hal ini tentu sangat tidak nyaman bukan?

4.) Penggeseran dengan 'Is in touch'

Hal ini dibuat untuk mengatasi bug di atas, jadi tetap bisa menggeser walaupun sudah touch sudah tidak lagi menekan tuner.

Hasil jadinya seperti di bawah :



Mengganti volume

Untuk mengganti volume, ada dua langkah.

  • update posisi tuner yang sudah dipindah dengan Is in touch (biar tidak ngawur).
  • ganti volume sesuai posisi tuner sekarang

5.) Update Posisi tuner

Pada langkah ini kita gunakan ekspresi clamp() yang sudah dijelaskan di atas.

Kalau Set position sama seperti event sebelumnya gimana?
tuner akan bisa bergerak melebihi batas.


6.) Ganti volume

Seberapa besar pergantian suara, bisa diatur dalam nilai pembagi.

Semakin kecil, semakin besar perubahannya.
(dicoba sendiri ya).


7.) Mute suara

Kalau tuner berada di ujung kiri, artinya volume = 0.
Makanya master volume tidak lagi dimatikan, tapi di mute.

Selesai

Kalau ada pertanyaan, silakan post di kolom komentar.
Kamu bisa download hasil jadinya di sini


NOTE

  • kenapa volumenya minus kalau dikecilin?

volume suara normal dalam C2 nilainya 0, jadi kalau mau dikecilin ya dibuat minus.

  • gimana kalau gak semua suara yang dimatikan?

gunakan fitur tag.
Semua musik yang ingin dimatikan dikelompokkan dalam tag yang sama, terus matikan tag nya.



Pengen Nambah Ilmu Baru ?

Saya menulis buku "Bikin Game Tanpa Coding dengan Construct 2" yang bisa kamu beli di toko buku.

Isinya mencangkup penggunaan dasar dan tutorial membuat game dengan engine ini.

beli online


sumber gambar header :
mobogenie.com

June 23, 2016 in #Construct 2 #Coding | | | Share on Google+