How to Port Syobon Action RC3 to the Web

This tutorial shows how to compile OpenSyobonAction (C++ SDL2 game) into WebAssembly using Emscripten on Windows.

Step 1: Install Requirements

Git for Windows
Python 3 (check "Add to PATH")
Visual Studio Build Tools with C++ and Windows SDKs

Step 2: Install Emscripten

git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
emsdk install latest
emsdk activate latest
emsdk_env.bat

Step 3: Clone the Game Source

cd %USERPROFILE%
git clone https://github.com/akemin-dayo/OpenSyobonAction.git
cd OpenSyobonAction

Step 4: Organize Game Files

Create a folder called data and move all .dat, .ogg, .png files into it.

Step 5: Build with Emscripten

emcc src/main.cpp src/*.cpp -o index.html ^
-s USE_SDL=2 ^
-s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS='["bmp", "png"]' ^
-s USE_SDL_MIXER=2 -s SDL2_MIXER_FORMATS='["ogg"]' ^
-s ALLOW_MEMORY_GROWTH=1 -s WASM=1 ^
--preload-file data ^
-I./src

Step 6: Run the Game Locally

emrun --no_browser --port 8080 .

Open your browser and go to http://localhost:8080

Step 7: Optional Hosting

Upload index.html, index.js, index.wasm, and the data folder to:

Troubleshooting

Use -s ASSERTIONS=1 for debug builds
Use browser dev tools (F12) to check console logs
Ensure correct file paths and preloaded resources

Example Folder Structure

OpenSyobonAction/
├── src/
├── data/
│   ├── stage1.dat
│   ├── bgm.ogg
│   ├── player.png
├── index.html
├── index.js
├── index.wasm

Optional: Create a Build Script

@echo off
call ..\emsdk\emsdk_env.bat
emcc src/main.cpp src/*.cpp -o index.html ^
-s USE_SDL=2 ^
-s USE_SDL_IMAGE=2 -s SDL2_IMAGE_FORMATS='["bmp", "png"]' ^
-s USE_SDL_MIXER=2 -s SDL2_MIXER_FORMATS='["ogg"]' ^
-s ALLOW_MEMORY_GROWTH=1 -s WASM=1 ^
--preload-file data ^
-I./src

Save this as build.bat and double-click it when needed.