Compiling hello_sdl.html

Finally, we will compile and test our WebAssembly module using the Emscripten emcc compiler:

emcc hello_sdl.c --emrun --preload-file font -s USE_SDL=2 -s USE_SDL_TTF=2 -o hello_sdl.html

There are a few new flags we are using in this call to emcc, and we have temporarily left out the --shell-file new_shell.html flag that is used to generate a customized version of the template. If you would like to continue using emrun to test the app, you must include the --emrun flag, to run with the emrun command. If you are using a WebServer, such as Node.js, to serve the app, you may omit the --emrun flag from this point forward. If you like using emrun, continue to compile with that flag.

We have added the --preload-file font flag to allow us to create a virtual filesystem contained in the hello_sdl.data file. This file holds our TrueType font. The application uses the core SDL library and the additional SDL TrueType font module, so we have included the following flag, -s USE_SDL=2 -s USE_SDL_TTF=2, to allow calls to SDL and SDL_ttf. If everything went well in your compile, this is what the new hello_sdl.html file will look like when you bring it up in a browser:

In the next section, we will learn how to use SDL to render a sprite to the HTML5 canvas.