search

msikma / pokesprite

Database project of box and inventory sprites from the Pokémon core series games
https://msikma.github.io/pokesprite/
MIT License
984 stars 167 forks source link

Sprites look blurry on retina display #3

Closed msikma closed 9 years ago

msikma commented 10 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

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 commented 9 years ago

This has been implemented. Thanks for pointing me to this code @Josephvb10. :+1: