🚀 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.
Top comments (0)