Настройка веб-размера Canvas

В веб-приложении элемент canvas является местом, где браузер рисует графику при отображении игры. В этом разделе описывается, как настроить видимый размер элемента Web canvas и разрешение, в котором отображается игра.

Чтобы настроить размер Web Canvas, необходимо учитывать следующие типы размера полотна:

Canvas Размер элементов	Описание
Canvas элемент CSS размер	Эта Объектная Модель Документа (DOM) определяет видимую область на веб-странице, которую занимает холст. Вы можете настроить размер холста с помощью HTML или JavaScript.
WebGL отображает целевой размер	Этот размер определяет разрешение пикселей, в котором GPU рендирует вашу игру. Вы можете управлять этим размером в синхронизации с размером CSS, чтобы обеспечить пиксельно-идеальное рендеринг, или отделить его от размера CSS.

Если вышеуказанные два элемента размера полотна не совпадают, то браузер растянет рендируемый вывод WebGL, чтобы заполнить видимую область полотна на веб-странице.

Отделение разрешения рендеринга

Отделение разрешения рендеринга полезно при реализации пониженного низкого DPI (Точек на дюйм) рендеринга на высоком DPI дисплее. Это помогает не только сохранить GPU скорость заполнения, но и помогает, если ваше приложение чувствительно к разрешению рендеринга. Например, если логика приложения использует пиксели экранного пространства, но для правильной работы самого приложения требуется определенное разрешение.

По умолчанию Unity поддерживает синхронизацию размера элемента canvas CSS и целевого размера рендеринга WebGL и обеспечивает идеальное отображение в соотношении 1:1 пикселей. Если веб-страница в JavaScript изменяет размер canvas CSS, Unity автоматически настроит целевой размер рендеринга WebGL, чтобы соответствовать ему. По умолчанию это соответствие делается для реализации высокого рендеринга DPI.

Переопределение масштаба DPI

Если вы хотите переопределить масштаб DPI, откройте index.html файл и добавить Unity переменная конфигурации экземпляра devicePixelRatio=<double>. Например, установка devicePixelRatio=1 на странице шаблона веб-сайта заставит Unity всегда применять низкое отображение DPI. См. Конфигурация и взаимодействие веб-шаблона например.

Изменение размера отображения веб-панели вручную

Чтобы вручную настроить размер холста, вы должны сначала отключить автоматическую синхронизацию размера. Для этого в файле index.html веб-шаблона установите в переменной конфигурации экземпляра Unity значение 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>