Управление размером canvas и адаптация к экрану

В PixiJS элемент <canvas> создается автоматически при инициализации приложения через PIXI.Application. Управление его размерами является фундаментальным для корректного отображения графики на разных устройствах и экранах. Основной способ задания размеров — это параметры width и height при создании приложения:

const app = new PIXI.Application({
    width: 800,
    height: 600,
    backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);

Здесь app.view — это сам <canvas>, который можно стилизовать через CSS для позиционирования, однако размеры для рендеринга задаются через свойства приложения.

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

Для обеспечения корректного отображения на устройствах с разными разрешениями важно учитывать соотношение сторон и плотность пикселей (devicePixelRatio). PixiJS предоставляет возможность динамически масштабировать сцену с помощью свойства resolution:

const app = new PIXI.Application({
    width: window.innerWidth,
    height: window.innerHeight,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true
});
  • autoDensity: true автоматически масштабирует <canvas> под разрешение устройства.
  • resolution определяет, сколько пикселей на единицу CSS. При Retina-дисплеях window.devicePixelRatio может быть 2 или 3, что позволяет избежать размытия графики.

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

Для адаптации к динамическим изменениям окна используют событие resize и метод renderer.resize():

window.addEventListener('resize', () => {
    app.renderer.resize(window.innerWidth, window.innerHeight);
    // Дополнительно можно масштабировать контейнеры
    app.stage.scale.set(window.innerWidth / 800, window.innerHeight / 600);
});
  • renderer.resize(width, height) изменяет размер canvas и области рендеринга.
  • Масштабирование сцены (stage.scale) сохраняет пропорции объектов при изменении размеров.

Можно использовать разные стратегии масштабирования:

  1. Fit (подгонка) — сохраняет соотношение сторон, добавляя поля по горизонтали или вертикали.
  2. Fill (заполнение) — растягивает сцену на весь экран, может искажать объекты.
  3. Stretch (растяжение без сохранения пропорций) — полное заполнение, без сохранения соотношения сторон.

Пример функции подгонки с сохранением пропорций:

function resize() {
    const scale = Math.min(window.innerWidth / 800, window.innerHeight / 600);
    app.stage.scale.set(scale);
    app.renderer.resize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', resize);
resize();

Работа с контейнерами и слоями

PixiJS использует сцену (stage) как контейнер верхнего уровня. Для адаптивного отображения важно масштабировать не только <canvas>, но и все вложенные контейнеры:

const gameContainer = new PIXI.Container();
app.stage.addChild(gameContainer);

gameContainer.scale.set(window.innerWidth / 800, window.innerHeight / 600);

Это особенно полезно для 2D-игр, где объекты должны оставаться пропорциональными при изменении экрана.

Высокое разрешение и рендеринг текстур

При увеличении resolution важно учитывать, что текстуры должны быть качественными. PixiJS автоматически масштабирует текстуры, но для оптимального качества лучше загружать их с достаточным разрешением.

const texture = PIXI.Texture.from('sprite@2x.png');
const sprite = new PIXI.Sprite(texture);
sprite.scale.set(0.5); // если текстура в два раза больше
app.stage.addChild(sprite);

Использование текстур высокого разрешения предотвращает размытие на дисплеях с высокой плотностью пикселей.

Резюме по ключевым моментам

  • Размер <canvas> управляется через width и height приложения и renderer.resize().
  • Для Retina и HiDPI дисплеев используется resolution и autoDensity.
  • Адаптация к окну осуществляется через событие resize и масштабирование stage.
  • Различные стратегии масштабирования: fit, fill, stretch.
  • Масштабирование контейнеров сохраняет пропорции объектов.
  • Текстуры высокого разрешения важны для четкого рендеринга при увеличенном resolution.

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

Оглавление