Weird display when the same sprite sheet with different sizes

Hello everyone, I'm making a small game and seeking for help with the following issue~ I am not sure if it is a C3 bug or I am doing it in a wrong way, it would be appreciated if someone could give me any advice.

I have made a spread sheet of a small red clock, the original image size is 256*256, but I need it to be resized as 64*64 in my game, so I tried different ways(acutally 4 different ways) and I got different results.

Please refer to the following screenshots when playing the animaiton as follows:

1. The first clock is using the original size of the image which is 256*256 when creating the sprite sheet, but I resized it into 64*64 in C3 Animations Editor(Animations Editor -> Resize), we can see that its resolution is not very high, but there is no weird line when playing the animation.

2. The second clock is using the 64*64 size of the image which I resized outside C3(using other tools on my computer) when creating the sprite sheet, we can see that there is no weird line when playing the animition and resolution is better than the first clock, but this way is not very convenient because I need to resize these images outside C3 first by usint other tools instead of resizing them in the C3.

3. The third clock is using the original size of the image which is 256*256 when creating the sprite sheet, but I resized it into 64*64 in C3 side bar(PROPERTIES -> COMMON -> Size). In this way it is convenient for me to resize the sprite in the C3 and its resolution is quite high, but however, there is an obvious weird line when playing the animation. Actually there is more than one line, it is like a square outline of the sprite flickering when playing the animation.

4. The fourth clock is using the original size of the image which is 256*256, there is no weird line when playing the animation and it is really high-resolution. It is perfect except the size is not I wanted.

I really prefer the third way to do my project,it is the most user friendly way, but it looks like a bug and I am not sure if I am doing it correctly. Does anyone also have this issue? Why does it occur and how to fix it?

Try this:

construct.net/en/make-games/manuals/construct-3/interface/animations-editor

Hi.

You've raised two issues here.

-- First, to avoid those stripes along the edge of the sprite, always leave a few empty pixels at the edge of the sprite—I've highlighted this in green in the screenshot. And the more your sprite can be scaled, the more pixels you need to leave.

For example, I make games for different screens and resolutions, so I export an image that’s 250x250 and then place it in a 256x256 sprite.

-- Second, if you’re not using pixel art and you want it to look good, you almost always need to have small objects at a slightly larger original size.

So your option number 3 will be the best choice, but you also need to be reasonable.

In the screenshot, I’ve marked the scaling in orange; for my own games, I try to keep it around 80% for small objects—that way, the graphics aren’t too heavy, and on high-resolution screens, it doesn’t stand out too much.

A few years ago I wrote a whole blog post on this topic: The surprising difficulty of resizing images on spritesheets. That explains the problem and what to do about it (tl;dr: set the project property 'Downscaling quality' to 'High')

Ashley I've recently encountered this (again) and solved it as you suggest. But in the editor it clearly says "Not recommended" due to the memory usage, but I really never noticed any issues with it even on a ~7 year old Ipad. Is the cost really that dramatic?

Hi.

You've raised two issues here.

-- First, to avoid those stripes along the edge of the sprite, always leave a few empty pixels at the edge of the sprite—I've highlighted this in green in the screenshot. And the more your sprite can be scaled, the more pixels you need to leave.

For example, I make games for different screens and resolutions, so I export an image that’s 250x250 and then place it in a 256x256 sprite.

-- Second, if you’re not using pixel art and you want it to look good, you almost always need to have small objects at a slightly larger original size.

So your option number 3 will be the best choice, but you also need to be reasonable.

In the screenshot, I’ve marked the scaling in orange; for my own games, I try to keep it around 80% for small objects—that way, the graphics aren’t too heavy, and on high-resolution screens, it doesn’t stand out too much.

Thank you so much for your detailed explaination!

A few years ago I wrote a whole blog post on this topic: The surprising difficulty of resizing images on spritesheets. That explains the problem and what to do about it (tl;dr: set the project property 'Downscaling quality' to 'High')

Thank you Ashley! Now I finally understand why it happens. It really helps!