MODUL V

CANVAS
Tujuan :
1. Mahasiswa memahami cara membuat virtual button pada canvas.
2. Mahasiswa memahami cara membuat UI panel pada canvas.
3. Mahasiswa memahami cara membuat Player Indicator pada canvas.

Kegiatan Praktikum 6.1

Virtual Button
Karena kita membuat game mobile maka diperlukan tombol virtual yang akan
digunakan untuk melakukan input didalam game. Buat folder baru dengan nama Button
didalam folder Art dan import file button kedalamnya.

Kemudian lakukan langkah-langkah berikut ini :

1. Buat Objek Canvas dengan cara klik kanan pada panel hierarchy kemudian UI ->
Canvas.

2. Kemudian atur property dari canvas tersebut menjadi seperti berikut ini.

57
3. Klik kanan pada objek canvas pada panel hierarchy kemudian tambahkan objek button
dengan cara UI->Button. Dan beri nama objek tersebut BtnLeft.

4. Pilih objek BtnLeft kemudian atur Achor Preset nya menjadi Bottom Left

*tips : untuk memindahkan posisi objek button ke btn left, tekan tahan tombol alt
pada keyboard kemudian klik bottom left.
5. Kemudian atur width dan height dari BtnLeft menjadi masing-masing 200 agar
membentuk persegi dan posisikan seperi berikut ini.

58
6. Pada komponen image, isi Source Image dengan file Left Button yang sudah
dipersiapkan sebelumnya, kemudian pilih objek Text yg merupakan child dari BtnLeft
dan kosongkan text pada kolom text diinspectornya (dari sebelumnya ada tulisan
Button) sehingga menjadi seperti berikut.

7. Ulangi dari langkah 2 untuk dan buat lagi tiga button lain yaitu, BtnRight, BtnShoot,
BtnJump.
- Pada BtnRight atur Achor Preset nya menjadi Bottom Left dan posisikan disamping
BtnLeft.
- Pada BtnShoot dan BtnJump atur Achor Presetnya menjadi Bottom Right dan
posisikan sehingga menjadi seperti berikut ini.

8. Buka Script PlayerCtrl, dan deklarasikan variabel berikut ini.

Pada method fixedupdate() tambahkan script berikut ini.

59
Kemudian buat tiga method baru yaitu void ToLeft(), void ToRight() dan void
NotMove() lalu ketikkan seperti dibawah ini.

Tambahkan method baru yaitu void Shoot() dan ketikkan script seperti berikut ini.

Tambahkan method baru yaitu void Jump() dan ketikkan script berikut ini.

60
 Kemudian save dan kembali ke Unity.
9. Pilih Objek BtnJump kemudian pada property Button di inspectornya pada event On
Click () tambah kemudian drag n drop Objek Player dari hierarchy ke dalamnya dan
pilih method Jump() dari class PlayerCtrl. Seperti pada gambar berikut ini.

10. Pilih Objek BtnShoot kemudian pada property Button di inspectornya pada event On
Click () tambah kemudian drag n drop Objek Player dari hierarchy ke dalamnya dan
pilih method Shoot() dari class PlayerCtrl. Seperti pada gambar berikut ini.

11. Pilih Objek BtnLeft kemudian pada panel inspector tambahkan component Event
Trigger. Pilih Add New Event Type dan tambahkan dua, yang pertama Pointer Down
dan yang kedua Pointer Up.
- Pada Pointer Down, drag n drop Objek Player dari hierarchy ke tempat yg tersedia
kemudian pilih method ToLeft() dari class PlayerCtrl.
- Pada Pointer Up, drag n drop Objek Player dari hierarchy ke tempat yg tersedia
kemudian pilih method NotMove() dari class PlayerCtrl.
Seperti yang ditunjukkan gambar berikut.

61
12. Pilih Objek BtnRight kemudian pada panel inspector tambahkan component Event
Trigger. Pilih Add New Event Type dan tambahkan dua, yang pertama Pointer Down
dan yang kedua Pointer Up.
- Pada Pointer Down, drag n drop Objek Player dari hierarchy ke tempat yg tersedia
kemudian pilih method ToRight() dari class PlayerCtrl.
- Pada Pointer Up, drag n drop Objek Player dari hierarchy ke tempat yg tersedia
kemudian pilih method NotMove() dari class PlayerCtrl.
Seperti yang ditunjukkan gambar berikut.

