• 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

Game Mechanic: Extending the Game Size

The game mechanic or rather element of changing the space the player can move around in is essential to many platform games.

Let's look at how we can extend our world so that when our player starts to move towards the edges, the world scrolls to reveal more space.

Check the Code: what we need to know and do

Our approach relies on the following exiting knowledge;

• Adding creating a game space size and adding a player - see Building a World

Going over the code:

First note that we should add a new variable var background at the start of our code.

Then have a look at some key code in the create function;

    background  = game.add.tileSprite(0, 0, 480, 360, 'background');
    game.world.setBounds(0, 0, 900, 360);

Here we set background to be a tileSprite ¹ a special type of sprite that is useful here when we need scrolling backgrounds .

We also set the bounds of the world to be wider than the game size created when we created the game object. Here we have a width of 900, you can change this to experiment with bigger or smaller worlds. 

To make the focus of the game follow the player, so that for the most part the player stays in the centre of the screen, we set a camera to follow the player and for the background to also move with along with the camera

    game.camera.follow(player);
    background.fixedToCamera = true

Finally in update, this next line of code creates the scrolling and looping effect. You can comment it out to see the difference. 

    background.tilePosition.set(-game.camera.x,-game.camera.y); 

There are more details on using tileSprites including a nifty tip right at the end to use a parallax effect in a chapter here ².

That's it. We hope you enjoy adding this game dynamic to your game to extend your game size.

1. https://photonstorm.github.io/phaser-ce/Phaser.TileSprite.html ^{^}
2. https://docs.idew.org/video-game/project-references/phaser-coding/tilesprite-scrolling ^{^}