Kali ini kita akan membahas tentang bagaimana cara menambahkan efek audio pada game yang telah kita buat sebelumnya menggunakan phaser. Sebelum masuk pada inti bahasan lebih baik kita mengingat kembali apa itu yang dimaksud dengan phaser.
Phaser adalah framework game HTML5 open source yang dibuat oleh Photon Storm. Phaser dirancang untuk membuat game yang akan berjalan di desktop dan mobile web browser. Perhatian lebih diberikan pada aspek performa game dalam mobile web browser, pasar yang penting dan berkembang pesat dalam web gaming. Jika memungkinkan, device akan menggunakan WebGL untuk rendering, jika tidak maka akan berubah menggunakan Canvas tanpa masalah. Dalam artikel ini, saya akan membahas materi untuk belajar Phaser, menunjukkan berbagai hal yang bisa dilakukan oleh Phaser, dan berbagai pertimbangan saat merancang Phaser.
Phaser juga masih menggunakan bahasa javascript untuk pengerjaannya. Pada desktop biasanya platform yang dapat digunakan yaitu Internet Explore 9, FireFox, Chrome, dan Safari. Sedangkan pada mobile dapat berjalan pada iOS 5 atau lebih sedangkan pada android, phaser berjalan di versi 2.2 atau lebih, baik pada browser bawaan atau Chrome. Sumber: https://gamedevelopment.tutsplus.com
Setelah kita telah sedikit mengingat tentang phaser, kita akan langsung memulai pada inti bahasan kita, yang pertama kita akan membuat badan pada html agar program yang kita kerjakan dapat dijalankan dan bahasa yang digunakan yaitu javascript dan html.
Ketikkan code berikut pada sublime text kalian:
Var.ScenePlay = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function scanePlay()
{
Phaser.Scene.call(this, { key: ‘sceneplay’ });
},
preload : function ()
{
},
create: function ()
{
},
});
Var config = {
type: Phaser.AUTO,
width: 1366,
heigth: 768,
scene: [ScenePlay]
};
Selanjutnya kalian ketikkan program pada kolom preload: function() untuk memanggil audio yang telah kalian unduh sebelumnya seperti pada gambar berikut dan pastikan juga kalian telah mengunduh audio yang berformat MP3 dan juga OGG.
Var.ScenePlay = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function scanePlay()
{
Phaser.Scene.call(this, { key: ‘sceneplay’ });
},
preload : function ()
{
This.load.audio(‘ambience’, [
‘assets/audio/ambience.ogg’,
‘assets/audio/ambience.mp3’
]);
},
create: function ()
{
},
});
Var config = {
type: Phaser.AUTO,
width: 1366,
heigth: 768,
scene: [ScenePlay]
};
Pada bagian this.load.audio, assets menunjukkan tempat file yang dibutuhkan dalam game kalian seperti desain dan juga audio, lalu audio menunjukkan tempat anda menyimpan semua file audio yang telah kalian unduh, sedangkan ambience.ogg dan ambience.mp3 adalah nama dan format dari audio yang akan kalian gunakan pada game yang telah kalian buat.
Tahap diatas masih belum selesai karena pada program diatas kita hanya memanggil audio nya saja tetapi bukan memainkannya. Agar audio yang telah kita panggil dapat dimainkan oleh program kalian harus mengisi pada kolom create: function() sebagai berikut:
Var.ScenePlay = new Phaser.Class({
Extends: Phaser.Scene,
initialize:
function scanePlay()
{
Phaser.Scene.call(this, { key: ‘sceneplay’ });
},
preload : function ()
{
This.load.audio(‘ambience’, [
‘assets/audio/ambience.ogg’,
‘assets/audio/ambience.mp3’
]);
},
create: function ()
{
this.MAmbience = this.sound.add(‘ambience’);
this.MAmbience.loop = true;
this.MAmbience.setVolume(0.35);
this.MAmbience.play()
},
});
Var config = {
type: Phaser.AUTO,
width: 1366,
heigth: 768,
scene: [ScenePlay]
};
Pada bagian this.MAmbience = this.sound.add(‘ambiencce’); artinya kita menambahkan audio pada game yang telah kalian buat, pada baris kedua bagian this.MAmbience.loop = true; artinya bahwa audio yang kita tambahkan dapat di putar secara berulang – ulang, lalu pada bagian this.MAmbience.setVolume(0.35); artinya kita telah mengatur volume pada audio tersebut pada 0.35, dan yang terakhir pada baris this.MAmbience.play(); artinya program memainkan audio yang telah ditambahkan sesuai dengan volume yang telah di atur juga pada program.
Jangan lupa untuk selalu mengecek tanda yang digunakan pada program yang telah kalian buat karena jika kalian salah dalam memasukkan tanda ke dalam program yang telah kalian buat, maka hasilnya program kalian tidak akan dapat dibaca oleh computer. Setelah kalian yakin dengan program yang telah kalian buat, selanjutnya kalian menyimpan semua coding yang telah kalian buat dan menjalankannya pada browser yang terdapat pada computer kalian. Jika hasilnya masih eror kalian dapat melihat dimana letak error nya program kalian dengan cara menekan F12 pada saat menjalakan menggunakan browser atau dengan cara menekan CTRL+SHIFT+I secara bersamaan.