Hands-On Game Development with WebAssembly

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

Compiling gameloop.html

Now that we have written our code, we can go ahead and compile our game loop app. Before you run this command, I want to reiterate that you need to have downloaded the project from GitHub (https://github.com/PacktPublishing/Hands-On-Game-Development-with-WebAssembly) because you will need the PNG files located in the /Chapter06-game-loop/sprites folder in order to build this project.

Once you have your folders set up properly, compile the app with the following command:

emcc game_loop.c -o gameloop.html --preload-file sprites -s NO_EXIT_RUNTIME=1 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS=["png"] -s EXTRA_EXPORTED_RUNTIME_METHODS="['cwrap', 'ccall']" -s USE_SDL=2

Serve the directory where you compiled it with a web server, or build and run it with emrun, and it should look like this when loaded into a web browser:

The screenshot gameloop.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.

After the app has compiled, you should be able to move the spaceship around the canvas using the arrow keys. Now that we have a basic game loop, in the next section, we will be adding some game objects to our app, making it more of a game.