Drawing Text

Drawing text is not that different from drawing sprites. However, since text can be understood as a group of sprites, where each character is a sprite, cerlib’s API provides you some extra functionality. In this chapter, we’ll go through all functions one by one.

First, you need a font. cerlib comes with an embedded font that is directly available via the static Font::builtIn() method. Alternatively, you may add a cer::Font variable to your game and load it in load_content using the Font constructor. Because it would not make much of a difference in the following examples, you can stick to the built-in font.

The central function is cer::drawString(), which takes a Font, a size and the text to draw as a standard string. The string is expected to be UTF-8-encoded.

In your game’s draw method, simply call drawString() using the font object and give it some text:

const auto font = Font::builtIn();

// Draw some text at position {100, 100}
drawString("Hello World!", font, /*fontSize: */ 48, {100, 100});

// Draw another text at position {100, 200}, and with color red
drawString("Hello World 2!", font, /*fontSize: */ 32, {100, 200}, yellow);

This will draw some text as expected:

Text Decorations#

For cases when text should be highlighted or otherwise hint at certain information, drawString() provides a way to decorate text, namely using the cer::TextDecoration variant.

We can for example draw strikethrough or underlined text using the respective cer::TextStrikethrough and cer::TextUnderline types. Let’s see how that would look:

// Draw text with a strikethrough line
drawString(text, font, 48, {100, 100}, white, TextStrikethrough{});

// Draw text with a strikethrough line,
// but specify a custom color and thickness
drawString(text, font, 48, {400, 100}, white,
           TextStrikethrough {
               .color = red,
               .thickness = 10.0f,
           });

// Same for an underline.
drawString(text, font, 48, {100, 200}, yellow,
                TextUnderline{});

drawString(text, font, 48, {400, 200}, yellow,
                TextUnderline {
                    .color = red,
                    .thickness = 10.0f,
                });

The result:

Text Samplers#

This assumes that you have read Samplers.

It’s important to note that the active sampler (set by cer::setSampler()) also affects how text is drawn. This is by design, since it allows you to draw pixelated fonts easily. Just set a nearest-neighbor sampler (i.e. cer::pointClamp) and then draw your text as usual.

// Disable interpolation.
setSampler(pointClamp);
drawString(...);
drawString(...);
// ...

// Enable interpolation again.
setSampler(linearRepeat);
// ...