Batzi Posted October 5, 2015 Share Posted October 5, 2015 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. Link to comment Share on other sites More sharing options...
DonFrag Posted October 5, 2015 Share Posted October 5, 2015 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 textand add a reference to the textObject so you can change it later example of thishttp://phaser.io/examples/v2/text/center-text-on-sprite thencharacter addchild bubblethat 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 parentso 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 Link to comment Share on other sites More sharing options...
Batzi Posted October 5, 2015 Author Share Posted October 5, 2015 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 textand add a reference to the textObject so you can change it later example of thishttp://phaser.io/examples/v2/text/center-text-on-sprite thencharacter addchild bubblethat 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 parentso 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 workSorry it was private. You can view it now. Link to comment Share on other sites More sharing options...
DonFrag Posted October 5, 2015 Share Posted October 5, 2015 ok so i still believe that addchild is the answer Link to comment Share on other sites More sharing options...
Batzi Posted October 5, 2015 Author Share Posted October 5, 2015 ok so i still believe that addchild is the answerThank you :-) I will try that and report back. Link to comment Share on other sites More sharing options...
Batzi Posted October 6, 2015 Author Share Posted October 6, 2015 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? Link to comment Share on other sites More sharing options...
jmp909 Posted October 6, 2015 Share Posted October 6, 2015 * 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 Link to comment Share on other sites More sharing options...
Batzi Posted October 6, 2015 Author Share Posted October 6, 2015 * 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#maxWidthThank you. Any reason why "wordWrapWdith" doesn't work? Link to comment Share on other sites More sharing options...
DonFrag Posted October 6, 2015 Share Posted October 6, 2015 show the code Link to comment Share on other sites More sharing options...
Batzi Posted October 6, 2015 Author Share Posted October 6, 2015 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); Link to comment Share on other sites More sharing options...
jmp909 Posted October 6, 2015 Share Posted October 6, 2015 you need to set this as welltext2.wordWrap = true Link to comment Share on other sites More sharing options...
Batzi Posted October 6, 2015 Author Share Posted October 6, 2015 you need to set this as welltext2.wordWrap = trueI did that at the beginning but I removed it because it did this (text2.wordWrapWidth had no effect whatsoever): Link to comment Share on other sites More sharing options...
jmp909 Posted October 6, 2015 Share Posted October 6, 2015 Thank you. Any reason why "wordWrapWdith" doesn't work? because you spelled it wrong? Link to comment Share on other sites More sharing options...
Recommended Posts