Геометрические маски и Bitmap-маски

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

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

const graphics = this.add.graphics();
graphics.fillStyle(0xffffff); // Цвет маски не влияет на результат
graphics.fillRect(100, 50, 200, 150);

const mask = graphics.createGeometryMask();
sprite.setMask(mask);
  • fillStyle(color) задает цвет заливки, но в случае маски он не влияет на видимость объекта.
  • fillRect(x, y, width, height) определяет область маски. Любой объект, выходящий за пределы этой области, будет скрыт.
  • createGeometryMask() преобразует графику в маску, которую можно применить к спрайтам или группам.

Маска остается интерактивной и может быть анимирована. Например, можно перемещать графику, чтобы динамически изменять область видимости:

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

Применение маски к нескольким объектам

Одна маска может быть применена к любой коллекции объектов:

sprites.forEach(sprite => sprite.setMask(mask));

Это особенно удобно при работе с группами (Group или Container), так как маска будет действовать на все дочерние элементы контейнера.

Bitmap-маски

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

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

const maskImage = this.add.image(400, 300, 'maskTexture');
const bitmapMask = maskImage.createBitmapMask();
sprite.setMask(bitmapMask);
  • maskImage.createBitmapMask() создает маску на основе текстуры объекта Image или Sprite.
  • Белые области текстуры становятся видимыми, черные — скрытыми.
  • Прозрачные пиксели обрабатываются аналогично черным.

Bitmap-маски поддерживают динамические изменения, так как можно анимировать или изменять текстуру маски:

this.tweens.add({
    targets: maskImage,
    rotation: Math.PI * 2,
    duration: 3000,
    repeat: -1
});

Особенности работы с Bitmap-масками

  1. Производительность: Bitmap-маски более ресурсоемки, чем геометрические, особенно при использовании больших текстур или анимаций.
  2. Прозрачность: Альфа-канал изображения учитывается, что позволяет создавать мягкие переходы между видимыми и скрытыми областями.
  3. Комбинирование с геометрическими масками: Phaser позволяет использовать сразу несколько масок, создавая сложные эффекты.
sprite.setMask([geometryMask, bitmapMask]);

Динамическая анимация масок

И геометрические, и Bitmap-маски можно анимировать, что открывает возможности для эффектов типа «просвета» или «выездного окна»:

const circle = this.add.graphics();
circle.fillStyle(0xffffff);
circle.fillCircle(0, 0, 50);
const circleMask = circle.createGeometryMask();
sprite.setMask(circleMask);

this.tweens.add({
    targets: circle,
    scaleX: 3,
    scaleY: 3,
    duration: 2000,
    yoyo: true,
    repeat: -1
});

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

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

Маски в Phaser применяются не только к отдельным спрайтам. Они корректно работают с Container:

const container = this.add.container(100, 100);
container.add([sprite1, sprite2, sprite3]);
container.setMask(mask);

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

Практические советы

  • Для простых фигур лучше использовать геометрические маски, так как они легче и быстрее.
  • Для сложных или анимированных форм применяются Bitmap-маски.
  • Маски могут накладываться друг на друга, создавая сложные визуальные эффекты.
  • При использовании Bitmap-масок с прозрачностью следует оптимизировать текстуры, чтобы избежать потерь производительности.
  • Анимация масок позволяет создавать эффекты появления, исчезновения и движения света без изменения самих спрайтов.

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

Оглавление