A few words from our developers
"Welcome to the Fusion3 development blog!

Here we will regularly post news, images, videos and other information on how Fusion3 development is coming along and share some of our thoughts behind the design process. We hope you enjoy it."

The Art of Strings

Text is everywhere. You’ll find text in almost all games and applications in some way or another, some of them using loads of it and others using a lot less. No matter what, text is one of our most powerful ways of communicating information to another person.

Another look back

In Fusion 2.5 you had a very limited set of options for displaying text if you didn’t “bake” text into your images. The good old String object could do the basics such as drawing a using a font, size and color but not much more. Alternative options such as “Text Blitter”, “Character image object” and “Graphic Font object” were created so you could use your own hand-drawn glyphs in your games with various effects.

For the windows runtime you also had the “Rich Text” object that allowed you to mark up your text like you wanted to (like in Word) but it was unfortunately too difficult to port to the other runtimes and wasn’t well suited for games.

Font sizes like “24pt” aren’t very intuitive and didn’t make much sense in a game world (as opposed to printed media). How big would the text be in the game? How big should my font size be for my text to fully cover a certain area? What about on other platforms with different fonts that are sized differently?

A technical challenge

Getting text “right” is a massive task and for Fusion 3 we wanted to get it right (or as close as humanly possible).

We wanted to make a better solution that would fit most needs.

3 added several new challenges for text drawing:

-Resolution independence (no more 1 pixel = 1 unit)
-You can see the text at any zoom level and it must look crisp and clear – even heavily magnified.
-Small fonts must not look blurry
-Embedding custom regions into the text for drawing custom objects such as symbols/emojis.

Drawing text in any kind of size and shape while looking good and being fast is hard. We decided on a hybrid solution between good old crisp text drawing in a bitmap and a more modern OpenGL accelerated approach that looks good at big magnifications.

Text is mostly vectorial in nature and vectors scale very nice to nearly all resolutions. Why not all resolutions? More on that later.

Vectors are however really difficult to render in a game in realtime without serious performance problems. We settled with a really interesting approach to single-color vector drawing in OpenGL called “Multichannel Signed Distance Field” maps. We found and modified an algorithm to suit out needs to perform really well within Fusion 3.

From the glyph we want to draw we extract the vectorial shape, draw it into a good old bitmap using a special algorithm. Exploiting several color channels to store information in we can store the glyph images at low resolution. When rendered to the screen using a special pixel shader we can get crisp and sharp shapes without the drawbacks of bad filtering or unintentionally rounded edges that normal Signed Distance Field algorithms typically suffer from. The result is low memory footprint for our drawn text while looking sharp at most resolutions.

textsize-optimized

“Excuse the bad GIF compression. Our screen recording software downsamples the images while also losing a lot of color information. It looks much more crisp and nice in real life.”

The limitations of vectors

While vector graphics are often seen as the ultimate resolution-independent image format it does have some drawbacks – mainly at small sizes.At small sizes drawing vector images often tend to become blurry and loose visual fidelity as long as you draw the text unmodified. The reason for this is that the vector edges end up at floating point coordinates and the rasterizer (the drawing system) then have to spread out the line into several pixels on screen. Lucky for us this is a solved problem in one of the most popular font loading libraries out there: FreeType2.

It specializes in drawing vectorial text at small pixel resolutions by “snapping” the vector shapes to the pixel grid – slightly modifying the overall shape of the character but in such a way that it becomes a lot more readable. We exploit this at small font sizes on the screen so you get the best of both worlds. Super crisp font rendering at small sizes while having slick looking huge fonts with no slowdown.

Attributed texts – Rich Text within any string.

So besides the (maybe) boring description of hybrid font rendering I wanted to throw in a bit of fun images for this blog post. It is nearly christmas after all.

textcolors-optimized

This image shows our Attributed String. It allows you to set any font attributes on any range within the string itself. Here I set up a little christmas’y light show by setting the font colors in a sine wave. The text can also mix fonts and sizes within the same string.

textalign-optimized

Here I made some text do a little christmas boogie. Our text alignment is not limited to “Left”, “Center”, and “Right” or “Top”, “Middle” and “Bottom”. It can be any value in between. The in-between values might not be very often used but it might prove useful in some animations.

Icons and emojis

Our underlying text layouting technique also supports custom elements inserted into the text. We still haven’t decided how to expose this functionality to you as the user yet. In Fusion 3 itself we for example use this feature to draw icons within the event editor.

texticons

The two object icons are simply images. The “SPACE” icon is actually a Nine-slice image rendered with dynamic text on top. As you can imagine this could be used for drawing emoji’s and other game-related icons directly in your games’ text. I’m imagining this could get used a lot in RPG-style dialogs.

Other types of text features

In this blog post I haven’t covered other types of text such as bitmap texts. That will be in another blog post.

See you on Jan 9th 2017 for our next Blog post, Happy holidays and have a good new year!

We’d love to hear your comments on our blog posts and on our development.Throw us a mention on Twitter or Facebook and tell us what you think!

https://twitter.com/Clickteam

https://www.facebook.com/clickteam/