🚀 The union of Raylib and Emscripten!
We have already made a article that shows how to install (after compiling) the Raylib library, but that procedure is with a dynamic library, but it is not suitable for using Raylib for the web.
So, in this post we will show you how to compile and install Raylib, in addition to being able to use it for desktop, also to use your development to run in the browser.
Dependencies
To use as a basis, we will focus on the Ubuntu operating system using APT, however, the procedure can be adapted to any other operating system, simply by finding the corresponding package names for your package manager and/or installation paths.
First, you must have the following packages properly installed on your system:
sudo apt install libasound2-dev mesa-common-dev libx11-dev libxrandr-dev \
libxi-dev xorg-dev libgl1-mesa-dev libglu1-mesa-dev \
build-essential cmake make g++ \
freeglut3-dev libglfw3 libglfw3-dev
The session must have been started by X11, if it is on Wayland, end the session and log in again choosing Xorg.
Then, it is very important to have Emscripten installed, we show you how to do this in a video, but in short, just run these commands below:
Remember to have Git installed and updated.
cd
git clone https://github.com/emscripten-core/emsdk .emsdk
cd emsdk
git pull
./emsdk install latest
./emsdk activate latest
echo 'source "$HOME/.emsdk/emsdk_env.sh" 2>/dev/null >> ~/.bashrc
exec $SHELL
Compile and install Raylib
After you have the necessary packages and Emscripten, now just compile and install Raylib with the following commands:
git clone https://github.com/raysan5/raylib
cd raylib
emcmake cmake . -DPLATFORM=Web
emmake make
sudo make install
Here, a summary of where the files are copied:
...
[99%] Built target textures_textured_curve
[100%] Built target textures_to_image
Install the project...
-- Install configuration: "Debug"
-- Installing: /home/marcos/.emsdk/upstream/emscripten/cache/sysroot/lib/libraylib.a
-- Installing: /home/marcos/.emsdk/upstream/emscripten/cache/sysroot/include/raylib.h
-- Installing: /home/marcos/.emsdk/upstream/emscripten/cache/sysroot/include/rlgl.h
-- Installation: /home/marcos/.emsdk/upstream/emscripten/cache/sysroot/include/raymath.h
-- Installing: /home/marcos/.emsdk/upstream/emscripten/cache/sysroot/lib/pkgconfig/raylib.pc
-- Installing: /home/marcos/.emsdk/upstream/emscripten/cache/sysroot/lib/cmake/raylib/raylib-config-version.cmake
-- Installing: /home/marcos/.emsdk/upstream/emscripten/cache/sysroot/lib/cmake/raylib/raylib-config.cmake
The above procedure installs the dependencies only for Web, however, it is still necessary to also install for Desktop, using CMake:
Note that the argument was not used:
-DBUILD_SHARED_LIBS=ON.
cmake -B build -DPLATFORM=PLATFORM_DESKTOP -DPLATFORM=Desktop;Web .
cmake --build build
sudo cmake --install build/
Note that you do not need to compile the
.so, as there is none.
Here is another summary of where the files are copied to, including the libraylib.a file:
[sudo] password for marcos:
-- Install configuration: "Debug"
-- Installing: /usr/local/lib/libraylib.a
-- Installing: /usr/local/include/raylib.h
-- Installing: /usr/local/include/rlgl.h
-- Installing: /usr/local/include/raymath.h
-- Installing: /usr/local/lib/pkgconfig/raylib.pc
-- Installing: /usr/local/lib/cmake/raylib/raylib-config-version.cmake
-- Installing: /usr/local/lib/cmake/raylib/raylib-config.cmake
Testing and running
Now just create an example file: main.cpp with the C++ and Raylib code below:
#include "raylib.h"
int main(){
InitWindow(800, 450, "raylib [core] example - basic window");
while (!WindowShouldClose()){
BeginDrawing();
ClearBackground(RAYWHITE);
DrawText("Congrats! You created your first window!", 190, 200, 20, LIGHTGRAY);
EndDrawing();
}
CloseWindow();
return 0;
}
To compile, first make sure you have a base HTML file to use, you can download it from the Raylib repository with the following command:
wget https://raw.githubusercontent.com/raysan5/raylib/refs/heads/master/src/shell.html
After that, just compile with the command:
em++ -o game.html main.cpp -Os -Wall -I ~/.emsdk/upstream/emscripten/cache/sysroot/include \
-L ~/.emsdk/upstream/emscripten/cache/sysroot/lib/libraylib.a -s USE_GLFW=3 -s ASYNCIFY \
--shell-file shell.html -DPLATFORM_WEB ~/.emsdk/upstream/emscripten/cache/sysroot/lib/libraylib.a
After that, just run the command below and it will automatically open in your default browser:
emrun game.html
Example running in the browser. Open the image in a new tab to see it in a higher resolution, if you want.
If you want to use the same code to run as a desktop, as you may already know, the command should be: g++ main.cpp -lraylib -lGL -lm -lpthread -ldl -lrt -lX11 && ./a.out.
Remember that the example is without ASYNCIFY, for more information see here.
Top comments (0)