Join GitHub today
GitHub is home to over 31 million developers working together to host and review code, manage projects, and build software together.Sign up
Working for Web (HTML5)
To build your raylib game for HTML5 you need a different compiler than the one that comes with raylib installation, actually, you need a set of tools. Those tools are the emscripten SDK.
Download emscripten SDK from here. I recommend downloading the Portable Emscripten SDK for Windows and decompressing it in
C:\emsdk folder. After that, go to emsdk intallation folder, run
emcmdprompt.bat and execute the following commands:
emsdk install git-1.9.4 emsdk update emsdk list emsdk install sdk-1.38.8-64bit emsdk activate latest
NOTE: If a newer precompiled SDK version (newer than sdk-1.38.8-64bit) is available, install new version. Precompiled SDK already includes version of clang, emscripten, python, java JDK and node.js, so you don't have to install it separately.
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).
To compile raylib source code, just execute Notepad++ script:
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
libraylib.bc is copied in
Preparing your raylib game for web
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
To see how code should be refactored to fit compilation for web, check core_basic_window_web.c example.
NOTE: We are looking for some mechanism to avoid that code refactoring! Here it is a possible solution, despite a hit on performance.
Compiling raylib game
Just open your raylib web-prepared game code and run the Notepad++ script named
Note that script defines some paths to the required tools, check you are using the correct versions of those tools!
Note also that required resources should be embedded into a .data file using the compiler parameter
--preload-file filename.ext or
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:
python -m SimpleHTTPServer 8080