SFML community forums

Help => Graphics => Topic started by: [R]Viper on October 06, 2018, 05:58:46 pm

Title: Animation "flickering" when using float position.
Post by: [R]Viper on October 06, 2018, 05:58:46 pm

Hi there, I'm doing a little project and I have a flickering problem.

You can clearly see the problem here (the while line on each side of the sprite) : https://www.youtube.com/watch?v=1Xu1ZlWiODg

My movement  code is very simple.

heroine.Position += this._Direction * time.AsSeconds() * 100;

So my position is "always" a float.

If I cast my position to some int, everything is working fine.

this._Heroine.Position = new Vector2f((int) this._Heroine.Position.X, (int)this._Heroine.Position.Y);

But now, when I hit a wall, the sprite "shake".

And for information, I'm using a really simple spritesheet : https://opengameart.org/sites/default/files/OpenGunnerEnemySoldier_0.png where all sprite is 50*50 pixels.

I'm pretty sure there's a way to correct this flickering problem, but I can't figure it out...

Thank in advance guys!

Title: Re: Animation "flickering" when using float position.
Post by: tomvidm on October 08, 2018, 10:31:25 am

By looking at the spritesheet, you can see that there are white edges, which coincidentally looks very much like the white lines you consider a problem here. I would suggest measuring the sprite dimension again and consider the offset between the sprites. This is definitely not a bug  :)

Also, the position of your sprite should not change the texture coordinates of the undrlying vertices.

Show us instead the code that handles the animation itself, not the position of the sprite. Right now, I can only base my guess of off the video and the spritesheet.

Title: Re: Animation "flickering" when using float position.
Post by: Hapax on October 15, 2018, 10:25:51 pm

This seems to be the result of a very commonly experienced issue. When using non-integer values for positions and sizing/scaling, the resulting texture pixels can be a neighbouring pixel when OpenGL renders each pixel.

There are a few solutions:
The main one is to make sure that each sprite is positioned using integers (remember this can be done separated from the actual float position values you store).
Another is to add a copy of the pixel edge around the texture part that you use. That is, each edge should then be two pixels wide; when specifying the texture rectangle, you would ignore the outer pixel edge.