chatbox/dialogue/bubble box above character

[Batzi]

I am working on a game where characters interact with each others. By interactions I mean at most having a conversation. Think of Pokemon on the gameboy color. No one will be shooting at anyone.

 

I am currently working on the bubble chat that appear above a character's head when an event occurs.

 

I have recorded an example and you can view it here: 

 

 

The assets (the sprites) I used in the game are all examples I found on the internet. The actual game will look different. I am just doing tests with this one.

 

As you can see, when the player collects all 5 apples, an event triggers and a character appears on the screen with a bubble over his head.

 

The way I achieved that was by loading a bubble image, adding it as a sprite next to the character's head (lots of trials and errors attempting to position it correctly). I added text inside the bubble by creating a text variable and placing it on top of the bubble sprite. Again, I had to do a lot of adjustments to make it happen.

 

Both the bubble sprite and the text are hidden until the character is standing at the right coordinates. Their visibilities are dependent on the character's Y coordinate.

 

If my character moves the bubble will remain there since it is not really connected to the character, it is just being displayed next to him.

 

How can I make the bubble be part of the character so wherever I move him it will always popup rather than adjusting it manually myself?

 

Thank you

 

PS: Please excuse my video. I didn't edit it.

[DonFrag]

well i cant see the video so im using my imagination here.

 

i think that i would something like this

 

sprite buuble chat + text inside  

that means sprite bubble addchild text

and add a reference to the textObject  so you can change it later

 

example of this

http://phaser.io/examples/v2/text/center-text-on-sprite

 

then

character addchild bubble

that way the bubble its attached to character

 

if you addchild somthing you must understand that the child object position now it is relative to his parent

so if you add the bubble to the character you must set de position of the bubble something like (0,20) or like that because the coordinates are RELATIVE to his parent.

 

hopefully this sould work

[Batzi]

well i cant see the video so im using my imagination here.

 

i think that i would something like this

 

sprite buuble chat + text inside  

that means sprite bubble addchild text

and add a reference to the textObject  so you can change it later

 

example of this

http://phaser.io/examples/v2/text/center-text-on-sprite

 

then

character addchild bubble

that way the bubble its attached to character

 

if you addchild somthing you must understand that the child object position now it is relative to his parent

so if you add the bubble to the character you must set de position of the bubble something like (0,20) or like that because the coordinates are RELATIVE to his parent.

 

hopefully this sould work

Sorry it was private. You can view it now.

[DonFrag]

ok so i still believe that addchild is the answer

[Batzi]

ok so i still believe that addchild is the answer

Thank you :-) I will try that and report back.

[Batzi]

Ok so I ended up doing something like this
 

 

However, as you can see, I have a problem with the text getting out of the container. So basically the container is the parent and the image and text are both children. How come this is happening? Isn't it suppose to stay within the limits of the container?

 

How would you fix that? Does it have to do with collision?

[jmp909]

* I suggest using bitmap font text over normal text if possible.. normal text is slow (see http://www.html5gamedevs.com/topic/9931-mobile-performance-tips-tricks/)

 

* a max width can be set, to allow your text to wrap: http://phaser.io/docs/2.3.0/PIXI.BitmapText.html#maxWidth

[Batzi]

* I suggest using bitmap font text over normal text if possible.. normal text is slow (see http://www.html5gamedevs.com/topic/9931-mobile-performance-tips-tricks/)

 

* a max width can be set, to allow your text to wrap: http://phaser.io/docs/2.3.0/PIXI.BitmapText.html#maxWidth

Thank you.

 

Any reason why "wordWrapWdith" doesn't work?

[DonFrag]

show the code 

[Batzi]

show the code 

    container = game.add.sprite(70, 580, 'container');    container.scale.setTo(0.3, 0.2);    container.alpha = 0.8;    container.visible = false;    text2 = game.add.text(500,250,'Hello my name is whatever and I want to tell you a nice beautiful story. I love you forever! <3',{      font: 'bold 90px Arial',      fill: '#FFFFFF'    });    text2.wordWrapWidth = '580'; //width of container    text2.inputEnabled = true;    text2.events.onInputDown.add(closeContainer, this);    container.addChild(text2);    chat.inputEnabled = true;    chat.events.onInputDown.add(listener, this);    enemyFace = game.add.sprite(5,0,'face');    enemyFace.scale.setTo(2,2.6);    container.addChild(enemyFace);

[jmp909]

you need to set this as well

text2.wordWrap = true

[Batzi]

 

you need to set this as well

text2.wordWrap = true

I did that at the beginning but I removed it because it did this (text2.wordWrapWidth had no effect whatsoever):

 

[jmp909]

Thank you.

 

Any reason why "wordWrapWdith" doesn't work?

 

because you spelled it wrong?