Rendering Text with SDL_ttf

Adding Outlines and Shadows to Text

Is it possible to render text with an outline or shadow in SDL2 using SDL_ttf?

3D art representing computer programming

Yes, it's possible to render text with outlines or shadows in SDL2 using SDL_ttf, although it requires a bit of extra work. SDL_ttf doesn't provide built-in functions for these effects, but we can achieve them by rendering the text multiple times and blending the results.

Let's start with creating an outline effect:

Text Outline

To create an outline, we'll render the text in the outline color multiple times, offset in different directions, and then render the main text on top. Here's an example:

1#include <SDL.h>
2#include <SDL_ttf.h>
3
4#include <iostream>
5
6SDL_Surface* RenderTextWithOutline(
7  TTF_Font* font, const char* text,
8  SDL_Color textColor, SDL_Color outlineColor,
9  int outlineWidth) {
10  // Render the text in the outline color
11  SDL_Surface* outlineSurface =
12    TTF_RenderText_Blended(font, text,
13                           outlineColor);
14  if (!outlineSurface) {
15    std::cout << "Failed to render outline: " <<
16      TTF_GetError() << '\n';
17    return nullptr;
18  }
19
20  // Create a surface for the final result
21  SDL_Surface* resultSurface =
22    SDL_CreateRGBSurfaceWithFormat(
23      0, outlineSurface->w + 2 * outlineWidth,
24      outlineSurface->h + 2 * outlineWidth, 32,
25      outlineSurface->format->format);
26
27  if (!resultSurface) {
28    std::cout <<
29      "Failed to create result surface: " <<
30      SDL_GetError() << '\n';
31    SDL_FreeSurface(outlineSurface);
32    return nullptr;
33  }
34
35  // Blit the outline surface in different offsets
36  SDL_Rect dstRect;
37  for (int y = 0; y < 2 * outlineWidth + 1; ++
38       y) {
39    for (int x = 0; x < 2 * outlineWidth + 1; ++
40         x) {
41      dstRect = {
42        x, y, outlineSurface->w,
43        outlineSurface->h};
44      SDL_BlitSurface(outlineSurface, nullptr,
45                      resultSurface, &dstRect);
46    }
47  }
48
49  // Render the text in the main color
50  SDL_Surface* textSurface =
51    TTF_RenderText_Blended(font, text,
52                           textColor);
53  if (!textSurface) {
54    std::cout << "Failed to render text: " <<
55      TTF_GetError() << '\n';
56    SDL_FreeSurface(outlineSurface);
57    SDL_FreeSurface(resultSurface);
58    return nullptr;
59  }
60
61  // Blit the main text surface in the center
62  dstRect = {
63    outlineWidth, outlineWidth, textSurface->w,
64    textSurface->h};
65  SDL_BlitSurface(textSurface, nullptr,
66                  resultSurface, &dstRect);
67
68  // Clean up
69  SDL_FreeSurface(outlineSurface);
70  SDL_FreeSurface(textSurface);
71
72  return resultSurface;
73}
74
75int main() {
76  // Initialize SDL and TTF
77  SDL_Init(SDL_INIT_VIDEO);
78  TTF_Init();
79
80  TTF_Font* font = TTF_OpenFont(
81    "path/to/font.ttf", 24);
82  if (!font) {
83    std::cout << "Failed to load font: " <<
84      TTF_GetError() << '\n';
85    return 1;
86  }
87
88  SDL_Surface* textWithOutline =
89    RenderTextWithOutline(
90      font, "Hello, Outline!",
91      {255, 255, 255, 255}, {0, 0, 0, 255}, 2);
92
93  // Use textWithOutline in your rendering loop
94  // ...
95
96  SDL_FreeSurface(textWithOutline);
97  TTF_CloseFont(font);
98  TTF_Quit();
99  SDL_Quit();
100
101  return 0;
102}

Text Shadow

For a shadow effect, we can use a similar approach, but render the shadow text once in a slightly offset position:

1SDL_Surface* RenderTextWithShadow(
2  TTF_Font* font, const char* text,
3  SDL_Color textColor, SDL_Color shadowColor,
4  int offsetX, int offsetY) {
5  // Render the shadow
6  SDL_Surface* shadowSurface =
7    TTF_RenderText_Blended(font, text,
8                           shadowColor);
9  if (!shadowSurface) {
10    std::cout << "Failed to render shadow: " <<
11      TTF_GetError() << '\n';
12    return nullptr;
13  }
14
15  // Render the main text
16  SDL_Surface* textSurface =
17    TTF_RenderText_Blended(font, text,
18                           textColor);
19  if (!textSurface) {
20    std::cout << "Failed to render text: " <<
21      TTF_GetError() << '\n';
22    SDL_FreeSurface(shadowSurface);
23    return nullptr;
24  }
25
26  // Create the result surface
27  SDL_Surface* resultSurface =
28    SDL_CreateRGBSurfaceWithFormat(
29      0, textSurface->w + abs(offsetX),
30      textSurface->h + abs(offsetY), 32,
31      textSurface->format->format);
32
33  if (!resultSurface) {
34    std::cout <<
35      "Failed to create result surface: " <<
36      SDL_GetError() << '\n';
37    SDL_FreeSurface(shadowSurface);
38    SDL_FreeSurface(textSurface);
39    return nullptr;
40  }
41
42  // Blit the shadow
43  SDL_Rect shadowRect = {
44    offsetX < 0 ? 0 : offsetX,
45    offsetY < 0 ? 0 : offsetY,
46    shadowSurface->w, shadowSurface->h};
47  SDL_BlitSurface(shadowSurface, nullptr,
48                  resultSurface, &shadowRect);
49
50  // Blit the main text
51  SDL_Rect textRect = {
52    offsetX < 0 ? -offsetX : 0,
53    offsetY < 0 ? -offsetY : 0,
54    textSurface->w, textSurface->h};
55  SDL_BlitSurface(textSurface, nullptr,
56                  resultSurface, &textRect);
57
58  // Clean up
59  SDL_FreeSurface(shadowSurface);
60  SDL_FreeSurface(textSurface);
61
62  return resultSurface;
63}

You can use these functions in your main rendering loop to create text with outlines or shadows. Remember to free the returned surfaces when you're done with them!

This Question is from the Lesson: