All examples · Text and UI · As Markdown, for AIs

Text wrap

What this example shows

style.maxWidth is how wide a line can be, in pixels, before its words go on to the next. Lines break at spaces, and a word wider than the whole box breaks between two letters. A \n still starts a line wherever it is. The engine breaks the lines again whenever the text, its size or the width changes, so a dialogue box never needs line breaks put in by hand.

The block is as wide as maxWidth, so align and anchor place the lines in the box rather than around the words. The sign changes its width every frame, and measureText(words) asks the text itself how it is set now, with its own font and style: the size of its block, to fit the sign to it, and its lines, to count them. The same works with a bitmap font, a vector one and drawText.

The dialogue is written letter by letter. Shown as they come, a word would start at the end of a line and jump down once it no longer fit. So each page is first broken with measureText(page, style), given the words and the same style the dialogue box has, which gives the lines they will be set in before they are shown, and the letters shown are the first ones of those lines. Click, or press Space, to finish a page or go on to the next.

Starting
Starting
—