Unity Web プラットフォームにデプロイするには、まず Web モジュールを Unity エディターに追加して Web ビルドを作成する必要があります。Unity Hub でインストールを見つけて、設定アイコンをクリックし、 モジュールの追加を選択します。

新しいダイアログボックスで、下にスクロールして 「Web ビルド サポート」を見つけ、それを選択して 「完了」をクリックします。

プロジェクトを再度開き、[ファイル] > [ビルド設定]でターゲット プラットフォームを切り替えます。ゲームを開発する際には、開発ビルド オプションを使用します。スタック トレース、詳細なエラー メッセージ、ログ情報などの追加のデバッグ情報が提供され、ゲームのトラブルシューティングや変更に役立ちます。ゲーム コード、アセット、または設定に小さな変更を加え、完全なビルド プロセスを実行することなく、ブラウザーでそれらの変更をすばやく再構築してテストできます。

最終的に公開されるビルドのビルド設定で開発ビルド オプションのチェックを必ず外してください。

プレイテスト用にブラウザで実行されるゲームのバージョンを作成するには、「ビルドと実行」を 選択します。Google Chrome は、多数の開発者ツールを提供しているため、プレイテストに適しています。

ビルドの場所を選択するように求められます。ビルド内のファイルには、Web 上のドキュメントの構造とコンテンツを構成するオブジェクトのデータ表現であるドキュメント オブジェクト モデル (DOM) に HTML5 Canvas 要素を追加する index.html ファイルが含まれています。ゲームはこのキャンバスにレンダリングされます。ビルド ファイルには、TemplateData フォルダーと Build フォルダーも含まれます。TemplateData フォルダーには、ブラウザーのアドレス バーで使用されるファビコンや、ページの HTML マークアップで使用される画像など、ページで使用される HTML アセットが含まれています。

自動ビルドを設定することもできます。UnityBuild Automation は その 1 つのオプションです。

Web ゲームには、組み込みのレンダリング パイプラインまたはユニバーサル レンダリング パイプライン (URP) を使用できます。ただし、複数のハードウェア デバイスに合わせてコンテンツを効率的にカスタマイズおよび拡張できるため、URP をお勧めします。

上級 Unity クリエイター向けの電子書籍『Universal Render Pipeline 入門』で、組み込みのレンダリング パイプラインから URP にプロジェクトを移行する詳細な手順を学びます。

コンソールをターゲットにする場合、メモリ、CPU、GPU の使用に関する正確な仕様がわかります。ウェブはまったく別のものです。ゲームを幅広いユーザーに提供するには、メモリが制限された環境でもゲームが適切に動作することを確認する必要があります。

ここでは、電子書籍『 モバイル ゲームのパフォーマンスを最適化する』から抜粋した、ローエンドのハードウェアでゲームをスムーズに実行するためのヒントをいくつか紹介します。

1.ゲームアセットを最適化する

テクスチャやモデルなどのアセットを Web 用に最適化します。たとえば、該当する場合は圧縮テクスチャを使用し、モデル内のポリゴン数を減らします。決まったルールはありませんが、パフォーマンスの一貫性を確保するために、チーム内でいくつかの一般的なガイドラインについて合意してください。

2.オブジェクトプーリングを使用する

オブジェクト プーリングは 、新しいオブジェクトを作成して破棄するのではなく、オブジェクトを再利用することでパフォーマンスを向上させることができる手法です。これは、スポーンとデスポーンが頻繁に発生するゲームに役立ちます。フライホイールのような他のプログラミング設計パターンも役立ちます。Unity プロジェクトでデザインパターンを実装する方法に関する高度なヒントについては、電子書籍 「ゲーム プログラミング パターンでコードをレベルアップ」を参照してください。

3.ユニバーサルレンダーパイプラインとSRPバッチャを使用する

シーンに応じて CPU レンダリングを高速化する Unity の SRP Batcher バッチング システムを使用してパフォーマンスを向上します。これは、シェーダーやテクスチャなどの共有マテリアル プロパティに基づいて描画呼び出しをグループ化することで機能し、レンダリング中に必要な状態変更の数を減らします。

5.オクルージョンカリングを使用する

Unity の オクルージョン カリング システムは、プレイヤーに見えるオブジェクトのみをレンダリングすることでパフォーマンスを向上させることができます。オクルージョン カリングは、廊下でつながれた部屋のように、小さく明確に定義された領域が固体のゲーム オブジェクトによって互いに分離されているシーンで最も効果的に機能します。

5.組み込みのLOD（詳細レベル）システムを使用する

