Screen tearing with Monogame.extended and Tiled

Extended
1

Hello folks, I’m doing the https://www.monogameextended.net/docs/features/tiled/tiled/ tutorial, and if I use:
var seconds = gameTime.GetElapsedSeconds();
var movementDirection = GetMovementDirection();
cameraPosition += speed * movementDirection * seconds;
to control the camera position, I get with a type of screen tearing(I guess).

Screen Shot 2021-01-20 at 15.51.56
Screen Shot 2021-01-20 at 15.51.56739×565 180 KB

These happens only when I moving the camera in vertical direction and I use seconds to increase speed.
But if I go with:
cameraPosition += speed * movementDirection;
In other words, without TimeElapsed, the tearing goes away and everything works. But probable the camera going to run in different speeds for different machines.

Any help to explain to me why this is happening?
Thanks in advance.

2

The issue is, is the edges of the tiles are bleeding through when your camera is not a fixed int.

The easiest solution is clamp your camera position to ints. However you lose super smooth scrolling

The best option is to pad all your textures on your tile sheets with an empty pixel.

1 Like
3

The view can only resolve to integer positions anyway. The smooth scrolling comes from moving the camera itself by a fraction of an integer, but I believe you can still safely resolve to an int at render time and not lose anything.

The only time it might make a difference is if you were using Anisotropic filtering so it will blend the resulting texture in those sub-pixel regions… which most folks doing pixel art like this probably aren’t gonna use.

1 Like
4

The camera position shouldn’t resolve to integer positions. When you zoom the camera in if it resolved to integer positions the view would be taking massive skips

1 Like
5

Thank you guys, I have to study many things about that to really understand. for now, i’m going with integer resolution: cameraPosition += movementDirection * Convert.ToInt32(seconds * speed);.
For side scroll(up and down too) it’s works fine, without this annoying lines, but when I make a zoom:
if (state.IsKeyDown(Keys.W)) { camera.ZoomIn(0.01f); } if (state.IsKeyDown(Keys.S)) { camera.ZoomOut(0.01f); }
Doesn’t work as good as side scroll. Back to annoying lines:

Screen Shot 2021-01-23 at 18.53.46
Screen Shot 2021-01-23 at 18.53.46916×770 164 KB

6

Thats because when your zooming in your coordinates you are no longer clamped to an integer.

In your spritebatch draw method there is a parameter you can set to clamptopoint.

The alternative is to pad your textures on your spritesheet (i had it wrong last post its not an empty pixel)

So each pixel around the tile on your spritesheet pad it with the same pixel as the one on the edge of the tile.

1 Like
7

Thank you boot, all I need to fix this issue was:
resolving positions with a clamping method, as I’m using monogame I made this:
spriteBatch.Begin(transformMatrix: camera.GetViewMatrix(), samplerState: SamplerState.PointClamp)
Thank you guys again.

8

I am just starting and I solved it getting the position of the player adding 0.5 and converting to int
var cameraPosition = new Vector2((int)(transform.Position.X + 0.5), (int)(transform.Position.Y + 0.5));
_orthographicCamera.LookAt(cameraPosition);