DEV Community

Cover image for Como Instalar Raylib com suporte para Web
Marcos Oliveira
Marcos Oliveira

Posted on

1

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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;
}
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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

emrun game.html
Enter fullscreen mode Exit fullscreen mode

Exemplo rodando no navegador

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.

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (0)

Heroku

This site is built on Heroku

Join the ranks of developers at Salesforce, Airbase, DEV, and more who deploy their mission critical applications on Heroku. Sign up today and launch your first app!

Get Started

👋 Kindness is contagious

Immerse yourself in a wealth of knowledge with this piece, supported by the inclusive DEV Community—every developer, no matter where they are in their journey, is invited to contribute to our collective wisdom.

A simple “thank you” goes a long way—express your gratitude below in the comments!

Gathering insights enriches our journey on DEV and fortifies our community ties. Did you find this article valuable? Taking a moment to thank the author can have a significant impact.

Okay