Hands-On Game Development with WebAssembly

上QQ阅读APP看书，第一时间看更新

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

It is important to remember that you must run WebAssembly apps using a web server, or with emrun. If you would like to run your WebAssembly app using emrun, you must compile it with the --emrun flag. The web browser requires a web server to stream the WebAssembly module. If you attempt to open an HTML page that uses WebAssembly in a browser directly from your hard drive, that WebAssembly module will not load.

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:

Figure 4.1: Hello SDL! app screenshot

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