T O P

[资源分享]     将SDL程序变成网页(使用emscripten)

  • By - 楼主

  • 2021-09-03 15:10:03
  • 本文介绍了如何使用emscripten来将SDL程序编译成网页。

    准备工作

    什么是emscripten?

    emscripten是一个用于WebAssembly的一套编译工具,基于LLVM。
    WebAssembly(wasm),即网页汇编,说白了,就是用在Web上的汇编语言。WebAssembly的优点是速度快,他可以将C/C++代码转换成wasm代码,所以能够提升不少效率。
    不过我这里主要是为了将C++代码变成网页啦,不管效率。

    安装emscripten

    安装方法见官网

    编写一个Demo

    wasm的SDL和普通SDL的区别

    编写wasm的SDL程序和平时的不太一样,我们需要在程序内部指定我们的游戏主循环,这样Web端才能帮我们更新游戏:

    // 首先包含emscripten的头文件
    #include "emscripten.h"
    
    
    // 这是主循环的函数声明
    void mainloop();
    
    // 使用这个函数来设置主循环,这个循环是异步的
    emscripten_set_main_loop(mainloop, -1, 1);
    

    其中最主要的就是这两个函数:

    void emscripten_set_main_loop_arg(em_callback_func func, void* arg, int fps, int simulate_infinite_loop);
    void emscripten_set_main_loop(em_callback_func func, int fps, int simulate_infinite_loop);
    

    看参数名字就知道他们是什么意思了。fps如果是负数,则使用浏览器的requestAnimationFrame机制来更新。simulate_infinite_loop总应当是1,以便于浏览器执行循环。
    如果你要给mainloop传参,就用第一个函数,别忘了改变mainloop的声明:void mainloop(void* args);
    每个程序只能有一个主循环。如果需要用其他的主循环,需要先将前面的关闭。
    有关这个函数的详细说明,请看这里

    Demo

    Demo的文件在这里

    编译的方式有两种,第一种是用emscripten自带的SDL:

    em++ wasm_sdl_demo.cpp -s WASM=1 -s USE_SDL=2 -o index.html
    

    注意输出的是html。USE_SDL=2代表要使用SDL2。
    emscripten会自己去下载对应的SDL,如果你觉得太慢的话也可以将SDL的源码自己clone下来,然后看他docs/README-emscripten.md文件来自己手动编译成wasm所需的SDL。编译的过程还挺快的。

    编译好的网页在这里Demo

    将网页放到Hexo上

    这里有个坑,但不是所有的主题都是这样:在发布页面的时候请静止Hexo渲染含有wasm的页面,不然wasm会失效。

    这里放一个我写的生命游戏,有兴趣的可以参考参考:生命游戏游戏源码

    本帖子中包含资源

    您需要 登录 才可以下载,没有帐号?立即注册