Help us understand the problem. What is going on with this article?

OpenSiv3D Desktop版から OpenSiv3D Web版に移行する

概要

OpenSiv3D Desktop版にはない、OpenSiv3D Web版の制約や注意点を、項目に分けて説明しています。

メインループの書き方

OpenSiv3D Web版では、OpenSiv3D デスクトップ版と同じように while 文でメインループを作ってしまうと、ブラウザがマウス入力やキーボード入力といったイベントを処理できなくなり、タブごとブラウザがフリーズしてしまいます。

デスクトップ版
# include <Siv3D.hpp>

void Main() {
    while (System::Update())
    {
        // 毎フレーム行われる処理
    }
}

そのため、メインループ部分を関数に切り出し、その関数をフレーム開始時に呼ばれるコールバック関数として登録する必要があります。

Web版
# include <Siv3D.hpp>

# if SIV3D_PLATFORM(WEB)
#   include <emscripten.h>
# endif

void MainLoop()
{
    if (!System::Update())
    {
        emscripten_cancel_main_loop();
        return;
    }

    // 毎フレーム行われる処理
}

void Main()
{
    emscripten_set_main_loop(&MainLoop, 0, 1);
}

OpenSiv3D Web版で作成した WebGL アプリがアクセスできるファイル

現在 OpenSiv3D Web版では、ユーザのファイルシステムにアクセスすることができません

実行時に必要なファイルは、emscirpten のファイルパッケージ機能を使って、ビルド時にあらかじめバンドルする必要があります。
バンドルされたファイルは、起動時に仮想ファイルシステムに読み込まれ、通常のファイルアクセス関数で読み書きができるようになります。

なお、ブラウザタブを閉じたり、リロードすると、実行中に仮想ファイルシステムに書き込まれたファイルは、消えてしまいますのでご注意ください。

Visual Studio 2019 で emscirpten のファイルパッケージ機能を利用する

プロジェクト設定を開き、[Emscripten リンカ] > [入力] > [プリロードされる リソースファイル] に次のフォーマットで値を設定します。

プリロードされるリソースファイル
(実ファイル/フォルダへのパス)@(マウント先のパス)

例えば、C:\Siv3DTest\files にあるフォルダを仮想ファイルシステム上の /files から利用できるようにする場合は、

プリロードされるリソースファイル
C:\Siv3DTest\files@/files

VSLinkProp2.png

コマンドラインから emscirpten のファイルパッケージ機能を利用する (CMake, VSCode など)

リンク時に次のオプションを追加します。

プリロードされるリソースファイル
--preload-file (実ファイル/フォルダへのパス)@(マウント先のパス)

例えば、C:\Siv3DTest\files にあるフォルダを仮想ファイルシステム上の /files から利用できるようにする場合は、

プリロードされるリソースファイル
--preload-file C:\Siv3DTest\files@/files

OpenSiv3D Web版では使用できない機能

OpenSiv3D Windows版では使用できても、OpenSiv3D Web版では使用できない機能がいくつか存在します。1

以下にその一覧を示します。

未実装の機能

  • テキスト入力
  • メッセージボックス
  • ファイルダイアログ
  • マイク
  • トースト通知 (Web の通知機能を使用予定)
  • クリップボード

互換性のない機能

  • ウィンドウ操作 (最小化、最大化、フルスクリーンへの切り替え)
  • プロセス作成
  • モニタの情報取得

  1. OpenSiv3D Web版が、OpenSiv3D Linux版をベースに作成されたこと、ブラウザでのセキュリティ上の機能制約があることに起因します。 

nokotan
DxLib の Web 移植を試みたかめ / OpenSiv3D も Web 移植を試みているとか / WebAssembly, emscripten チョットデキル らしい
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away