-
Notifications
You must be signed in to change notification settings - Fork 131
Building for Web
Everything you need to do is in the showcase directory https://github.com/deltaphc/raylib-rs/tree/master/showcase
Here's how it works.
- You need to build the program with wasm32-unknown-emscripten. You'll need the wasm file, the js file, and the data file if you are preloading assets. https://github.com/deltaphc/raylib-rs/blob/master/showcase/Makefile
- Then in the root of your project (the same directory as the CRATE'S Cargo.toml) You need to create a .cargo/config.toml file with the following in it https://github.com/deltaphc/raylib-rs/blob/master/showcase/.cargo/config.toml
The options aren't complicated.
-s USE_GLFW=3
makes emscripten use GLFW
-s FORCE_FILESYSTEM=1
allows raylib to open texture/image/model files
-s ALLOW_MEMORY_GROWTH=1
stops raylib from crashing when you do allocations
-s ASYNCIFY
pauses the infinite game loop after a draw so that your program doesn't freeze
--preload-file
showcase/original@original
Specifies the folder with the resources to include in the binary. Surprisingly emscripten doesn't translate file system calls to fetch calls so you have to bundle the resources. This actually makes file loading super fast, but your games are going to have to be small.
showcase/original@original
means take the showcase/original
directory (relative to the folder with the WORKSPACE Cargo.toml) and map it to /original on the binary's filesystem.
Then in raylib you can call load_texture("original/...") to load showcase/original/...
- Now you need an html page https://github.com/deltaphc/raylib-rs/blob/master/docs/index.html
It doesn't have to be this complicated. You need to create a global variable called
var Module = {
...
}
that will override the native emscripten controls https://github.com/deltaphc/raylib-rs/blob/66a26e241aaeed801522ae3949c6d04bebd4c366/docs/index.html#L235
overloading canvas()
lets you pick a canvas element to render to
If you want to use any of the raylib download functions, you need to define a function called saveFileFromMEMFSTODISK
https://github.com/deltaphc/raylib-rs/blob/66a26e241aaeed801522ae3949c6d04bebd4c366/docs/index.html#L215
At the end include the
<script src="raylib-showcase.js"></script>
which was compiled by cargo build ...
-
Now you need a server to run index.html cd to the directory with index.html and run python -m SimpleHTTPServer
-
If all goes well you have something like this https://dacode45.github.io/raylib-rs/