Example of Tween, Camera Flash and Audio with the visualization of a Concert

[DushyantSengupta]

I have created a scene of a concert using the assets and background with a camera tween for a continuous zoom in and out effect, a camera flash for spotlights you see in the concerts and the audio which I have added and played through a button press, as AudioContext does not start without a user gesture.

var config = {
    type: Phaser.AUTO,
    width: 1280,
    height: 720,
    backgroundColor: '#010101',
    parent: 'phaser-example',
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

//The config part of the code lists down various
parameters and constraints for our game. We can then develop our game on this foundation.

var game = new Phaser.Game(config);

var guitarman;
var stage;
var song;

function preload()
{
this.load.image('stage','assets/stage.jpg');
this.load.image('guitarman','assets/guitarman.png');
this.load.audio('song','assets/song.mp3');

//Here we preload the background, the artist and the song he plays.
}

function create()
{
song=this.sound.add('song'); //We add the song in the scene.
this.input.on('pointerdown', function(pointer){
song.play()
 }); //You have to press the scene for the song to start as with a new Chrome update, the autoplay feature has been gone and to play music, we need a user gesture, so, to play the song we have added an mouse input detection which when pressed would start the music.
stage=this.add.image(500,300,"stage"); //We add the background in the scene.
stage.setScale(2); //We scale it to make it look presentable
guitarman=this.add.sprite(500,500,"guitarman"); //We position the artist on the stage.
var camera = this.cameras.main; //We take the main camera in a variable.
camera.setZoom(0.5); //We set its intial zoom to 0.5
      d=this.tweens.add({
          targets: camera,
          zoom: 2.0,
          duration: 550,
          ease: 'Sine.easeInOut',
          yoyo: true,
          repeat: -1
      }); //Here we add a tween which on the main camera which would create a zoom in and out effect for 550 milliseconds with an ease in and out effect.
}

function update()
{
var cno=Phaser.Math.Between(0, 256); //We select a random number between 0 and 256 for a color for the camera flash as spotlights in an event.
this.cameras.main.flash(300,cno,false); //We have the camera flash for every 300 milliseconds with a random color and with keeping forcing the flash to run to false so that it feels natural.
}

Here is the output

The audio isn't present as CodePen doesn't take audio

https://codepen.io/DushyantSengupta/pen/xxORadQ