How to make chat bubbles like Imessage

How would I make a chat bubble like Imessages uses. I have the round image effect, but I can’t figure out how to get the text to auto-fit inside to bubble. If anyone could help me out that would be great(Anything better than getting the pixel scale of each character and doing some math to auto fit)!

3 Likes

Small Pseudo Manual:

You create a Widget. Delete the standard canvas, since you won’t need it for a Text Bubble.

in the upper right corner of the Viewport, you’ll find the desired size as small Overlay Dropdown. This, right now, should be “Screen”. Changed it to “Desired Size”

Add a Border and set its Brush to be your Beveled Image of your bubble.
In the Brush Settings, set the draw Method to “Box”. Now you can enter the Margin of the Image. With that, you define the slicing and stretching parts of the Bubble.
Make sure, if possible, to tick “Size to Content” at the Top of the Border Details.

Now put a Text Object inside the Border. Setup the Appearance and Style.
Now, scroll a bit down and you’ll find the Auto Wrap Option. Tick ist to true and set the Wrap at Float to your needs of a max Bubble Size.
The Text should be present as a variable, too.

now, when you give this Widget a new Text, it automatically wraps its content automatically, and the bubble stretches to fit the Text inside it.

2 Likes

Thank you so much for your help!! Worked perfectly!

Does this method still work? As I tried, I failed to find out Size to content section.

Is there a video for this? I can’t seem to duplicate.

There’s no slicing/stretching available
There’s no Size to Content available

What little I was able to duplicate