In a Web application, the canvas element is where the browser draws the graphics when rendering a game. This section describes how to configure the visible size of the Web canvas element, and the resolution that the game renders to.
To configure your Web Canvas size, you must consider the following types of canvas size:
| キャンバスサイズ要素 | 説明 |
|---|---|
| キャンバス要素 CSS サイズ | この DOM (Document Object Model) は、ウェブページ上の、キャンバスが占める可視領域を指定します。キャンバスサイズは HTML や JavaScript を使用して設定できます。 |
| WebGL のレンダーターゲットサイズ | このサイズは、GPU がゲームをレンダリングするピクセル解像度を指定します。このサイズを CSS サイズと同期させて管理してピクセルパーフェクトなレンダリングを提供することも、CSS サイズから切り離すことも可能です。 |
上記の 2 つのキャンバスサイズ要素が一致しない場合、ブラウザーは、レンダリングされたWebGL 出力を、ウェブページ上の可視キャンバス領域いっぱいに引き伸ばします。
レンダリング解像度の切り離しは、ダウンスケールされた低 DPI (Dots Per Inch) レンダリングを高 DPI ディスプレイに実装する場合に役立ちます。これは、GPU フィルレートのパワーを節約するだけでなく、レンダリング解像度に繊細なアプリケーションにも役に立ちます。例えば、“ロジックはスクリーンスペースのピクセル単位を使用しているが、特定の解像度でないと正常に機能しない” アプリケーションなどです。
Unity はデフォルトでは、キャンバス要素の CSS サイズと WebGL のレンダーターゲットサイズの同期を保ち、1:1 のピクセルパーフェクトなレンダリングを提供します。JavaScript のウェブページがキャンバスの CSS サイズを変更した場合、Unity は自動的に WebGL のレンダーターゲットサイズをそれに合わせて調整します。この調整は、デフォルトで、高 DPI レンダリングを実装するために行われます。
If you want to override the DPI scale, open the index.html file and add the Unity Instance configuration variable devicePixelRatio=<double>. For example, setting devicePixelRatio=1 on the Web site template page will force Unity to always apply low DPI rendering. Refer to Using Web templates for an example.
To manually configure the canvas size, you must first disable the automatic size synchronization. To do so, in the index.html file of the Web template, set the Unity Instance configuration variable to false: matchWebGLToCanvasSize=false.
When this is set, Unity leaves the render target size of the canvas as-is but you can always configure the size, if required.
For example, to change the CSS size of the canvas, edit the following text in the index.html file:
<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>