During making our first games I was really missing ability to wrap bitmap text. So, I created helper class TextWraper, that is doing text wrap for me.
Why you need such a class? You can choose between bitmap and true type fonts. While true type fonts are more flexible, bitmap fonts are more visually appaeling. Unfortunately, Phaser's bitmapText cannot wrap text. If you tune your text screen with "hard coded" new lines and then you change few words or translate it into different language, you have to tune it again...
The final TextWrapper helper not only can wrap the text, but it also splits it into multiple pages returning string, where every single element is one page of text. You just tell to it what is requested width and height of your text area.
In example below you can see the TextWrapper class in action (press buttons to change screens). All original new line characters are preserved and other that are needed to wrap long paragraphs are added. Font for the demo was created in Littera.
Using the class is as simple as this:
As can be seen from the code, the class takes these parameters:
- text - text to wrap,
- width - width of target text area,
- height - height of target text area,
- fontName - name of the font,
- size (optional) - to calculate font scale. If omitted then scale = 1;
The TextWrapper class itself is rather long as it has to handle lot of wrapping issues. For example, it is splitting by words, but in case some word is too wide and would not fit into requested width then this word has to be split in the middle.
Whole listing for the TextWrapper class is here:
You can download the example with Typescript source files here.
By the way, in last days we released our new mobile game "Flat Jewels Match 3" for iOS and Android - give it try!