Unity の組み込み LOD システムは、 プレイヤーから遠く離れたオブジェクトの複雑さを軽減することでパフォーマンスを向上させます。カメラとオブジェクトの距離が長くなると、LOD システムはオブジェクトの高詳細バージョンを低詳細バージョンに自動的に入れ替え、一貫した外観を維持しながらレンダリングの作業負荷を軽減します。

5.可能な場合は照明をベイクする

ライトマップ と ライトプローブを使用してシーンの照明情報を事前計算することでパフォーマンスを向上させます。

5.不要な文字列の作成や操作を減らす

C# では、文字列は値型ではなく参照型です。JSON や XML などの文字列ベースのデータ ファイルの解析は避け、代わりに ScriptableObject または MessagePack や Protobuf などの形式でデータを保存します。永続的なゲームデータを保存する場合 (ゲームを保存する場合) には、バイナリ形式を検討することもできます。実行時に文字列を構築する必要がある場合は、StringBuilder クラスを使用します。

5.Addressable Asset System を試す

Addressable Asset System は、AssetBundle を「アドレス」またはエイリアスで読み込むことで、コンテンツを管理する簡単な方法を提供します。この統合システムは、ローカル パスまたはリモート コンテンツ配信ネットワーク (CDN) のいずれかから非同期的に読み込まれます。

5.後処理効果を制限する

フルスクリーンのポストプロセス効果はパフォーマンスを低下させる可能性があるため、ゲームでは控えめに使用してください。

Unity Web ビルドを作成すると、Unity は テンプレート を使用してゲームを表示する Web ページを生成します。

デフォルトのテンプレートは次のとおりです。

• デフォルト：灰色のキャンバスに読み込みバーが表示された白いページ
• 最小限:ゲームを実行するために必要な最小限の定型文
• プログレッシブウェブアプリ（PWA）：これには、Web マニフェスト ファイルとサービス ワーカーが含まれます。適切なデスクトップ ブラウザーでは、プレーヤーの起動可能なアプリケーションにゲームを追加するためのインストール ボタンがアドレス バーに表示されます。

独自のカスタムHTMLページを作成する最も簡単な方法は、3つのテンプレートのいずれかを使用することです。 <UnityInstallation>/PlaybackEngines/WebGLSupport/BuildTools/WebGLTemplates/。 Mac では、Unity インストール フォルダーはアプリケーション フォルダー内にあります。

テンプレートをコピーし、独自の Project/Assets/WebGLTemplates フォルダーに配置し、後で識別できるように名前を変更します。ゲーム コンテンツ、展開サイト、ターゲット プラットフォームに合わせてカスタマイズできるようになりました。

プロジェクトの WebGLTemplates フォルダー内のテンプレートは 、[編集] > [プロジェクト設定...] > [プレーヤー] > [解像度とプレゼンテーション] パネルに表示されます。テンプレートの名前はフォルダーと同じです。このオプションに簡単に参照できるサムネイル画像を追加するには、テンプレート フォルダーに 128 x 128 ピクセルの画像を追加し、thumbnail.png という名前を付けます。

ビルド プロセス中に、Unity はテンプレート ファイルを前処理し、それらのファイルに含まれるすべてのマクロと条件付きディレクティブを評価します。すべてのマクロ宣言を検索してエディターが提供する値に置き換え、テンプレート フォルダー内のすべての .html、.php、.css、.js、および .json ファイルを自動的に前処理します。

たとえば、次のコード行を見てください。

<キャンバスid="unity-canvas" 幅={{{ WIDTH }}} 高さ={{{ HEIGHT }}} tabindex="-1"></canvas>

解像度とプレゼンテーション パネルで デフォルトのキャンバスの幅が 960 に設定され、 デフォルトのキャンバスの高さが 600 に設定されている場合、前処理後のコードは次のようになります。

<canvas id="unity-canvas" width="960" height="600" tabindex="-1"></canvas>.

三重の中括弧は、指定された変数の値を見つけるようにコンパイラに指示します。

#if、 #else 、 #endifを使用した条件付きディレクティブのデフォルト テンプレートの例も見つかります。

#if 式

//EXPRESSIONが真の値に評価された場合

#else

//EXPRESSIONが真の値に評価されない場合

#endif

カスタムテンプレートを使用する場合は、Unity Asset Store で さまざまなオプションが提供されています。

ブラウザベースのゲーム用のプラットフォームでゲームを共有する場合は、仕様に合わせて index.html ページを調整する必要があります。これを実行する方法については、Web ゲームでよく使用されるプラットフォームのドキュメントを参照してください。

