Crisp Nearest Neighbour Scaling

[Max]

Hi everybody!

 

I've been playing around with Phaser for a few days now and I'm really enjoying it.

 

Today, I've been trying out some pixel art stuff. Ideally, I think I would like to export my assets at 100% size and then scale them up in Phaser.

 

There are two issues at the moment that prevent me from doing so:

 

1. It seems that the settings for crisp scaling don't work in Phaser 1.1.4 and Phaser 1.1.5 anymore

 

I can get around this by manually setting the Canvas properties, so that's not too big of a deal.

 

2. If I manually set the Canvas property to image smooth disabled, this somehow doesn't affect the scaling of the entire stage if I do it like this:

this.game.stage.scaleMode = Phaser.StageScaleMode.SHOW_ALL;this.game.stage.scale.minWidth = 160;this.game.stage.scale.minHeight = 160;this.game.stage.scale.setScreenSize(true);

The crisp rendering works if I do something like sprite.scaleTo(), but it doesn't affect the stage scaling. Any thoughts on that? Is this (2.) a bug or just something about how Phaser/Pixi/Canvas works?

 

In general, I would like to hear some thoughts on pixel art games with Phaser / HTML5. How would you guys go about making them? Would you scale them up in your graphics editor (seems tedious) or in code? I've heard of issues with different browsers, WebGL (which I would really like to use) and especially mobile browsers. Should I scale the images up with JavaScript (as described here)? Any food for thought is appreciated!

 

Thanks for the discussion and help!

[Max]

This article on the topic is quite interesting. This has made me think that I should incorporate the pixel art scaling into my build script so I don't have to resize everything manually. Fortunately, there's an easy binding to ImageMagick in node called node-imagemagick, so here's how I'm automatically scaling my images by 300% (quick and dirty):

 

var im = require('node-imagemagick'),	fs = require('fs'),	_ = require('underscore'),	path = require('path');var imagesSrc = 'assets/images/src';var imagesDist = 'assets/images';var files = _.without(fs.readdirSync(imagesSrc), '.', '..');files.forEach(function(file) {	im.convert(['convert', path.join(imagesSrc, file), '-sample', '300%', appendBeforeExtension(path.join(imagesDist, file), '@3x')]);});function appendBeforeExtension(path, append) {	var extension = path.substr((~-path.lastIndexOf('.') >>> 0) + 2);	var name = path.substr(0, path.lastIndexOf('.'));	return name + append + '.' + extension;}

This lets me put my images into assets/images/src and the scripts cycles through all files in that directory and puts them inside assets/images.

 

I'm not sure if this is the best way but it could be a good compromise as Canvas doesn't seem ready for nearest neighbor scaling across the board yet.