How do I make an image not so blurry

[baassus26]

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:

[cymplecy]

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

[slate_technologies]

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

[odysseus_ssb]

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).

[baassus26]

@cymplecy

break your image down into tiles

How would you do that?

[cymplecy]

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

Username=cymplecy&ProjectName=tilesDemo

I used this tutorial to produce the tiles

https://www.gamedev.net/tutorials/visual-arts/slicing-images-using-gimp-the-manual-and-semi-automatical-way-r5257/
[edit]Found this site which does it automagically

Split Your Image online for free without any limits

[baassus26]

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

[ego-lay_atman-bay]

@slate_technologies

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

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

Here's a comparison

Vector:

Bitmap:

[joecooldoo]

@slate_technologies

That happens with SVG files.

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