Конфигурация canvas и адаптация под экран

В PlayCanvas создание сцены начинается с конфигурации канваса, который представляет собой область для рендеринга графики. Канвас используется для вывода 3D-объектов, текстур и эффектов на экран. Конфигурация канваса играет ключевую роль в производительности приложения, особенно если речь идет об оптимизации под различные устройства и экраны.

PlayCanvas предоставляет гибкие возможности для работы с канвасом, позволяя настраивать размер, разрешение и поведение канваса в зависимости от характеристик экрана. Для этого необходимо правильно настроить параметры при инициализации сцены.

Создание и настройка канваса

Для создания канваса в PlayCanvas используется объект pc.Canvas. Этот объект автоматически привязывается к элементу HTML и управляет его размерами и параметрами.

var canvas = document.createElement('canvas');
document.body.appendChild(canvas);
var app = new pc.Application(canvas, {
    mouse: new pc.Mouse(document.body),
    touch: new pc.TouchDevice(canvas)
});
app.start();

В данном примере создается элемент канваса, который добавляется в DOM-дерево. Затем инициализируется объект приложения, привязывающий мышь и сенсорные устройства для взаимодействия.

Основные параметры конфигурации канваса:

  1. Размер канваса: по умолчанию PlayCanvas использует размер экрана устройства, но этот параметр можно настроить вручную с помощью метода setCanvasSize(width, height):

    app.graphicsDevice.setCanvasSize(window.innerWidth, window.innerHeight);

  2. Режим растяжения: PlayCanvas позволяет выбирать, как канвас будет масштабироваться при изменении размеров экрана. Это настраивается через параметр resolution.

    app.graphicsDevice.maxPixelRatio = 2; // Масштабирование для высокого разрешения

  3. Позиционирование и контейнер: часто канвас размещается внутри контейнера для дополнительного управления его позиционированием и размерами. Это может быть полезно при реализации адаптивных интерфейсов или вставки канваса в другие компоненты веб-страницы.

Адаптация под экран

Для создания приложения, которое будет корректно отображаться на различных устройствах с разными разрешениями и размерами экранов, необходимо правильно адаптировать канвас. Важно учитывать такие параметры, как соотношение сторон, плотность пикселей и динамическое изменение размеров экрана.

Обработка изменения размера экрана

Для правильной адаптации под размер экрана нужно отслеживать изменения его размера и соответственно изменять размеры канваса. Это можно сделать с помощью стандартного события resize:

window.addEventListener('resize', function() {
    var width = window.innerWidth;
    var height = window.innerHeight;
    
    // Установка новых размеров для канваса
    app.graphicsDevice.setCanvasSize(width, height);
});

Такой подход позволяет динамически изменять размер канваса при изменении окна браузера или поворота устройства.

Масштабирование и соотношение сторон

PlayCanvas поддерживает настройку соотношения сторон для канваса. Это позволяет задать предпочтительное соотношение сторон сцены и масштабировать её под экран устройства, не искажая изображение.

Для этого используются параметры aspectRatio и autoResize. Например, можно установить фиксированное соотношение сторон:

app.graphicsDevice.setCanvasSize(window.innerWidth, window.innerHeight);
app.graphicsDevice.canvas.style.width = '100%';
app.graphicsDevice.canvas.style.height = '100%';

Если важно сохранить фиксированное соотношение сторон, можно вычислить масштабирование:

var aspectRatio = 16 / 9; // предпочтительное соотношение
var width = window.innerWidth;
var height = window.innerHeight;

if (width / height > aspectRatio) {
    width = height * aspectRatio;
} else {
    height = width / aspectRatio;
}

app.graphicsDevice.setCanvasSize(width, height);

Поддержка разных плотностей пикселей

Для мобильных устройств и экранов с высокой плотностью пикселей (например, Retina-дисплеи) важно учитывать параметр maxPixelRatio, который регулирует количество пикселей, используемых для рендеринга канваса. При значении 2 и выше качество изображения будет улучшено на экранах с высокой плотностью, но это может повлиять на производительность.

app.graphicsDevice.maxPixelRatio = 2; // для экрана с высокой плотностью пикселей

Кроме того, PlayCanvas автоматически настраивает разрешение канваса в зависимости от плотности пикселей устройства. Если требуется отключить эту автоматическую настройку, можно вручную настроить разрешение через setResolution:

app.graphicsDevice.setResolution(window.innerWidth * 2, window.innerHeight * 2);

Динамическое управление разрешением

Рекомендуется использовать подход, при котором разрешение канваса изменяется в зависимости от возможностей устройства и его плотности пикселей. Это обеспечит лучшую производительность на устройствах с меньшей плотностью пикселей и улучшит качество изображения на устройствах с высокой плотностью.

var ratio = window.devicePixelRatio || 1;
var width = window.innerWidth * ratio;
var height = window.innerHeight * ratio;

app.graphicsDevice.setCanvasSize(width, height);

Таким образом, PlayCanvas предоставляет мощные инструменты для работы с канвасом и его адаптации под различные устройства. Правильная настройка канваса позволяет достичь высокой производительности и качества изображения на самых разных экранах, что особенно важно для веб-игр и интерактивных приложений.

Оглавление