Layer: управление порядком отрисовки

В библиотеке Phaser слои (Layer) используются для управления порядком отрисовки объектов на сцене. Каждый слой является контейнером для игровых объектов, который позволяет группировать элементы и контролировать их визуальное отображение относительно других слоев. Основной принцип работы с слоями — объекты внутри одного слоя отрисовываются в том порядке, в котором они были добавлены, а слои сами имеют свой собственный порядок на сцене.

const layer = this.add.layer();

После создания слоя в него можно добавлять игровые объекты:

layer.add(sprite);
layer.add(text);

Порядок отрисовки слоев

Порядок отрисовки определяется двумя уровнями:

  1. Порядок объектов внутри слоя — объекты рисуются в последовательности добавления.
  2. Порядок слоев на сцене — слои с большим индексом в списке детей сцены будут отрисовываться поверх слоев с меньшим индексом.

Для изменения порядка слоя используется метод moveAbove и moveBelow:

layer1.moveAbove(layer2); // layer1 будет поверх layer2
layer2.moveBelow(layer3); // layer2 будет под layer3

Также можно использовать прямое управление индексом:

this.children.moveTo(layer, index);

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

Layer в Phaser является контейнером, поэтому можно комбинировать его с Container для сложных структур. Основное различие: контейнер управляет локальной трансформацией своих объектов (позиция, масштаб, вращение), а Layer служит исключительно для визуального порядка и упрощает сортировку объектов на сцене.

const container = this.add.container(0, 0);
container.add(sprite);
layer.add(container);

Изменение порядка объектов внутри слоя

Для перестановки объектов внутри одного слоя используются методы:

  • layer.bringToTop(gameObject) — перемещает объект на верхний уровень слоя.
  • layer.sendToBack(gameObject) — перемещает объект на задний план слоя.
  • layer.moveUp(gameObject) / layer.moveDown(gameObject) — перемещают объект на одну позицию вверх или вниз внутри слоя.
layer.bringToTop(sprite);
layer.sendToBack(text);

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

Группировка и эффекты

С помощью слоев удобно применять общие эффекты ко всем объектам одновременно:

  • Изменение прозрачности:
layer.setAlpha(0.5);
  • Изменение видимости:
layer.setVisible(false);
  • Применение маски:
const maskShape = this.add.rectangle(0, 0, 200, 200, 0xffffff);
layer.setMask(maskShape.createGeometryMask());

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

Слоевое разделение интерфейса и игрового мира

Практическая рекомендация — разделять игровой мир и пользовательский интерфейс на разные слои:

const gameLayer = this.add.layer();
const uiLayer = this.add.layer();

gameLayer.add(player);
gameLayer.add(enemy);

uiLayer.add(scoreText);
uiLayer.add(healthBar);

uiLayer.moveAbove(gameLayer);

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

Производительность и оптимизация

Использование слоев помогает оптимизировать сцену:

  • Скрытие слоя полностью (setVisible(false)) исключает его объекты из отрисовки.
  • Применение общей маски к слою снижает количество операций с отдельными объектами.
  • Слои упрощают сортировку объектов, что снижает накладные расходы на динамическую перестановку детей сцены.

Практический пример

const backgroundLayer = this.add.layer();
const mainLayer = this.add.layer();
const uiLayer = this.add.layer();

const bg = this.add.image(400, 300, 'background');
const player = this.add.sprite(400, 300, 'player');
const enemy = this.add.sprite(500, 300, 'enemy');
const score = this.add.text(10, 10, 'Score: 0', { fontSize: '32px', color: '#fff' });

backgroundLayer.add(bg);
mainLayer.add(player);
mainLayer.add(enemy);
uiLayer.add(score);

uiLayer.moveAbove(mainLayer);

В этом примере слой uiLayer всегда отображается поверх игрового мира, а backgroundLayer — на заднем плане. Любые изменения порядка объектов или слоев легко реализуются с помощью методов Layer, обеспечивая чистую и управляемую структуру сцены.

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

Оглавление