1
\$\begingroup\$

I'm trying to implement a "rounded square" player character's icon in the UI. The actual .png of the icon is, of course, square, 256x256 px, so the UI element must round its corners "on the fly".

Searching online, I found this solution on Godot forums. It is simple: use a Panel Container, and set that panel container's corner radius to some value and tick "Clip Contents" checkbox.

enter image description here

However, when I tried implementing it, the "rounded corners" clipping does not work, and corners of 256x256 px .png show through the rounded corners of the Panel Container. I can't recreate the "original" rounded godot.png shown in the tutorial either. However, when importing the .tscn file given in the tutorial - it works! But recreating from scratch is impossible...

I use Godot 4.2.2 with Compatibilit mode rendering, but switching to Forward+ did nothing either. What can be the reason 'rounded clipping" does not work?

\$\endgroup\$

1 Answer 1

Reset to default
2
\$\begingroup\$

It might better to show your scene.

I just did a small test in a scene which is how it works.

 - Control - PanelContainer (StyleBox corners with Clip Only set) - TextureRect

Example

\$\endgroup\$
1
  • \$\begingroup\$ Ok, this is the correct answer. The key was "Clip Children" option - It must be set to "Clip Only" for the "rounded clipping" to take effect. The original tutorial did not mention it hence confusion. \$\endgroup\$ Commented Jul 16 at 16:24

You must log in to answer this question.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.