Web 向け (WebGL) のゲームを出力する

Siden oppdatert : fredag 29. september 2023

ページ作成日 : torsdag 24. mars 2022

現在表示しているページは選択中の表示言語には対応しておりません。

検証環境

Windows

Unity エディター

Unity エディターで制作したゲームは Unity エディター上で実行できますがそのままでは他の環境で単独で動かすことはできません。ここでは Web ブラウザ上でゲームが動く形式「WebGL」で出力する方法について説明します。

出力にはそれなりの時間がかかるので通常の開発やデバッグはエディター上で行い、対象環境でテストを行いたいときに出力を行うとよいでしょう。

WebGL を使用するには追加のモジュールが必要です。

Unity Hub を起動し左のメニューから「インストール」を選択します。 WebGL をインストールするバージョンの歯車アイコンをクリック、「モジュールを加える」を選択します。

プラットフォームグループの中にある「WebGL Build Support」にチェックを付けてインストールします。

インストールが完了するまで待ちます。

新しいプロジェクトを作成するときに選択できる「2D Platformer Microgame」をゲームとして出力します。もちろんすでに作成したゲームがある場合はそのゲームを出力してください。

Unity エディターが起動しプロジェクトが読み込まれた状態にします。

メニューから「ファイル > ビルド設定」を選択します。

「Build Settings」ダイアログが表示されたら「ビルドに含まれるシーン」から使用するシーンすべてのチェックを付けます。

左のプラットフォームから「WebGL」を選択します。

もしメニュー名の右側に Unity のアイコンがついていない場合はアクティブになっていないので、その場合は「WebGL」を選択している状態で右下にある「Switch Platform」ボタンをクリックしてください。

「WebGL」を選択すると右側に設定項目が表示されるので以下のように設定します。

項目	設定値
コード最適化	速度
他	チェックしない

設定が終わったら「ビルド」ボタンを押して出力します。出力後にすぐ動かしたい場合は「ビルドして実行」ボタンをクリックします。

プログラムの出力先を指定します。フォルダ内にいくつかファイルが作成されるので任意の空フォルダを選択するとよいでしょう。既存の同名ファイルがある場合は上書きされます。ビルドには時間がかかりますのでしばらく待ちます。

以下のようなファイアウォール設定画面が表示された場合は環境に合わせてアクセス許可してください。よく分からない場合は「プライベート」にのみチェックしてアクセスを許可します。

ビルドが完了するとファイルが作成されます。

これらのファイルを直接起動してゲームを実行することはできません。必ず Web サーバーを用意してそこにゲームプログラムを配置してから Web ブラウザでアクセスする必要があります。

ただしプログラムを出力するときに「ビルドして実行」ボタンを押した場合はファイルを出力した後に Unity が簡易 Web サーバーを立ち上げてゲームを実行することができます。ただこれはあくまでも動作確認として動かしているだけなので、リリースする際は別途 Web サーバーの準備が必要となります。

出力する際に設定を何も変更しないで出力した場合は各ファイルが gzip で圧縮された形で出力されます。これにより圧縮しないで出力するよりもファイルサイズをかなり減らすことができます。

しかし、ゲームを配置する Web サーバーによっては gzip で圧縮されたファイルを正しく処理できない場合があります。その場合はプログラムを圧縮せずに出力して Web サーバーに配置することになります。

圧縮設定を変更するにはビルド設定の画面で WebGL を選択していう状態で「プレイヤー設定」のボタンをクリックします。

Project Settings の画面で Player メニューが選択されているはずなので、下の方にある「WebGL の設定」から「公開設定」を展開します。

「圧縮形式」という項目があるのでそこから「無効」を選択します。ちなみにより圧縮率の高い「Brotli」という形式もありますが比較的新しいフォーマットであるため、gzip よりもさらに対応している Web サーバーが少なくなります。

選択したらあとは今まで通りビルドして出力してください。

ちなみに 2D Platformer Microgame をこれらの圧縮形式の有無によって出力した場合ファイルサイズが以下のようになります。