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:

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

#include <iostream>

SDL_Surface* RenderTextWithOutline(
  TTF_Font* font, const char* text,
  SDL_Color textColor, SDL_Color outlineColor,
  int outlineWidth) {
  // Render the text in the outline color
  SDL_Surface* outlineSurface =
    TTF_RenderText_Blended(font, text,
                           outlineColor);
  if (!outlineSurface) {
    std::cout << "Failed to render outline: " <<
      TTF_GetError() << '\n';
    return nullptr;
  }

  // Create a surface for the final result
  SDL_Surface* resultSurface =
    SDL_CreateRGBSurfaceWithFormat(
      0, outlineSurface->w + 2 * outlineWidth,
      outlineSurface->h + 2 * outlineWidth, 32,
      outlineSurface->format->format);

  if (!resultSurface) {
    std::cout <<
      "Failed to create result surface: " <<
      SDL_GetError() << '\n';
    SDL_FreeSurface(outlineSurface);
    return nullptr;
  }

  // Blit the outline surface in different offsets
  SDL_Rect dstRect;
  for (int y = 0; y < 2 * outlineWidth + 1; ++
       y) {
    for (int x = 0; x < 2 * outlineWidth + 1; ++
         x) {
      dstRect = {
        x, y, outlineSurface->w,
        outlineSurface->h};
      SDL_BlitSurface(outlineSurface, nullptr,
                      resultSurface, &dstRect);
    }
  }

  // Render the text in the main color
  SDL_Surface* textSurface =
    TTF_RenderText_Blended(font, text,
                           textColor);
  if (!textSurface) {
    std::cout << "Failed to render text: " <<
      TTF_GetError() << '\n';
    SDL_FreeSurface(outlineSurface);
    SDL_FreeSurface(resultSurface);
    return nullptr;
  }

  // Blit the main text surface in the center
  dstRect = {
    outlineWidth, outlineWidth, textSurface->w,
    textSurface->h};
  SDL_BlitSurface(textSurface, nullptr,
                  resultSurface, &dstRect);

  // Clean up
  SDL_FreeSurface(outlineSurface);
  SDL_FreeSurface(textSurface);

  return resultSurface;
}

int main() {
  // Initialize SDL and TTF
  SDL_Init(SDL_INIT_VIDEO);
  TTF_Init();

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

  SDL_Surface* textWithOutline =
    RenderTextWithOutline(
      font, "Hello, Outline!",
      {255, 255, 255, 255}, {0, 0, 0, 255}, 2);

  // Use textWithOutline in your rendering loop
  // ...

  SDL_FreeSurface(textWithOutline);
  TTF_CloseFont(font);
  TTF_Quit();
  SDL_Quit();

  return 0;
}

Text Shadow

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

SDL_Surface* RenderTextWithShadow(
  TTF_Font* font, const char* text,
  SDL_Color textColor, SDL_Color shadowColor,
  int offsetX, int offsetY) {
  // Render the shadow
  SDL_Surface* shadowSurface =
    TTF_RenderText_Blended(font, text,
                           shadowColor);
  if (!shadowSurface) {
    std::cout << "Failed to render shadow: " <<
      TTF_GetError() << '\n';
    return nullptr;
  }

  // Render the main text
  SDL_Surface* textSurface =
    TTF_RenderText_Blended(font, text,
                           textColor);
  if (!textSurface) {
    std::cout << "Failed to render text: " <<
      TTF_GetError() << '\n';
    SDL_FreeSurface(shadowSurface);
    return nullptr;
  }

  // Create the result surface
  SDL_Surface* resultSurface =
    SDL_CreateRGBSurfaceWithFormat(
      0, textSurface->w + abs(offsetX),
      textSurface->h + abs(offsetY), 32,
      textSurface->format->format);

  if (!resultSurface) {
    std::cout <<
      "Failed to create result surface: " <<
      SDL_GetError() << '\n';
    SDL_FreeSurface(shadowSurface);
    SDL_FreeSurface(textSurface);
    return nullptr;
  }

  // Blit the shadow
  SDL_Rect shadowRect = {
    offsetX < 0 ? 0 : offsetX,
    offsetY < 0 ? 0 : offsetY,
    shadowSurface->w, shadowSurface->h};
  SDL_BlitSurface(shadowSurface, nullptr,
                  resultSurface, &shadowRect);

  // Blit the main text
  SDL_Rect textRect = {
    offsetX < 0 ? -offsetX : 0,
    offsetY < 0 ? -offsetY : 0,
    textSurface->w, textSurface->h};
  SDL_BlitSurface(textSurface, nullptr,
                  resultSurface, &textRect);

  // Clean up
  SDL_FreeSurface(shadowSurface);
  SDL_FreeSurface(textSurface);

  return resultSurface;
}

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!

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