Rendering Text with SDL_ttf

Changing Text Color

How can I change the color of the rendered text in SDL2 using SDL_ttf?

3D art representing computer programming

To change the color of rendered text in SDL2 using SDL_ttf, you can modify the SDL_Color parameter passed to the text rendering function.

Here's one way you can do it. First, create an SDL_Color structure with the desired RGB values:

1// Red color (R, G, B)
2SDL_Color textColor = {255, 0, 0};

Pass this color to the text rendering function. For example, if you're using TTF_RenderUTF8_Blended():

1SDL_Surface* textSurface {
2  TTF_RenderUTF8_Blended(
3    font,
4    "Hello, colorful world!",
5    textColor
6  )
7};

Here's a more complete example that demonstrates changing text color:

1#include <SDL.h>
2#include <SDL_ttf.h>
3
4#include <iostream>
5
6class Text {
7public:
8  Text(TTF_Font* font,
9       const std::string& content,
10       SDL_Color color)
11    : m_font(font), m_content(content),
12      m_color(color) { updateSurface(); }
13
14  void setColor(SDL_Color newColor) {
15    m_color = newColor;
16    updateSurface();
17  }
18
19  void render(SDL_Surface* destinationSurface,
20              int x, int y) {
21    if (m_surface) {
22      SDL_Rect destRect = {
23        x, y, m_surface->w, m_surface->h};
24      SDL_BlitSurface(m_surface, nullptr,
25                      destinationSurface,
26                      &destRect);
27    }
28  }
29
30  ~Text() {
31    if (m_surface) {
32      SDL_FreeSurface(m_surface);
33    }
34  }
35
36private:
37  void updateSurface() {
38    if (m_surface) {
39      SDL_FreeSurface(m_surface);
40    }
41    m_surface = TTF_RenderUTF8_Blended(
42      m_font, m_content.c_str(), m_color);
43    if (!m_surface) {
44      std::cerr << "Failed to render text: " <<
45        TTF_GetError() << '\n';
46    }
47  }
48
49  TTF_Font* m_font;
50  std::string m_content;
51  SDL_Color m_color;
52  SDL_Surface* m_surface = nullptr;
53};
54
55int main() {
56  // Initialize SDL and TTF
57  // ...
58
59  TTF_Font* font = TTF_OpenFont(
60    "path/to/font.ttf", 24);
61  if (!font) {
62    std::cerr << "Failed to load font: " <<
63      TTF_GetError() << '\n';
64    return 1;
65  }
66
67  Text redText(font, "Hello, Red!",
68               {255, 0, 0});
69  Text blueText(font, "Hello, Blue!",
70                {0, 0, 255});
71
72  // Main loop
73  // ...
74
75  // Clean up
76  TTF_CloseFont(font);
77  TTF_Quit();
78  SDL_Quit();
79
80  return 0;
81}

In this example, we create a Text class that encapsulates the text rendering process. The setColor method allows you to change the text color dynamically. Remember to call updateSurface() after changing the color to regenerate the text surface with the new color.

By adjusting the RGB values in the SDL_Color structure, you can create any color you need for your text. You can also include an alpha value for transparency by using an SDL_Color with four components: {R, G, B, A}.

This Question is from the Lesson: