This blog post is licensed Creative Common Attribution Required v4.0.
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.
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:
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.
By adding and removing a hidden text style across some text, you can create a flashing text animation too:
Or using random offsets you can make a juddering text effect:
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:
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:
...flashing portions of text:
...crazy color effects:
...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.
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.
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!
Missed a previous post? Here's the blog series so far:
Get emailed when there are new posts!
Where is the typewriter text event? I do not see it in the list of text object type actions.
You must first switch your project to the new C3 runtime. See this blog: construct.net/blogs/construct-official-blog-1/c3-runtime-alpha-now-available-950
How this new text object handles emoji's ?
great. Could we do the crazy color (rainbow) effect with BBcode?
Yes, look at this text effects example.
I tried on a text objet and it does not work.
Does it only work on Spritefont?
Thanks a lot :)
Can't wait to get home and test it :)
Hi Ashley, Is there a plan to enable BBcodes in the "Text Input" plugin?
How can we make juddering effect while typing?
Is it at all possible for this to be introduced into Construct 2, or is it incompatible with the Construct 2 runtime?
I'm afraid this will not be implemented for C2 or the C2 runtime in C3. It depends on the fact the entire C3 runtime has been fundamentally rewritten.
Hello Ashley, I can not figure out how to enable BBCode in the Text object. There is supposed to be an option to enable it as you wrote in the thread. I am unable to find that option.