Ch024 - Game Mechanic: Extending the Game Size
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
To make this work we need to do three main things.
- increase the size of our world size without increasing the screen size
- set up a “camera” to follow our player as they move
The code for a minimal example of the Extending the Game Size is shown here - https://jamm-labs.github.io/ggcp/game-mechanic-extend-game-world/game.js
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;
game.world.setBounds(0, 0, 1100, 400);
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 1100, 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);
Finally if you are using our grid game template then you will need to make the design of the game bigger. Have a look at the code example above for a game which has done that. Or you can just play around.
If you want to have a moving background image you can use a tileSprite. There are more details on using tileSprites including a nifty tip right at the end to use a parallax effect in a chapter here 1.
That’s it. We hope you enjoy adding this game dynamic to your game to extend your game size.