How to position an UITextBubble?

[Pattentrick]

Hi there,

i have some trouble with the UITextBubble element. I want to spawn my text bubble at the position of my player. But when i do something like this:

// EntityTextOutput is my UITextBubble element
ig.game.spawnEntity( ig.EntityTextOutput, 100, 300 );

The text bubble will spawn at the top left corner of the canvas. Adding a performance: 'dynamic' to it will at least spawn it at the top left corner of the gameworld, but it's still ignoring the spawning coordinates mentioned above. Even adding a this.pos.x = 451 to the constructor does nothing.

So obviously i am doing this the wrong way. How do i position/spawn a text bubble at a desired location?

By the way, here is my constructor/class:

javascript
ig.module(
'game.entities.text-output'
)
.requires(
'plusplus.ui.ui-text-bubble',
'game.entities.text-output-content',
'plusplus.core.config'
)
.defines(function () {

var _c  = ig.CONFIG;

/**
 * Textoutput.
 *
 * @class
 * @extends ig.UITextBubble
 * @memeberof ig
 */
ig.EntityTextOutput = ig.global.EntityTextOutput = ig.UITextBubble.extend({

    cornerRadius: 10,

    triangleLength: 0,

    textSettings: {

        text: 'Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor',
        font: new ig.Font( _c.PATH_TO_MEDIA + 'command_preview_font.png' )

    }

});

});

Thanks for any help on this :-)   

[collinhover]

Three things are relevant, moveTo, fixed, and posAsPct. UI elements are by default fixed === true, which means they position themselves relative to the camera, not the game world. They are also posAsPct === true by default, which means they position themselves based on a percent of the screen size as set by posPct. If you want a UI element to follow an entity, the easiest way is to spawn it and then tell it to moveTo(playerEntity) where playerEntity is a reference to your player. Alternatively, you can set fixed to false and posAsPct to false, then just set the pos as normal.

[Pattentrick]

Thanks for explaning this to me @collinhover! I do understand UI elements much better now!

However i still have issues with the positioning. Setting fixed === false and posAsPct === false enables me to set the position via the spawnEntity-method, but altering the position after that via pos.x/pos.y is not possible.

The moveTo-method will move the text bubble to the specified entity, but only the text bubble. The text of the text bubble will stay in the upper left corner of the canvas (it gets somehow a negative positioning and is just partially visible).

Here is my modified code.

The text bubble:

    ig.EntityTextOutput = ig.global.EntityTextOutput = ig.UITextBubble.extend({

        fixed: false,

        posAsPct: false,

        cornerRadius: 10,

        triangleLength: 0,

        textSettings: {

            text: 'Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor Lorem ipsum dolor',
            font: new ig.Font( _c.PATH_TO_MEDIA + 'command_preview_font.png' )

        }

    });

Adding the text bubble to the game (right now for testing purpose in the main.js game init, it will get it's own module later):

// will spawn the text bubble at the given coordinates
this.bubble = ig.game.spawnEntity( ig.EntityTextOutput, 40, 40 );

// this won't change the position of the text bubble
this.bubble.pos.x = 200;
this.bubble.pos.y = 150;

// will move the text bubble, but not the text inside, to the player
this.bubble.moveTo( ig.game.getPlayer() );

Is there something i missed, or i did wrong? I also can upload a demo if it helps!

I could position my text bubble via the spawnEntity-method. In my case it does not need to alter it's position after it spawns, but i have the feeling that the behavior mentioned above might not be intended. And someday, in another game, i might need an text bubble that alter it's position after spawning.

So as always, any help is highly appreciated! Thanks :-)

[collinhover]

Try setting fixed and posAsPct back to true and then call moveTo. Does that move the text with it?

[Pattentrick]

Setting fixed and posAsPct back to true, and call moveTo, will display the text bubble in the upper left corner without any text inside it.

I also ran into a new problem. The dimensions of the text bubble gets messed up on browser resize, with small font sizes even on "start up". I am making a video about that problem right now, should i post it in here or start a new issue?

[collinhover]

You can post it here. Are you using the r6 release (master branch)?

[collinhover]

Also you can look through the conversation entity source code to see exactly how it handles text bubbles, but what you're describing is not normal behavior.

[Pattentrick]

Here is the video:

http://www.youtube.com/watch?v=5_mdpw229nM

The text bubble is too big/small in comparison to the text when i minimize/maximize the browser window. On my 10px font it's initially broken (first example in the video), the second example (11px font) works fine at the beginning but gets messed up after the window resize.

Yes, i switched to the current r6 release a few days before, because of all the cool new changes ;-)

Hmmm ... really strange. I just played your game BIO FLEET and there it works like a charm.

[collinhover]

Do you have a demo? I'll try to look at it after Thanksgiving =)

[Pattentrick]

Happy Thanksgiving @collinhover!

I made a demo to showcase my problems:

https://github.com/Pattentrick/text-bubble-issue

I spawn the the text bubble (i changed it to a textbox in the meantime) inside the speak-method of this file:

'game.entities.player'

The text bubble/text box is located under:

'game.entities.text-output'

Thanks for looking at this after Thanksgiving! I am sure that i just messed something up.

[Pattentrick]

Small update: The demo does not use the r6 release! I switched some files by accident. However, using the r6 release with the demo will not solve the problem. I tried that just a few minutes ago.

[collinhover]

Sorry it took me so long to look at this! This issue is caused by not pre-loading the font file, so the text box/bubble doesn't know what size the text is when it tries to resize it. For now, you can fix this one of two ways while I work on a fix to handle late loading fonts:

A. Add the font to your text output class (which extends the text box/bubble class).

ig.EntityTextOutput = ig.global.EntityTextOutput = ig.UITextBox.extend({
...
textSettings: {
    font: new ig.Font( _c.PATH_TO_MEDIA + 'my_font_file.png' )
}
...
});

B. Change the CHAT font config by modifying your user config file.

ig.CONFIG_USER = {
...
FONT: {
    CHAT_NAME: 'my_font_file.png'
}
...
};

Both methods work for me when I resize, no matter how big or small the screen is. In your video it looks like some of the text was missing when you made the window really small, and that is expected behavior. Basically, if the text is too large for the text box, the text box only displays what will fit. My suggestion is that when you call your custom speak method on the player, instead of spawning a text box, spawn a conversation and trigger it. Let the conversation handle all the specifics for you ;)

[collinhover]

I'm pushing a change to the dev branch that should fix this issue without needing to preload all images, and it fixes a nasty little bug with resizing too. Now all images loaded after the game has started will force a global resize on the next update.