Speech bubble (text with rectangle as background)

[streamer]

Hi,

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? ) :-)

[lewster32]

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.

[wayfinder]

Makes me want to code a ninegrid plugin

[Krummelz]

That's a great idea! I've been thinking of doing the same thing, for the sake of making UI elements that scale dynamically with their content.

[eguneys]

lewster32 , that would be an overkill, why don't you just use a background and scale it for the text size.

[crysfel]

@Eguneys, because that will distort the image, if you want to keep the same pixel size you need to do it in that way. This remains me the old days before CSS3 rounded corners exists

[lewster32]

I implemented this for a project at work, I can share the code next week if needed. I'll clean it up and do a jsfiddle version. It's basically a hacky 9-slice routine - you can use cacheAsBitmap to reduce the draw calls when you've generated it too.

[Brad P. Taylor]

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

 

http://goo.gl/qogf2t

 

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.

 

-bpt

[streamer]

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/

speechbubble-text.zip

[eguneys]

streamer, nice work, the edges needs improvement, rounded courners would be sweet. like the lewster32 example. I would definitely use it then. also group the speech sprites to a standalone class. You can even add popup animation.

[lewster32]

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.

[wayfinder]

damn son, your fiddles are better than most people's games

[streamer]

Wow, man... You are now my personal phaser superhero... :-) 

Thanks for example!

[lewster32]

Realised I'd not made the assets readily available for the speech bubble, so updated the fiddle with img tag versions you can right click and download to use in your own stuff. Saves filling your JS with base64 encoded garbage

[BrenX]

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,

 

 

Brenten

[sbonavida]

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);