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

9666 ワード
Siv3D Emscripten OpenSiv3D Emscripten テキストリンク

概要

OpenSiv3D Web版を使ってブラウザで動くゲームを作る (VSCode版, Windows)
これをWSLでやっていく

emscriptenの準備

# 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 # 環境変数などを設定する(一時的)
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 を見ながらビルドコマンドをつくった。ビルドする

# これは/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を使った。使いかたはググってくれ

出来た

ゲームに適用する

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

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

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

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

やること
- ソースコード&&リソースをコピーする
- 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)


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

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