While working on your game, you may choose to implement additional features not covered in lectures, such as adding images, sound, etc. Below are some resources that students have used in the past!

Images

You should use the SDL_image library to add images in your game. You can see an example here.

Sound

You should use the SDL_mixer library to add sound to your game. You can see an example here.

Text

To render text, you will need to use SDL_Surface, SDL_Texture, and SDL_Renderer. The TTF library in SDL2 will also let you use a custom font for the text. You can see an example here.

Common Bugs

Make sure you don’t destroy the texture before you render it with SDL_show!

Common Issues with SDL libraries

If you are running into any issues when trying to include SDL libraries for image/text/sound/etc., make sure to follow these steps below:

1. Clone the demo repo from https://gitlab.caltech.edu/cs3-23sp/emscripten-demo and run emcc -Iinclude demo/circle.c -s USE_SDL=2 -s USE_SDL_GFX=2 -s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS='["png"]' -s USE_SDL_TTF=2 -s USE_SDL_MIXER=2

2. Remove out/sdl_wrapper.o from bin/test_suite_% in the Makefile and run make clean and then make all.

3. (Especially if it works in .c files but not in .h files) Comment out the lines for testing in the Makefile, so it only compiles the code which is necessary for the demos.

4. (“Nothing to do!” Emscripten error) If you have an assets folder, it can’t be empty, so make sure to add some kind of dummy asset in there for the time being.

5. If a function is returning NULL or otherwise throwing an error, you can call SDL_GetError which returns a human-readable char * describing your error, and print the result (documentation here: https://wiki.libsdl.org/SDL2/SDL_GetError)

If your code compiles without any errors but you are having trouble loading files, here are some suggestions:

1. Put the assets in a new folder for only them, and add --use-preload-plugins --preload-file FOLDER_NAME to the EMCC_FLAGS in the Makefile.
2. Make sure you call TTF_Init() when dealing with text.
3. Make sure you do not call sdl_clear() before your image or text has a chance to render.
4. Ensure your path to the asset folder is correct (should be something like assets/Example.ttf) – this can be detected by checking if TTF_OpenFont() returned null.
5. Make sure the text isn’t white, or cropped by a tiny render rectangle.

If you are still having issues after following all these steps, please feel free to ask your TAs!