• CrazyGames
• Poki
• コングレゲート
• Itch.io
• アーケードの構築
• シマー

多くの場合、レスポンシブ デザインに対応するためにゲームのブラウザー ウィンドウのサイズを変更する必要がありますが、そのためには読み込みコードを適応させる必要があります。これを実現するには、JavaScript で「Promise」を使用できます。これは、まだ完了していないが、将来完了することが予想される操作を表します。

各テンプレートの index.html ページ (以下のコード例を参照) で、script.onloadを見つけます。script.onload は、Unity のエンジン スクリプトの読み込みが完了したときにトリガーされるイベントです。それが起こる直前に、Unity インスタンスへの参照を保持する myGameInstanceと、ゲームの読み込みが完了したかどうかを示し、デフォルトで false に設定される myGameLoadedという 2 つのグローバル変数があります。これらは var として宣言されているため、グローバル スコープを持ち、スクリプト内のどこからでもアクセスできます。

createUnityInstance() 関数は、Unity ゲームの新しいインスタンスを作成するために呼び出されます。この関数は、ゲームが完全にロードされ、レンダリングの準備ができたときに解決される Promise を返します (createUnityInstance Promise の then ブロック)。

then() 内では、myGameInstance に Unity インスタンスが割り当てられ、myGameLoaded が true に設定され、ゲームの準備ができたことが示されます。次に、ゲームのサイズを初期設定するために resizePage() 関数が呼び出され、ウィンドウのサイズ変更イベントにイベント リスナーが追加され、ウィンドウのサイズが変更されるたびにゲームのサイズが更新されるようになります。以下のコードスニペットを参照してください。

次に、次のコード スニペットに示すように、スクリプトの下部に resizePage 関数があり、これを使用してゲームのサイズをウィンドウのサイズに合わせて変更します。ゲームがロードされると、ゲームを表示するキャンバスのスタイル値がウィンドウのサイズに合わせて設定され、ウィンドウ全体に表示されます。

function resizePage(){

myGameInstance !== 未定義 && myGameLoaded === true の場合

{

canvas.style.width = window.innerWidth + 'px';

canvas.style.height = window.innerHeight + 'px';

}

}

ブラウザを対象とする多くのゲームでは、ユーザー ログインやハイスコア テーブルなどのサポートのために Web サービスを呼び出したり、ブラウザ DOM と対話したりできるようにするために、JavaScript コードと対話する必要があります。C# スクリプトから呼び出せるように直接追加する JavaScript には、.jslib 拡張子を付け、Assets/Plugins フォルダーに配置する必要があります。mergeInto メソッドでラップする必要があります。これには 2 つのパラメータが必要です。LibraryManager.library の後に、1 つ以上の関数を含む JavaScript オブジェクトを指定します。関数は標準の JavaScript です。GetExchangeRates では、以下のシンプルな JSON 配信 Web サービスの使用方法を示します。

ビルドを作成すると、これらの関数が Build/<ゲーム名>.framework.js ファイルに追加されます。次のコード例に示すように、関数を DllImport として宣言することにより、C# スクリプトからこれらの関数を呼び出すことができます。

パブリッククラス SphereController:MonoBehaviour
{
[DllImport("__Internal")]
private static extern void GetExchangeRates();

private void Start()
{
GetExchangeRates();
}
}

詳細情報

ブラウザスクリプトとの対話

コードとのやり取り:Emscripten

C# が JavaScript 関数を呼び出すだけでなく、JavaScript は C# メソッドを呼び出すこともできます。関連するメカニズムでは、メッセージング プロトコルが使用されます。

myGameInstance.SendMessage(‘MyGameObject’, ‘MyFunction’)

myGameInstance.SendMessage(‘MyGameObject’, ‘MyFunction’, 5)

myGameInstance.SendMessage(‘MyGameObject’, ‘MyFunction’, ‘A string’)

SendMessage を使用するには、スコープ内のゲーム インスタンスへの参照が必要です。通常の手法としては、index.html を編集してグローバル変数を追加し、これを前述のように script.onload Promise の then ブロックに割り当てます。この単純な関数は、Sphereという名前の GameObject に接続された MonoBehaviour コンポーネントの一部として追加されます。

public void SetHeight( float height )

{

ベクトル3 pos = transform.position;

pos.y = 高さ;

変換位置 = pos;

}

F12 キーを使用して Chrome のコンソールを開き、直接次のように入力できます。

myGameInstance.SendMessage('Sphere', 'SetHeight', 3)

