久しぶりにビルドしてみようとしたらEmscriptenの更新等で手間取ったので残しておきます。

Git for Windows のインストール

https://gitforwindows.org/

ダウンロードしてインストーラを起動。
コマンドプロンプトからgitのコマンドを使いたいので Adjusting your PATH enviroment は Git from the command line and also from 3rd-party software を選択。

あとの設定は好みに応じて。大体デフォルト設定でOKです。
インストールが終わったらコマンドプロンプトを開いてユーザー名とメールアドレスの登録を済ませます。

git config --global user.name "名前"
git config --global user.email メールアドレス

Python のインストール

https://www.python.org/

ダウンロードするのはバージョン3.6以降でないとEmscripten側で失敗するようです。自分は3.9.1の64bitインストール版をダウンロードしました。

インストーラを起動。Add Python 3.9 to PATH を有効にしてPathを通します。

Make for Windows のインストール

http://gnuwin32.sourceforge.net/packages/make.htm

Download から Binaries と Dependencies の Zip をダウンロード。その上にインストーラ版もありますがどちらもPathを自動で通してくれないので最小構成だけダウンロードして手動で設定します。

適当なファルダを作り（以下 C:\GnuMake とします）、ダウンロードした２つのZipを展開してできたフォルダ・ファイル群を先のフォルダに全て移します。C:\GnuMake\bin フォルダに、

libiconv2.dll
libintl3.dll
make.exe

の３つのファイルがあればOKです。後は C:\GnuMake\bin のPathを通せばインストール完了です。

「PATH を通す」の意味をできるだけわかりやすく説明する試み

Emscripten のインストール

https://emscripten.org/

以前はWindows用のインストーラがダウンロードできたのですが、現在はなくなっているのでコマンドプロンプトを使ってインストールしていきます。

コマンドプロンプトを開いてインストールしたいディレクトリにcdコマンドで移動します。ルートに移動する場合は

cd \

で一気に移動できます。次に

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

でクローン（ダウンロード）します。ダウンロードが終わったら

cd emsdk

でダウンロードしたフォルダに移動。

emsdk install latest

で最新のSDKをダウンロードします。ここでサイズが 500M 以上のファイルのダウンロード＆インストール処理が始まるのでしばらく時間がかかると思います。特定のバージョンをインストールする場合はlatestの部分を1.39.9などと指定します。

処理が終わりコマンドを受け付けるようになったら

emsdk activate latest
emsdk_env.bat

で環境変数が設定されます。ここでの設定は今開いているコマンドプロンプトが閉じられるまで有効な一時的なものです。次にコマンドプロンプトを開いたときは

emsdk activate

で閉じる前の設定が有効になります。--globalオプションを使えば永続的に有効になりますが、システム環境変数に色々追加されて他のアプリケーションなどと競合しそうなので止めて、emsdkのPathだけを手動で通しました。

OpenHSP ソースのダウンロード

http://dev.onionsoft.net/trac/openhsp
https://github.com/onitama/OpenHSP

HSPの公式リポジトリは二箇所あります。1つ目はWindows含むHSP全体のリポジトリで、2つ目は主にLinux用のリポジトリです。今回ビルドするJS用のソースはどちらのリポジトリにも含まれていますが、前者は基本的にソースがSJISで保存されておりJSビルドにはUTF-8への変換が必要なので今回は2つ目のGitHubからダウンロードします。

gitでクローンするか直接ZIPでダウンロードし展開します。src\hsp3dish ディレクトリ内にある makefile.emscripten を開き下記の部分を編集します。

emscripten/hsp3dish.js: $(OBJS) emscripten/license.js
	$(CXX) $(CFLAGS) $(OBJS) -o hsp3dish.js $(LIBS)
	cat emscripten/license.js hsp3dish.js > $@

emscripten/hsp3dish-gp.js: $(OBJS_GP) $(LIBS_GP) emscripten/license.js
	$(CXX) $(CFLAGS_GP) $(OBJS_GP) $(LIBS_GP) -o hsp3dish-gp.js
	cat emscripten/license.js hsp3dish-gp.js > $@

emscripten/libgameplay.a: $(OBJS_GAMEPLAY)
	rm -f $@
	$(AR) rcs $@ $(OBJS_GAMEPLAY)

emscripten/libBulletCollision.a: $(OBJS_BULLET_COLLISION)
	rm -f $@
	$(AR) rcs $@ $(OBJS_BULLET_COLLISION)

emscripten/libBulletDynamics.a: $(OBJS_BULLET_DYNAMICS)
	rm -f $@
	$(AR) rcs $@ $(OBJS_BULLET_DYNAMICS)

emscripten/libLinearMath.a: $(OBJS_LINEAR_MATH)
	rm -f $@
	$(AR) rcs $@ $(OBJS_LINEAR_MATH)

catとrmがある行を削除します。このコマンドはLinux用でWindowsのコマンドプロンプトで動かすとエラーが出てしまいます。削除してもビルドは通ります。

編集して保存したらコマンドプロンプトでemsdkをアクティブにして src\hsp3dish ディレクトリへ移動。そこで

emmake make -f makefile.emscripten

を実行すればビルドが始まります。

ビルドは結構時間（10分くらい）かかります。（makeの-jオプションを付けると並列コンパイル可能）エラーなく無事終了すれば同じディレクトリに目的のファイル hsp3dish.js, hsp3dish-gp.js（オプションに依っては .wasm も）が生成されます。これらのファイルがHSPインストールフォルダ内の hsp3js 内にあるファイルになります。コピーすれば HSP3Dish Helper で使用できます。

ビルド中に *.bc や *.gp.bc などのファイルも大量に生成されますが、これはソースコードをコンパイルしたときに生成される中間ファイルで、ソースを書き換えて再ビルドするときに時間短縮に役立ちます。

ビルドでエラーが出てよく分からないとき

ログを見てソースを編集したりコンパイルオプションを変えてみたりしても分からん！！という場合は、以下の版を試してみてください。こちらの環境（Emscripten 2.0.11）ではビルドに成功しています。

HSP 3.6β5 をベースに SDL1 用に直しています。makefileも書き直して場所も変えました。srcディレクトリにあるのでそこに移動して

emmake make -f makefile.emscripten hsp3dish

を実行すると hsp3dish.js, hsp3dish.wasm のビルドが始まります。hsp3dishの部分をhsp3dish-gpにすればHGIMG4用の、hspcmpにすればHSPスクリプトコンパイラ用の、allで先の3つ全部のビルドができます。cleanで生成ファイルの削除になります。

このビルドで生成された hsp3dish(-gp).js を hsp3dishw(-gp).js にリネームして hsp3dish(-gp).wasm と共にHSPの hsp3js フォルダにコピーすれば完了です。HSP3Dish helper を使用するときに WebAssemblyを使用する にチェックを入れて変換してください。