Пиксельное соотношение devicePixelRatio

В современном веб-разработке растровая графика должна корректно отображаться на экранах с разной плотностью пикселей. devicePixelRatio — это число, показывающее соотношение физических пикселей экрана к логическим (CSS) пикселям. Например, на обычном мониторе devicePixelRatio равен 1, а на Retina-дисплеях может быть 2 или 3. В контексте PixiJS это критически важно для сохранения резкости и четкости рендеринга.

Настройка рендерера под devicePixelRatio

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

const app = new PIXI.Application({
    width: 800,
    height: 600,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
    backgroundColor: 0x1099bb
});
document.body.appendChild(app.view);

Ключевые моменты:

  • resolution — устанавливает фактическое разрешение рендеринга. Если не указано, по умолчанию равен 1.
  • autoDensity: true — автоматически масштабирует размеры канваса в CSS-пикселях, чтобы соответствовать физическому разрешению.

Использование autoDensity вместе с resolution гарантирует, что графика остаётся четкой на устройствах с высоким PPI без необходимости вручную масштабировать канвас.

Влияние devicePixelRatio на текстуры

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

const texture = PIXI.Texture.from('sprite.png', { resolution: window.devicePixelRatio || 1 });
const sprite = new PIXI.Sprite(texture);
app.stage.addChild(sprite);
  • Текстуры автоматически масштабируются в зависимости от resolution.
  • При изменении devicePixelRatio во время работы приложения может потребоваться перезагрузка текстур с новым разрешением для сохранения четкости.

Масштабирование сцены и графики

Для динамического масштабирования сцены в зависимости от devicePixelRatio рекомендуется использовать контейнер верхнего уровня:

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

// масштабируем контейнер под разрешение
stageContainer.scale.set(app.renderer.resolution);
  • Масштабирование контейнера помогает избежать необходимости пересоздавать спрайты.
  • При изменении размеров окна и изменении devicePixelRatio можно корректировать масштаб в реальном времени.

Динамическое обновление при изменении DPR

Современные устройства могут менять devicePixelRatio при переносе окна между экранами с разной плотностью. PixiJS позволяет реагировать на это через пересоздание рендерера или обновление параметров:

window.addEventListener('resize', () => {
    const newResolution = window.devicePixelRatio || 1;
    app.renderer.resolution = newResolution;
    app.renderer.resize(window.innerWidth, window.innerHeight);
});
  • Изменение resolution автоматически обновляет канвас.
  • resize пересчитывает физические размеры канваса с учётом нового DPR.
  • Для сложных сцен может потребоваться перерисовка текстур с новым разрешением.

Антиалиасинг и пиксельное соотношение

PixiJS позволяет управлять сглаживанием графики через параметр antialias при создании приложения:

const app = new PIXI.Application({
    width: 800,
    height: 600,
    resolution: window.devicePixelRatio || 1,
    autoDensity: true,
    antialias: true,
    backgroundColor: 0x1099bb
});
  • На высоких devicePixelRatio включение антиалиасинга улучшает визуальную гладкость линий и текстур.
  • Комбинация antialias: true и корректного resolution обеспечивает наилучшее качество рендеринга без размытия.

Практические рекомендации

  1. Всегда использовать resolution: window.devicePixelRatio || 1 для адаптации под дисплеи с высокой плотностью пикселей.
  2. Включать autoDensity, чтобы CSS- и физические размеры канваса совпадали.
  3. Использовать контейнер для масштабирования сцены, если требуется динамическая адаптация.
  4. Обновлять текстуры при изменении DPR, чтобы избежать размытости.
  5. Включать антиалиасинг, особенно для векторных графических элементов и линий.

Использование devicePixelRatio в PixiJS обеспечивает чёткий, резкий и адаптивный рендеринг на любых устройствах, от стандартных мониторов до Retina и 4K-дисплеев, без потери качества текстур и спрайтов. Правильная настройка рендерера и текстур позволяет создавать графику, которая одинаково хорошо выглядит на всех типах экранов.

Оглавление