FLOSS Manuals

 English |  Español |  Français |  Italiano |  Português |  Русский |  Shqip

Learn JavaScript with Phaser

Adding Animated Cut Scenes

Cut scenes are the little bits between game levels. In one classic early cut scene Pac Man is chase off the screen persued by a ghost but then returns having grown in size to chase the ghost back. These scenes act as an introduction or break up game play and serve other purposes like "scenes could be used to show conversations between characters, set the mood, reward the player, introduce new gameplay elements, show the effects of a player's actions, create emotional connections" etc 1.

If we are working as a team,then this is also a great project for someone who is drawn to the art and narrative side of game to sink their teeth into.

To create cut scenes we'll be learning more about animation using tweens and timing


Hands On - Creating our Starting Cut Scene

Let's create a cut scene step by step.

Start with this starter project which is the base for the hands on example above. https://glitch.com/edit/#!/cut-scene-starter?path=game.js:15:0

This project has a similar structure to the game we have been working on but it is going to be a different object called startState (as well as a minimal playState). Have a look at the code to see the familar pattern of preload, create and update functions.


Adding Timer Events

To tell a story using a cut scene we are going to move our character and get them to say things one after the other. To do this we are gong to have to understand time events to say when something will happen

Add the following code to the create: function to add our characters to the game but set the visibility to be false so it don't appear right away.

    player = game.add.sprite(20, 215, "player");
    player.animations.add("right", [1, 2, 3, 4], 6, true);
    player.visible = false;

One second after it loads after our game loads we want to show the image of our player which is now a space person. To do this we will add a thing called a time event to the game. Add this at the end of the create function

    game.time.events.add(1000, this.playerShow, this);

This function, at a very simple level like this, uses three parameters;

  1. the time when you want something to happen
  2. the name of the function you want to run
  3. the context you want the function called in (don't worry to much about this bit it's normally just this)

We now need to write the playerShow function and add it to the startState object.

     startState.playerShow = function() {  
        player.visible = "true";

Run the code by clicking on Show Live to see the result.

Adding Movement via Tweens

So far so good. Now let's get this player to move.

We'll repeat the process above by adding a timed event which calls a new function, and then writing this new function which will move our player.

Add the following line to create function

    game.time.events.add(2000, this.playerMove, this);

This will start the player moving two seconds after the start of this startState.

Now let's write this function to use a Tween to move our player sprite.

startState.playerMove = function () {
    var tween = game.add.tween(player);
    tween.to({x: 70, y: 215}, 1000, null, true, 0, 0, false);

Here we create a tween and set the tween to parameters, this process is outlined in the hazards and enemies chapter of this book.

We also start the player animation of our character walking.

Relative Positioning and Text

Now let's make our player say something. We'll repeat the same process as above.

    game.time.events.add(3000, this.speech1, this);

And then write a function which will show a speech bubble graphic as described in the section below.

startState.speech1 = function () {
    var speech1 = game.add.sprite(player.x - 70, player.y - 50, "speech1");

Check your Code

You can check your code against our completed example here -


Hands On - Creating More Graphical Assets

Part of the fun o of making your own games is to create your graphics and characters. There are many tools to do this available online for free download, and some which allow you instant creativity by allowing you to work in your web browser. Here are some of the tools we use.

Creating Pixel Characters with Piskel: We have already played with Piskel to create our own characters.

You can create all sorts of pixel art for your cut scene using this tool.


Creating Speech Bubbles with Wigflip: This fun website does a good job of creating simple and quick pixel art speech bubbles


Creating general text at Textcraft: This is a fantastic and very flexible site for creating funky looking game text graphics. You must try it.



Hands On - Adding Audio Sounds

We can add sounds into our cut scene in the same way we did in our simple game.

And while this was rare for retro games, we can add our own voice recordings to our scenes as well. This can be a fun way to play with the characters and bring your story to life. 

See if you can take the code from this quick demo and add it to your cut scene. https://glitch.com/edit/#!/cut-scene-with-audio?path=game.js

Then replace the audio with your own. You can use a tool like this one to record, download and upload your sounds. https://recordmp3online.com/



Hands On: Create and add a new sound

Port the follow project to To Glitch - add relevant screenshots and Glitch specific instructions  - and integrate the latest Code Pen one.


Mission One: Change the coinwav and hazardwav sounds

Remix this project - ADD THIS Link to Glitch project

In the Assets folders there are three or so different versions of the hazard and coin noises. These are already loaded into the game in the preload: section each has a different name referenced.

In the create: section find the line of code that contains the instructions to user the audio files the game project (look for game.add.audio) - change the file names to some of the files listed in the preload: section.

Reload your game by clicking on the Show Live button to test out if you sound changes have worked. 


Using an online game sound generator we will create our own sound. We will then upload it to the assets folder of our Glitch game

If you want to try a new one then you can use the online tool chip tone - http://sfbgames.com/chiptone/ to create, download a sound file and then upload it to the audio project folder. You can do this in a couple of ways but dragging and dropping it from a local folder into the audio folder works well. 

Tip: when saving your sound file, give it a simple name with no spaces or capital letters to make it easier to reference in your code.


Under the Hood - Functions (moved)

We have already created some functions earlier in this book. Here however we really start to create a lot. Hopefully repeating this process will get you used to the formatting of functions and how they work.

We can also start to think about how we could structure our code so that it might be more efficient.

First of all let's recap on how functions work and the terms used.

Parameters get passed into functions to be able to allow the code inside functions to use them. In this case not many of our functions used in this animation take any parameters.



  1. https://en.wikipedia.org/wiki/Cutscene ^

There has been error in communication with Booktype server. Not sure right now where is the problem.

You should refresh this page.