Ch022 - Game Space: Add your own Background

Game Space: Add your own Background

Adding our own background can really start to make the game our own. You can be really creative here by using craft materials or drawing your background with crayon or paint.

In this tutorial, we look at creating a pixel art background and importing it into our game.

If you want a quick link to the code to do this you can look at this example: - https://jamm-labs.github.io/ggcp/polish-add-background-image/game.js

What we need to know and what we will do

To be able to do this step it would help if you knew about the following from this book;

• Understand the core structure of our game - see Building a World

This guide will help you with the following stages; reate an image for your background, exported that image as a suitable size, upload an image of your background to your project, add the code to add background.

Creating and Uploading your Images

Create a background in piskel. Create a Sprite. Then Resize to 55 pixels wide to 40 pixels high.

Draw a simple background and click on Export image button on the right and click on the PNG tab then Spritesheet file explort > Download. Move the size slide to be x10 so the image will be 550 by 400 wide.

Now upload your sound to the assets section of your Glitch remix project you can find the assets link on the left of your screen, after clicking on that look for the little upload button on the main part of the page.

You will then be able to get the address of the image by clicking on it and clicking the Copy button.

Adding our new code:

You can open the code for a minimal example of the code to add a background image is here - https://jamm-labs.github.io/ggcp/polish-add-background-image/game.js

We need to load a background image to be ready for our game to use by adding a line like the following to our preload function

  game.load.image("background", "https://cdn.glitch.com/07341419-e9df-clouds-h.png");

Then add the following the create part of the code

  var background = game.add.sprite(0, 0, "background");
  background.width = 550;
  background.height = 400;

If you are not happy with the width or height of your background you can make alterations here.

That’s it. We hope you enjoy adding this element of polish to your game