Construct 2 - Weapon Switch + UI

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

Kali ini kita akan belajar tentang cara membuat sistem ganti-ganti senjata beserta UI yang menampilkan jumlah sisa amunisi yang dimiliki.

Persiapan

1.) Buat dulu sprite yang diperlukan

  • Weapon1 (50x15px) , Weapon2 (70x30px) : senjata
  • Bullet1 (14x10px) , Bullet2 (20x20px) : peluru
  • Player : karakter

2.) Buat family dan masukkan behavior

  • Buat family Weapons berisi Weapon1 dan Weapon2
  • Buat family Bullets berisi Bullet1 dan Bullet2
  • Berikan behavior Platform pada Player. Set default controls = 'No'.
  • Berikan behavior pin to imagepoint pada Weapons
  • Berikan behavior Bullet dan Destroy Outside Layout pada Bullets

3.) Buat imagepoint baru

pada Weapon1 dan Weapon2 di ujung kanan sebagai tempat spawn peluru. Geser juga imagepoint 0 (origin) sedikit ke kiri.

Senjata

4.) Setting senjata

Setiap senjata memiliki amunisi, fire rate, dan magazine yang berbeda-beda. Berikan instance variable pada family Weapons sebagai berikut :

Jika sudah, masukkan nilai sesuka hati. Berikut punya saya :

  • Weapon1 :

    • ammo = 50
    • magz = 10
    • fireRate = 0.25
  • Weapon2 :

    • ammo = 5
    • magz = 3
    • fireRate = 0.5

Player

5.) Buat hal yang sama untuk Player.

  • currentWeapon digunakan untuk mengetahui senjata yang sedang dipakai
  • isRealoading digunakan untuk reload amunisi. Pada state ini, karakter tidak bisa menembak.

Tampilan UI

Untuk menampilkan UI kita gunakan Tiled Background supaya menghemat RAM.

6.) TiledBackground

Buat tiled background tbBullet1 (14x10px) dan tbBullet2 (24x24px).

Berikan jarak kecil pada ujung kanan

Sehingga jika ditampilkan hasil akhirnya seperti berikut :



Memegang Senjata

7.) Senjata awal

Senjata yang pertamakali digunakan adalah Weapon1.

Buat event berikut :

Penjelasan :

  • Letakkan senjata di 'tangan' karakter, yang direpresentasikan oleh imagepoint 1 milik Player (pin to image point).

  • Set instance variable milik senjata pada Player.

Jika karakter menembak, instance variable yang berkurang adalah milik Player. Ini nanti akan membantu dalam proses mengganti senjata.

  • Buat tiled background tbBullet1 di lokasi yang sudah ditentukan.

  • Tiled background hanya menampilkan satu butir peluru. Sehingga jika menampilkan jumlah sisa peluru, digunakan rumus Set width > 14*Player.ammo

14 adalah width dari satu buah peluru tbBullet1.


Menggerakkan Karakter

8.) Mirroring

Untuk menggerakkan karakter dengan cara biasa. Digunakan mirror supaya menghadap ke kiri

Hasil :


Menembak

Untuk menembak, ada dua kondisi yang harus dipenuhi, yaitu :

  1. memiliki amunisi
  2. tidak sedang reload

Kita juga harus memperhatikan senjata mana yang sedang dipegang.
Buat event berikut :

Penjelasan :

  • Ketika kondisi terpenuhi, spawn peluru sesuai dengan senjata yang dipegang
    • Jika menghadap ke kiri set bullet speed menjadi -Self.Bullet.Speed supaya tidak ngebug seperti gambar di bawah.

  • otomatis peluru berkurang satu, substract ammo dari Player, lalu update tiled background Jika kondisi tidak terpenuhi, tampilkan perintah "RELOAD!"

Hasil :



Reload

9.) Syarat

Untuk mengganti senjata, ada dua syarat yang perlu dipenuhi :
1. memiliki magz
2. tidak sedang reload (soalnya nanti dobel)

Penjelasan :

  • Set isReloading = true untuk mencegah reload dua kali. (belum selesai reload sudah reload lagi)

  • substract* magz dan kembalikan amunisi ke jumlah awal denga Self.initialAmmo.

  • Jika magazine habis tampilkan pesan "Empty!"


Swap Senjata

Syarat mengganti senjata juga ada dua, yaitu :
1. tidak sedang reload
2. mengganti senjata yang berbeda

Penjelasan :

Update instance variable senjata sesuai dengan pemakaian saat ini. Supaya nanti kalau dipakai lagi, nilainya seperti terakhir kali dipakai.

Ganti senjata dengan unpin dan set position, set instance variable Player sesuai milik senjata yang baru, lalu update UI.

Lakukan hal yang sama pada senjata 2.

Hasil akhir :


TERIMAKASIH

Sekian tutorial kali ini.
Kamu bisa download hasil akhir dari tutorial ini di sini.

Jangan lupa like puntodamar dan bikingame untuk mendapatkan update tutorial terbaru.


sumber gambar header :
hypebeast.com

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