How to make a round avatar frame effect from a textureRect

Help
, ,
1

Godot Version

v4.2.2.stable.official [15073afe3]

Question

How to use TextureRect to achieve an effect similar to a circular avatar frame in Godot? My idea is to use Shader, but I’m not very good at it. Does anyone know how to make this effect?

2

2024-04-26-133246_1155x545_scrot
2024-04-26-133246_1155x545_scrot1155×545 66.3 KB

Using a panel container as a parent with high corner radius and clip_children set worked pretty OK for me, though I could see this falling apart for varying sized icons.

1 Like
3

thanks

4

Can you send the project files?

5

I can’t upload anything other than images so here’s the tscn file

[gd_scene load_steps=3 format=3 uid="uid://crrtpbg28y7hm"]

[ext_resource type="Texture2D" uid="uid://bb7jrg5daebi8" path="res://icon.svg" id="1_3onsk"]

[sub_resource type="StyleBoxFlat" id="StyleBoxFlat_qfi6a"]
corner_radius_top_left = 80
corner_radius_top_right = 80
corner_radius_bottom_right = 80
corner_radius_bottom_left = 80

[node name="Control" type="Control"]
layout_mode = 3
anchors_preset = 0
offset_left = -142.0
offset_top = -49.0
offset_right = -102.0
offset_bottom = -9.0

[node name="PanelContainer" type="PanelContainer" parent="."]
clip_children = 1
layout_mode = 0
offset_left = -4.0
offset_top = -13.0
offset_right = 124.0
offset_bottom = 115.0
theme_override_styles/panel = SubResource("StyleBoxFlat_qfi6a")

[node name="TextureRect" type="TextureRect" parent="PanelContainer"]
layout_mode = 2
texture = ExtResource("1_3onsk")

[node name="TextureRect" type="TextureRect" parent="."]
layout_mode = 0
offset_left = 176.0
offset_top = -12.0
offset_right = 304.0
offset_bottom = 116.0
texture = ExtResource("1_3onsk")
1 Like