概要

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

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

動作確認済みの環境

• Windows 10 Education (Version 10.0.17763.1098)
• Visual Studio 2017 Community (Version 15.9.21)

手順/目次

• emscripten をインストールする
• emscripten 用のプロジェクトテンプレートをインストールする
• DXライブラリ HTML5版をダウンロードする
• DXライブラリ HTML5版を使うためのプロジェクト設定
• ソースコードを書く
• ビルドとデバッグ
• トラブルシューティング

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 をインストールしてください。インストールする際には、Add python into PATH(Python を環境変数 PATH に登録する) にチェックマークをつけることを忘れないでください¹。

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

GitHub - emscripten-core/emsdkに移動し、緑色の Code ボタン、Download ZIP ボタンを順に押してください。²
すると、リポジトリの内容が .zip ファイルでダウンロードされるので、適当なフォルダに展開してください。

emscripten のインストール

エクスプローラを開き、emscripten SDK (emsdk) をダウンロードしたディレクトリに移動し、アドレスバーに cmd と入力して、コマンドプロンプトを開きます。

コマンドプロンプトを開いたら、次のコマンドを実行します。

emsdk install 2.0.4
emsdk activate 2.0.4 --permanent

emsdk install 2.0.4 で、emscripten 本体と emscripten で使われる clang、node.js、javaがインストールされます。
emsdk activate 2.0.4 --permanent で、インストールしたツールセットのセットアップが行われます。

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

Visual Studio が emscripten に付随する emcc を使ってコンパイルを行うようにするために、Emscripten Extension Pack for Visual Studio Visual Studio 機能拡張をインストールします。

Visual Studio Market Place から .vsix パッケージをダウンロードします³。

ダウンロードした .vsix パッケージを実行します。すると、インストールする拡張機能を尋ねるウィンドウが出てくるので、すべてのチェックボックスにチェックがついた状態で Modify と書かれたボタンをクリックします。

Emscripten Debugger for Visual Studio と Emscripten Build Support のインストールが成功していることを確認して、Close と書かれたボタンをクリックします。

DXライブラリ HTML5版をダウンロードする

DXライブラリ HTML5版本体は nokotan/DxLibForHTML5 releases からダウンロードできます。
適当なフォルダに展開してください。

DXライブラリ HTML5版を使うためのプロジェクト設定

ここからは、DXライブラリ HTML5版をダウンロードフォルダ %USERPROFILE%\Downloads にインストールした場合の説明を行います。

emscripten ツールチェインの登録

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

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

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

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

$(USERPROFILE)\Downloads\DxLibForHTML5\dest\include

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

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

$(USERPROFILE)\Downloads\DxLibForHTML5\dest\bin

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

DxLib;DxDrawFunc;DxUseCLib

[Emscripten リンカ] > [システム] > [メモリ伸張の有効化] を はい に切り替えます。

[Emscripten リンカ] > [詳細設定] > [emrun の有効化] を はい に切り替えます。

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

-s USE_OGG=1 -s USE_VORBIS=1 -s USE_LIBPNG=1 -s USE_LIBJPEG=1 -s USE_ZLIB=1 -s USE_BULLET=1 -s USE_FREETYPE=1 -s FULL_ES2=1

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

ソースコードを書く

DXライブラリ HTML5版では、DXライブラリ Android版で使用できる関数 (Android版専用の関数を除く) が使用できます。

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

# include "DxLib.h"
# include <emscripten.h>

void mainLoop() {
  if (ProcessMessage() == -1) {
    emscripten_cancel_main_loop();
    DxLib_End();
    return;
  }

  ClearDrawScreen();
  ScreenFlip();
}

int main () {
  if (DxLib_Init() == -1) {
    return -1;
  }

  SetDrawScreen(DX_SCREEN_BACK);
  emscripten_set_main_loop(mainLoop, 0, 1);
}

ビルドとデバッグ

ビルドは Windows 版と同じように [ビルド] > [ソリューションのビルド] でできます。
また、[|> WebAssembly Debugger] をクリックして、ビルドおよびデバッグ実行を行えます。
デバッグ実行では、次の操作が可能です。

• ブレークポイントの設置
• 変数の値のダンプ

トラブルシューティング

インストールエラー編

"emcc" は内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。と表示される

エラーメッセージの例

'emcc' は内部コマンドまたは外部コマンド、 操作可能なプログラムまたはバッチ ファイルとして認識されていません。

用語 'emcc' は、コマンドレット、関数、スクリプト ファイル、または操作可能なプログラムの名前として認識されません。

考えられる原因

• 手順 python のインストール で python が正常にインストールされなかった

対処方法

• 環境変数 PATH において、Windows にデフォルトで入っている python の優先順位を下げる

ビルドエラー編

No such file or directory と表示される

エラーメッセージの例

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

考えられる原因

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

対処方法

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

• CLion で Emscripten をやっていきたい ( https://qiita.com/tan-y/items/d5539ddd8ce10972919a#emscripten-sdk-%E3%81%AE%E3%82%A4%E3%83%B3%E3%82%B9%E3%83%88%E3%83%BC%E3%83%AB )
• emscripten Download and Install ( https://emscripten.org/docs/getting_started/downloads.html )
• Pythonのインストール方法[Windows] ( https://qiita.com/R-Imai/items/18fee5203e695838e899 )
• emscripten Running HTML files with emrun ( https://emscripten.org/docs/compiling/Running-html-files-with-emrun.html )