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:
heightHTML attributes of the
canvaselement to the original, small size.
heightCSS properties of the
canvaselement the game is rendered to be 2x or 4x the previous values.
image-renderingCSS property in the
canvaselement, set to preferably
pixelatedwhen 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!
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.