streamer

Speech bubble (text with rectangle as background)

Recommended Posts

Hi,

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

 

It should looks like this:

 

default.gif

 

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

Share this post


Link to post
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.

post-7918-0-76256500-1409171838.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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,

 

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

Share this post


Link to post
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/

speechbubble-text.zip

post-9893-0-16043100-1409485513.png

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing   0 members

    No registered users viewing this page.