Membuat game penebang pohon dengan phaser part6

Diposting2022-10-15Diperbarui2022-10-15
html5 | phaser | tutorial

Halo,

Saya balik lagi meneruskan lanjutan dari penebang pohon. Untuk tutorial kali ini saya menambahkan sound efek dan background music untuk gamenya. Untuk part sebelumnya kalian bisa download di link ini

catatan

ini adalah tutorial dengan text untuk tutorial pembuatan game lumberjack / penebang pohon dengan menggunakan phaser framework. Jika mau liat videonya kalian bisa ke link youtube ini

Oh iya sebagai informasi, antara versi tulisan dan video mungkin tidak serupa, tapi memiliki tujuan sama, dan hasil akhir yang sama.

koding

Langsung saja, pastikan kalian mempunyai audio yang sudah disiapkan, jika belum bisa download BGM di https://opengameart.org/content/happy-adventure-loop dan kalian mungkin bisa cari sound effectnya disitu juga, atau kalian bisa merecordnya seperti saya.

Tapi jika kalian mau pake sound dari saya juga ga masalah silahkan ambil disini

preload assets sound efek dan bgm

pada fungsi preload, tambahkan kode dibawah ini 

1
2
3
4
5
6
7
function preload(){
  //... code sebelumnya

  //sound here
  this.load.audio("bgm", "assets/bgm/happy_adveture.mp3");
  this.load.audio("impact", "assets/sfx/impact.mp3");
}

jika sudah, kita akan memanggil bgm untuk di mulai, didalam fungsi create. Kalian bebas meletakanya dimana saja, klo saya meletakan sebelum pembuatan background.

1
2
3
4
5
6
7
8
function create(){

  //code diatas saya tidak tulis ulang
  this.sound.add("bgm").play({ loop: true }); //ini code untuk memainkan bgmnya

  this.add.image(config.width * 0.5, config.height * 0.5, "bg");
  var char = this.add.image(200, 570, "char");
}

setelah itu jangan lupa untuk memanggil sound efek saat pohon di potong. cek fungsi input keyboard, dan periksa code seperti dibawah 

1
2
3
4
5
6
7
8
if (!tumbukan) {
  score += 1;
  textDisplay.text = score;
  if (reduceTimer < MIN_REDUCER) reduceTimer = MIN_REDUCER;
  console.log(reduceTimer);
  timeCountDown += ADDITIONAL_TIMER * reduceTimer;
  this.sound.play("impact"); //hanya menambahkan code ini.
}

Perlu di ingat klo input keyboard kita ada kanan dan kiri, jadi dimasukan keduanya.

Penutup

Okeh segitu aja.. kali ini tulisanya lebih cepat 😀, untuk tutorial kali ini kita mempelajari

  1. load audio dipreloader
  2. play audio, baik bgm ataupun sfx. Untuk bgm, kita hanya perlu menabahkan object tambahan saat diplay. seperti loop : true

Oh iya jika kalian ingin melihat full code dari tutorial ini silahkan cek atau download filenya disini.