• OPENING SCENE
• Introduction
• Jumping Right In
• Jumping Right In
• Choose your own Adventure
• Getting Started
• Building a World
• Adding Movement
• Create a Game Space
• Making Things Happen
• Adding a Reward
• Hazards and Enemies
• Adding Game States
• GAME MECHANICS
• Game Mechanic: Add a Countdown Timer
• Game Mechanic: Jumping on Enemies
• Game Mechanic: Player Health
• Game Mechanic: Longer Jumps if Holding Jump Down
• Game Mechanic: Smaller Sprite Collision Boxes
• Game Mechanic: Extending the Game Size
• Game Mechanic: Adding Levels
• Game Mechanic: Keys and Doors
• ADDING POLISH
• Polish: Animate Sprite when Zapped
• Polish: Scaling our Game and Sprites
• Polish: Screen Shake
• Polish: Add Soundtrack Music
• Polish: Explosions using Particles
• Appendix
• Summary of our approach to learning Game Making
• How we approach Coding
• Playful and Reflective Approaches

Polish: Scaling our Game and Sprites

We can make our game appear bigger on our web page. We can also make the size our sprites appear on the screen seem

Check the Code: what we need to know and do

Better death here needs us to alter the function called when player and enemy overlaps. Let's concentrate on animating the enemy, we need to change the sprite animation but also add a delay into the process of restarting the game so we can see the animation play out. So we'll need the following background knowledge

• Adding sprites to our game - see Building a World
• Understanding Game State Structure - see Building a World

Going over the code:

Have a look at our code you will notice a new function called init;

playState.init = function () {
    game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
    game.scale.pageAlignHorizontally = true;
    game.scale.pageAlignVertically = true;
};

The init() functionis a special one that gets called right at the beginning of the process of loading the game, before the preload function even. This is the right time to resize our whole game. 

To make our game occupy as much of the screen as we can we can add a new scale mode to the game. The scale mode here is SHOW_ALL which makes the game as big as it can without chopping off any of the bits.

The next two lines mentioning Align put the game is in the centre of our screens horizontally and vertically

Characters

To change the size of the character we can use the setScale() function after we have added the player into the game in create.

To make a giant of our player we can set the setScale to 2.

    player = game.add.sprite(100, 200, "player");
    player.scale.setTo(2);

if we were to make only that change to scale then our character would be very blurred as by default or web page and game try to smooth out harsh edges (called anti-aliasing). We like the hard edges of oru pixel art so we need to tell the game to keep them.

We need go right back to one of the first lines of code to change the game constructor to deal with the blurring.

In our project there are two similar lines of code

 //var game = new Phaser.Game(480, 360, Phaser.AUTO);
var game = new Phaser.Game(480, 360, Phaser.AUTO,"","",false,false);

The first is commented out. It is a more simple way of creating our game but the problem is that if we do it in this way then our sprites get blurred when we make them bigger.

The second is the one that works. It add some extra parameters to our game constructor, the last of them is the one that sets the antialias variable of the game to false which means that our game character stays crisp.

Try swapping them over in the demo Glitch project to test it out.