さっき決めたブログ

[Nim]NimとSDL2を使ってWebAssemblyからCanvasに描画

目次

• 必要なもの
• 早速作る
• サンプルダウンロード
• 参考文献

以前の記事でもWebAssemblyについて検証を行いましたが、今回はCanvasへの描画についての検証を行っていきます。

Canvasへの描画には一般的にSDL2というライブラリが用いられるそうです。
これは、画像以外にサウンドなども扱える、所謂マルチメディアライブラリという分類になりますが、今回はグラフィック関連のみの検証になります。

必要なもの

Nim

こちらの記事を参照してください。

Emscripten

今回もEmscriptenは必須になります。
こちらの記事を参照してください。

SDL2 for Nim

Nim用のSDLライブラリが必用になりますので、以下コマンドを入力して事前に入れておきます。

nimble install sdl2

早速作る

以下のサンプルが非常にためになりました。 [timhutton/sdl-canvas-wasm]
https://github.com/timhutton/sdl-canvas-wasm
C言語のサンプルなので、Nimに書き替えます。
ソースコードについてはこんな感じ。

ポイントとしては、SDL2ライブラリをインポートしている点と、SDL2ライブラリ内の各種命令については、直接SDL2のソースを見て調べています。

nim.cfg については、以下の通りになります。

ここでのポイントは dynlibOverride = "SDL2", -s USE_SDL=2 をオプションに付けることです。

これを付けなくてもコンパイルは通りますが、実行するとChromeの場合、

wasm_sdl01.js:1517 To use dlopen, you need to use Emscripten's linking support, see https://github.com/emscripten-core/emscripten/wiki/Linking

sdl2.nim を見てみると、各OS毎に外部ライブラリを動的にリンクさせる事が基本となっているようです。

WebAssemblyでも動的にリンクが出来るのかも知れませんが、今回は静的に組み込みたいので、d = "SDL_Static" のコンパイラオプションを付ければ良いかと思いましたが、何やら注釈に "SDL_Static option is deprecated and will soon be removed. Instead please use --dynlibOverride:SDL2." (訳：SDL_Static はいずれ無くなるから、代わりに --dynlibOverride:SDL2 オプションを使ってくれ) とあるので、そちらを付けています。

実行用のhtmlはこんな感じです。

最後に、VScode用の tasks.json がこんな感じになります。

実行結果

[Live Demo]

思っていたよりも上手くいきました。

実行結果

サンプルダウンロード

今回からサンプルをGitHubに置くことにしました。
karasu-jp-com/wasm_sdl_nim/wasm_sdl01/
一括ダウンロードはこちら

参考文献

timhutton/sdl-canvas-wasm

https://github.com/timhutton/sdl-canvas-wasm

nim-lang/sdl2

https://github.com/nim-lang/sdl2

yglukhov/jsbind

https://github.com/yglukhov/jsbind

emscripten

https://emscripten.org

以上になります。