TextureRect

VladFD

How to Round TextureRect in Godot 4.1.3 ?

DaveTheCoder

You could use a texture that contains a round shape inside a transparent background.

(That's a screenshot, not the actual image with a transparent background.)

VladFD

DaveTheCoder

Place it in the Godot project folder, and drag it from the FileSystem dock into the TextureRect's texture field in the Inspector. You can also load the texture using code.

VladFD

DaveTheCoder Maybe I put it wrong , I need to round the edges of a square picture ! How to do it?

VladFD

DaveTheCoder Example

DaveTheCoder

Use an application such as Gimp or Inkscape to round the corners.

As far as I know, Godot can't do that, unless someone has created an addon that does it.

VladFD

DaveTheCoder It can't be done in Godot ?

xyz

VladFD You can do it with a shader, but it's much easier to just cut it in an image editing app.

sstelkar

VladFD
Use vector drawing application like Inkscape which is free or Adobe illustrator. It will maintain shape irrespective of resolution

Toxe

A PanelContainer can have round corners when creating a theme for it so earlier I tried using one with a texture rect as its content but I found no way to clip the image. Maybe one could use a shader for that but I am no shader expert.

Jesusemora

A styleboxflat (like with panelcontainer) can have its corners rounded, you can then use clip in canvasitem to confine a children node to it. It's that simple!
You NEED themes if you use UI, it's the way of working in godot and it's really good, so look into it.

Caseyftw

You can do this by adding the TextureRect as a child of a PanelContainer.
Add a StyleBoxFlat to the PanelContainer in "Theme overrides -> Styles -> Panel". Then set the corner radius to whatever values you like best.
Then, in PanelContainer go to "Visibility -> Clip children" and set it to "Clip only" or "Clip + Draw".

duongxinh2003

Caseyftw Thanks!