Elements such as images, texts are always accessed within the .js file. Media elements like audio, video can be too, but the code snippet might go complicated. To reduce the complexity of the code, we can declare the media files in the index.html file and access them through DOM (Document Object Model).
In this example, we are going to access an audio file from index.html and play it with a .js file. For this, declare the head and body tag as usual in the index.html
< head >
< title > Example < /title >
< meta charset = "UTF - 8" >
< script src = "example.js" > < /script >
< script src = "phaser.js" > < /script >
</ head >
< body >
< /body >
Include the media file in the body tag
< audio id="id" src="file_name.mp3" >< /audio > //For .mp3, .wav file
< video id = "id" src = "video_name.video_type" >< /video > //For .mp4, .wmv file
With this, the html part is done. Open the javascript file and create the scene according to your specifications. For this example, we have taken the below config.
var config = {
type: Phaser.AUTO,
width: 850, //scene width
height: 650, //scene height
backgroundColor: '#4c0099', //scene bg color
parent: 'phaser-example', //the declaring class has 'phaser-example' as the parent
scene: {
preload: preload, //functions declared
create: create
}
};
var game = new Phaser.Game(config);
The above snippet has created the scene. Now, we are going to have a text saying 'Click Here', which upon clicking will play the media file - in this case the audio file
function preload () //defining the preload function
{
}
function create () //defining the create function
{
var txt; //txt is a variable which is storing a textbox
txt = this.add.text(400,300,'Click Here');
//txt displays 'Click Here' in coordinates (400,300) of the game scene
txt.setInteractive({useHandCursor : true});
//the cursor turns into a clickable hand cursor when hovering over the 'Click Here' text
txt.setInteractive().on('pointerdown', function(){ //upon clicking the text, you are declaring and calling a function
var audi = document.getElementById("aud");
//this gets the element from the html file with id = "aud" and stores it in variable 'audi'
audi.play();
//to play the audio file. This can also be used for a video file
}) }
The final output will have a purple game scene with 'Click Here' on the center of the scene. 'Click Here' will play the audio file declared in index.html
In case of an image, you can declare the following under create function
var txt = this.add.text(400,300,'Click Here');
txt.setInteractive({useHandCursor : true});
txt.setInteractive().on('pointerdown', function(){
var image = this.add.image(100,100,"filename.png") //this adds the image at the time of clicking the text
})
