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.

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

• Set the width and height HTML attributes of the canvas element to the original, small size.

• Set the width and height CSS properties of the canvas element the game is rendered to be 2x or 4x the previous values.

• Use the image-rendering CSS property in the canvas element, set to preferably crisp-edges (or pixelated when not available). Take into account that some of these property values need a prefix for the browser. If you need more info about how these property works, read the post.

• Make sure that all of the drawing operation in the canvas use integer numbers for X and Y coordinates. Drawing something at (0.5, 100), for instance, would cause that sprite or image to be blurry.

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.