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:

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

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

SDL_Surface* textSurface {
  TTF_RenderUTF8_Blended(
    font,
    "Hello, colorful world!",
    textColor
  )
};

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

#include <SDL.h>
#include <SDL_ttf.h>

#include <iostream>

class Text {
public:
  Text(TTF_Font* font,
       const std::string& content,
       SDL_Color color)
    : m_font(font), m_content(content),
      m_color(color) { updateSurface(); }

  void setColor(SDL_Color newColor) {
    m_color = newColor;
    updateSurface();
  }

  void render(SDL_Surface* destinationSurface,
              int x, int y) {
    if (m_surface) {
      SDL_Rect destRect = {
        x, y, m_surface->w, m_surface->h};
      SDL_BlitSurface(m_surface, nullptr,
                      destinationSurface,
                      &destRect);
    }
  }

  ~Text() {
    if (m_surface) {
      SDL_FreeSurface(m_surface);
    }
  }

private:
  void updateSurface() {
    if (m_surface) {
      SDL_FreeSurface(m_surface);
    }
    m_surface = TTF_RenderUTF8_Blended(
      m_font, m_content.c_str(), m_color);
    if (!m_surface) {
      std::cerr << "Failed to render text: " <<
        TTF_GetError() << '\n';
    }
  }

  TTF_Font* m_font;
  std::string m_content;
  SDL_Color m_color;
  SDL_Surface* m_surface = nullptr;
};

int main() {
  // Initialize SDL and TTF
  // ...

  TTF_Font* font = TTF_OpenFont(
    "path/to/font.ttf", 24);
  if (!font) {
    std::cerr << "Failed to load font: " <<
      TTF_GetError() << '\n';
    return 1;
  }

  Text redText(font, "Hello, Red!",
               {255, 0, 0});
  Text blueText(font, "Hello, Blue!",
                {0, 0, 255});

  // Main loop
  // ...

  // Clean up
  TTF_CloseFont(font);
  TTF_Quit();
  SDL_Quit();

  return 0;
}

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}.

Answers to questions are automatically generated and may not have been reviewed.

sdl2-promo.jpg
Part of the course:

Game Dev with SDL2

Learn C++ and SDL development by creating hands on, practical projects inspired by classic retro games

Free, unlimited access

This course includes:

  • 53 Lessons
  • 100+ Code Samples
  • 91% Positive Reviews
  • Regularly Updated
  • Help and FAQ
Free, Unlimited Access

Professional C++

Comprehensive course covering advanced concepts, and how to use them on large-scale projects.

Screenshot from Warhammer: Total War
Screenshot from Tomb Raider
Screenshot from Jedi: Fallen Order
Contact|Privacy Policy|Terms of Use
Copyright © 2024 - All Rights Reserved