Sprites look blurry on retina display

[msikma]

Sprites look blurry due to the fact that they're upscaled on a retina display. Figure out if we can change the upscale to a point upscale rather than the browsers' standard bilinear/bicubic algorithm, and check whether we can get this to work correctly with global zoom values other than 200%.

[JosephTico]

Here's an interesting and very complete article about that.

http://html5hub.com/state-of-nearest-neighbor-interpolation-in-canvas/#i.3bx5iz87ues5sm

The thing is, there's still no proper cross-browser support for this method of upscaling and also it will have a performance impact.

[msikma]

Thanks. This article seems to be a bit old, so with some luck things might have improved in Chrome.

It's unfortunate that IE doesn't have a valid method for doing this. However, using a modified image with doubled pixels might not be a bad thing (as long as it's loaded only when the pixel density is greater than 1.0) since it should not be that much larger than the non-upscaled version.

[JosephTico]

Well, now this can be implemented. This can be done by adding the following styles to .pkspr, and will work in most browsers.

  -ms-interpolation-mode: nearest-neighbor;
  image-rendering: -moz-crisp-edges;
  image-rendering: -webkit-crisp-edges;
  image-rendering: pixelated;

[msikma]

This has been implemented. Thanks for pointing me to this code @Josephvb10. 👍