Small health bar above entity is drawn differently when the entity is rotated differently

Question

Here is a simple positioning code for my health bar:

transform.position = Camera.main.WorldToScreenPoint(target.position - 0.2f * target.up);

Here is the prefab:

• HealthBar is middle-center anchored, and 0.5, 0.5 pivoted,
• Background and Fill are stretched and 0.5, 0.5 pivoted, but background is Left, Right, Top, Bottom -1 positioned.

Here is how it should look: (all images are zoomed in)

And here is a video about the entity rotating around: https://i.imgur.com/EOzFEvt.mp4

2 example rotations, in which the health bar is drawn incorrectly: (see the border of the bar)

Why?

Edit: Another interesting artifact:

• If I'm moving the camera up, the healthbars are offsetted up a bit, and if I start moving down, it's instantly offsetted down, with left and right the same, etc. As soon as I stop, it's at the correct position, but as soon as I start moving, it becomes offsetted to the direction I'm moving.

See gif: https://i.imgur.com/K8mwzTW.mp4

Fix for this: Place it in LateUpdate.

Answer 1

It looks like you're using Unity's 2D Pixel Perfect package, with Pixel Snapping toggled on in the Pixel Perfect Camera component.

That can cause effects like this, as the float-valued positions of your components get snapped inconsistently. In this case, as your character rotates, the background and fill of your healthbar are snapping differently, causing the bar and border to fluctuate in size/shape.

I'll go over some of the causes I've seen, but I imagine there are many more.

Asset design:

This is the big one: Building your art exactly to match your intended pixel sizes can remove a lot of snapping issues.

E.g. if you're targeting 640x480, and you want your health bar to be roughly 5% of the screen wide, you might create a 32x8 background and set the PPU appropriately. Then if you want a fill inset by 1 pixel, you create another 32x8 piece of art with the outer 1 pixel transparent, and position it atop the other. Then, you need to round your fill values so that they match the 30 pixels of fill you have.

With same-size art, pixel snapping should be consistent, and you shouldn't see the artifacts in your question.

Canvas sizing:

Canvas objects commonly have scale values with numbers like "0.05770617", which does not map to integer values well. You may need to configure your canvases differently, perhaps avoiding Screen Space - Camera/Overlay entirely. (I have not had to avoid them in my projects, but it could be an issue in yours.)

Object positioning

You may need to manually snap some object positions to 'safe' values, if the engine isn't doing it correctly for you.

E.g., maybe you need to round the position of your health bar to the nearest 1/16th of a unit, because that works in your testing.

Object positioning and floating point precision

If you calculate positions and forget float issues, you might end up failing when you try to overlay two objects. E.g., giving one with position x=0.3 and another with x=(0.2 + 0.1), you may find that they snap differently once in awhile.

Editor scale:

Lastly, even with everything above correct, using power-of-two-friendly scales in the Game tab can help reduce this in-editor, e.g. 0.5x, 1x, 2x.