: How can I make my sprite for retina display? Please, how can I make my sprite in good quality on small screens? How can I make in 2x? Example: i.imgur.com/6aUpvok.png and in 2x: i.imgur.com/aF739W3.png

@Murray664

Use an svg for a sprite. Then you don't have to worry about resolution. Especially if your artwork is simple enough to have a small file size.

Vote Up Vote Down

@Samaraweera207

It's not really something you can just do at the end. It's something you need to account for from the moment you edit the first graphic.

You need to know at the start how many resolutions you need to support. If that's impossible, as in it hasn't been decided but the show must go on, then you should simply work with the largest size that might be needed once it's decided.

You only need to make the sprite once. The important detail is that you should make it at the largest size you'll need. With that document already created at the largest sizes you'll need, you merely need to downscale to all the smaller sizes when you save, which is very easy.

The reason you don't want to create the graphics at the smallest size and scale up, is because when you scale up, it will stretch the graphic and approximate (guess) missing data, creating a more and more pixelated result the more that you increase the size. When scaling down, it doesn't have to guess to fill in data, it just has to discard excess data and retain what's necessary for that size.

The solution is to create the sprite at the largest size (highest resolution) you'll need, and then scale down when saving for all the smaller (lower resolution) sizes.

Vote Up Vote Down