Add WebAssembly build support via Emscripten
- Cargo.toml: gate `wayland` feature behind cfg(not(wasm32)) so the dependency resolves correctly for both native and web targets - .cargo/config.toml: WASM linker flags (ASYNCIFY, GLFW, memory growth) - build_web.sh: sets required EMCC_CFLAGS, builds, copies artefacts to web/; accepts --serve to start a local HTTP server - web/index.html: minimal Emscripten shell with canvas and status line - .gitignore: exclude generated web/*.js and web/*.wasm artefacts - README: document web build prerequisites and usage ASYNCIFY lets the native while-loop main loop run unchanged in the browser. Build output: ~267 KB JS + ~458 KB WASM. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
11
.cargo/config.toml
Normal file
11
.cargo/config.toml
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
[target.wasm32-unknown-emscripten]
|
||||||
|
rustflags = [
|
||||||
|
"-C", "link-arg=-sUSE_GLFW=3",
|
||||||
|
"-C", "link-arg=-sASYNCIFY",
|
||||||
|
"-C", "link-arg=-sASYNCIFY_STACK_SIZE=1048576",
|
||||||
|
"-C", "link-arg=-sGL_ENABLE_GET_PROC_ADDRESS=1",
|
||||||
|
"-C", "link-arg=-sWASM=1",
|
||||||
|
"-C", "link-arg=-sALLOW_MEMORY_GROWTH=1",
|
||||||
|
"-C", "link-arg=-sINITIAL_MEMORY=67108864",
|
||||||
|
"-C", "link-arg=-sFULL_ES3=1",
|
||||||
|
]
|
||||||
2
.gitignore
vendored
2
.gitignore
vendored
@@ -1 +1,3 @@
|
|||||||
/target
|
/target
|
||||||
|
web/*.js
|
||||||
|
web/*.wasm
|
||||||
|
|||||||
@@ -5,8 +5,14 @@ edition = "2024"
|
|||||||
|
|
||||||
[dependencies]
|
[dependencies]
|
||||||
rand = "0.10.0"
|
rand = "0.10.0"
|
||||||
|
|
||||||
|
# wayland is a Linux display-server feature; excluded for WASM builds.
|
||||||
|
[target.'cfg(not(target_arch = "wasm32"))'.dependencies]
|
||||||
raylib = { version = "5.5.1", features = ["wayland"] }
|
raylib = { version = "5.5.1", features = ["wayland"] }
|
||||||
|
|
||||||
|
[target.'cfg(target_arch = "wasm32")'.dependencies]
|
||||||
|
raylib = { version = "5.5.1" }
|
||||||
|
|
||||||
[profile.release]
|
[profile.release]
|
||||||
opt-level = 3
|
opt-level = 3
|
||||||
lto = "thin"
|
lto = "thin"
|
||||||
|
|||||||
11
README.md
11
README.md
@@ -40,6 +40,17 @@ cargo run
|
|||||||
cargo run --release
|
cargo run --release
|
||||||
```
|
```
|
||||||
|
|
||||||
|
**Web (WebAssembly)**
|
||||||
|
|
||||||
|
Prerequisites: [Emscripten SDK](https://emscripten.org/docs/getting_started/downloads.html) activated in your shell.
|
||||||
|
|
||||||
|
```sh
|
||||||
|
./build_web.sh # produces web/*.js + web/*.wasm
|
||||||
|
./build_web.sh --serve # build then serve at http://localhost:8080
|
||||||
|
```
|
||||||
|
|
||||||
|
The web build uses ASYNCIFY so the main game loop requires no changes between native and browser targets.
|
||||||
|
|
||||||
**Tests**
|
**Tests**
|
||||||
|
|
||||||
```sh
|
```sh
|
||||||
|
|||||||
24
build_web.sh
Executable file
24
build_web.sh
Executable file
@@ -0,0 +1,24 @@
|
|||||||
|
#!/usr/bin/env bash
|
||||||
|
# Build the endless runner for WebAssembly via Emscripten.
|
||||||
|
# Usage: ./build_web.sh [--serve]
|
||||||
|
set -euo pipefail
|
||||||
|
|
||||||
|
# Flags required by raylib-sys for WASM compilation.
|
||||||
|
export EMCC_CFLAGS="-O3 -sUSE_GLFW=3 -sASSERTIONS=1 -sWASM=1 -sASYNCIFY -sGL_ENABLE_GET_PROC_ADDRESS=1"
|
||||||
|
|
||||||
|
echo "Building for wasm32-unknown-emscripten..."
|
||||||
|
cargo build --target wasm32-unknown-emscripten --release
|
||||||
|
|
||||||
|
OUT=target/wasm32-unknown-emscripten/release
|
||||||
|
|
||||||
|
echo "Copying build artefacts to web/..."
|
||||||
|
cp "$OUT/endless_runner.js" web/
|
||||||
|
cp "$OUT/endless_runner.wasm" web/
|
||||||
|
|
||||||
|
echo ""
|
||||||
|
echo "Build complete. Output in web/"
|
||||||
|
|
||||||
|
if [[ "${1-}" == "--serve" ]]; then
|
||||||
|
echo "Serving at http://localhost:8080"
|
||||||
|
python3 -m http.server 8080 --directory web
|
||||||
|
fi
|
||||||
47
web/index.html
Normal file
47
web/index.html
Normal file
@@ -0,0 +1,47 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||||
|
<title>Endless Runner</title>
|
||||||
|
<style>
|
||||||
|
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||||
|
body {
|
||||||
|
background: #16182e;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-height: 100vh;
|
||||||
|
font-family: monospace;
|
||||||
|
color: #a0b8ff;
|
||||||
|
}
|
||||||
|
#canvas {
|
||||||
|
display: block;
|
||||||
|
border: 1px solid #3050a0;
|
||||||
|
}
|
||||||
|
#status {
|
||||||
|
margin-top: 12px;
|
||||||
|
font-size: 13px;
|
||||||
|
opacity: 0.6;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<canvas id="canvas" oncontextmenu="event.preventDefault()"></canvas>
|
||||||
|
<div id="status">Loading…</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
var statusEl = document.getElementById('status');
|
||||||
|
var Module = {
|
||||||
|
canvas: document.getElementById('canvas'),
|
||||||
|
onRuntimeInitialized: function() {
|
||||||
|
statusEl.textContent = 'SPACE / W / ↑ to jump';
|
||||||
|
},
|
||||||
|
print: function(text) { console.log(text); },
|
||||||
|
printErr: function(text) { console.error(text); },
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<script src="endless_runner.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Reference in New Issue
Block a user