1
\$\begingroup\$

Most of my Texture2D are pixel art, meaning they're rather small, so my player/character's position has to change using decimal points to keep a realistic movement that matches its walking animation.

But the problem comes when I use my 2D Camera class (using a transformation matrix) to follow the player's position with a scaling/zoom multiplied by 4 (to enlarge all the art). It ends up causing some of the tiles to offset or extra pixels to appear in source rectangles which don't belong in the tile:

Tileset used:

tileset

And these are the extra pixels that don't belong in the source rectangle that start appearing when the camera moves with the player:

enter image description here

I realized later that the camera position works better when using int values over floats, but not having it use floats makes the movement of the camera very rigid when zoomed in that much.

So to restate my question, how can I prevent these extra pixels from appearing while keeping the slow velocity of the player to look smooth, all while keeping the camera position fixated on the player?

Edit -- This image shows the few extra lines that gets drawn when they shouldn't when the camera's position is at specific coordinates:

enter image description here

\$\endgroup\$
  • \$\begingroup\$ Do these little gaps appear & disappear, or shift from one tile to another as the camera pans? Or do they keep their position relative to the tile as it scrolls? Do you notice any stretching/ripples inside the bodies of the tiles themselves, or only these gaps at the seams? \$\endgroup\$ – DMGregory Mar 4 '18 at 11:24
  • \$\begingroup\$ The gaps seem to appear and disappear at times, and their position seem to be relative to the tiles as the camera scrolls. I edited/added another image to show how it looks like at specific coordinates. \$\endgroup\$ – Alexandre Mar 4 '18 at 17:22
  • 1
    \$\begingroup\$ This sounds like it might be due to a slight mismatch between your drawn positions/sizes and the screen pixel grid, similar to this question \$\endgroup\$ – DMGregory Mar 4 '18 at 17:34
  • \$\begingroup\$ I see, that explains a lot. I intend to scale up all the sprites by 2 or 4, so that the camera's position won't have to use decimals (floats) to prevent that kind of effect, and the camera will also look like it'll pan more smoothly. But I'd like to know what would be the best way to do that, since I'll also have to multiply the sprite's positions by the scale also. \$\endgroup\$ – Alexandre Mar 4 '18 at 18:00
1
\$\begingroup\$

I have had this issue before when using floats for my Vectors when passing it into to a spritebatch.draw function. This issue is still present Monogame and was present in xna. You Can still use floats for velocity just cast the values as ints.

Try this in your SpriteBatch.Draw().

 Vector2 FixedPosition = new Vector2((int)SpritePosition.X, (int)SpritePosition.Y);

 SpriteBacth.Draw(Texture, FixedPosition,....);

All you have to do is cast (int) into your sprite positions.

You can reference this post. https://stackoverflow.com/questions/7459149/sprites-flicker-in-xna

\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.