[Solved] Dynamic speech bubbles

Hello. I’m trying to do a speech bubble system, working with dialogue from Yarn. I use a 9-patch speech bubble shape with a text object on top. In events, I position these objects based on the current speaker’s X and Y position. It works, but…

I want the speech bubble (the 9-patch object) to change height, based on how many lines of text its receiving (not Yarn lines, but how many lines are produced by the text wrapping in the text object. I set its width in the Scene Editor). If I set the height of the 9-patch object to the height of the text object it doesn’t work. In fact, the 9-patch object seems to change to an arbitrary height, unrelated to the text put in it or its height on the scene. I think that maybe GDevelop cannot determine the height of the text object as it’s populated by Yarn, either by pixels or by the number of lines of text that are created. Perhaps targeting the height of a text object that is receiving text dynamically is not workable generally.

height

My question: is there a way to reliably target the height of a text object so I can use it to affect the size of other objects? The text object is receiving text from Yarn and frequently changing height. Thank you.

I tried the following: string length of the dialogue line from Yarn, divided by maximum characters on a line (12 in the text object in my scene), times line height (24 pixels), and add a little extra for padding (30 pixels). It works, but not well enough.

Calculations that produce a suitable 9-patch height for 8 lines of text doesn’t work if it ends up being 9 lines because of a word wrapping at the last sentence. I have no idea how I could anticipate word wrap possibilities in a calculation, other than increasing my bottom padding for a worst case scenario, but that will often make the speech bubble too tall. May as well have a fixed size speech bubble in that case.

Any ideas are very welcome.

You seem to be making this quite a bit harder on yourself because you want a dynamic text string size.

Keep in mind, if you’re not setting a custom size in the scene editor for the text object, or not enabling wrapping for a text object, it will always be the size of 1 line, and just expand horizontally. Also keep in mind that most fonts have a decent amount of transparent space above the characters, so the height isn’t necessarily going to match the amount of visual space needed.

Enabling wrapping and setting the maximum wrapping width works fine for me when using yarn.

Here’s a real rough/quick mockup using one of the dialogue examples in the main example list:

I added one of the panel sprites/9-patches from the asset store, and used it as the background.

https://game-previews.gdevelop-app.com/1658862419499-992047/index.html

1 Like

Thank you for taking the time to put that together. I did try setting a custom size for the text object in the Scene Editor, but that didn’t work out, for whatever reason. I have a graphic design and typography background, so working with fonts and allowing for things like leading etc. isn’t an issue. I guess I was hoping for a nice easy pixel height of a text object when it’s populated with text, but I needed to think differently. I’m still very new to GDevelop and have got myself rather stuck in a Yarn hole. It’s been great in some ways because I was able to learn Yarn and dialogue things well enough to make tutorials for others, but it has halted my broader learning of GDevelop. I might need to get back to actually making my game instead of working out new ways of bending Yarn to my will :slight_smile:

Before I do, I’ll try your approach. I wasn’t familiar with actions that could set wrapping behaviour. The example you linked to is the sort of thing I want.

You are not the first person to suggest that I make things harder for myself. I seem to remember teachers saying that, 100 years ago or so, and many since :slight_smile:

1 Like

I think the biggest thing will be figuring out what height looks “good”. In my example I’m doing super rough “add this many pixels to the height of the text object” for the border. But you could even do something like TextObject.Height()*1.5 if that ends up looking good.

There’s also an extension you can look at, “Chatbubble” which just got added to the Community Extension list yesterday or the day before, it might do a lot of this math for you.

1 Like

That extension sounds good, thank you. I’m in two minds about which is more appealing: speech bubbles or the classic box at the bottom of the screen… but I am stubborn enough that I wanted to work out how to do speech bubbles even if I don’t use them :smiley: Also: apologies for my life story in my previous post!

I still can’t get the 9-patch object to pay any attention to the size of the text object, even using your approach (please see below).

speechbubble

I’m not sure how Yarn commands work, but normally you are going to want your resizing events to be constant/every frame. I would recommend moving them to a separate event wholly outside of any other conditions, so they’re always setting their height/width. (Probably the positioning too)

1 Like

I’m using a Yarn command as a trigger to tell GDevelop who is speaking, so I can position the speech bubble above the relevant character. A Yarn variable works too. My original events works how I wanted, but the height of the speech bubble was never quite right and that’s what sparked off my original post. Thanks for spending time helping me. I will continue to experiment.

I would recommend testing if it is the yarn command that’s breaking it for you. Remove the command condition, leave the actions, and see if it adjusts in size correctly.

1 Like

That worked, thank you :+1:. I need to work out a way of having the bubble float above the relevant person’s head without a Yarn trigger. I won’t burden you with that one :smiley: Thanks again.

Edit: It works with a Yarn boolean variable as a trigger (though, oddly, doesn’t work with number or string variable). Yes!