「OpenSiv3D Web版を使ってブラウザで動くゲームを作る」をやってみた(in WSL)

## 概要

[OpenSiv3D Web版を使ってブラウザで動くゲームを作る (VSCode版, Windows)](https://qiita.com/nokotan/items/8fc8a3c0837ac2f532f4)
これをWSLでやっていく


### emscriptenの準備

```bash
# git とpythonが必要になる
$ apt update && apt install -y git python3

# emsdkのインストールは/mnt/以下以外がおすすめ。permissionなどで面倒ごとになる　
$ git clone https://github.com/emscripten-core/emsdk.git

# 2.0.4を使うのはOpenSiv3DForWeb-VSCodeが作られた当時の最新ヴァージョンであったと思われることと 
# 2.0.7以降のバージョンだとなんかうまくいかないため (https://github.com/emscripten-core/emscripten/issues/12527)
$ ./emsdk/emsdk install 2.0.4
$ ./emsdk/emsdk activate 2.0.4
$ source ./emsdk/emsdk_env.sh # 環境変数などを設定する(一時的)
```

```bash:version情報
$ git -C emsdk/ describe --tags
2.0.10

$ emcc -v
emcc (Emscripten gcc/clang-like replacement + linker emulating GNU ld) 2.0.4
clang version 12.0.0 (/b/s/w/ir/cache/git/chromium.googlesource.com-external-github.com-llvm-llvm--project 77152a6b7ac07ce65568d7c69305653e7cad4bb0)
Target: x86_64-unknown-linux-gnu
Thread model: posix
InstalledDir: /emsdk/upstream/bin
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/8
Found candidate GCC installation: /usr/lib/gcc/x86_64-linux-gnu/8.0.1
shared:INFO: (Emscripten: Running sanity checks)
```

### OpenSiv3DForWeb-VSCodeをためす

https://github.com/nokotan/OpenSiv3DForWeb-VSCode/blob/9ab018500cc446e681edddb36d30c2b6e7c770bd/.vscode/tasks.json#L10 を見ながらビルドコマンドをつくった。ビルドする

```bash
# これは/mnt/以下でよい
$ git clone https://github.com/nokotan/OpenSiv3DForWeb-VSCode.git
$ git -C OpenSiv3DForWeb-VSCode/ rev-parse HEAD
9ab018500cc446e681edddb36d30c2b6e7c770bd

$ cd OpenSiv3DForWeb-VSCode/
$ em++ Main.cpp -c -o Main.o -O0 -std=c++17 -g4 -IOpenSiv3D/include -IOpenSiv3D/include/ThirdParty
$ em++ Main.o -o index.html -O0 -std=c++17 -g4 -LOpenSiv3D/lib -LOpenSiv3D/lib/freetype -LOpenSiv3D/lib/harfbuzz -LOpenSiv3D/lib/opencv -lfreetype -lharfbuzz -lopencv_core -lopencv_imgproc -lopencv_objdetect -lopencv_photo -lSiv3D --emrun -s FULL_ES3=1 -s USE_GLFW=3 -s USE_LIBPNG=1 -s USE_OGG=1 -s USE_VORBIS=1 -s ALLOW_MEMORY_GROWTH=1 -s ERROR_ON_UNDEFINED_SYMBOLS=0 --preload-file OpenSiv3D/example@/example --preload-file OpenSiv3D/resources@/resources --shell-file template-web-player.html --js-library OpenSiv3D/lib/Siv3D.js
```

### 起動する
生成されたindex.htmlを適当なサーバからみれば生成物を見ることができる
自分は[web server for chrome](https://chrome.google.com/webstore/detail/web-server-for-chrome/ofhbbkphhbklhfoeikjpcbhemlocgigb?hl=ja)を使った。使いかたはググってくれ

出来た
![キャプチャ1.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33897/01db1fab-374a-8d71-b13e-d97035e45521.png)


## ゲームに適用する

上記のシンプルなプロジェクトに対し、ゲーム制作では以下のものが必要になる

- cppファイルが複数存在する
- 入力にリソースファイルが存在する

そのためにMakefileやビルドコマンドを書いていく

今回はこのゲームでやってみる

https://github.com/mak1a/Oidonou

やること
- ソースコード&&リソースをコピーする
- Makefileを書く
- Main.cppを適切な形に書き替える



### ソースコード&&リソースをコピーする
`Oidonou/macOS/src/`と`Oidonou/macOS/App/textures/` を　`OpenSiv3DForWeb-VSCode/`以下に置く

```
$ ls OpenSiv3DForWeb-VSCode/
Makefile   README.md  template-web-player.html
OpenSiv3D  index.wasm src             textures
```



### Makefileを書く
ゴリゴリとMakefileを書いていく
正直色々実用に耐えないMakefileだが、とりあえず動くのでこれでよいことにする

ビルドコマンドとしてはリソースとして新たに `textures/` を新たに増やしたため `--preload-file textures@/resources/textures` を追加した(https://emscripten.org/docs/porting/files/packaging_files.html)

```makefile

index.html: build/Game.o build/Main.o build/Result.o build/Title.o
	em++ $^ -o index.html -O0 -std=c++17 -g4 \
	-LOpenSiv3D/lib -LOpenSiv3D/lib/freetype -LOpenSiv3D/lib/harfbuzz -LOpenSiv3D/lib/opencv -lfreetype -lharfbuzz -lopencv_core -lopencv_imgproc -lopencv_objdetect -lopencv_photo -lSiv3D \
	--emrun -s FULL_ES3=1 -s USE_GLFW=3 -s USE_LIBPNG=1 -s USE_OGG=1 -s USE_VORBIS=1 -s ALLOW_MEMORY_GROWTH=1 -s ERROR_ON_UNDEFINED_SYMBOLS=0 \
	--preload-file OpenSiv3D/example@/example --preload-file OpenSiv3D/resources@/resources --preload-file textures@/resources/textures \
	--shell-file template-web-player.html --js-library OpenSiv3D/lib/Siv3D.js

build/%.o: src/%.cpp
	mkdir -p build
	em++ $< -c -o $@ -O0 -std=c++17 -g4 -IOpenSiv3D/include -IOpenSiv3D/include/ThirdParty
```


### Main.cppを適切な形に書き替える
参照：https://qiita.com/nokotan/items/6222ac8e0bd618ad6b63

先ほどと同じように起動する。
できた

![キャプチャ2.PNG](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/33897/394f205d-0e28-dc03-aa53-43b0fab23a8e.png)