本文介紹了如何使用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會失效，
這里放一個我寫的生命游戲，有興趣的可以參考參考：生命游戲，游戲原始碼
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/296255.html
標籤：其他
上一篇：從零開始制作一個粒子系統