mirror of
https://github.com/raysan5/raylib.git
synced 2025-12-25 10:22:33 -05:00
Updated Working for Web (HTML5) (markdown)
@ -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:
|
||||
```
|
||||
|
||||
Reference in New Issue
Block a user