Updated Working for Web (HTML5) (markdown)

master
José Salavert Torres 2 år sedan
förälder
incheckning
ce23fbf7f0
1 ändrade filer med 16 tillägg och 10 borttagningar
  1. +16
    -10
      Working-for-Web-(HTML5).md

+ 16
- 10
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:
```

Laddar…
Avbryt
Spara