Sanic Posted August 28, 2016 Share Posted August 28, 2016 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? Link to comment Share on other sites More sharing options...
symof Posted August 29, 2016 Share Posted August 29, 2016 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 Link to comment Share on other sites More sharing options...
Sanic Posted August 30, 2016 Author Share Posted August 30, 2016 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. Link to comment Share on other sites More sharing options...
Tom Atom Posted August 30, 2016 Share Posted August 30, 2016 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. Link to comment Share on other sites More sharing options...
Sanic Posted August 30, 2016 Author Share Posted August 30, 2016 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? Link to comment Share on other sites More sharing options...
Tom Atom Posted August 30, 2016 Share Posted August 30, 2016 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. drhayes 1 Link to comment Share on other sites More sharing options...
Sanic Posted August 30, 2016 Author Share Posted August 30, 2016 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. Link to comment Share on other sites More sharing options...
buzzb0x Posted December 11, 2017 Share Posted December 11, 2017 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); } Link to comment Share on other sites More sharing options...
Recommended Posts