Why UI edges are shaking from animation?

Help
1

Godot Version

4.6

Question

Anyone know the fix for this problem? The problem is that my button edges seems to be shaking because of animation. I think this is anti-aliasing problem, but I’m not sure though.

Pivot is correctly centered with pivot_offset_ratio = Vector2(0.5, 0.5)

With a minimal setup:

Here’s the code:

PlayBtn.scale = Vector2.ZERO
PlayBtn.pivot_offset_ratio = Vector2(0.5, 0.5)
var tween = create_tween()
tween.set_loops()
tween.set_trans(Tween.TRANS_QUAD)
tween.set_ease(Tween.EASE_IN_OUT)
tween.tween_property(PlayBtn, "scale", Vector2(0.9, 0.9), 1)
tween.tween_property(PlayBtn, "scale", Vector2(1, 1), 1)
2

I use Compatibility renderer and have tried playing with the settings. Seems like this problem will be here for long.

4

I think you could do it step by step by set values you yourself have decided in process to make it smoother, and reverse animation based on a frame counter. It is a bit clunky to implement. When you do it in a tween the tween will calculate the amount. Maybe some of those amounts cause the jerkiness.

If you need it i could post a code example later when on the laptop

5

I’ve tried it. The values are not the reason.

I managed to make it barely noticeable by changing the renderer to Forward+ and bumping the anti-aliasing quality to max:

  • Use TSAA
  • Use Debanding
  • MSAA 2D maxed
  • SMAA Detection (lowest)

The shaking and edge problem are barely visible. Unfortunately, changing the renderer is not an option for me.

However, I think the anti-aliasing solution is just a band-aid.

I’m really surprise this wasn’t fixed or discovered after all these years because it’s literally the most common way to animate a UI and the set-up needed for it is very easy to reproduce.

PanelContainer
-- Button

# Animate PanelContainer
6

Even the TextureButton are shaking. This is hopeless. Guess I just won’t animate it.

7

What about going to Project Settings → GUI → Common and turning off “Snap Controls To Pixels”?
Saw it mentioned in some old forum post.

Otherwise, what about animating size instead of scale?

8

Doesn’t do anything. Although, I think it minimize the shaking a little bit especially at low size.

Size affects the layout and button text size doesn’t go with it, so it’d look weird.

Here’s the video, it’s a simple button. However, I observed the shaking goes away when it has no custom StylePanel (or my eyes are bad?)

9

I give up though, thanks for the help. I just won’t animate it.

10

I see no shaking here or in any of your examples, don’t know if I’m representative of many that way, but just can’t see the problem.

Cheers !

11

There’s a slight shaking, though I’m not sure many people will notice it. But if you’re a stickler for perfection (like I sometimes am), you can try a vector image and DPITexture.

Although there’s no absolute guarantee that it will help.

12

Try using a texture that has several pixels of transparent padding around its edges.

Although I think obsessing over things like this when there’s still a default gray clear color visible in the viewport - is a waste of time.

13

Try tween = create_tween().set_process_mode(Tween.TWEEN_PROCESS_PHYSICS)

14

I think it’s important to report the issue. Solving issues will only make Godot better and that will benefit everyone.

And yep, it is a waste of time because I’m done with my gameplay and I can’t produce the UI style that matches my game art with Godot UI system. I guess I’m done with this problem and will just resort on the old UI sprite art :smiling_face_with_tear: .

I’m really surprised by how powerful Godot UI system is. I think it’s great, but it has its own problems (I wish I can contribute but I’m not as smart as contributors!).

15

I’m using built-in Control nodes though. I will have to create vector arts (which I have no idea how to do) if I want to use it for a simple button background and use shaders to round its corners (which StyleBoxFlat have by default). But still, I appreciate the help!

It’s less of trying to achieve perfectness, I just want the UI to reflect the cute, soft and bouncy style my game art has, but the shakiness is killing me :smiling_face_with_tear:

16

This is not an “issue”. If you’re animating the scale of a non-square hard rectangle, the rasterization of the edge must fall on a pixel. Since proportion is elongated, the moment when the snapping to the next pixel happens will differ for horizontal and vertical edges, making the apparent proportion slightly differ for some scale values. It may happen even for squares depending on the sub-pixel positioning.

If you want it smooth, use a slightly blurred bitmap with padded edges, so there’s no hard edges that need to be rasterized to an exact pixel.