How do I make an image not so blurry

So I am creating an exploratory game. I have created a giant map as a sprite and when I zoom in, it makes it so blurry. Is there anyway to fix this??

Here is my image:

One method is to break your image down into tiles and then when you zoom in they won't lose any detail
This might cause your program to run a lot slower so YMMV

That happens with SVG files. Snap! for some reason likes to make SVG files, or any image file, blurry. Which significantly reduces its quality.

I don't know for sure but I think this is the result of anti-aliasing. This is a process to smooth out images and the only way I know to avoid it is to download an upscaled version of the image. (If you're using pixel art, you could download it scaled to 8x size, but this does mean a bigger file).

How would you do that?

So lets say maximum zoom you want is 400%

So you'd need to enlarge your big image by 400% using an image editor

Then say crop the big image into a set of 16 smaller images that each would now be the size of the the big image originally

Then you'd need to load them back into snap as individual sprites and write your code to join them together visually
Note - each image must not be any bigger than the size of the Snap! stage so keep them down to less than 480x360
You might not have to do the enlarge step depending upon the size of your original image - just depends on what sort of quality your after

I just did a rough quick demo of one way of doing it


I used this tutorial to produce the tiles
[edit]Found this site which does it automagically :slight_smile:

Thank you! Though my image was 10000 x 7500 pixels, I will manage to do it.

Actually I just tested, and SVG files keep the quality. I'm pretty sure you mean PNG (bitmap) images.

Here's a comparison



SVG's are built so that you can zoom into one and not lose detail.

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.