Antylum Posted September 12, 2013 Share Posted September 12, 2013 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; } wwaaijer 1 Quote Link to comment Share on other sites More sharing options...
rich Posted September 13, 2013 Share Posted September 13, 2013 context['imageSmoothingEnabled'] = value; context['mozImageSmoothingEnabled'] = value; context['oImageSmoothingEnabled'] = value; context['webkitImageSmoothingEnabled'] = value; context['msImageSmoothingEnabled'] = value; wwaaijer, Qqwy and ooflorent 3 Quote Link to comment Share on other sites More sharing options...
dhaber Posted September 13, 2013 Share Posted September 13, 2013 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. wwaaijer 1 Quote Link to comment Share on other sites More sharing options...
lean8086 Posted September 13, 2013 Share Posted September 13, 2013 I think it could help: http://seb.ly/2011/02/html5-canvas-sprite-optimisation/ Quote Link to comment Share on other sites More sharing options...
Antylum Posted September 16, 2013 Author Share Posted September 16, 2013 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: http://phoboslab.org/log/2012/09/drawing-pixels-is-hard P.S. Rich, how is made pixelart graphics scaling for mobile devices(retina Ipads, Android) in Nutmeg? Quote Link to comment Share on other sites More sharing options...
sima Posted September 19, 2013 Share Posted September 19, 2013 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 Quote Link to comment Share on other sites More sharing options...
Recommended Posts
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.