godotgodot3

Is there any way in Godot 3.5.x to round corners of images?

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

Solution

  • 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.