Маски камеры

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

Создание масок

В Phaser есть два основных подхода к маскам: геометрические маски и графические маски.

Геометрические маски (Rectangle Mask)

Геометрические маски позволяют использовать простые формы — прямоугольники или другие стандартные фигуры — для ограничения области рендеринга камеры.

Пример создания маски для камеры:

const camera = this.cameras.main;
const maskShape = new Phaser.Geom.Rectangle(100, 50, 400, 300);
camera.setMask(new Phaser.Display.Masks.GeometryMask(this, maskShape));

Особенности геометрических масок:

  • Маска задается через Phaser.Geom.Rectangle, Phaser.Geom.Circle или Phaser.Geom.Ellipse.
  • Используется Phaser.Display.Masks.GeometryMask.
  • Эффективна для статических и динамических объектов с простыми формами.

Графические маски (Bitmap Mask)

Графические маски дают больше свободы и позволяют использовать сложные изображения или динамически изменяемые графические объекты для маскирования камеры.

Пример графической маски:

const graphics = this.add.graphics();
graphics.fillStyle(0xffffff);
graphics.fillCircle(300, 200, 100);

const mask = graphics.createGeometryMask();
this.cameras.main.setMask(mask);

Особенности графических масок:

  • Маска создается с помощью graphics.createGeometryMask() или graphics.createBitmapMask().
  • Можно использовать анимацию или движение маски для динамических эффектов.
  • Позволяет комбинировать несколько масок через слои графики.

Применение масок к камере

Маска применяется напрямую к объекту камеры с помощью метода setMask(). После применения все объекты сцены будут отображаться только в пределах маски.

Пример с анимацией маски:

this.tweens.add({
    targets: graphics,
    x: 400,
    duration: 2000,
    yoyo: true,
    repeat: -1
});

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

Взаимодействие масок с другими камерами

Phaser поддерживает несколько камер на одной сцене. Каждая камера может иметь собственную маску:

const cam1 = this.cameras.add(0, 0, 400, 300);
const cam2 = this.cameras.add(400, 0, 400, 300);

cam1.setMask(mask1);
cam2.setMask(mask2);

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

Производительность

Использование масок может влиять на производительность, особенно графических и анимированных масок. Рекомендуется:

  • Использовать простые геометрические маски для больших сцен.
  • Ограничивать количество активных графических масок.
  • Применять маски только к необходимым камерам или объектам.

Практические сценарии

  • Выделение объектов: маска камеры позволяет подсветить конкретную область, скрывая все остальное.
  • Мини-карты и окна наблюдения: отдельная камера с маской создаёт эффект “окна” для наблюдения за сценой.
  • Пошаговые туториалы: динамическая маска может направлять внимание игрока на определенные элементы интерфейса или сцены.
  • Эффекты затемнения и Spotlight: круглая или овальная маска создает эффект прожектора на фоне затемненной сцены.

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

Оглавление