One popular request for Construct has been to be able to use formatted text (different text styles in the same object). As part of the new Construct 3 runtime, we've created a new custom-written BBcode parser and text layout engine. The same engine is used for both Text and SpriteFont objects, bringing new text formatting features to both. Let's look at what's new.
Text object formatting
BBCode is a very simple form of markup, often used in forums on the web. It typically uses tags in square brackets, such as "[b]hello[/b]" producing the bold text "hello". In the new Construct 3 runtime the Text object has an option to enable using this kind of BBCode. It allows for quite a range of styles, as shown below — all the text in the image is contained within a single Text object, using BBcode to change the styles.
The formatting options include:
- Bold, italic, underline and strikethrough
- Changing the font, including using any web font imported to the project, and changing the font size
- Adding a solid fill background color, changing the text color, and setting the text opacity
- Stroke (outline) text with a custom border color and either transparent fill or a custom color
- Offsetting the text display position, or hiding sections of text — useful for creating animated effects
Of course, these styles can all be combined as well, producing creative results.
The styles can be altered every tick with various formula, creating fun animated effects. For example by adjusting the Y offset of each character based on a calculation with sine, you can create a waving text effect as shown below.
https://www.scirra.com/images/blogstuff/c3runtime/animated-text.mp4
By adding and removing a hidden text style across some text, you can create a flashing text animation too:
https://www.scirra.com/images/blogstuff/c3runtime/text-flashing.mp4
Or using random offsets you can make a juddering text effect:
https://www.scirra.com/images/blogstuff/c3runtime/text-jumping.mp4
SpriteFont formatting
Similarly, there is also new BBcode formatting support in the SpriteFont plugin. An example of the possible styling is shown below.
SpriteFonts render differently to Text objects — SpriteFonts render bitmaps but Text is essentially a vector format. Consequently some of the formatting options are different, but still include:
- Changing the horizontal and vertical scale
- Adding a solid fill background color, changing the text color, and setting the text opacity
- Offsetting the text display position, or hiding sections of text
The color option works as a tint for the drawn character image. Therefore if your spritefont text is drawn in white, you can set it to any color.
As before these styles can all be combined, and by changing the styles over time you can create animated effects with SpriteFonts too — like a waving effect:
https://www.scirra.com/images/blogstuff/c3runtime/spritefont-wavy.mp4
...flashing portions of text:
https://www.scirra.com/images/blogstuff/c3runtime/spritefont-flashing.mp4
...juddering effects:
https://www.scirra.com/images/blogstuff/c3runtime/spritefont-jumping.mp4
...crazy color effects:
https://www.scirra.com/images/blogstuff/c3runtime/rainbow-text.mp4
...and anything else you can think of!
We're also looking in to the ability to switch to a different SpriteFont object's style for a run of text, effectively allowing you to change the typeface inside SpriteFont objects too.
In-game rendering
It's worth noting that these new features are not based on HTML or CSS. They involve rendering text directly in to the canvas using a custom-written text engine. This is an advantage because HTML elements can only "float" over the canvas — as form control objects like Button do. This means you can't make other objects appear on top of HTML elements, nor can you apply WebGL shader effects to them, because they're not really drawn in to the canvas. Since these new text and SpriteFont features are really drawn in to the canvas, you can still layer other objects on top, apply WebGL shader effects to them, and so on. In other words, they integrate seamlessly with the rest of your game. It also has less overhead, as it's a pure JavaScript and Canvas implementation, avoiding the overhead of browser DOM elements, CSS styling, and layout — especially significant for animated effects.
Typewriter text
One of the popular questions about text is how to create a "typewriter" effect. This is where the text starts empty and gradually writes out some text over time, as if it was being typed out. It's easy to do this in events, but once you get BBcode involved it's a little more tricky. For example if you have "[color=#ff0000]red text[/color]", you don't want it to show "[color=#ff" as one of the intermediate results — it will show the tag as plaintext until it reaches the "]" and then suddenly disappears and applies formatting.
To solve this we've added new Typewriter text actions to the Text and SpriteFont objects. These handle the effect automatically, including taking in to account formatting, so that it never incorrectly shows partial BBcode tags while writing out text. It also makes it that much easier to make a typewriter text effect, since there's now a dedicated action for it. Here's how it looks.
Update March 15th 2018: by popular demand we've improved handling of the word wrap, and the video below has been updated to show the new result.
https://www.scirra.com/images/blogstuff/c3runtime/typewriter-text-new.mp4
Conclusion
These features represent a huge upgrade in the capabilities of text in your games. We think this will open up some really cool creative possibilities. It will be enormously useful to text-heavy games like RPGs, quizzes, and text adventures, as well as for other purposes like learning materials or interactive guides for schools or businesses. Stay tuned for more updates — you'll be able to try it out yourself soon!
Catch-up
Missed a previous post? Here's the blog series so far:
- Announcing the Construct 3 runtime