How to draw emoji with full color using SDL2_ttf?

Hi guys,

Is there a way to draw an emoji with full color like the ones here? With the code below, I could only draw the emoji in one color:

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

int main()
{
	SDL_Init(SDL_INIT_EVERYTHING);
	TTF_Init();

	SDL_Window * window = SDL_CreateWindow("SDL2_ttf Emoji", SDL_WINDOWPOS_UNDEFINED, SDL_WINDOWPOS_UNDEFINED, 800, 600, SDL_WINDOW_SHOWN);
	SDL_Surface *surface = SDL_GetWindowSurface(window);
	TTF_Font *font = TTF_OpenFont("NotoColorEmoji.ttf", 72);
	SDL_Color color = { 255, 255, 255, 255 };
	SDL_Surface *text = TTF_RenderUTF8_Blended(font, "😄", color);
	SDL_BlitSurface(text, NULL, surface, NULL);

	SDL_bool running = SDL_TRUE;
	while (running) {
		SDL_Event event;

		while (SDL_PollEvent(&event)) {
			switch (event.type) {
			case SDL_QUIT:
				running = SDL_FALSE;
				break;
			}
		}

		SDL_UpdateWindowSurface(window);
		SDL_Delay(16);
	}
}

Output:

1 Like

You will need to build a color palette and assign it to the surface. Would be nice if SDL_ttf could do this for you, but I’m not sure how it could.

Thanks @brada! Do you mean I can color it by setting the palette of one of the surfaces here? Could you show me how?

Yes, create and set a palette (or edit existing palette) for the emoji surface.

Not to be unhelpful, but at this point you should consider heading over to Stack Overflow where there is a larger group of people with more incentive to help out. It’s not just a couple lines of code.

There is also the possibility somebody has already done this or knows a better way.

I see, thanks anyway!

Indeed, SDL_ttf doesn’t look at the colors that comes with the font.

You can try to add a new function in SDL_ttf to request and build the palette for a specific emoji.
Maybe this is the good example to follow: https://www.freetype.org/freetype2/docs/reference/ft2-layer_management.html#ft_get_color_glyph_layer

Once you have the palette, you can use one of the SDL_ttf shaded functions that give you a surface with a palette format. Set your new palette to this surface and hopefully this will work.

1 Like

Thank you very much @Sylvain_Becker, I will give it a try!

Hi, I’ve updated SDL_ttf to render Emoji as colored, when using the ‘Blended’ API.

2 Likes

I look forward to this being incorporated in a release, and being available from repositories.

1 Like

A little off-topic, but will you be including a binary for Apple Silicon in the next release? I was able to build for Apple Silicon myself from source. Thanks.

I am trying to use colored Emoji’s, but I am still getting them in the same color as the rest of the text instead. Is something extra needed to be done? I am using SDL_ttf directly from GitHub - libsdl-org/SDL_ttf at 9363bd0f3b10aad5aaf73a63b9d085aba7ef7098

I am using this font: Release Roller Skating Polar Bear - Unicode 13 · eosrei/twemoji-color-font · GitHub

I also tried using in a minimal environment following the code at top of thread:

but it looks like this (using same twitter font…):
image

you need SDL_ttf sources,
and Freetype may need to be compiled with FT_CONFIG_OPTION_USE_PNG
(define it in external/freetype-2.10.4/include/freetype/config/ftoption.h )

Are there still no plans to incorporate this in an official release? Building from source isn’t a practical option for me, given the wide range of platforms I support.

Freetype may need to be compiled with FT_CONFIG_OPTION_USE_PNG

Any idea on how to turn this on in Windows?

Edit: ok, added both zlib and libpng, and turned the flag on and still nothing: GitHub - ericoporto/sdl_ttf_playground at adds-libpng-and-zlib

image

@rtrussell : sorry I don’t know when the next update will happen

@eri0o
TwitterColorEmoji-SVGinOT-ThickFallback.ttf font doesn’t seem to work for me neither.
don’t know why …

Try NotoColorEmoji.ttf, it should work with it.

Thanks.

I decided I don’t want to have zlib and libpng as a dependency so I am dropping this for now - they are too finnick to build on Windows.