Pixel Art

[aholla]

Hey guys,

 

I'm trying to use pixel are and want to double the size but am getting automatic anti-aliasing. I've tried a few things and have resolved the issue in firefox but chrome and safari are still a problem. 

 

Is it possible to scale up my pixel art without it appearing blurry in Chrome? I want to do this via the browser via the Canvas tag or CSS and not via JavaScript as Dominic resorts to here: http://phoboslab.org/log/2012/09/drawing-pixels-is-hard

 

Here is my current CSS, im not sure what is still relevant here:

canvas {    image-rendering: optimizeSpeed;     image-rendering: -moz-crisp-edges;     image-rendering: -webkit-optimize-contrast;     image-rendering: -o-crisp-edges;                image-rendering: optimize-contrast;             -ms-interpolation-mode: nearest-neighbor;   }

 

And I am also trying to set the smoothing property on the canvas context like so: "ctx.webkitImageSmoothingEnabled = false;".

 

Thanks for any help!

 

[rich]

Basically no, browser support is terrible for this at the moment.

 

I did once see a very interesting technique to try and solve it - basically the canvas was written to an image tag every frame, so it was a normal img with the source set to the canvas data. Then the image was resized with css. Because browsers respect the 'crisp' CSS on images far wider than they do on canvas. It seemed to work anyway although I'm not sure what kind of hit you'd take re: image encoding.

[captainherisson]

If you resize 16x16 sprites to 32x32 on canvas and then rescale this canvas using css, the result is actually quite sharp provided you round you coordinates before rendering. So you need to adjust your code a bit as scaling only using css won't do it, but it should be easy. Here's a screenshot of my game (a work in progress) showing 16x16 character sprites and 4x5 letters scaled using this technique:

[Lachsen]

Hi there!

 

It seems, that chrome supports the webkitImageSmoothingEnabled property.

At least the following example runs in my Chrome on Windows:

http://jsfiddle.net/VAXrL/190/

 

So, did you already try this and it didn't work?

When using the imageSmoothingEnabled property, you have to make sure to create a canvas of the upscaled size (no scaling with css!) and than draw each image upscaled with the API (you can use the 'scale' method to simplify this).

 

C ya

 

Lachsen

[tyson]

Simple fix would be to pre-bake some scanlines into the images to make a fake CRT effect.

I would argue most pixel art nowadays looks too 'good' anyway!