Adding images alongside text

Help and Feedback Scripting Support
#1

Hello!
I’ve been working on adding a tutorial part for my little project I’m working on, but I’ve stumbled into a little bit of a roadblock. It’s a dialog box with text that appears instructing you of what to do, and I want to make it easier to read and understand for newer users.

And so I’ve thought of adding little images with the corresponding letters on your keyboard, but my problem is I have no idea how to start working on it. I’m not asking for the code, but just a bit of help directing me as to where I should start from.
example

I imagine it would involve some work with UIConstraints, but I have no idea how to align them in-line with the text if there are multiple lines in a TextLabel.
Most of my attempts have ended in failure.

I should mention that the text itself is animated, and if I were to add images I image I’d need to splice the text in two different textlabels, so on and so forth.

If you could think of an easier solution, I’d greatly appreciate it; this issue has been plaguing me since yesterday.

1 Like
#2

There are many ways to approach this but this is the current one that I have in mind :
You can use a TextLabel obviously for the text and when you need a letter you use an ImageLabel, for the bounds and aligning them perfectly you can use the AbsolutePositions and AbosluteSizes.

to align text you can simply just use the TextBounds :

TextLabel.Position = UDim2.new(0,otherLabel.AbsolutePosition.X + otherLabel.TextBounds.X,0,TextLabel.AbsolutePosition.Y)

Currently on phone sorry if the answer is bad…

1 Like
#3

Heya, it’s no worry if you’re on phone.
Thanks for coming by and answering, I’ll be trying to do something with your suggesiton.