Glusoft

Display unicode text with SDL_ttf

The goal is to display unicode text with SDL_ttf, here is the end result with some japanese text:

Unicode text with SDL2

If you don’t have the SDL_ttf library you can download the library SDL_ttf on Github

The first thing to do is initialize SDL video and SDL_ttf create the window and the renderer:

SDL_Init(SDL_INIT_VIDEO);
TTF_Init();

SDL_Window *window = NULL;
SDL_Renderer *renderer = NULL;
SDL_CreateWindowAndRenderer(400, 300, 0, &window, &renderer);

To display the random text in japanese we need to use some unicode text, to store the text c++ has a special type wstring. wstring is call like that because it means wide string.

std::wstring text = L"申し訳ございませんがたくさんあります。\n忘れている世界によって忘れている世界。\n汚れのない心の永遠の日差し!\nそれぞれの祈りが受け入れられ、それぞれが辞任を望む";

I don’t really know the meaning of the text and I don’t remember where this is from !

After that we will use the japanese font: KosugiMaru-Regular.ttf
You can found the font on Google Font : Kosugi Maru

TTF_Font *kosugi = TTF_OpenFont("KosugiMaru-Regular.ttf", 16);

To render the end of the line ‘\n’ use the function TTF_RenderUNICODE_Blended_Wrapped, the wstring need to be cast into const Uint16*

SDL_Surface *sur = TTF_RenderUNICODE_Blended_Wrapped(kosugi, (const Uint16*) text.c_str(), SDL_Color{ 255, 255, 255, 255 }, 300);


To have nice Kanji I use the rendering blended : TTF_RenderUNICODE_Blended. You can use TTF_RenderUNICODE_Shaded or TTF_RenderUNICODE_Solid if you want to have a faster rendering.

We need to keep track of the size of the surface, we will use it after to render the texture.

SDL_Rect rect{ 50, 100, sur->w, sur->h };

Then we create the texture and since we don’t need the surface we can free it.

SDL_Texture *tex = SDL_CreateTextureFromSurface(renderer, sur);
SDL_FreeSurface(sur);

The event loop with the rendering is pretty standard, we catch the event if the player press the Escape key. If this is the case, we set the boolean done to true, the event loop exits. Then for the rendering we clear the renderer with the default color (black). Then copy the texture to the renderer, and finally render everything on the screen.

SDL_Event event;
bool done = false;

while (!done) {
	while (SDL_PollEvent(&event)) {
		if (event.type == SDL_KEYDOWN) {
			if (event.key.keysym.scancode == SDL_SCANCODE_ESCAPE) {
				done = 1;
			}
		}
	}

	SDL_RenderClear(renderer);
	SDL_RenderCopy(renderer, tex, NULL, &rect);
	SDL_RenderPresent(renderer);
}

Finally we free all the resources allocated and terminate the program. In this order, destroy the texture, then destroy the renderer, then the window. Then when everything closes, we free the font and terminate the program.

SDL_DestroyTexture(tex);
SDL_DestroyRenderer(renderer);
SDL_DestroyWindow(window);
TTF_CloseFont(kosugi);

return 0;

You can download the full project for windows to display unicode text with SDL_ttf: DisplayTexts.7z

You can find the repo for this project here : DisplayTexts-SDL