13. Jalankan/Play dan coba klik tombol-tombol tersebut, jika sudah berfungsi seperti
seharusnya berarti langkah-langkahnya sudah benar.
*ubah script Input.getMouseButtonDown(0) atau fungsi inputan klik kiri pada method
Charmovement() menjadi komentar. Hal ini dilakukan agar tidak terjadi perintah
double ketika kita hendak meng-klik button yang kita buat tadi.
Jika terjadi Bug pada animasinya maka:
- atur property Condition pada garis transisi dari Idle ke Run menjadi seperti berikut
ini.

- atur property Condition pada garis transisi dari Run ke Idle menjadi seperti berikut
ini.

- atur property Condition pada garis transisi dari Jump ke Run menjadi seperti
berikut ini.

- atur property Condition pada garis transisi dari Jump ke Idle menjadi seperti
berikut ini.

62
 Jangan lupa untuk melakukan save.
Kegiatan Praktikum 6.2
Panel
Kali ini kita akan menggunakan Panel sebagai Pause Menu. Langkah-langkahnya
adalah sebagai berikut.
1. Buat Script baru dan beri nama GameControl kemudian ketikan script berikut:
- Gunakan/panggil Library SceneManagement dengan cara mengetik script berikut
ini

- Deklarasikan variabel berikut

- Buat method baru dan beri nama GameStart() seperti berikut ini.

Kemudian panggil method tersebut didalam method Start() seperti berikut ini.

- Buat tiga method baru dan beri nama masing-masing, void Pause(), void resume(),
dan void Restart() serta ketikkan script berikut.

63
 - Kemudian save dan kembali ke Unity.
2. Buat objek baru (empty object) dan beri nama Game Contol lalu tambahkan
component script GameControl yang kita buat tadi kedalamnya.
3. Buat objek baru (button) didalam canvas.
- Beri nama BtnPause dan posisikan disebelah kanan atas dari canvas.
- Pada property Source Image-nya lakukan drag n drop file PauseBtn yang sudah
dipersiapkan sebelumnya sehingga menjadi seperti berikut ini.

- Pada property Button di inspectornya di event On Click() tambah kemudian drag

n drop Objek Game Control dari hierarchy ke dalamnya dan pilih method Pause()
dari class GameControl.

4. Buat object baru didalam object canvas dengan cara klik objek canvas pada hierarchy
kemudian klik kanan -> UI -> Panel. Ganti object tersebut menjadi PausePanel.
- Pada panel inspector atur color-nya menjadi agak gelap dan transparannya kurangi
sehingga menjadi seperti berikut ini

64
5. Tambahkan objek text pada panel tadi dengan cara klik objek PausePanel pada
Hierarchy lalu klik kanan -> UI -> Text, dan atur property objek text tersebut menjadi
seperti berikut ini.

Sehingga menjadi seperti berikut ini.

6. Tambahkan dua objek button dan masing-masing beri nama BtnResume dan
BtnRestart. Atur property text pada objek Text yang merupakan child dari BtnResume
dan BtnRestart sehingga menjadi seperti berikut ini.

65
 7. Kemudian pada objek BtnResume dan BtnRestart tambahkan pada property
OnClicknya masing-masing:
- Pada BtnResume, drag n drop Objek GameControl dari hierarchy ke tempat yg
tersedia kemudian pilih method Resume() dari class GameControl. Seperti berikut
ini.

- Pada BtnRestart, drag n drop Objek GameControl dari hierarchy ke tempat yg

tersedia kemudian pilih method Restart() dari class GameControl. Seperti berikut
ini.

8. Pilih object PausePanel kemudian non aktikan dengan cara mematikan centang pada
inspectornya.

9. Pilih objek GameControl kemudian pada panel property di komponennya atur seperti
berikut ini.

Jalankan/Play dan analisa apa yang terjadi. Jangan lupa untuk selalu melakukan save setiap
kali selesai melakukan percobaan.

Kegiatan Praktikum 6.3

Player Indikator

66
 Player indikator merupakan informasi mengenai player yang meliputi Health Point
(HP), Coin yang dikumpulkan, waktu bermain, dan Fauna yang diselamatkan. Langkah-langkah
untuk membuat Player Indikator adalah sebagai berikut.
Health Point (HP) Player
1. Tambahkan objek Slider pada canvas dengan cara klik kanan pada canvas -> UI ->
Slider. Kemudian hapus objek Handle yg ditunjukkan gambar berikut.

2. Atur Achor Presetnya menjadi sudut kiri-atas.

3. Atur properti dari Fill yang merupakan Child dari Fill Area seperti berikut ini.

