Como Instalar Raylib com suporte para Web

🚀 A união da Raylib com o Emscripten!

Nós já fizemos um vídeo que mostra como instalar(após compilar) a biblioteca Raylib, mas aquele procedimento é com biblioteca dinâmica, mas não serve para uso da Raylib para web.

Então, nessa postagem vamos mostrar como como compilar e instalar a Raylib, além de poder usar para desktop, também para usar seu desenvolvimento para rodar no browser.

Dependências

Para usar como base, iremos focar no sistema operacional Ubuntu usando o APT, no entanto, o procedimento pode ser adaptado para qualquer outro sistema operacional, bastando somente encontrar os nomes de pacotes correspondentes para seu gerenciador de pacotes e/ou caminhos de instalação.

Primeiramente é necessário possuir os seguintes pacotes devidamente instalados no seu sistema:

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

A sessão precisa ter sido iniciada pelo X11, se estiver no Wayland, encerre a sessão e logue novamente escolhendo o Xorg.

Depois, é importantantíssimo possuir o Emscripten instalado, nós mostramos através de vídeo como fazer isso, mas em resumo, basta rodar esses comandos abaixo:

Lembre-se de possuir o Git instalado e atualizado.

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

Compilar e instalar a Raylib

Após possuir os pacotes necessários e o Emscripten, agora basta compilar e instalar a Raylib com os seguintes comandos:

git clone https://github.com/raysan5/raylib
cd raylib
emcmake cmake . -DPLATFORM=Web
emmake make
sudo make install

Aqui, um resumo para onde são copiados os arquivos:

...
[ 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
-- Installing: /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

O procedimento acima instala as dependências somente para Web, no entanto, ainda é necessário instalar também para Desktop, usando o CMake:

Note que não foi usado o argumento: ~~-DBUILD_SHARED_LIBS=ON~~.

cmake -B build -DPLATFORM=PLATFORM_DESKTOP -DPLATFORM=Desktop;Web .
cmake --build build
sudo cmake --install build/

Note que não precisa compiar o .so, pois não há.

Aqui, outro resumo para onde são copiados os arquivos, inclusive o arquivo libraylib.a:

[sudo] senha para 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

Testando e rodando

Agora basta criar um arquivo de exemplo: main.cpp com o código C++ e Raylib abaixo:

#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;
}

Para compilar, antes certifique-se de possui um arquivo HTML de base para uso, você pode baixar do repositório da Raylib com o seguinte comando:

wget https://raw.githubusercontent.com/raysan5/raylib/refs/heads/master/src/shell.html

Após isso basta compilar com o comando:

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

Após isso é só rodar o comando abaixo e será aberto automaticamente no seu navegador padrão:

emrun game.html

Exemplo rodando no navegador. Abra a imagem em uma nova guia para ver em uma resolução maior, caso queira.

Se quiser usar o mesmo código para rodar como desktop, como você já deve saber o comando deve ser: g++ main.cpp -lraylib -lGL -lm -lpthread -ldl -lrt -lX11 && ./a.out.

Lembrando que o exemplo é sem ASYNCIFY, para mais informações veja aqui.

Blog

Como Instalar Raylib com suporte para Web

Marcos Oliveira

Dependências

Compilar e instalar a Raylib

Testando e rodando

Join Our Newsletter. No Spam, Only the good stuff.

Related