How can I make a dynamic list of icons with unique mouseover helptext?

Questions
#1

So I’m working on a turn based RPG, and in it you can apply status effects to a character.
I want to be able to display this as a set of easy to read icons, with the ability to mouse over each icon and display a bit of help text regarding what the effect is and what it does, I specifically want it to be mousing over without needing to click as I don’t think requiring a click will be intuitive. my inspiration for functionality is the status effect list from Darkest Dungeon:
image

I’ve tried a few approaches and keep running into issues:
I first tried individual GUI nodes, which allowed me to just do a gui pick node check for the help text, but I can’t dynamically change how many effects are shown in that case, I got to 3-4 before running out of room.
image

I tried to utilize richtext next, and that’s great for the dynamic changes, different sizes, line breaks and all that, but I can’t seem to find a way to actually get any information on which icon I’m hovering over (I tried to use the clickable text example from Richtext, but I kept running into errors)
image

I theorized I might be able to make a GO factory and just make the icons spawn in and delete, but I once again run into the issue of mousing over the icons not being picked up since I don’t think there’s a pick go function out there (if I’m wrong of course please correct me).

are there any approaches that I might be missing? do I need to maybe mix richtext and gui text nodes together? any thoughts would be greatly appreciated.

#2

Your thinking with the GO factory is correct! But don’t forget that game objects are not part of the GUI, and as such they are moved with the camera, stretched by zoom and projection, affected by shaders etc. So in general it’s much better to keep GUI elements in the GUI.

So instead of a GO factory, you should look into gui.clone(). The process may look something like:

  1. In the editor, create a template node that has the layout you want with placeholders.
  2. In init(), store a reference of the template node and hide it. (gui.set_enabled)
  3. Whenever you want to create a new node, clone() the template. Change the text/icons in the newly created node, and place it where you want on the screen.
  4. Delete the new node when you’re done with it.
5 Likes
#3

thank you so much! it worked like a charm

4 Likes