As some of you may know, I’ve been working with Phaser lately to create my first HTML5 game has been too much fun!

My first serious project is a little port of Space Invaders - and it’s progressing with all kinds of win! Game programming is such a gratifying endeavour. You create, your run, (you debug), then you play! All from within your browser!

Brag shot of progress:

Space Invaders Progress

Looking forward to sharing it with you once I get the last few features in.

Setting up invisible walls

One trick that I’ve learned is how to handle detecting the edge of the world. In my case I want the invaders to move to the next line when they hit the edge of the screen.

As far as I know, there’s no way built into Phaser to do that, but one commonly recommended workaround is to create an invisible sprite on the edges of the screen and check for collision with that. I though I’d capture how I tackled it so I can google it later!

function createInvisibleWalls() {
    wallLeft = game.add.tileSprite((8*4), 0, 8, game.height, 'blank');
    wallRight = game.add.tileSprite(game.width-(8*4), 0, 8, game.height, 'blank');
    
    game.physics.enable([ wallLeft, wallRight ], Phaser.Physics.ARCADE);
    
    wallLeft.body.immovable = true;
    wallLeft.body.allowGravity = false;
    
    wallRight.body.immovable = true;
    wallRight.body.allowGravity = false;
}

In my case that blank simply points to an transparent png that is 8x8 like the rest of the game art. We create a tile that runs the full length on the left and right to get a “fake wall” for our collision deteaction.

If I change that blank id to something else (like one of the invaders), you’ll see those magic edges appear:

Space Invaders with Fake Alien Walls

Once you have your edges in, testing for edge of world collisions is just stock standard physics overlaps and you’re done. At the end of my update loop I have a:

game.physics.arcade.overlap(aliens, wallRight, aliensEndOfRowRight, null, this);
game.physics.arcade.overlap(aliens, wallLeft, aliensEndOfRowLeft, null, this);

Which gives me my bouncing invaders at end of line.

Now off to try and work out how to deform my barriers via pixel drawing when they are hit by an incoming missile…