如何使用raylib编译生成HTML构建产物 新手分步教程咨询

前置准备 #

• 提前安装好Git、Make基础编译工具
• 准备好raylib官方源码包

步骤1：安装配置Emscripten编译工具链 #

Emscripten是将C/C++代码编译为WebAssembly/HTML的核心工具，安装操作如下：

# 克隆emsdk仓库到本地
git clone https://github.com/emscripten-core/emsdk.git
cd emsdk
# 安装最新稳定版
./emsdk install latest
# 激活当前版本
./emsdk activate latest
# 生效环境变量（Windows环境执行emsdk_env.bat）
source ./emsdk_env.sh

注意：每次重新打开终端编译Web版本前，都需要先执行上述的环境变量生效命令

步骤2：编译Web版本的raylib静态库 #

进入你本地raylib源码的src目录，执行以下命令编译适配Web平台的raylib库：

make PLATFORM=PLATFORM_WEB -j4

参数说明：-j4代表用4线程加速编译，可根据你的CPU核心数调整数值
编译完成后，会在raylib源码的lib目录下生成Web版本的libraylib.a静态库文件。

步骤3：编写你的raylib测试代码 #

举个最简示例，新建main.c文件写入以下内容：

#include "raylib.h"

int main(void) {
    InitWindow(800, 450, "raylib Web测试");
    while (!WindowShouldClose()) {
        BeginDrawing();
        ClearBackground(RAYWHITE);
        DrawText("Hello Web!", 190, 200, 20, LIGHTGRAY);
        EndDrawing();
    }
    CloseWindow();
    return 0;
}

步骤4：编译生成HTML产物 #

在你的项目代码目录执行emcc编译命令，注意替换命令里的路径为你本地的实际raylib路径：

emcc -o my_game.html main.c -Os -Wall /你的/raylib/路径/lib/libraylib.a -I /你的/raylib/路径/include -L /你的/raylib/路径/lib -s USE_GLFW=3 -s ASYNCIFY -s TOTAL_MEMORY=67108864 -s FORCE_FILESYSTEM=1 --shell-file /你的/raylib/路径/src/shell.html

• 如果你的项目用到了图片、音频等外部资源，需要在命令末尾添加--preload-file 资源路径参数自动打包资源
• 执行完成后会生成三个文件：my_game.html、my_game.js、my_game.wasm，这三个就是完整的Web版本运行文件

步骤5：本地测试运行 #

直接双击打开HTML文件会因为浏览器跨域限制无法正常运行，需要启动本地临时服务器测试：

• 如果你安装了Python3，执行命令：python -m http.server 8080
• 打开浏览器访问http://localhost:8080/my_game.html即可看到运行效果

常见问题排查 #

• 编译报错：优先检查Emscripten环境变量是否生效，是否用了Web版本编译的libraylib.a，路径配置是否正确
• 运行白屏：检查是否启动了本地服务器，浏览器控制台是否有报错信息

内容的提问来源于stack exchange，提问作者josephi