Ch028 - Polish: Create a Cut / Opening Scene
Polish: Create a Cut / Opening Scene
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.
Check your Code: What we need to know and do
To create cut scenes we’ll be learning more about animation using tweens and timing. You can check your code against our completed example here - https://jamm-labs.github.io/ggcp/cut-scene-tween-demo/game.js
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 follow this tutorial you can start with this starter project which is the base our the hands on example. https://jamm-labs.github.io/ggcp/cut-scene-starter/game.js
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.scale.setTo(1.5);
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;
- the time when you want something to happen
- the name of the function you want to run
- 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);
player.animations.play("walk");
};
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 () {
player.animations.stop();
var speech1 = game.add.sprite(player.x - 70, player.y - 50, "speech1");
};
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.
