How to make chat bubbles like Imessage

Development Programming & Scripting Blueprint
, , , , ,
1

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
2

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
3

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

4

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

5

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

image
image712×728 81.3 KB

6

Hi! Seems like this solution is not working in current versions (at least in 5.3), so here is another solution:

  1. Create a widget, delete canvas.
  2. Add Size Box, and put Overlay inside.
  3. Add Border (or Image) under Overlay, set the Draw Method to Box. You can also do a nine-slice here.
  4. And Text Box under Overlay and put your text there.
  5. When you add this widget to the parent widget (like HUD), set “Size to Content” to Enabled.

:victory_hand: