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

OpenSiv3D Web版を使ってブラウザで動くゲームを作ってみる (Visual Studio版)

概要

OpenSiv3D Web版を使ったゲーム開発をするために、OpenSiv3D Web版に必要なライブラリをインストールするところから、サンプルコードをビルドするところまでの手順を説明します。

なお、OpenSiv3D Web版およびemscripten 用のプロジェクトテンプレートはまだ製作段階です。手元の環境でのみ動作確認が取れていないため、動作確認およびバグや使いづらいところの指摘をコメント欄に投稿していただきますようお願いいたします。

動作確認済みの環境

  • Windows 10 Education (Version 10.0.18362.959)
  • Visual Studio 2019 Community (Version 16.6.5)

手順/目次

emscripten をインストールする

emscripten をインストールするのに、emscripten SDK (emsdk) を使います。
emscripten SDK (emsdk) 自体は python スクリプトで書かれています。そのため、emscripten SDK (emsdk) を使うために python をインストールする必要があります。

python のインストール

https://www.python.jp/install/windows/install_py3.html から python をインストールできます。

python のインストールをカスタマイズする際、次の設定を有効にしてください。

  • pip をインストールする
  • 環境変数に python のパスに追加する

InstallPIP.png

PyWin32 のインストール (任意)

後述する emrun の機能を使うためには、PyWin32 モジュールを追加する必要があります。
pip を使って、次のコマンドで PyWin32 モジュールを追加することができます。

pip install pywin32

emscripten SDK (emsdk) のインストール

git をインストールしている環境であれば、次のコマンドでダウンロードすることができます。

git clone https://github.com/emscripten-core/emsdk.git

または、emsdk github からダウンロードすることができます。

emscripten のインストール

emscripten SDK (emsdk) をインストールしたディレクトリで、次のコマンドを実行します。
emsdk install latest で、emscripten 本体と emscripten で使われる clang、node.js、javaがインストールされます。emsdk activate latest で、インストールしたツールセットのセットアップが行われます。

emsdk install latest
emsdk activate latest

環境変数に emscripten ツールチェインのパスを追加する (任意)

emsdk activate latest の代わりに、emsdk activate latest --global を管理者権限で実行すると、
環境変数に emscripten ツールチェインのパスが追加されます。

emscripten 用のプロジェクトテンプレートをインストールする

Visual Studio が emscripten に付随する emcc を使ってコンパイルを行うようにするために、emscripten 用のプロジェクトテンプレートをインストールします。

Visual Studio Market Place からダウンロードできる .vsix パッケージから拡張機能をインストールしてください。

または、Visual Studio において、[ツール] > [拡張機能と更新プログラム] から拡張機能マネージャを開いて、そこで Emscripten.ProjectType を検索しても、この拡張機能をインストールすることができます。
VSExtMgr0.png

VSExtMgr1.png

OpenSiv3D Web版をダウンロードする

OpenSiv3D Web版のインストーラは nokotan/OpenSiv3D releases からダウンロードできます。
OpenSiv3D Web版のインストーラは次の処理を行います。

  • OpenSiv3D Web版のバイナリの配置
  • プロジェクトテンプレートの登録
  • 環境変数の登録 (OpenSiv3D Web版の配置場所)

プロジェクトを作成する

Visual Studio 2019 のスタート画面から、[新しいプロジェクトの作成] をクリックすると、以下のようなプロジェクトテンプレートを選択する画面が出てきます。

そこで、OpenSiv3D(0.4.3)Web を選択してください。

Siv3DWebProjectMake1.png

プロジェクト名を決めると、以下のようなソースファイルの編集画面が出てきます。
このとき、構成 (赤枠で囲んだところ) を Emscripten に切り替えてください。

Siv3DWebProjectMake2.png

emscripten ツールチェインの登録

[プロジェクト] > [プロパティ] から、プロジェクト設定を開きます。

プロジェクト設定の、[全般] > [emscripten ツールチェイン] > [emscripten インストールディレクトリ] に、インストールした emscripten のフォルダ (emcc.bat ファイルが存在するフォルダ) へのパスを入力します。

Siv3DWebProjectMake3.png

ソースコードを書く

ほかのプラットフォームとは異なり、イベント処理のために定期的にブラウザに制御を戻す必要があります。そのため、メインループ部分を関数に切り出し、その関数をフレーム開始時に呼ばれるコールバック関数として登録する必要があります。

Main.cpp
# include <Siv3D.hpp> // OpenSiv3D v0.4.3
# include <emscripten.h>

// 猫の座標
Vec2 catPos(640, 450);

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

    // テキストを画面の中心に描く
    FontAsset(U"Default")(U"Hello, Siv3D!🐣").drawAt(Scene::Center(), Palette::Black);

    // 大きさをアニメーションさせて猫を表示する
    TextureAsset(U"cat").resized(100 + Periodic::Sine0_1(1s) * 20).drawAt(catPos);

    // マウスカーソルに追従する半透明の赤い円を描く
    Circle(Cursor::Pos(), 50).draw(ColorF(1, 0, 0, 0.5));

    // [A] キーが押されたら
    if (KeyA.down())
    {
        // Hello とデバッグ表示する
        Print << U"Hello!";
    }

    // ボタンが押されたら
    if (SimpleGUI::Button(U"Move the cat", Vec2(600, 20)))
    {
        // 猫の座標を画面内のランダムな位置に移動する
        catPos = RandomVec2(Scene::Rect());
    }
}

