gikdew

lowrezjam - scale pixel art up with no blur

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;}

Share this post


Link to post
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?

 

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.