How to create a cutscene in Phaser?

[MrSoupy]

Hello all,

 

I've only been Phaser for about 2 weeks now, and I'm really enjoying using it! I've taken the basic tutorial http://www.photonstorm.com/phaser/tutorial-making-your-first-phaser-game and have modified it to add enemy AI, added a timer, and divided it all up into their own files for each of the states (preload, update, play, etc).

I would like to have it so when the game starts, another sprite is added to the game and has a popup bubble with some dialog that the user can cycle through (using the 'a' button, or what have you). After the dialog finishes, then the enemy AI begin to move and the timer starts. 

 

As for the cutscene, what would be the best way to go about this? I've gotten it to cycle through one line of dialog using this code:

var dialog;function create(){	// Beginning dialog for the cutscene	var diaText = "Hello!";	var subtext = "press \'a\'";	var style = {font: "22px Arial", fill:"white", align: "center"};	var style2 = {font: "10px Arial", fill:"white", align: "center"};	dialog = game.add.text(game.world.centerX-300, 400, diaText, style);	var tSub = game.add.text(game.world.centerX-300, 425, subtext, style2);}function update(){        // Cycle through the next line of dialog	if(this.game.input.keyboard.justPressed(Phaser.Keyboard.A)){		dialog.setText('It\'s nice to meet you!');	}}  

My questions come down:

 

What is the best way to create the cutscene? Inside of the play state of the game, or creating a separate state for the cutscene?

 

Also, what is the best way to get the dialog? I was considering using a file reader of some type and having a loop that reads each line of text into an array. Then just loading up each line on the key press into the dialog.setText() until the array ends, but I don't want to try and code all of that first if there is a better way. 

 

 

 

 

 

 

 

 

[quiphop]

Did You solve this ?
Stuck with same question

[Stathis]

I had the same question recently... I guess it very much depends on how you have setup your game. In my case, my intro cutscene uses a lot of the assets and setup of the game state. For that reason, I created some chained tweens on the create of the main game state. The issue with that is that the game loop (update) starts before the intro cutscene has finished. I have a global canUpdate flag that is set to `true` when the cutscene has finished, and only then the relevant sprites/entities can be updates. Something like this (simplified version) :

export default class extends Phaser.State {
  preload() {
    this.game.canUpdate = false;
  }

  create() {
    // Several setup stuff here

    // Intro cutscene
    const shipArrives = this.game.add.tween(ship)
      .to({ y: 0 }, 2000, Phaser.Easing.Cubic.Out, true);
    shipArrives.onComplete.addOnce(() => {
      this.player.visible = true;
    });
    const shipMoves = this.game.add.tween(this.player)
      .to({ x: 32 }, 800, Phaser.Easing.Exponential.Out, false);
    shipArrives.chain(shipMoves);

    shipMoves.onComplete.addOnce(() => {
      // Game can now start normally
      this.game.canUpdate = true;
    }, this);
  }

  update() {
    if (this.game.canUpdate) {
      this.controller.update();

      this.lives.setText(`lives: ${this.player.lives}`);
    }
  }
}

...

// It could be that some sprite needs to wait for canUpdate
export default class extends Phaser.State {
  constructor(game, x, y, asset) {
    super(game, x, y, asset);
  }

  update() {
    if (this.game.canUpdate) {
      // Do stuff
    }
  }
}

This is how I've done it, I just came up with it. I am not sure if there is a more elegant way, I am also interested in this.

Sorry, I don't know what's the best approach storing/fetching the text, a file sounds fine to me though.