Phaser Lessons

I’ve been dabbling in HTML game development with Phaser IO and I have found some things really difficult to figure out because they just aren’t very intuitive. So in this blog post I will write up short lessons learned as I come across things that I feel really should not have taken me so long to figure out.

Tip #1: Adding a Background Image:

Something that seems perfectly reasonable to do is to add a background image to your game. But there is nothing like “background”. If you want a background you need to actually add a tileSprite:

//in the game's preload function you load the image like any other
game.load.image('bkgrnd', 'sprites/background.png');
/*Then you add the tileSprite in create(). This constructor's parameters are, in order:
0 – position of the image on the X coordinate of the game
0 – position of the image on the Y coordinate of the game
640 – Width of the tile
480 – Height of the tile
bkgrnd – key you gave to the image when you loaded it in preload()
see: */
game.add.tileSprite(0, 0, 640, 480, 'bkgrnd');

You can play with a working example in the Phaser sandbox.

There are good reasons why there is no build in “background”. A large background can consume large amounts of memory and make your game perform poorly. Games are expected to be built with tiles that compose the game world. So use backgrounds judiciously.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s