Масштаб: scaleX, scaleY, setScale

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

Свойства scaleX и scaleY

Каждый объект в Phaser, который наследует от GameObject, обладает свойствами scaleX и scaleY. Они определяют коэффициенты масштабирования по горизонтали и вертикали соответственно.

  • scaleX — масштаб по оси X (ширина).
  • scaleY — масштаб по оси Y (высота).

По умолчанию оба значения равны 1, что соответствует исходному размеру объекта.

Пример изменения масштаба спрайта:

let player = this.add.sprite(400, 300, 'player');

// Увеличение ширины в 2 раза
player.scaleX = 2;

// Уменьшение высоты в 0.5 раза
player.scaleY = 0.5;

При отрицательных значениях scaleX или scaleY объект инвертируется по соответствующей оси. Это часто используется для зеркального отображения спрайтов, например, при смене направления движения персонажа.

// Зеркальное отражение спрайта по горизонтали
player.scaleX = -1;

Метод setScale

Метод setScale обеспечивает более удобный способ управления масштабом, объединяя оба направления в один вызов и позволяя задавать одинаковый или различный коэффициент для осей X и Y.

Сигнатуры метода:

  1. setScale(scale: number) — одинаковый коэффициент для обеих осей.
  2. setScale(scaleX: number, scaleY: number) — разные коэффициенты для X и Y.

Пример использования:

let enemy = this.add.sprite(200, 200, 'enemy');

// Пропорциональное масштабирование
enemy.setScale(1.5);

// Разное масштабирование по осям
enemy.setScale(2, 0.8);

Метод setScale также возвращает сам объект, что позволяет использовать цепочку вызовов (chaining):

enemy.setScale(1.2).setAlpha(0.8).setTint(0xff0000);

Масштабирование относительно точки якоря

Точка якоря (origin) объекта в Phaser задаёт точку, вокруг которой выполняются трансформации: масштабирование, вращение и смещение. По умолчанию origin равен (0.5, 0.5), то есть центр объекта.

// Установка точки якоря в левый верхний угол
player.setOrigin(0, 0);

// Масштабирование будет происходить относительно верхнего левого угла
player.setScale(2);

Изменение origin позволяет точно контролировать, где объект «растет» при масштабировании, что важно для UI-элементов или анимации, где требуется смещение от конкретной точки.

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

Текстовые объекты Phaser (Phaser.GameObjects.Text) также поддерживают scaleX, scaleY и setScale. Это позволяет динамически изменять размер шрифта без пересоздания объекта:

let scoreText = this.add.text(50, 50, 'Score: 0', { fontSize: '32px', color: '#fff' });

// Увеличение размера текста в 1.5 раза
scoreText.setScale(1.5);

При этом свойства fontSize остаются прежними, а визуальный размер текста изменяется пропорционально масштабу.

Анимация масштаба

Масштабирование часто используется в анимации через tweens:

this.tweens.add({
    targets: player,
    scaleX: 1.5,
    scaleY: 1.5,
    duration: 500,
    yoyo: true,
    repeat: -1,
    ease: 'Sine.easeInOut'
});

В этом примере объект плавно увеличивается и возвращается к исходному размеру, создавая эффект «пульсации». Использование tweens с scaleX и scaleY позволяет реализовать сложные визуальные эффекты без изменения текстур.

Взаимосвязь с размерами объекта

Масштабирование напрямую влияет на свойства displayWidth и displayHeight, которые отражают реальные размеры объекта на экране с учётом масштаба:

console.log(player.displayWidth);  // исходная ширина * scaleX
console.log(player.displayHeight); // исходная высота * scaleY

Это особенно полезно при коллизиях или позиционировании относительно других объектов.

Советы по использованию

  • Для пропорционального увеличения всегда использовать одинаковые значения scaleX и scaleY или один аргумент setScale.
  • Для эффектов отражения по горизонтали или вертикали достаточно устанавливать отрицательные значения scaleX или scaleY.
  • При динамическом изменении масштаба UI-элементов учитывать origin, чтобы элементы масштабировались относительно нужной точки.
  • Для плавных анимаций масштаба лучше применять tweens, а не циклическое изменение значения в update.

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

Оглавление