ウェブアプリケーションでは、キャンバス要素は、ゲームをレンダリングするときにブラウザーがグラフィックスを描画する場所です。このセクションでは、ウェブのキャンバス要素の表示サイズと、ゲームがレンダリングする解像度を設定する方法について説明します。
ウェブのキャンバスサイズを設定するには、以下のタイプのキャンバスサイズを考慮する必要があります。
| キャンバスサイズ要素 | 説明 |
|---|---|
| キャンバス要素の CSS サイズ | このドキュメントオブジェクトモデル (DOM) は、キャンバスが占めるウェブページ上の表示領域を指定します。キャンバスサイズは HTML または JavaScript を使用して設定できます。 |
| WebGL のレンダーターゲットのサイズ | このサイズは、GPU がゲームをレンダリングするピクセル解像度を指定します。このサイズは、CSS サイズと同期して管理してピクセルパーフェクトなレンダリングを提供することも、CSS サイズから分離することもできます。 |
上記の 2 つのキャンバスサイズ要素が一致しない場合、ブラウザーはレンダリングされた WebGL 出力を、ウェブページの表示キャンバス領域に合わせて伸縮します。
レンダリング解像度を分離すると、高 DPI (1 インチあたりのドット数) ディスプレイで低 DPI のダウンスケールされたレンダリングを実装する場合に便利です。これは、GPU フィルレートのパワーを節約するだけでなく、アプリケーションがレンダリング解像度に敏感な場合にも役立ちます。例えば、アプリケーションロジックでスクリーンスペースピクセル単位が使用されているが、アプリケーション自体が正しく動作するためには、特定の解像度が必要な場合などです。
デフォルトでは、Unity はキャンバス要素の CSS サイズと WebGL のレンダーターゲットのサイズの同期を維持し、1:1 ピクセルパーフェクトレンダリングを実現します。JavaScript のウェブページがキャンバスの CSS サイズを変更すると、Unity はそれに一致するように WebGL のレンダーターゲットのサイズを自動的に調整します。デフォルトでは、この一致は高 DPI レンダリングを実装するために行われます。
DPI スケールをオーバーライドする場合は、index.html ファイルを開き、Unity Instance 設定変数 devicePixelRatio=<double> を追加します。例えば、ウェブサイトテンプレートページで devicePixelRatio=1 を設定すると、Unity は常に低 DPI レンダリングを適用します。例については、ウェブテンプレートビルド設定とインタラクション を参照してください。
キャンバスサイズを手動で設定するには、まず自動サイズ同期を無効にする必要があります。これを行うには、ウェブテンプレートの index.html ファイルで、Unity Instance 設定変数を false に設定します (matchWebGLToCanvasSize=false)。これを設定すると、Unity はキャンバスのレンダーターゲットのサイズをそのまま維持しますが、必要に応じていつでもサイズを設定できます。
例えば、キャンバスの CSS サイズを変更するには、index.html ファイルの以下のテキストを編集します。
<div id="unity-container" style="position: absolute; width: 100%; height: 100%">
<canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} style="width: 100%; height: 100%"></canvas>
</div>