Enter キーを押して、 球を移動する機能を呼び出します。動きは 、「バックグラウンドで実行」が 設定されている場合、または Application.runInBackground が true に設定されている場合にのみレンダリングに反映されます。これは、デフォルトではキャンバス ウィンドウにフォーカスがある場合にのみレンダリングが実行されるためです。

ブラウザ プラットフォームのデバッグ時には Debug.Log を使用します。すべてのメッセージはブラウザのコンソールに送信されます。Chrome の場合は、F12 キーを押してコンソール タブに切り替えると見つかります。しかし、Debug クラスにはさらに多くのオプションが用意されています。Debug.LogErrorを使用すると、コンソールは役立つスタック トレースを提供します。

詳細情報

WebGLビルドのデバッグとトラブルシューティング

デバッグクラス

開発中は開発ビルド オプションを使用することをお勧めしますが、ゲームをライブ サイトにデプロイするときはこのオプションのチェックを外してください。リリース ビルドの場合は、圧縮のオプションがあります。圧縮を使用する場合は、サーバーの設定を調整する必要がある場合があります。これを行う方法については、 マニュアル を参照してください。

パフォーマンスの問題を適時に把握できるように、開発サイクル全体にわたってプロジェクトをプロファイリングすることが重要です。Unity Profiler は、 ゲームのパフォーマンスのボトルネックを特定して修正するのに適したツールです。CPU とメモリの使用状況を追跡し、最適化が必要なゲームの領域を特定するのに役立ちます。また、 プロファイル アナライザー、 メモリ プロファイラー、Web 診断オーバーレイ を併用することもできます。

Unity でのプロファイリングについて詳しく知るには、電子書籍 「Unity ゲームのプロファイリングに関する究極のガイド」 をダウンロードしてください。

Unity Web ビルドのプロファイリングを開始するためのヒントをいくつか見てみましょう。

Unityのプロファイラーを有効にする

エディターで 「ファイル」>「ビルド設定」 に移動し、「開発ビルド」 と 「プロファイラーの自動接続」 を選択して、Web ビルドでプロファイラーを使用します。

CPU使用率モジュールを選択する

このモジュールを 使用して、コードのパフォーマンスを分析し、パフォーマンスの問題を引き起こしている領域を特定します。関数呼び出し、スクリプト実行、ガベージ コレクションなどの要素を分析します。

メモリプロファイラモジュールを選択する

Unity Web ビルドでは、他のプラットフォームと比較してメモリ リソースが制限されています。このモジュールを 使用して、アプリケーションのメモリ使用量を分析し、最適化する領域を特定します。

Chrome DevToolsのパフォーマンスパネルを使用する

Chrome DevTools には、ゲームのボトルネックを詳しく調べるのに役立つ パフォーマンス パネルが含まれています。その他の機能としては、JavaScript ファイルにブレークポイントを追加するための ソース パネルと、デバッグ メッセージを表示したり JavaScript コードを入力したりするための コンソール パネルが用意されています。

さまざまなデバイスでパフォーマンスを測定する

これにより、特定のデバイスやブラウザに固有のパフォーマンスの問題を特定し、それに応じてゲームを最適化することができます。

描画呼び出し回数を減らす

描画呼び出しは、Unity Web ビルドの主なパフォーマンスボトルネックの 1 つです。Unity Profiler を使用して、描画呼び出しの数が多い領域を特定し、 それを減らすようにします。

ローエンドデバイスのパフォーマンスを分析する

ローエンドのデバイスでテストして、アプリケーションが幅広いハードウェアに対して最適化されていることを確認します。

プロファイリング中に「バックグラウンドで実行」を有効にする

WebGL プレーヤー設定で 「バックグラウンドで実行」 が有効になっている場合、または Application.runInBackgroundが有効になっている場合は、キャンバスまたはブラウザー ウィンドウがフォーカスを失ってもコンテンツは引き続き実行されるため、プロファイリング時に役立ちます。

Unity Web ビルドは、ゲームを幅広いユーザーに配布するのに最適な方法です。開発中は、ジオメトリとテクスチャを適度なサイズに保ち、描画呼び出しを減らし、さまざまなデバイスでプロファイルとテストを行うことを目指す必要があります。最後に、URP を使用して、幅広いハードウェアにわたって安定したパフォーマンスを確保します。

詳細情報

UnityのWebGLモジュールを使用するためのヒントとコツ

Unity Webマニュアル

Unity 2023.3 の新しい WebGPU バックエンドへの早期アクセス

公式 Web ランタイムのアップデートはこちらです:ブラウザを次のレベルに引き上げましょう

Unity の高度な電子書籍と記事はすべて 、Unity ベストプラクティス ハブで見つかります。