lowrezjam - scale pixel art up with no blur

[gikdew]

The #lowrezjam is a jam where you have to make a game with a maximum of 32x32 pixels but you can scale the game up. How can I scale my game up without having blur, and with my awesome pixel art still crispy enough.

In this picture you can view the 32x32 game, with a demo image.

When I try to upscale my game to 128x128 I get this and I dont know if I have to scale the canvas, or the game... I don't know how to do it! Any help??

 

This is the code I'm using:

Game.prototype = {        preload: function() {            Phaser.Canvas.setSmoothingEnabled(this.game.context, false);            this.game.scale.maxWidth = 128;            this.game.scale.maxHeight = 128;            this.game.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;            this.game.scale.setScreenSize();        },create: function() {            this.player = this.game.add.sprite(0, 0, 'player');            this.player.smoothed = false;        },

and in Css

.game {    image-rendering: optimizeSpeed;                 image-rendering: -moz-crisp-edges;              image-rendering: -webkit-optimize-contrast;                                                    image-rendering: -o-crisp-edges;            // OS X & Windows Opera (12.02+)    image-rendering: optimize-contrast;         // Possible future browsers.    -ms-interpolation-mode: nearest-neighbor;   // IE	 width: 128px;	 height: 128px;}

[jpdev]

this might be relevant information:

 

http://html5hub.com/state-of-nearest-neighbor-interpolation-in-canvas/#i.3bx5iz87ues5sm

 

(support of crisp rendering in browsers via different methods)

 

But I am not sure how to apply it here.

[gikdew]

Problem solved! Check the #LOWREZJAM - Official thread

[jpdev]

Hey Gikdew,

 

Can you post how exactly you setup phaser to get the 32x32 scaled effect?

 

That would be cool - I am considering to join with a little game.

[jpdev]

Guess this is it: http://examples.phaser.io/_site/view_full.html?d=display&f=render+crisp.js&t=render%20crisp

[Nambiar]

I tried everything... my game still looks bad when zoomed up.

 

This is the original size (32x32)

 

 

 

and this is zoomed in 500% (on chrome)

 

 

I'd like it if my game retained the pixellated look.

 

Halp?

 

[Nambiar]

Guess this is it: http://examples.phaser.io/_site/view_full.html?d=display&f=render+crisp.js&t=render%20crisp

Hey JP, 

That method works if I manually scale my game. But if the user zooms in to play a 32x32 game, I cant properly apply scaling since there aren't any universally applicable zoom detection methods available that works across browsers (or so the internet tells me).

 

I could use visibility change detection but I do not know if it works for zooming and also, I do not know how to use it properly.

[jpdev]

Having the same problems.

 

I think I might use what the phaser example shows.. that would mean:

 

create the game in 320 x 320, set game.stage.smoothed = false and scale everything up by factor 10, and make sure to move everything aligned to the 10x10 grid.

 

or maybe gikdew will tell us how he solved it.

[Nambiar]

For the scaling option too, game.add.text() is a problem because it does not seem to have a smoothed option. Havent yet tried bitmap text.

[Nambiar]

I've managed to put in a button for manual scaling and created my game around the scaling. Check it out here - 

 

http://gamedolph.in/games/running32/

 

Its not complete yet (ofc) but I think the basic elements are in place. 

 

Now, only to figure out how to get score text which conforms to the rules.

[jpdev]

looks good. which method did you use?

 

For text: use a bitmap text, they can be scaled without a problem (after setting smooth on the stage to false)

[codevinsky]

Chrome will not do this properly. You'll have to use Firefox of Safari.