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:
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| //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: http://phaser.io/docs/2.4.4/Phaser.TileSprite.html */ | |
| 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.
contrived example 