3

Is there a way to do an apply a rounded corner to arbitrary images in Godot? I know we can fake it by adding transparent images over the corners:

Rounded Corner Example image

I know that we can create a panel with a style box flat, and make the corners of the panel rounded. But clipping the content of the panel doesn't clip the corners of the image inside the panel.

UPDATE: I am aware of a special shader script that curves the edges of square images. It only works for square images. I don't know enough about shaders to make it work for other image sizes. Here is what it looks like in practice on non square images.

non rounded corner example

Jay
  • 19,649
  • 38
  • 121
  • 184
  • I have heard a rumor Godot4 might support this. But we are not able to move to Godot4 at this point in time. – Jay Aug 08 '23 at 05:16
  • Why not just use shader for that? https://godotshaders.com/shader/set-corner-radius-for-texture/ – Bogdan Kuštan Aug 08 '23 at 05:20
  • @BogdanKuštan Most shader code out there for rounded corners doesn't round the corners evenly unless the shape your shading is square. There surely is a way to round corners without having to resort to custom shader code. – Jay Aug 08 '23 at 05:58
  • The problem is that you cannot get the `Control` size inside the of the shader, so even if you get the correct coordinates, you would only be able to remove one corner. You could workaround that with a script that gives the shader the correct coordinates and size. Sadly the situation isn't much better in Godot 4. – Theraot Aug 08 '23 at 07:59

1 Answers1

3

Assuming you don't need to change the expand and stretch modes of the TextureRect, you can replace it with Panel and use a shader to add a Texture on it.

For example, something like this:

shader_type canvas_item;
uniform sampler2D tex;

void fragment() {
    COLOR = texture(tex, UV);
}

Of course, set the texture in the shader parameters.

Then you can apply an StyleBoxFlat on the Panel for the rounded corners.

Theraot
  • 31,890
  • 5
  • 57
  • 86