Log in from a computer to take this course

You'll need to log in from a computer to start Learn Game Development with Phaser.js. But you can practice or keep up your coding streak with the Codecademy Go app. Download the app to get started.

apple storegoogle store

Now that we’ve covered drawing a sprite, let’s talk about drawing a background image. A background image is not a sprite — usually the player will not interact with the background at all. Because of this, we don’t need a sprite object for our background images. We still need to load in the image in our preload() function but we can use this.add.image() instead of this.add.sprite():

function preload() { this.load.image('bg', 'assets/images/bg.png'); } function create() { this.add.image(200, 200, 'bg'); }

Above, we load in our background image from the path assets/images/bg.png and use the key bg to refer to it. In create() we add the image, centered at (200, 200) — 200 pixels to the right of the left edge and 200 pixels down from the top edge.



In preload(), load in our Sky background image from 'https://content.codecademy.com/courses/learn-phaser/sky.jpg' and give it the key 'sky'.


In create() add our background image by calling this.add.image() with an x value, a y value, and our key 'sky'.

Notice how the x and y values dictate the center of the image. Try giving negative values for both and see how much of the image you can see!

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?