twix/raylib
1
0
Fork 0
mirror of https://github.com/raysan5/raylib.git synced 2025-12-25 10:22:33 -05:00
Code Issues Packages Projects Releases Wiki Activity

Updated Working for Web (HTML5) (markdown)

Ray
2019-06-05 17:48:50 +02:00
parent ebef06268c
commit cc2c63d51b
1 changed files with 20 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
Working-for-Web-(HTML5).md

@ -14,7 +14,9 @@ _NOTE: If a newer precompiled SDK version (newer than sdk-1.38.31-64bit) is avai
### Compiling raylib source code
Before compiling your game, raylib library must be recompiled for HTML5. By default, when you install raylib using the *Windows Installer*, an already pre-compiled raylib HTML5 version is found in `C:\raylib\raylib\release\libs\html5\libraylib.bc`. Notepad++ uses this version but you can regenerate it just recompiling raylib for web (in case you have modified raylib sources or you updated it wit latesth GitHub sources).
Before compiling your game, raylib library must be recompiled for HTML5, generating `libraylib.bc`.
Before compiling raylib, make sure all paths to emscripten sdk path (`EMSDK_PATH`) and version (`EMSCRIPTEN_VERSION`) are correctly configured on `C:/raylib/raylib/src/Makefile`, you must verify [this lines](https://github.com/raysan5/raylib/blob/master/src/Makefile#L149).
To compile raylib source code, just execute Notepad++ script: `raylib_makefile` and `SET PLATFORM=PLATFORM_WEB`. That script just calls the following `make` line (in case you're are working on a custom environment):
@ -26,19 +28,31 @@ Generated `libraylib.bc` is placed in `raylib\src\libraylib.bc` directory.
To compile your game for web, code must be slightly adapted. Basically it implies moving all your Update and Draw code to an external function. The reason for that is the way web games work within a browser; the browser needs to control the game loop and just allow and Update-Draw in a time-frame and lock the execution when the tab is not active or browser is minimized. More details [here](https://kripken.github.io/emscripten-site/docs/porting/emscripten-runtime-environment.html#browser-main-loop)
To see how code should be refactored to fit compilation for web, check [core_basic_window_web.c](https://github.com/raysan5/raylib/blob/master/examples/core/core_basic_window_web.c) example.
To see how code should be refactored for web, check [core_basic_window_web.c](https://github.com/raysan5/raylib/blob/master/examples/core/core_basic_window_web.c) example. For more complex examples, just check `raylib/templates` directory, all templates are ready to work on any platform with no change required.
*NOTE: We are looking for some mechanism to avoid that code refactoring! [Here](https://kripken.github.io/emscripten-site/docs/porting/emterpreter.html#emterpreter-async-run-synchronous-code) it is a possible solution, despite a hit on performance.*
*NOTE: One mechanism to avoid that code refactoring is using Emterpreter ([more info here](https://kripken.github.io/emscripten-site/docs/porting/emterpreter.html#emterpreter-async-run-synchronous-code)), but there is an important hit on performance.*
### Compiling raylib game
Just open your raylib web-prepared game code and run the Notepad++ script named `raylib_makefile`, set `PLATFORM=PLATFORM_WEB`.
To compile your raylib web-prepared game code for web, it's recommended you use an already setup Makefile ready for that, `raylib/templates/simple_game/Makefile` could be used, just copy it to your code folder.
Note that script defines some paths to the required tools, check you are using the correct versions of those tools!
Before compiling the game, review the copied `Makefile` to make sure emscripten sdk path (`EMSDK_PATH`) and version (`EMSCRIPTEN_VERSION`) are correctly set. Also review the following `Makefile` variables: `PROJECT_NAME`, `RAYLIB_PATH`, `PROJECT_SOURCE_FILES`.
Note also that required resources should be embedded into a .data file using the compiler parameter `--preload-file filename.ext` or `--preload-file folder`.
Once `Makefile` has been reviewed, to compile raylib source code, just execute Notepad++ script: `raylib_makefile` and `SET PLATFORM=PLATFORM_WEB`. That script just calls the following `make` line (in case you're are working on a custom environment):
make PLATFORM=PLATFORM_WEB -B
Note also that required resources should be embedded into a .data file using the compiler parameter `--preload-file filename.ext` or `--preload-file folder` (already configured in the `Makefile`.
Compilation will generate several files, usually:
```
project_name.html > HTML5 game shell to execute the game
project_name.js > Base code to load WebAssembly program
project_name.wasm > WebAssembly program
project_name.data > Required resources package
```
### Testing raylib game
To test the newly created `.html` file (and its .js and .data), just create a localhost (you can do it using python) and open the web in the browser (required google chrome).
Create localhost using python, make sure you set the local host from the same folder where your .html file is placed or keep in mind that the directory from which you set the localhost is the base directory for browser access: