Smooth scrolling

Hi,

I’m working on a 2D tile-based game where my tileset has no filtering (so it’s pixel-perfect).
My character is physics-based, and the camera follows it around with some Lerping.
When the character’s velocity is almost zero but still moving a little bit, the camera off course still follows it with less than a pixel each frame, which results in a visible movement of one pixel every couple of frames, which looks a bit odd.
Any solutions for this? The only thing I can think of is making it so that the camera only follows the character if the distance is higher than, say, 5 pixels. I haven’t tried this yet, but I was wondering if there were any better solutions to this particular problem.

Thanks!

I don’t think filtering is a bad thing, but its required for subpixel movement.
You could clamp the camera to integer coordinates maybe, not sure if that would work for you.

Thanks for your reply.

Filtering can cause edge-bleeding, which is a problem for tile based games. I could add some margins to all tiles but that’s a lot of work when you’re dealing with a lot of tiles.

Already doing this, but the problem is still noticeable.

try adding 0.5 to the final drawn position for the camera or objects, sounds as though it might just be rounding issues.

No, I’ve used that trick at times, and it’s not the problem here.
Let’s say my object moves and it’s speed is decreasing. At on point, it moves at only 0.25 pixels each frame. So after 4 frames, it will have moved one pixel, and only then it’s visible. It’s no bug, it’s expected behaviour, but it doesn’t look very good.

Is the projection mode perspective?

It’s a 2D game with orthographic camera.

Pad your images and use bilinear filtering. You can use AssetPostprocessors to make padded copies on import.

That’s a good idea, thanks. But I’ve never done something like that.
I have one tileset image, and every 32x32 (or 64x64 for the hd/retina version) pixels it would need to move the tile 2 pixels in both directions, and copy over 1 row/column from the other side as the padding. Do you happen to have a script available that does this, or something similar that I can tweak? Writing it from scratch seems like a lot of work since I’m not entirely sure the result will solve the bleeding when I set it to bilinear filtering.

It will solve your bleeding. Unfortunately, the only code I have is much more complicated than what you need. Hacking out the relevant bits and adapting them to your purpose would most likely be more work than starting from scratch.

Essentially, though, you’re just using Texture2D to create a new texture, copy the original, copy the edges and corners again, and then save the result as a PNG. Remember to call DestroyImmediate() on your intermediate textures so that you don’t end up with annoying console messages every time you save your scene.