| Tags: front-end game development

As a follow-up to the "Retro, crisp pixel art in HTML 5 games", here's how to achieve the same effect when using Phaser, my favourite JS game framework.

The trick for the pixel art look was to draw the graphic assets in a small size and then scale them up with a near-neighbor algorithm to get crisp, fat pixels. For instance, like this sprite, which was originally drawn in a 12x12 square and then scaled up 4x.

4x sprite

In the previous post, we achieved that effect with the help of CSS:

So, how do we handle this in Phaser? Just use the following code in your initialisation for a 4x crisp scale up:

// scale the game 4x
game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE;
game.scale.setUserScale(4, 4);

// enable crisp rendering
game.renderer.renderSession.roundPixels = true;
Phaser.Canvas.setImageRenderingCrisp(this.game.canvas);

The good news is that Phaser.Canvas.setImageRenderingCrisp will automatically set the proper value for image-rendering depending on the browser!

And with renderSession.roundPixels set to true we don't need to worry about rounding X and Y coordinates in our drawing operations –it will do it for us.

I have updated the repository with a demo of this. You can also see it online.