How do I keep all of the pixels on screen from stretching or shrinking?
When I run my game I notice these small lines of pixels that are a little smaller or larger than all the others. When I move my character over these lines the sprite distorts too.
I want the pixels to stay the same size and get rid of these weird lines. When I move the sprite I don’t want it to distort or have the movement get choppy when it moves over these lines.
Here’s a screenshot of some grass tiles, you can see the different sizes specifically in the small grey squares:
I can’t figure out how to put a video with my sprite’s movement. However it seems to stretch/shrink the most when moving over the space/lines right between duplicate assets (i drew a small pattern with my tiles in LDtk and brought them into the game as a tilemap object, and copy-pasted it a few times to fill up the space). Moving up or down causes overall choppy movement.
My tiles are 16x16, sprite is 24x30, and the game resolution is 640x360. I’ve been looking for a few days and haven’t found any answers on how to fix this problem. This is my first time working with gdevelop and am still very new to the engine.
If you have any questions on what I’m talking about I’d be happy to try and explain, I appreciate any help.
I think I figured it out. I had the TopDownMovement behavior enabled for my sprite but also had things in the events tab telling the sprite to move a direction when WASD is pressed.
I deleted the movement events and also unchecked “round pixels when rendering” in the properties tab.
All of these things have made the movement of my sprite smooth and I don’t notice any of the jittery distortion like before.
The only thing is that now my character sprite’s pixels are slightly off. I’m not super concerned about this right now since its so minimal, but I’ll go ahead and throw a screenshot in here:
The distortion is still there, because as stated already the game screen is being scaled to a size that the sprites don’t perfectly divide into.
Your original image is made up of singular pixels, but these are being multiplied in order to fit a larger screen size.
Let’s say you have a screen size of 100x100. This is the “game resolution” you define in global properties. However, when you want to play in a window that is bigger than 100x100, everything displayed must be scaled up to that size.
It is easy to increase by multiples of the original size… to make the 100x100 screen into a 200x200 one, you simply double the size of every pixel (literally “squaring” them) so each 1x1 pixel becomes a 2x2 block. For 300x300, they become 3x3 blocks, and so on. This will result in no distortion.
When increasing by a non-multiple, then you have issues. How do you turn a 100x100 window into 150x150? You can’t add half of a pixel… so it will not work to do the same operation on every pixel. Instead, the renderer has to basically inflate some pixels but not others. When increasing by 50%, you would only need to blow up 50% of the pixels in an image. That’s why you are seeing some parts of the image appear wider or taller than other parts. The effect changes when things move around because different parts of the images are landing on inflated rows or columns.
So, check your game resolution and make a button that sets the window size to an exact 2x, 3x, etc
