# ゲームをwebへ移植する

> ブラウザのビルドには、ファイルシステムがなく、厳しいメモリの上限があり、プレイヤーが見ているダウンロードがある。その三つが移植のすべてを決める。

- URL: https://www.summerengine.com/ja/port-a-game-to-web
- Keyword: ゲームをwebへ移植する
- Related: https://www.summerengine.com/ja/porting

ゲームのwebへの移植とは、権利のあるゲームの、WebAssemblyとブラウザのグラフィックスのAPIを通して動くブラウザ版を作ることだ。Summer Engineに固有の事実が一つある。SummerはGDScriptのプロジェクトならwebビルドを書き出せ、それをSummer Gamesで公開すれば、ブラウザで遊んでもらえる。このページでは、ブラウザ向けビルドに必要なことを説明する。

webは、プレイヤーがダウンロードの進みを眺める唯一のプラットフォームだ。一メガバイトごとに離脱の機会がある。メモリの上限はデスクトップより低く、とくにモバイルのブラウザで低い。ファイルシステムがないので、セーブはプレイヤーが消せるブラウザのストレージに住む。音声はプレイヤーがページを操作するまで開始できない。

その代わりに、即座に遊べること、どこにでも貼れるリンク、ストアの承認が不要なことを得る。だからエンジンが対応していれば、webのビルドはデスクトップのリリースと並べる強いデモの形式になる。

## 大きさと読み込み時間が結果を決める

始める前にダウンロードの予算を決め、それに合わせて設計する。テクスチャを圧縮し、全解像度で見えないものは縮め、音声は妥当なビットレートのOGGへ変換し、使っていないコンテンツは書き出しから外す。遊べる最初のシーンを素早く読み込み、残りは順次か遅れて読み込む。回転する印ではなく本当の進みを見せる。開始まで三十秒かかるwebのビルドは、押した人のほとんどを失う。

## コードで回避するブラウザの制約

音声のコンテキストは利用者の操作があるまで停止したままなので、クリックで開始する画面を足す。ストレージはブラウザのローカルにあり消されうるので、セーブは最善の努力として扱い、進行が重要なら書き出しかクラウドの選択肢を出す。タブは背面に回されて動作が抑えられるので、表示状態の変化で一時停止する。ネイティブよりフレームレートが揺れるので時間差を使う。全画面とポインターの固定は、どちらも利用者の操作が要る。モバイルのブラウザはメモリがより厳しく、キーボードもない。

## ページの上での入力

キーボードとマウス、ブラウザのゲームパッドのAPIを通したゲームパッド、そしてモバイル向けのタッチに対応する。プレイヤーが矢印キーを使ったりキャンバスでスワイプしたときに、ページが巻き上がらないようにする。プレイヤーがゲームの外をクリックしてフォーカスを失う場合を扱う。固定の一つの解像度を前提にせず、キャンバスを様々なウィンドウの大きさに応じて伸縮させ、小さなノートパソコンのウィンドウと大きなデスクトップの表示の両方で試す。

## どこに置くか

Summerのwebビルドは、ルートにindex.htmlを置いた標準的な静的.zipで、公開先はSummer Gamesだ。itch.ioは合計500 MB、1ファイル200 MB、ファイル数1,000という制限の範囲内でHTML5のビルドを置け、埋め込みも扱ってくれる。Newgroundsやwebゲームのポータルは今もブラウザのタイトルを受け入れ、流入か売上の分配で支払うことがある。静的なホスティングなら自前配信もできる。Godot 4.3以降のシングルスレッドのビルドなら特別なヘッダーは不要で、スレッドを使うビルドには生成元をまたぐ分離のためのヘッダーが要る。ブラウザのデモはSteamのページの助けにもなり、多くの開発者が無料のwebのデモを有料のデスクトップ版と並べて出している。

## FAQ

### ブラウザのビルドでC#を使えるか

C#ではできない。Godot 4はC#のプロジェクトをwebへ書き出せず、それはSummerでも変わらない。SummerではGDScriptのプロジェクトならwebビルドを書き出せ、Summer Gamesで公開できる。C#はSummerのデスクトップエディタで、デスクトップビルド向けに使える。

### webのビルドの読み込みが遅いのはなぜか

ほぼ常にダウンロードの大きさと非圧縮のアセットが原因だ。まずテクスチャと音声を縮め、使っていないコンテンツを外し、その上で読み込みを分けて残りが届く前に遊べるシーンを出す。

### webのビルドは電話で動くか

設計の作業をすれば動く。モバイルのブラウザはメモリが少なく、キーボードがなく、入力はタッチだけなので、デスクトップの配置をそのまま出すのではなく、低いアセットの予算とタッチ操作を計画する。

### ブラウザのゲームでプレイヤーは進行を保存できるか

ブラウザのストレージを通して保存できるが、プレイヤーやブラウザに消されうる。長いゲームなら、書き出しのコード、ファイルのダウンロード、アカウントに紐づくセーブを足す。

### 同じプロジェクトをSteamにも出せるか

出せる。SummerはSteam向けにWindowsとmacOSのデスクトップビルドを書き出し、GDScriptのプロジェクトならwebビルドも書き出せる。だからSummer Gamesの無料のブラウザのデモを、Steam版と並べて出せる。

[作り直しを始める](https://www.summerengine.com/ja/download)

---

## Machine-readable resources

- Site index for agents: https://www.summerengine.com/llms.txt
- Full inlined content: https://www.summerengine.com/llms-full.txt
- Porting catalog: https://www.summerengine.com/llms-porting.txt
- Structured catalog: https://www.summerengine.com/agent-catalog.json
- Sitemap: https://www.summerengine.com/sitemap.xml
- Developer resources: https://www.summerengine.com/docs
- Summer API (assets from any agent or code; public per-call model prices): https://docs.summerengine.com/api