さっき決めたブログ

[Nim]WebAssemblyで動的なファイルロードからのPNG表示

目次

• 修正したソース
• 実行結果
• サンプルダウンロード

前回、WebAssemblyとSDL2を使ってPNG画像を表示する検証を行いましたが、その際に不満だった部分。
画像などのリソースが "xxxxx.data" という名前のファイルに集約されて、起動時に一括で読み込まれてしまうのですよね。
前も話しましたが、これは Emscripten の仮想ファイルシステムの機能で、スタンドアロンで動いているシステムをWebAseemblyに移植する際にコードの変更無しにファイルの読み書きが出来るようにするための仕組みだと思われます。

自分がやりたいのは、単なる画像ファイルのロードなので、JavaScriptのXMLHttpRequestのように動的に必要なファイルだけ読み込めれば良いのです。

WebAssemblyでそれができないか調べてみたところ、Emscriptenの emscripten_async_wget_data を用いれば出来そうでという事で、作ってみました。

修正したソース

前回のソースを修正してみた結果がこちら。

emscripten_set_main_loop の初回で loadData プロシージャを呼び出し、emscripten_async_wget_data を用いて画像ファイルをロードしています。

emscripten_async_wget_data は非同期処理なので、ロードが完了するまではメインループは何もしないようにしています。

ロードが完了した時点で、読込んだデータをSDL2で使える TexturePtr 形式に変換します。

• rwFromMem で読み込んだデータを RWops 形式に変換
• loadTexture_RW で、RWops からテクスチャを生成

最後に2つの画像のロードが完了したタイミングでレンダリングを行うようにしています。

nim.cfg の内容です。

こちらはほとんど変更はないのですが、Emscripten の仮想ファイル形式を使う際に必要だった --preload-file ../assets@/ を削除しています。

実行結果

実行結果です。

実行結果

[Live Demo]
出力結果は、前回と変わらず。
画像では分かりませんが、一瞬画面が黒くなってから表示されるので、挙動が微妙に違っています。

ちなみにWebAssemblyでWebサイトからファイルを読み込む場合も、Javascriptと同様にクロスドメイン問題は存在しているので、同一のサイトから読み込むか、サーバー側での対応が必要になります。

サンプルダウンロード

今回作成したソースはこちら。
karasu-jp-com/wasm_sdl_nim/wasm_sdl03/
一括ダウンロードはこちら