Jump to content

Speech bubble (text with rectangle as background)


Recommended Posts


im newbie in Phaser developement and I'm trying to create "speech bubble with text"...


It should looks like this:




I dont know how to create rectangle below text which will cover all text area. In documentation there are only text color and no option to set background of text.

Any suggestions? (or example code? ) :-)

Link to comment
Share on other sites

The way I'd do it is to split the bubble background image up into 9 slices (4 corners, 4 edges and the middle) + the tail, like the attached image. Then set your text, measure how wide and tall it is, and assemble the sliced pieces together using TileSprites for the edges so they repeat along. There's no magic involved, just careful positioning and getting your maths right.


Link to comment
Share on other sites

I wrote a Phaser.Group based Scale9 (written in TypeScript). It supports size snapping, simple texture stretching or tiling for the stretchy parts,




Known issues, when rotating and using alpha to fade there are cases where the texture sampling leaves a very small gap, however if you don't need fading I think this might work for you.



Link to comment
Share on other sites

I also work on this but i'm still newbie but it somehow works... it's simple version of popup. Download attachment and give me some feedback please.


Also I will appreciate if someone share his own code for this, it's not easy to create this UI element for me. :-)

You can try it here: http://phaser.peteroravec.sk/speechbubble-text/



Link to comment
Share on other sites

Here's my routine using your original bubble graphic: http://jsfiddle.net/lewster32/81pzgs4z/


It will place the 'tail' of the object at the specified x and y position, and wrap the text if it would end up wider than the specified width. It's pretty simple to modify how you want though.

Link to comment
Share on other sites

  • 6 months later...

Thanks a lot for providing this example. Very elegant solution, IMHO.


I was wondering if anybody else is seeing the ~1px tearing between the text and border on Chrome or the weird lines in IE...


(This might be a side-effect of using JSFiddle/inlined base-64 encoded assets, for all I know.)


If you are seeing this, does anyone have a solution to fixing the rendering issues?


Thanks again,




Link to comment
Share on other sites

  • 1 year later...

At first, you are great. This is the ultimate bubble speech. Thank you so much.

I have a little question. If I want to hid the bubble and I want to show another bubble (the first bubble is hidden and I only show the second bubble).

Could I hid the first bubble? How can I do it?

Thank you.

Fo example: (sorry, I am a beginner con prototype)
        var bub = new SpeechBubble(game, 500, 200, 256, "Hello World!!");
        var bubble = game.world.add(bub);
        bub.visible = false; //to hid...
        bub.dispose(); //or to destroy.
        var bub2 = new SpeechBubble(game, 500, 200, 256, "Nice to see you!");
        var bubble2 = game.world.add(bub);

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...