How to Render Static Text with SDL2

how-to-render-static-text-with-sdl2

To render the text to the screen we still require our game loop. I’ve tried to move as much of that boilerplate / secondary code outside of the main function so you can focus on what is necessary for rendering text.

Initializing the SDL TrueType Font Library

As with all SDL libraries, we need to initialize the TTF library before we can use it, and this includes chosing the font we want to use for the text textures we want to render. For our example we’ll use the Terminal font.


init_font := SDL_TTF.Init()
assert(init_font == 0, SDL.GetErrorString())
game.font = SDL_TTF.OpenFont("Terminal.ttf", game.font_size)
assert(game.font != nil, SDL.GetErrorString())

Creating Textures from Our Chosen Text

Next we’ll create a helper function for creating our text textures:


// create textures for the given str
// optional scale param allows us to easily size the texture generated
create_text :: proc(str: cstring, scale: i32 = 1) -> Text
{
    // create surface
    surface := SDL_TTF.RenderText_Solid(game.font, str, COLOR_WHITE)
    defer SDL.FreeSurface(surface)

    // create texture to render
    texture := SDL.CreateTextureFromSurface(game.renderer, surface)

    // destination SDL.Rect
    dest_rect := SDL.Rect{}
    SDL_TTF.SizeText(game.font, str, &dest_rect.w, &dest_rect.h)

    // scale the size of the text
    dest_rect.w *= scale
    dest_rect.h *= scale

    return Text{tex = texture, dest = dest_rect}
}

With the exception of the text itself and the sizing, the code is the same for creating each texture. Using this helper function allows us to avoid typing the same code again and again.

The Text Struct

Notice the create_text function returns a new object — Text


Text :: struct
{
    tex: ^SDL.Texture,
    dest: SDL.Rect,
}

This struct holds a reference to our texture and the SDL.Rect used to render the texture to the window.

What is a texture? It is the object we render to the window in the rectangular space designated by the SDL.Rect created. It is created from the cstring text we want to display in our chosen font.

We’re creating these textures before our loop. We only need to create our texture once for a given size; there’s no need to recreate these textures on each game loop iteration.


game.texts[TextId.Title] = create_text("Testing", 3)
game.texts[TextId.SubTitle] = create_text("One, Two, Three")

TextId Enum

To help keep track of our Text objects we’re storing each in an enumerated array with easy-to-read lookup keys that are enum variants.

Enums, or Enumeration Types, define a new type with the values we choose. In our case we have a type of TypeId with possible values Title and SubTitle.

When we want to render one of our text textures, we just have to get it from our array and tell SDL where to render it:


title := game.texts[TextId.Title]
// render roughly at the center of the window
title.dest.x = (WINDOW_WIDTH / 2) - (title.dest.w / 2)
title.dest.y = (WINDOW_HEIGHT / 2) - (title.dest.h)
SDL.RenderCopy(game.renderer, title.tex, nil, &title.dest)

Changing Font Size

There are two ways we change the font size after we set it with SDL_TTF.OpenFont():

  1. Re-setting the font_size using SDL_TTF.SetFontSize() and recreating any textures.
  2. Scaling our destination SDL.Rect to which we render our texture.
Total
0
Shares
Leave a Reply

Your email address will not be published. Required fields are marked *

Previous Post
product-marketing-leadership,-career-development,-and-succeeding-at-high-growth-companies

Product marketing leadership, career development, and succeeding at high-growth companies

Next Post
slack-next-gen-platform-–-button-interactions

Slack Next-gen Platform – Button Interactions

Related Posts
arkui-x平台差异化

ArkUI-X平台差异化

跨平台使用场景是一套ArkTS代码运行在多个终端设备上,如Android、iOS、OpenHarmony(含基于OpenHarmony发行的商业版,如HarmonyOS Next)。当不同平台业务逻辑不同,或使用了不支持跨平台的API,就需要根据平台不同进行一定代码差异化适配。当前仅支持在代码运行态进行差异化,接下来详细介绍场景及如何差异化适配。 使用场景 平台差异化适用于以下两种典型场景: 1.自身业务逻辑不同平台本来就有差异; 2.在OpenHarmony上调用了不支持跨平台的API,这就需要在OpenHarmony上仍然调用对应API,其他平台通过Bridge桥接机制进行差异化处理; 判断平台类型 可以通过let osName: string = deviceInfo.osFullName;获取对应OS名字,该接口已支持跨平台,不同平台上其返回值如下: OpenHarmony上,osName等于OpenHarmony-XXX Android上,osName等于Android XXX iOS上,osName等于iOS XXX 示例如下:…
Read More