Skip to content

Building on Emscripten

Vitaly Novichkov edited this page Jun 12, 2022 · 5 revisions

Emscripten build process is most similar to building on Linux, with one note: you should prepare a separate folder with game assets, including one or more episodes.

Before beginning work, installation of the Emscripten toolchain is required (this manual suggested: https://emscripten.org/docs/getting_started/downloads.html).

Prepare assets folder which will be packed

To make your game work, you need to prepare an assets folder that will be embedded in your final build.

  1. First off, create a directory in any convenient place.
  2. Download one of two archives with compatible assets:
  3. After unpacking an archive, make "worlds" and "battle" folders and put your episode(s) and battle levels you want to include with your build of a game. Modify the content of stuff you would customize, etc.
  4. Be sure no junk and old game saves are left in your episodes (save*.sav files). Examples of junk files were Thumbs.db and siblings, "Desktop.ini", ".DS_Store" on macOS, etc.

Building the stuff

The build of this on Linux or macOS is suggested. Windows didn't test but should be possible.

  1. Open a terminal in the root of the Emscripten toolchain, and execute the next command:

    source ./emsdk_env.sh

    If you work on Windows, the next command should work:

    emsdk_env.bat
  2. Make a new build directory (where build-cache will be generated) in any convenient place.

    • Run CMake configure through emcmake wrapper:
    emcmake cmake \
        -G Ninja \
        -S "/path/to/sources/thextech/" \
        -B "/path/to/build-thextech-emscripten" \
        -DCMAKE_BUILD_TYPE=MinSizeRel \
        -DENABLE_ANTICHEAT_TRAP=ON \
        -DENABLE_LOGGING=OFF \
        -DTHEXTECH_GAME_NAME_TITLE="Super Mario Bros. X - Web Edition" \
        -DTHEXTECH_CREDITS_URL="www.SuperMarioBrosX.org" \
        -DTHEXTECH_CREDITS_TITLE="Super Mario Bros. X" \
        -DPGE_PRELOAD_ENVIRONMENT="/path/to/your/assets/directory"
    • Where -DPGE_PRELOAD_ENVIRONMENT= - the full path to the directory that contains all game assets (In simple words, the directory of SMBX game content: graphics, music, sounds, episodes, battle levels, intro/outro levels, and no executables and DLLs).
    • Where -DENABLE_ANTICHEAT_TRAP= - enables the mechanism that will punish the player for an attempt to use the well-known "redigitiscool" cheat code in a form of a complete game save removal. It's the reference to the Heretic game where if you will use cheats from the Doom game, you'll get the opposite effect: iddqd kills the player, and idkfa removes all weapons and ammo.
    • Where -DENABLE_LOGGING=OFF - disables any sort of logging completely, suggested for the Emscripten builds with no debug consoles added to the page with the game.
    • Where -DTHEXTECH_GAME_NAME_TITLE= - the title of the game.
    • Where -DTHEXTECH_CREDITS_URL= - the homepage URL that will be shown at the credits screen.
    • Where -DTHEXTECH_CREDITS_TITLE= - the game title that appears at the credits screen.
  3. Run building

    emmake cmake --build "/path/to/build-thextech-emscripten" --target all
  4. Once the build will complete, in your build directory you will find the built project in the output/bin folder:

    • thextech.html - a working template of a page with a playable game.
    • thextech.data - a pack of assets.
    • thextech.js - a built game.
    • thextech.wasm - WebAssembly data.
  5. Don't try to open the HTML file directly in a browser: the browser may blocking of local file system requests and prevent a game run. Instead, run some tiny web server with a document root in the output/bin folder, for example, via python:

    python3 -m http.server

    And then, you can open in your browser the http://127.0.0.1:8000/thextech.html and try a game in action.