4. Atur pula property background menjadi seperti berikut ini.

5. Tambahkan objek image dan property source imagenya isi dengan gambar kepala dari
Player. Dan atur hingga menjadi seperti berikut.

6. Buat Script baru dan beri nama UnitHP dan tambahkan script berikut.

67
 Save dan kembali ke Unity.
7. Pilih Objek Slider yg dibuat tadi dan tambahkan Script Unit HP kedalam komponennta
dan atur propertinya seperti berikut ini.

8. Buka Script PlayerCtrl.cs dan tambahkan script berikut.

- Deklarasikan variabel berikut.

- Pada method void Start() tambahkan script berikut.

- Kemudian tambahkan method GetHit() berikut ini.

- Kemudian tambahkan method GetHeal() berikut ini.

68
 - Save dan kembali ke Unity.
9. Pilih objek Player dan pada property komponen Player Ctrl nya atur seperti berikut
ini.

Time Indicator
Time indicator merupakan informasi waktu selama bermain. Langkah-langkah untuk
membuat Time Indicator adalah seperti berikut.
1. Import gambar stopwatch kedalam folder Art.

2. Tambahkan objek baru (empty object) pada canvas, beri nama “TimeIndicator”
kemudian tambahkan komponen image pada objek tersebut dan isi Source Imagenya
dengan gambar yang sudah dipersiapkan sebelumnya.
3. Atur Achor Presetnya menjadi kiri atas dan ator posisinya disamping Slider Health
Player.
4. Tambahkan objek text dan jadikan child dari objek TimeIndicator dan atur sehingga
menjadi seperti berikut ini.

5. Buat Script baru pada folder script dan beri nama TimeController dan ketikkan script
berikut ini.

69
 Save dan kembali ke Unity.
6. Tambahkan Script ini kedalam objek GameControl. Kemudian pada property Time
Counter lakukan drag n drop objek Text yang merupakan child dari TimeIndicator
sehingga menjadi seperti berikut.

70
 7. Buka Script GameControl dan tambahkan script berikut.
- Pada method GameStart()

- Buat method baru void CompleteLevel() dan tambahkan script berikut.

- Save dan kembali ke Unity.

Coin Indicator
Coin indicator merupakan informasi jumlah koin yang dikumpulkan player selama
bermain. Langkah-langkah untuk membuat Coin Indicator adalah seperti berikut:
1. Tambahkan objek baru (empty object) pada canvas, beri nama “CoinIndicator”
kemudian tambahkan komponen image pada objek tersebut dan isi Source Imagenya
dengan gambar koin emas yang sudah dipersiapkan sebelumnya.
2. Atur Achor Presetnya menjadi kiri atas dan ator posisinya disamping TimeIndicator.
3. Tambahkan objek text dan jadikan child dari objek CoinIndicator dan atur sehingga
menjadi seperti berikut ini.

4. Buat Script baru pada folder Script dan beri nama “CoinIndicator” lalu ketikkan script
berikut.

71
 Save dan kembali ke Unity.
5. Pilih Objek Text yang merupakan Child dari objek CoinIndicator kemudian masukkan
script CoinIndicator.cs kedalam objek Text tersebut.
Saved Indicator
Saved indicator merupakan informasi jumlah jumlah fauna yang sudah diselamatkan
player selama bermain. Langkah-langkah untuk membuat Saved Indicator adalah seperti
berikut:
1. Tambahkan objek baru (empty object) pada canvas, beri nama “SavedIndicator”
kemudian tambahkan komponen image pada objek tersebut dan isi source Imagenya
dengan gambar Anoa yang sudah dipersiapkan sebelumnya.
2. Atur Achor Presetnya menjadi kiri atas dan ator posisinya disamping CoinIndicator.
3. Tambahkan objek text dan jadikan child dari objek SavedIndicator dan atur sehingga
menjadi seperti berikut ini.

4. Buat Script baru pada folder Script dan beri nama “SavedIndicator” lalu ketikkan
script berikut.

72
 Save dan kembali ke Unity.
5. Pilih Objek Text yang merupakan Child dari objek SavedIndicator kemudian masukkan
script SavedIndicator.cs kedalam objek Text tersebut.
6. Isi property Max Savednya dengan jumlah fauna yang ada di arena tersebut
dicontohkan 6 seperti berikut ini.

Demikianlah langkah-langkah untuk membuat Player Indicator pada Canvas. Lakukan save
dan jalankan/play.

73