Jump to content

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


Recommended Posts

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()

//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){
 }); //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
          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



Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...