web assembly 初体验

License: CC BY-NC-SA 4.0

我写了一个程序，可以在各个平台运行吗？

可以，用跨平台库。

如何做到“不用下载，点击即玩”呢？

做成网页。

但是它已经用 c/cpp（或其他编程语言，此处用 c/cpp 举例）写完了……

Web Assembly，启动！

Web Assembly 是什么

这是一段介绍。

省流：

WebAssembly 是一种新的编码方式，可以在现代的 Web 浏览器中运行——它是一种低级的类汇编语言，具有紧凑的二进制格式，可以接近原生的性能运行，并为诸如 C/C++、C# 和 Rust 等语言提供编译目标，以便它们可以在 Web 上运行。

如何将 c/cpp 代码编译为 Web Assembly

emscripten 是一个类似 clang 的编译工具链，支持 SDL 等库。

这里是 SDL Wiki 对于 emscripten 支持的一段介绍，总结了一下大概就是下面两点：

1. 文件开头 include 所需的库。

   #ifdef __EMSCRIPTEN__
   #include <emscripten.h>
   #endif
   

2. 写一个 main loop，但不要真的 loop 了。

   extern bool game_is_still_running;
   
   static void mainloop(void)   /* this will run often, possibly at the monitor's refresh rate */
   {
   	if (!game_is_still_running) {
   		// deinitialize_the_game();
   		#ifdef __EMSCRIPTEN__
   		emscripten_cancel_main_loop();  /* this should "kill" the app. */
   		#else
   		exit(0);
   		#endif
   	}
   
   	// check_for_new_input();
   	// think_about_stuff();
   	// draw_the_next_frame();
   }
   
   void main(void)
   {
   	// initialize_the_game();
   	#ifdef __EMSCRIPTEN__
   	emscripten_set_main_loop(mainloop, 0, 1);
   	#else
   	while (1) { mainloop(); }
   	#endif
   }
   

编译使用 emcc foo.c 即可。

下面是一些踩坑/注意事项/提醒。

• 用 emscripten 编译 SDL 程序时要带 -sUSE_SDL=2 参数，首次运行时会从 github 上下载 SDL2 的相关资源，如果网不好可能要等几分钟然后随机断连。
• 加入 -o index.html 参数可以直接输出网页，但输出的网页不能直接打开。
  • 如果尝试直接打开可能会一直在加载中。
  • 正确的方法是搭一个本地测试服务器，可以看这里。
  • 省流：进入 index.html 所在的文件夹，然后 python3 -m http.server.