Creating appropriate sized speech bubbles

0 favourites
  • 13 posts
From the Asset Store
Customizable speech bubble dialogue system! With this dialogue system, you can finally have speech bubbles in your game!
  • Hey guys,

    The goal I am trying to achieve is work out how big the speech bubble image needs to be for the amount of text in speech.

    To help with this, I have a 9patch image that will be set for the background. I have a sprite that helps provide image points and values and outlining the max size of the speech bubble which will be 300x200 by the way (I'm doing this because different coloured 9patch speech bubbles will be used).

    1) For each little paragraph of speech I need to count the possible maximum amount of characters in one line - I believe I can do this by setting a variable that counts characters in the image points object: len(textspeechobject.text) - the problem is I need to do this for the line that has the most characters (I don't know what that's going to be because that value can be tangible). I need to do this to determine the width of the 9patch image.

    2) I also need a way to count how many lines there are to determine the height of the speech bubble 9patch image. People have said use tokencount(textspeechobject.text, newline) but it doesn't count the amount of lines properly.

    I'm a bit mind blown, can you please help me?

    Thanks!

  • You can use Tex.TextWidth and Text.TextHeight expressions to get the actual size of text.

    There is one problem with it though - you can't set text and then immediately measure its size. The system needs time to render the text, so you need to wait until the next tick.

    Insert Wait 0.01 between setting the text and changing your bubble sprite size.

  • Thanks Dop! Just so you know, I am designing this so the speech bubble appears first and then I am going to display the text using a type writer effect. This should give it plenty of time as opposed to displaying the entire text all at once. I'll give your advice a try and see how I go.

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Then you probably need to set the full text with transparent font or something like that. (Setting text invisible won't work, the system will not render it)

    Then Wait 0.01 seconds, measure the text and set the correct bubble size.

    And then erase the text and fill it in again letter by letter with the typewriter effect.

  • I can get the type writer effect really easily. I have another object called the sourcetext object (which is off screen.

    My issue is determining the size the speech bubble needs to grow to so the width and height grow at the same time and both stop growing at the same time when its at the right size.

    I can do this if I can find out the width and height it needs to grow to.

    The width and height is going to vary.

    I did try setting the values of textwidth and textheight to a variable but it just gave me zero, even if I've got like 3 lines worth of text in the sourcetext object.

  • Thanks Dop! That's got me on the right track.

    Edit: The effect I want though is for the speech bubble to grow somewhat slowly to the appropriate size of the textheight and textwidth and then display the text.

    Similiar to how it's done here:

    Subscribe to Construct videos now

    Skip to 3:24 of the video.

    Also considering that chat will take new lines when it becomes too long.

    I'm really sorry it hard for me to explain what I'm after, but I think this video does it.

    Edit: Thanks for trying to help again. I have worked it out! Once I determine the maximum size the speech will go to using the help in your example, dop, checking the textheight and textwidth, I have managed to expand the speech bubble accordingly to give it to the appropriate effect by increasing it by 0.05 of the maximum height and width, using a percentage instead so it always grows with the correct ratio.

  • Hey guys,

    Sorry to bump, but I am still having some issues getting this right and I have spent a great amount of time trying to work it out and it's driving me mad. I need some more of your awesomeness:

    In order to help me explain what I'm experiencing and what I'm after, here is an example:

    https://www.dropbox.com/s/s5zqnzf237tuz ... .capx?dl=0

    So basically what I'm after is for the speech bubble to grow (or shrink) to the appropriate size then the text to come out once it's done that. This also needs to happen after the player presses space bar to continue onto the next speech bubble.

    The text is coming out fine, the problem is the speech bubble itself. Basically it is not setting itself to the correct shape and size, and what I've noticed with the variables on the 9patch_points object where it determines the size of the text height and width of the Source_9patch_Speech does not update to the next text's height and width after the player presses spacebar for the next lot of text. The text should grow or shrink to the appropriate size depending how big the text is then it should start providing that text to the player if that makes sense. I'm also having problems with the Next_Indicator object, it seems to be completely out of place as well. It should be just short of the end of the speech bubble along the bottom and in the middle but underneath the text. For some reason I can't seem to get that right either and I can't place my finger on what it is that is making it go so wrong.

    The reason why I have everything going off 9patch_points variables is because I will be having multiple 9patch speech bubble colours for different things in my game, just so you understand.

    Your help again is much appreciate. Thank you!

  • I don't understand how everything is supposed to work in your project, not sure what some of the objects and variables are for...

    So I had to make quite a lot of changes, sorry. But I think it now works as you described.

    https://www.dropbox.com/s/r0i9ly9r4xrtu ... .capx?dl=0

  • dop2000

    Thanks for revisiting me again.

    Sorry for confusing you. It wasn't my intention. There are a lot of variables which I was going to use and then stopped using, I just hadn't deleted them yet, and some that I am using but not in this example.

    From what I can tell with your edits (and correct me if I'm wrong):

    1) I wasn't checking the speech bubble size enough. I had to use the Repeat System condition so it kept checking the size after the function was called as I was not doing that initially.

    2) You cleared the "Wizard & newline" - Is it still possible to 'continue onto the next sentence' if the same person is talking without removing the person's name and having it to write it again and only clear what they are saying?

    3) I see you're using a global variable to track what progress the player is up to, then basically when the type writing effect finishes it allows the player to press space bar, adding to the global variable for TalkProgress, then calling a function to check what the next speech needs to be, then determining the speech bubble size. I should have thought of that.

    4) Thanks for fixing the indicator, that makes perfect sense. I honestly though I was doing that but in a different way and it just wasn't working.

  • 1) I'm checking text size once but with 0.05s delay. If you remember, I mentioned earlier that you need to wait till the next tick to allow the system to render the text.

    After that I'm using Repeat 10 times to resize the bubble.

    2) I didn't understand why you had "Wizard & newline", that's why I removed it

    3) Global variable was just a quick and dirty solution.

    But yeah, you should implement something like this instead of calling a different function for every new dialog line.

    What are you going to do with the Source_text object (black text)? You are using it to measure the text, but how are you planning to hide it from the viewer?

  • 1) No, I'm checking text size once but with 0.05s delay. If you remember, I mentioned earlier that you need to wait till the next tick to allow the system to render the text.

    After that I'm using Repeat 10 times to resize the bubble.

    Yes, I remember that. I was trying to do that in my example, but what I was doing obviously wasn't working lol

    2) I didn't understand why you had "Wizard & newline", that's why I removed it

    Oh fair enough. xD

    3) Global variable was just a quick and dirty solution.

    But yeah, you should implement something like this instead of calling a different function for every new dialog line.

    Thanks, I'll keep that in mind.

    What are you going to do with the Source_text object (black text)? You are using it to measure the text, but how are you planning to hide from the viewer?

    Well, from what I've worked out, I do need to have it in the visible screen. Obviously I don't want the player to see it, so I plan to hide it behind the background image when I get one made. =]

  • You can also set its opacity to 1 or even 0.01, and move it almost off the screen, so that just a couple of pixels of it are visible.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)