How do you use add_image in RichTextLabel? Godot 4.3
I’m loading images in a global dictionary so that I can then use it with each richtextlabel or anywhere else I might need to. however I can’t figure out how use the loaded image with RichTextLabel.
Of course [img]res://sprites/creature_type_icon.png[/img] works
But I’m trying to pass the loaded image rather then loading the image with each RichTextLabel I use
add_image(texture,16, 16, Color(1, 1, 1, 1), 5, Rect2(), key, false, “”, false)
The only result I can get from this is a clump of all the images I’ve added, appended to the end of the RichTextLabel.
Anyone know of a good tutorial or resourse that really goes in depth for RichTextLabel? Chatgpt hasn’t been able to help and it insists this will work 100% 
This might not be the answer you are looking for but you could also try using a container with the the image and the RichTextLabel being separated so that you can better format how you are adding each label and text individually? Alternatively I would also play with the values you are inputting in the add_image() I haven’t used it much myself but perhaps the rect2() not having any values (For example Rect2(1,1,1,1)) means that the size is just 0 so they are bunching up :).
Hope this helps!
Sorry, Looking in more detail at you post, If I might also make some unasked for suggestions. I would Build the card as a Control with the children being some more diverse containers, For example:
This allows you to access specific elements of a card more easily and modify the look of your card more fluidly.
Hey noah, This is from the doc, Playing with rect still doesn’t keep it from just clumping at the end.
"If width or height is set to 0, the image size will be adjusted in order to keep the original aspect ratio.
If width and height are not set, but region is, the region’s rect will be used."
As for the layout of my nodes, don’t worry about that. Its only on a color rect right now because I created the card frame with a shader. Later the card frame will be rendered in a few ways, stored as an image then combined on top of my animated background shader that will also be rendered from another shader.
I can’t find a working example of add.Image to be honest. The built in example doesn’t use it either here: Rich Text Label with BBCode Demo - Godot Asset Library
So I’m not even sure how its intended to function. I was thinking of next trying a text effect to see if I could use that to replace the text with an image.
Like maybe “(R)” gets replaced with [texteffectredmana][/texteffectredmana]
If anyone has anything that works with add_image, let me know
Ok, So I had to take a day off work for this one cause I kinda got laser focused on it but here is my understanding I guess.
The problem is that add_image() doesn’t insert the image into your text at a specific position - it registers the image with the RichTextLabel and gives it a key that you can reference later with BBCode.
From what I understand, to use the Images in the Label. You are first gonna:
var texture = preload("res://sprites/creature_type_icon.png")
# Register the image with a key name
rich_text_label.add_image(texture, 16, 16, Color(1, 1, 1, 1), 0, Rect2(), "my_icon")
Load and register your images with the RTL
Then:
rich_text_label.text = "Here is my icon: [img name=my_icon]"
reference that registered image in your BBCode using the key
So its not really like a button or something with an Icon, You are just referencing the Image in the BBCode.
My suggestion for you is if you need more Versatility in your Image and Text layout. Just use A grid container with multiple Different Children of different specific types. This lets you play around with layout way more fluidly.
I try not to get caught up on a specific type of Node that Seems to be a catch all of what I’'m looking for when multiple nodes might do it simpler but with slightly more work.
Hope that helps! I felt bad cause it doesn’t really address your core concern. But I tried my best haha.
1 Like
No that helps, thank you! I will test that out and use it for sure. they have no reference of what you did there in the docs so if that works its definitely useful
I wanted to be able to layer images anyways so I’ve been working on a solution using richtextlabel to track the scroll bar position and manage the images, while using a richtexteffect to track the position of the image in context to the richtextlabel, and another global class to calculate text width and height values.
when finished, I will be able to place my icons automatically into my labels so I can do this:
So I figured out a way to get everything sized and positioned correctly for the icons behind the text.
What I did was create a rich text effect:
@tool class_name RichTextPositionEffect
extends RichTextEffect
var bbcode := "position_effect"
var uniform_position : Array[Vector2] = [] #we are only tracking the position as the other values are not accessable from here.
func _init() -> void:
pass
func _process_custom_fx(char_fx: CharFXTransform) -> bool:
#index is important because process will run each character and this is the only way we can see where its running from
var index: int = char_fx.env.get("index", 0)
#resize the uniform as needed.
while uniform_position.size() <= index: #its okay if it becomes larger then whats needed, we will only access the indexes as the characters get run and they will have a specific index value
uniform_position.append(Vector2(0,0))
char_fx.color = Color.BLACK
uniform_position[index] = char_fx.transform.origin #offset from the top left position of the rich text label to the top left of the character.
return true
Then in my rich text label class I added children texture rects that would update position based on the position value from the effect,
the scroll bar value (get_v_scroll_bar())
the text descent value (get_font_descent(font, font_size))
There are two problems with is approach:
one) the rich text effect stops updating as soon as the text is clipped which would essentially create an effect that looks like the icons have collision. I made it so that the position was instead an offset of the scroll bar value. and this works. but I would have to implement further a signal that shoots back from the effect to the rich text label to make it 100% functional saying the offset is has been calculated. Because if a texture is clipped from the start, the offset will never calculate and that would lead to images not positioning correctly.
This could also get fixed if I could somehow disable the caching and made it so that the effect processes no mater what. No idea how to do that though, nothing I tried worked.
The other Problem/nitpick is the z index issues. Don’t really want to have to manage it to make the draw order work.
I’m gonna check out TextParagraph next to see if it would make more sense to use it for a solution.
