Параметры размера и масштабирования

Phaser — это мощная библиотека для создания 2D-игр на JavaScript, где управление размером и масштабированием объектов играет ключевую роль для корректного отображения сцены на различных устройствах. Основными объектами для работы с размерами являются игровая сцена, спрайты, текстовые объекты, изображения и контейнеры.

Размер сцены задается при создании нового экземпляра игры через конфигурацию:

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

const game = new Phaser.Game(config);

Параметры width и height определяют внутренние размеры канваса, а масштабирование всего игрового пространства регулируется через объект scale:

scale: {
    mode: Phaser.Scale.FIT,
    autoCenter: Phaser.Scale.CENTER_BOTH
}

Режимы масштабирования

Phaser поддерживает несколько режимов масштабирования, каждый из которых влияет на то, как игра адаптируется к экрану:

  • Phaser.Scale.NONE — отсутствие масштабирования, сцена остается фиксированной, может обрезаться на малых экранах.
  • Phaser.Scale.FIT — сцена масштабируется, сохраняя пропорции, помещаясь целиком в доступное окно.
  • Phaser.Scale.ENVELOP — сцена масштабируется так, чтобы заполнить весь экран, возможна обрезка по одной из сторон.
  • Phaser.Scale.RESIZE — сцена подстраивается под размеры окна без сохранения исходных пропорций.

Пример настройки:

const config = {
    type: Phaser.AUTO,
    width: 1024,
    height: 768,
    scale: {
        mode: Phaser.Scale.FIT,
        autoCenter: Phaser.Scale.CENTER_BOTH
    },
    scene: [MainScene]
};

Масштабирование спрайтов и изображений

Каждый объект в Phaser имеет свойства scaleX и scaleY, а также удобный метод setScale() для однотипного масштабирования по обеим осям:

let sprite = this.add.sprite(400, 300, 'player');
sprite.setScale(2);        // увеличивает спрайт в 2 раза по X и Y
sprite.setScale(1, 0.5);   // растягивает по X и сжимает по Y

Можно также использовать свойства displayWidth и displayHeight для задания точного размера объекта без влияния на его исходные размеры текстуры:

sprite.displayWidth = 100;
sprite.displayHeight = 150;

При работе с анимациями важно учитывать origin — точку привязки спрайта, задаваемую методом setOrigin(x, y). Она влияет на поведение при масштабировании и вращении.

sprite.setOrigin(0.5, 0.5); // центр спрайта
sprite.setOrigin(0, 0);     // левый верхний угол

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

Текстовые объекты управляются через стиль fontSize и свойства масштаба:

let text = this.add.text(400, 300, 'Phaser', { fontSize: '32px', color: '#ffffff' });
text.setScale(1.5); // увеличивает текст

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

Контейнеры и группировка объектов

Phaser предоставляет Container для объединения нескольких объектов в один. Масштабирование контейнера влияет на все его дочерние элементы:

let container = this.add.container(200, 200);
container.add([sprite, text]);
container.setScale(1.5); // масштабирование всех объектов внутри

Это удобно для создания составных объектов, UI-элементов или игровых платформ с несколькими частями.

Адаптивность и Retina-экраны

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

render: {
    pixelArt: true,   // предотвращает размывание пиксельной графики
    antialias: false
}

Pixel-art графика особенно чувствительна к масштабированию, поэтому рекомендуется использовать pixelArt: true и избегать дробного масштабирования.

Динамическое масштабирование

Phaser позволяет изменять масштаб сцены и объектов в процессе игры через scale и методы объектов:

this.scale.resize(newWidth, newHeight);
sprite.setScale(sprite.scaleX * 1.1);

Это полезно для эффектов зума, увеличения UI-элементов или адаптации под изменение размеров окна браузера.

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

  • Сцена: width, height, scale.mode, scale.autoCenter.
  • Объекты: setScale, scaleX, scaleY, displayWidth, displayHeight, origin.
  • Контейнеры: масштабирование влияет на всех дочерних.
  • Текст: лучше менять fontSize для четкости, setScale для визуальных эффектов.
  • Pixel-art: использовать pixelArt: true и избегать дробного масштабирования.
  • Адаптивность: режимы FIT, ENVELOP, RESIZE и центрирование обеспечивают корректное отображение на всех устройствах.

Правильное использование этих инструментов позволяет создавать игры с гибким и предсказуемым поведением объектов на любых экранах, сохраняя пропорции, четкость графики и управляемость сцены.

Оглавление