Recommended route for rendering text

[Robert Clawson]

Hi Everyone,

I am having some success compiling my SDL graphics based application using Emscripten but I have run into an issue. I was previously using the SDL_ttf library for rendering text. So far I haven't been able to get this to work for me with Emscripten. In my main application, the code crashes in the _SDL_SoftBlit function which is blitting my text surface to the screen. I can only suspect that the SDL_Surface created by TTF_RenderText_Solid is somehow invalid (I did try checking for NULL). I also tried to create a very simple test, and while the test does not crash, it also does not print out any text, but only a black rectangle.

To access the font file, I am using a "--preload-file blah.ttf" compile flag, and then in the code I simply do TTF_OpenFont("blah.ttf", 22);

I suspect I am doing something wrong. Does anyone have any ideas as to what I can do differently, or a simple working example I can reference?

Thanks.

[Floh]

It's not SDL, but stb_truetype.h (https://github.com/nothings/stb/blob/master/stb_truetype.h) is a header-only lib which takes care of the 'tricky stuff' (rasterize font bitmap from TTF file, and provide font metrics), it doesn't give you text rendering out-of-the box though since it's 3D API agnostic. Here's a simple NanoVG (https://github.com/memononen/nanovg) demo which uses stb_truetype.h for its text rendering:

http://floooh.github.io/oryol/TestNanoVG.html

Cheers,

-Floh.

[Shaunak Kishore]

Are you using SDL2 and SDL_ttf 2.0.*? If so, I just ran in to this problem today and was able to resolve it. You'll need to compile the library to LLVM bytecode and then link it in at the last step when linking your project. Here are the steps:

1. Download the freetype source from here: http://www.freetype.org/download.html

2. Enter the freetype directiory, then run:

        EMSCRIPTEN_JS=1 emconfigure ./configure

        emmake make

3. After this step is done, in the objs directory you should see a number of .o files. Open up one of these and verify that it starts with "BC" - that is, it's bytecode.

4. Download the SDL_ttf source from https://www.libsdl.org/projects/SDL_ttf/

5. Enter the SDL_ttf directory, then run the same commands as above to compile the project.

6. Look in the .libs folder. You should see some static and dynamic libraries, including a .o and a .a file. Verify that the last two files are bytecode files.

7. Copy all .o files from freetype and the .o and .a file from SDL_ttf into a folder within your project.

8. Edit your makefile so that when linking your project, all these bytecode files are linked as well.

That should do it! Let me know how it goes for you.