diff --git a/Working-for-Web-(HTML5).md b/Working-for-Web-(HTML5).md index 185a372..fb2d1b5 100644 --- a/Working-for-Web-(HTML5).md +++ b/Working-for-Web-(HTML5).md @@ -151,13 +151,19 @@ if (EMSCRIPTEN) endif () ``` -## 3. Setup raylib game for web +## 3. Build provided examples for the web -At this point, if you optionally want to compile the provided examples for the web, there is another Makefile to configure. Make sure all paths to emscripten installation (`EMSDK_PATH`) and emscripten required tools (Clang, Python, Node) are correctly configured on `raylib/examples/Makefile`, you must verify [these lines](https://github.com/raysan5/raylib/blob/master/examples/Makefile#L134). Then start up Notepad++ for raylib, open the `raylib/examples/Makefile` file, press F6, choose `raylib_makefile`, verify that in the script the web platform is set (`SET PLATFORM=PLATFORM_WEB`) and click OK to run the script. It will compile all the examples. It will compile all the examples for the web. +At this point, if you optionally want to compile the provided examples for the web, there is another Makefile to configure. Make sure all paths to emscripten installation (`EMSDK_PATH`) and emscripten required tools (Clang, Python, Node) are correctly configured on `raylib/examples/Makefile`, you must verify [these lines](https://github.com/raysan5/raylib/blob/master/examples/Makefile#L134). + +#### For Windows users : + +Start up Notepad++ for raylib, open the `raylib/examples/Makefile` file, press F6, choose `raylib_makefile`, verify that in the script the web platform is set (`SET PLATFORM=PLATFORM_WEB`) and click OK to run the script. It will compile all the examples. It will compile all the examples for the web. + +## 4. Setup raylib game for web To setup your own game to compile for web there are two possible options: -### 3.1 Avoid raylib `while(!WindowShouldClose())` loop +### 4.1 Avoid raylib `while(!WindowShouldClose())` loop Main reason to avoid the standard game `while()` loop is related to the way browsers work; the browser needs to control the executed process and just allow a single Update-Draw execution in a time-frame, so execution could be controlled and locked when required (i.e. when the tab is not active or browser is minimized). More details [here](https://emscripten.org/docs/porting/emscripten-runtime-environment.html#browser-main-loop) @@ -167,15 +173,15 @@ For a simple example on code refactoring for web, check [`core_basic_window_web. Avoiding `while()` loop will give better control of the program to the browser and it will run at full speed in the web. -### 3.2 Use standard raylib `while(!WindowShouldClose())` loop +### 4.2 Use standard raylib `while(!WindowShouldClose())` loop There could be some situations where the game `while()` loop could not be avoided and users need to deal with it. For those situations, emscripten implemented [`ASYNCIFY`](https://emscripten.org/docs/porting/asyncify.html). `ASYNCIFY` basically detect synchronous code and allows it to run asynchronous. Enabling ASYNCIFY just requires an additional compilation flag passed to `emcc` when compiling game code. raylib examples [`Makefile`](https://github.com/raysan5/raylib/blob/master/examples/Makefile) has been adapted to use [`ASYNCIFY`](https://github.com/raysan5/raylib/blob/master/examples/Makefile#L310) by default, they work great but note that there is a small performance penalization. -## 4. Compile raylib game for web +## 5. Compile raylib game for web -### 4.1 Command-line compilation +### 5.1 Command-line compilation To compile raylib game directly from the command line, those are the commands to run: @@ -214,7 +220,7 @@ Here are some of those additional flags: --profiling // Include information for code profiling ``` -### 4.2 Using Makefile +### 5.2 Using Makefile To configure all required compilation flags for web, an already setup `Makefile` is provided, you can check [raysan5/raylib-game-template](https://github.com/raysan5/raylib-game-template) for reference. @@ -237,7 +243,7 @@ Compilation will generate several output files: project_name.data > Required resources packaged ``` -### 4.3 Using CMake +### 5.3 Using CMake Use the following **CMake options**: @@ -255,7 +261,7 @@ if (EMSCRIPTEN) endif () ``` -## 5. Test raylib game on web +## 6. Test raylib game on web To test the newly created `.html` file (and its `.wasm`, `.js`, `.data` and maybe `.mem`), you can create a `localhost` (you can do it using python) and open the web in the browser. @@ -272,7 +278,7 @@ Alternatively, if you have the emscripten binaries in your path, you can run the emrun project_name.html ``` -## 6. Upload raylib web game to itch.io +## 7. Upload raylib web game to itch.io To upload a raylib web game to itch.io you need to rename `project_name.html` to `index.html` and compress into `project_name.zip` the files generated on compilation: ```