Skip to content

Building for Web

Jump to bottom
Dacode45 edited this page Nov 24, 2020 · 3 revisions

Everything you need to do is in the showcase directory https://github.com/deltaphc/raylib-rs/tree/master/showcase

Here's how it works.

Building the Program

  1. 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

Linking Emscripten's GLFW and other quality of life options.

  1. 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/...

Create a website for your game

  1. 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 ...

Run your website

  1. Now you need a server to run index.html cd to the directory with index.html and run python -m SimpleHTTPServer

  2. If all goes well you have something like this https://dacode45.github.io/raylib-rs/

Clone this wiki locally