Recommended Posts

During creating a pixelart game, i found that it would be better to use small-size images and scale them up depending on player's screen resolution. But there were smoothed and blurry: (small image - original size, 2 - resized by canvas, 3 - resized in graphicsGale - original size)




I tried different methods to use nearest-neighbour algorithm to make images sharp. Finally, i made it with:  

 bufcontext.webkitImageSmoothingEnabled = false; bufcontext.mozImageSmoothingEnabled = false;


But it doesn't work in IE and Opera. What kind of method can cover all(5) browsers? 
Also tried this for canvas, but it doesn't help:
#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;   }


Share this post

Link to post
Share on other sites

I've had good luck with the style suggested by Rich.    There is one thing that confused me about this at first.   In some browsers, if you reset the size of the canvas through the height or width properties, these settings will reset to their default.   I never checked the spec to see if that is expected, but as long as you take it into account, this works well.

Share this post

Link to post
Share on other sites

Rich, i have tried oImageSmoothingEnabled and msImageSmoothingEnabled(tried in IE9) and they don't work - I think, the specification haven't been supported by Opera and IE yet.


I thought about approach to scale pixelart during game loading and initialization, using getImageData && putImageData, so you create new image depending on player's screen resolution. Pros is that you write nearest-neigbour algorithm, which scales correct without smoothing(or how you have written it). Cons is that can take a while, cause put/getImageData are slow and if your game has many images.

Luckily, i found a good article about this approach and much more. I recommend it to all:


P.S. Rich, how is made pixelart graphics scaling for mobile devices(retina Ipads, Android) in Nutmeg?

Share this post

Link to post
Share on other sites
context['imageSmoothingEnabled'] = value;context['mozImageSmoothingEnabled'] = value;context['oImageSmoothingEnabled'] = value;context['webkitImageSmoothingEnabled'] = value;context['msImageSmoothingEnabled'] = value;


Thanks alot! I was looking for a way to manipulate smoothing and this one worked perfectly :)

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.

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.


  • Recently Browsing   0 members

    No registered users viewing this page.