Pre-wrap words when printing Letter-by-Letter?

[Sanic]

Hey. I've got printing text letter-by-letter working but I've run into a minor aesthetic issue. I'm printing multiple lines of text and the first few letters off words will get printed on the end of the line above where they'll end up when they're longer. Eg:

Hello Wo

--printing continues--

Hello

World

The most simple way to fix this would be to set the alpha of the unprinted text to 0 and then set each letter to 1 to print. But I can't find anything like that in Phaser. The text is being printed over a pattern so I can't just set it to a simple background color until it prints either. The other way I could do it would be to measure the length of a word and print a stack of spaces in to force it to start printing on a new line... but I'm not sure how to get this information without rendering to a hidden sprite with the same style and taking it's width... and I'm not sure how to get the space left on a line before it wraps without printing a whole word and checking if the height of the text sprite changed.

In other words, my solution's pretty hacky and not ideal.

Anyone got a better way to go about this?

[symof]

You can set the alpha of an image to 0 by using "image.alpha = 0"

You can set a count variable that increases everytime you type a letter to make sure that the lenght of the word is what you need.

This should solve your issue, however I forgot to comment them :S , All you should really be interested in tho is the _screen object as that is how text is handled for rendering.

https://jsfiddle.net/cwLfqu0x/   - as bitmapdata

https://jsfiddle.net/cwLfqu0x/2/ - as text

[Sanic]

23 hours ago, symof said:

You can set the alpha of an image to 0 by using "image.alpha = 0"

You can set a count variable that increases everytime you type a letter to make sure that the lenght of the word is what you need.

This should solve your issue, however I forgot to comment them :S , All you should really be interested in tho is the _screen object as that is how text is handled for rendering.

https://jsfiddle.net/cwLfqu0x/   - as bitmapdata

https://jsfiddle.net/cwLfqu0x/2/ - as text

Alpha works on the whole image not just the unprinted parts

How do I get the length of a character in a non mono-spaced font in Phaser? if I can get that I can put something together.

[Tom Atom]

Hi, quite a long time ago I wrote tutorial on how to wrap text: http://sbcgamesdev.blogspot.cz/2015/02/phaser-tutorial-how-to-wrap-bitmap-text.html

It wraps text before it is rendered and includes new line characters where needed. It also supports paging of text - wrapping returns array of strings, one for each page.

Maybe it will be little outdated and you will have to tweak it a little.

[Sanic]

1 hour ago, Tom Atom said:

Hi, quite a long time ago I wrote tutorial on how to wrap text: http://sbcgamesdev.blogspot.cz/2015/02/phaser-tutorial-how-to-wrap-bitmap-text.html

It wraps text before it is rendered and includes new line characters where needed. It also supports paging of text - wrapping returns array of strings, one for each page.

Maybe it will be little outdated and you will have to tweak it a little.

That looks cool, but unfortunately I'm having a slightly different issue to the one you were addressing in the tutorial...

I'm using true type fonts (for lazy translation reasons) and Phaser will wrap my text for me and respects word boundaries. The problem is that I'm printing one letter at a time and at the end of a line words will begin printing there, but then jump to the next line when they don't fit. If I can measure characters I can figure out a way around it... did you come across a way to measure character widths while writing your text wrapping script?

[Tom Atom]

Quote

... did you come across a way to measure character widths while writing your text wrapping script?

Unfortunately only if using bitmap font, but looking into Phaser's source \src\gameobjects\Text.js can you bring on right way. Look into measureLine() method. It calls measureText() method of canvas context with single character.

[Sanic]

22 minutes ago, Tom Atom said:

Unfortunately only if using bitmap font, but looking into Phaser's source \src\gameobjects\Text.js can you bring on right way. Look into measureLine() method. It calls measureText() method of canvas context with single character.

Thanks! Looking at it now... looks like what I need.

[buzzb0x]

Hello there,

 

 I know it's been one year but I just stumbled upon the same problem and found a solution built into the latest version of Phaser. Use the addColor() method. It allows setting a color to one character in the text. What's counterintuitive however, is that it will set the color for every following character, so you need to call it that way:

 

displayNextLetter() {
    this.obj.addColor('#000', this.counter);
    this.obj.addColor('#FFF', this.counter + 1);
    this.counter++;
}

displayText(obj, message, callback) {
    let timer = this.time.create(false);
    timer.start();

    obj.text = message;

    let event = timer.repeat(60, message.length, this.displayNextLetter, 
                                { obj, message, counter: 0 });

    callback && timer.onComplete.addOnce(callback, this);
}