How do I stop Sprite images from stretching and looking ugly

I don't know about you, but whenever I try to implement objects in my Construct 2 games, it always leads to the same problem. And that problem comes when I try to resize my graphic.

That doesn't look good!

The original graphic was only 5 * 6 pixels in size, which is pretty freaking small all things considered. But when I try to make the sprite object bigger, it always ends up looking fuzzy and ugly. Is there a way to stop this from happening? Seriously, this is pretty basic information that I feel like I am missing, so is there a tutorial that explains how to solve this issue?

You are stretching the image?

If you have 5*6 pixels in your image you have a total of 30 pixels of color information, if you stretch those to a 100*100 image you suddenly have 30 pixels of information to cover 10000 pixels so your image get stretched. Make the original image in the image editor match the size you need in the game and it wont stretch

The fuzziness comes from the linear sampling. Changing the "sampling" property of the project from "linear" to "point" will give a pixelated result, instead of a fuzzy one.

Your problem happens because of how images are and the laws of common sense. You're trying to take 30 pixels of detail and turn it into ... let's say 200 pixels of detail. What the program is trying to do is use the 30 pixels of knowledge it has and stretch it into the 200 pixels. It's going to look horrible. Where as if you had a image that was 1000 pixels and you resize it smaller, the program is able to condense the 1000 pixels of detail into 200 because it has the information of what it should be. This is actually how you should handle images to create sharp, good looking art.

Think of it this way. If you have 30 apples how are you going to magically have 200 apples? Where as if you had 1000 apples, you could make them into 200 apples.

I generally make my images as .png files in Illustrator, as they become lossless files, and therefore can be stretched freely (I believe you can also do this in Photoshop as long as they are .png format)

jrobertson789: In illustrator your image/elements are actually vectorized. They are not "yet" fixed pixels, like an actual png image is in the end.

What you import in Construct 2 is a fixed pixels image.

If you want your image in Construct 2 to be 128X128 pixels of size, make sure to export your image at this size from your image editor, otherwise you will have the stretch and big pixels issue.

That guy Backendfreak you save your images at 1.5x the size you want to use so that it doesn't look like shit when stretched.

I save them at about 1.2 for memory saving and they seem to look ok.

Thank you very much for the help guys! You were all so helpful!

BTW, I feel like this should be added to the FAQ, cause this seems like it would be important

Here are some tips:

1. Original size, will give you the best quality because you will neither add or remove pixel information. However if you need small but somewhat detailed images, this might not be the best way to go.

2. Scaling down, can be a good idea as it can be difficult to draw a lot of details in a 32x32 sized image. So you can make the image larger say 128x128 and then scale it down. Since you are scaling down its more difficult to see the loss of details from the original sized image. Therefore it can be done. Imagine a picture of Mona Lisa at 1024x1024 and you scale it down to 32x32, then you need 1048576 pixels that made up Mona Lisa in the original image to suddenly be represented in 1024 pixels. So logically you will loose a lot of details, but since you are scaling down, the new image is so small that you can get away with it.

3. Scaling up, if possible I would avoid doing this, but if you have to, you really need to scale by a small amount, especially if your original image is small to begin with. It will pretty much have the opposite effect of scaling down, because as you scale up its also easier to see all the errors since the image gets larger, which is because you are adding pixel information that ain't available in the original image, therefore you get this stretched, fuzzy/smooth look as it tries to compensate for these missing information. However if you original image is somewhat large to start with, you can get away with more scaling up.