Jump to content

lowrezjam - scale pixel art up with no blur


gikdew
 Share

Recommended Posts

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.

post-7867-0-44369800-1399022204.png

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??

post-7867-0-16379900-1399022427.png

 

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;}
Link to comment
Share on other sites

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

 

This is the original size (32x32)

 

jwn3Dwg.png

 

 

and this is zoomed in 500% (on chrome)

 

qi78HW1.png

 

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

 

Halp?

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...