void Main()
{
    // 背景を水色にする
    Scene::SetBackground(ColorF(0.8, 0.9, 1.0));

    // 大きさ 60 のフォントを用意
    FontAsset::Register(U"Default", 60);

    // 猫のテクスチャを用意
    TextureAsset::Register(U"cat", Emoji(U"🐈"));

    emscripten_set_main_loop(&MainLoop, 0, 1);
}

ビルドとデバッグ

ビルドは [ビルド] > [ソリューションのビルド] でできます。
このとき、プラットフォームが [Emscripten] になっていることに注意してください。([x86] や [x64] では、ビルド自体に失敗してしまいます。)

まだ IIS を使ったデバッガを起動するようにできていないため、デバッグができません。その代わり、デバッガの起動時に emrun コマンドを実行して、ローカルサーバを起動してブラウザを立ち上げるように設定してあります。

以下に、デバッガの設定の初期値を記しておきます。

設定名 設定値
起動するデバッガ ローカル Windows デバッガ
コマンド \$(EmscriptenDir)\emrun.bat
コマンド引数 --serve_after_close \$(TargetFileName)
作業ディレクトリ \$(TargetDir)
アタッチ いいえ
デバッガの種類 自動
マージ環境 はい
SQL デバッグ いいえ

トラブルシューティング

ビルドエラー編

ソースコードの赤波線で、"○○があいまいです" というエラーが報告される

エラーメッセージの例

E0226: "Vec2" があいまいです。

考えられる原因

現在、このエラーは仕様です。

(インテリセンス用のビルド設定がまだ完全でないために、Web版なのに _WIN32 のマクロを定義してしまったり、__attribute__ のような MSVC では対応していない構文に対する対策が終わっていないことに起因します)

No such file or directory と表示される

エラーメッセージの例

エラー例
shared : error : C:¥Users¥(ユーザ名)¥.emscripten_cache¥wasm¥ports-builds¥zlib¥compress.c: No such file or directory

考えられる原因

  • 依存ライブラリのソースファイル群のzipファイルの展開に失敗している

対処方法

  • %USERPROFILE%\.emscripten_ports フォルダの中にある zip ファイルをその場に (画像のようにフォルダが並ぶように) 展開する
  • %USERPROFILE%\.emscripten_ports フォルダ、%USERPROFILE%\.emscripten_cache フォルダを、セキュリティソフトウェアのスキャン除外フォルダに追加する

フォルダ配置

補足

OpenSiv3D Web版を使うためのプロジェクト設定 (手動)

宗教的にインストーラを受け付けない人のために、OpenSiv3D Web版本体を nokotan/OpenSiv3D releases からダウンロードし、ダウンロードフォルダ %USERPROFILE%\Downloads に配置した場合の説明を行います。

インクルードディレクトリ/コンパイラ設定

[Emscripten C/C++] > [全般] > [追加のインクルードディレクトリ] に次のフォルダを指定します。

追加のインクルードディレクトリ
$(USERPROFILE)\Downloads\OpenSiv3D\Package\include;$(USERPROFILE)\Downloads\OpenSiv3D\Package\include\ThirdParty;

ライブラリディレクトリ/リンカ設定

[Emscripten リンカ] > [全般] > [追加のライブラリディレクトリ] に次のフォルダを指定します。

追加のライブラリディレクトリ
$(USERPROFILE)\Downloads\OpenSiv3D\Package\lib;$(USERPROFILE)\Downloads\OpenSiv3D\Package\lib\opencv;

[Emscripten リンカ] > [入力] > [追加の依存ファイル] に次の値を指定します。

追加の依存ファイル
Siv3D;opencv_core;opencv_imgproc;opencv_objdetect;opencv_photo;

[Emscripten リンカ] > [入力] > [プリロードされる リソースファイル] に次の値を指定します。

プリロードされるリソースファイル
$(USERPROFILE)\Downloads\OpenSiv3D\Package\resources@/resources

[Emscripten リンカ] > [入力] > [追加の JavaScript ライブラリ] に次のフォルダを指定します。

追加のJavaScriptライブラリ
$(UserProfile)\Downloads\OpenSiv3D\Package\lib\Siv3D.js;

[Emscripten リンカ] > [コマンド ライン] > [追加のオプション] に次の設定を追記します。

追加のオプション
-s USE_ZLIB=1 -s USE_LIBPNG=1 -s USE_FREETYPE=1 -s USE_HARFBUZZ=1 -s USE_OGG=1 -s USE_VORBIS=1 -s ALLOW_MEMORY_GROWTH=1 -s ERROR_ON_UNDEFINED_SYMBOLS=0 -s FULL_ES3=1 -s USE_GLFW=3 --emrun 

以下、オプションの説明です。

オプション 説明
-s USE_ZLIB=1 -s USE_LIBPNG=1 -s USE_FREETYPE=1 -s USE_HARFBUZZ=1 -s USE_OGG=1 -s USE_VORBIS=1 emscripten 側に用意されているライブラリをリンクします (zlib, libpng, freetype, harfbuzz, Ogg, Vorbis)
-s ALLOW_MEMORY_GROWTH=1 必要に応じてヒープを拡張します (初期サイズは16MB)
-s ERROR_ON_UNDEFINED_SYMBOLS=0 リンク時に解決できないシンボルが存在した場合でもリンクを続行します
-s FULL_ES3=1 OpenGLES3 のエミュレーションを有効にします
-s USE_GLFW=3 GLFW3 のエミュレーションを有効にします
--emrun emrun コマンドでローカルサーバを立ててテストができるようにします

参考資料

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