Unix + Visual Studio Code で Siv3D for Web プログラミングを始める¶

Web 版 Siv3D を試験的な機能として提供しています。Web 版はいくつか注意点があるため、Siv3D の使用に慣れた中級者以上を対象としています。利用にあたって困ったことがあれば Siv3D Discord サーバの #web チャンネルで質問してください。

1. システム要件¶

Visual Studio Code で OpenSiv3D v0.6.9 プログラミングをするのに必要な開発環境です。


OS	Windows 7 SP1 (64-bit) / Windows 8.1 (64-bit) / Windows 10 (64-bit) / macOS Monterey 以降 / Ubuntu 20.04 LTS / Ubuntu 22.04 LTS
CPU	Intel または AMD 製の CPU
映像出力	モニタなど、何らかの映像出力装置があること
音声出力	何らかの音声出力装置があること
開発環境	emscripten compiler frontend 3.1.20
ブラウザ	Google Chrome 85.0 以降 Mozilla FireFox 78.0 以降

OpenSiv3D v0.6.6 Web 版を使って開発されたアプリケーションを実行するのに必要な環境です。ゲームやアプリを配布するときの説明書に記載すると良いでしょう。


OS	Windows 7 SP1 (64-bit) / Windows 8.1 (64-bit) / Windows 10 (64-bit) / macOS Monterey 以降 / Ubuntu 20.04 LTS / Ubuntu 22.04 LTS
CPU	Intel または AMD 製の CPU
映像出力	モニタなど、何らかの映像出力装置があること
音声出力	何らかの音声出力装置があること
ブラウザ	Google Chrome 85.0 以降 Microsoft Edge 85.0 以降 Mozilla FireFox 78.0 以降 Safari 15.1 以降

GitHub - emscripten-core/emsdk から、リポジトリの内容をダウンロードします。緑色の Code ボタン、Download ZIP ボタンを順に押します。すると、リポジトリの内容が .zip ファイルでダウンロードされるので、適当なフォルダに展開します。
emsdk を展開したフォルダでターミナルを開き、次のコマンドを 1 行ずつ実行します。
```
emsdk install 3.1.20
emsdk activate 3.1.20
```
コマンド出力の最後の 1 行をコピーしてターミナルに貼り付けて、実行します。環境によって内容が異なりますが、次のような 1 行が表示されるはずです。
```
echo 'source "<emsdk のあるフォルダ>/emsdk/emsdk_env.sh"' >> $HOME/.bash_profile
```

プロジェクトテンプレートのリポジトリ から、緑色の Code ボタン、Download ZIP ボタンを順に押して、プロジェクトテンプレートをダウンロードします。ダウンロードができたら、ファイルを展開します

プロジェクトテンプレートがあるフォルダを Visual Studio Code で開きます
サンプルプログラム (Main.cpp) が最初から用意されています
実行とデバッグタブで Launch Chrome against localhost または Launch Firefox against localhost を選択して、実行ボタン ▶️ を押します。
実行中のプログラムは、Esc を押すか、ブラウザタブを閉じると終了します

Web 版のシーンのリサイズモードはデフォルトで ResizeMode::Virtual であるため、ブラウザの拡大縮小に応じてシーンのサイズが変化します。これを防ぐには Scene::SetResizeMode(ResizeMode::Keep); と Scene::Resize(width, height); でシーンサイズを固定します