Интерактивность объектов: setInteractive

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

Принцип работы setInteractive

Метод setInteractive назначает объекту hit area — область, внутри которой происходят события ввода. По умолчанию hit area совпадает с размерами объекта, но можно задать произвольную форму, используя прямоугольники, круги, полигоны или кастомные колбэки.

Синтаксис:

gameObject.setInteractive(shape, callback)

  • shape — необязательный параметр, определяющий форму hit area:

    • 'rectangle' — прямоугольная область (по умолчанию)
    • 'circle' — круглая область
    • 'polygon' — полигональная область (принимает массив точек)
    • кастомная функция (x, y) => boolean, возвращающая true, если координаты внутри области

  • callback — функция для кастомного hit теста; если не задан, используется стандартное определение попадания по форме.

После вызова setInteractive объект начинает реагировать на события Pointer:

  • pointerdown — нажатие кнопки мыши или касание
  • pointerup — отпускание кнопки или окончания касания
  • pointerover — указатель вошел в hit area
  • pointerout — указатель покинул hit area
  • pointermove — движение указателя по объекту

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

Спрайты часто используют для кнопок, игровых персонажей и предметов. Простейший пример:

const sprite = this.add.sprite(100, 100, 'player');
sprite.setInteractive();
sprite.on('pointerdown', () => {
    sprite.setTint(0xff0000);
});
sprite.on('pointerup', () => {
    sprite.clearTint();
});

В этом примере спрайт становится интерактивным, и при нажатии на него изменяется цвет, который возвращается к исходному при отпускании.

Настройка форм hit area

Для объектов, которые не имеют прямоугольной формы, важно корректно задать hit area:

const circle = this.add.circle(200, 200, 50, 0x00ff00);
circle.setInteractive({ shape: new Phaser.Geom.Circle(0, 0, 50), callback: Phaser.Geom.Circle.Contains });
circle.on('pointerdown', () => {
    circle.fillColor = 0xff00ff;
});
  • Phaser.Geom.Circle.Contains — стандартная функция проверки попадания для круга.
  • Координаты hit area относительные к центру объекта.

Для полигона:

const points = [0,0, 50,0, 50,50, 0,50];
const polygon = new Phaser.Geom.Polygon(points);
sprite.setInteractive({ shape: polygon, callback: Phaser.Geom.Polygon.Contains });

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

События и контекст

Метод on привязывает обработчик события к объекту:

gameObject.on(event, callback, context);
  • event — строка с названием события (pointerdown, pointerup, pointerover, pointerout, pointermove)
  • callback — функция, вызываемая при событии
  • context — объект, который будет доступен как this внутри callback

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

sprite.on('pointerdown', function(pointer) {
    this.x += 10;
}, sprite);

Здесь this внутри функции указывает на сам спрайт, что позволяет изменять его свойства.

Управление несколькими интерактивными объектами

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

const group = this.add.group();
for (let i = 0; i < 5; i++) {
    const s = this.add.sprite(50 * i, 300, 'button');
    s.setInteractive();
    s.on('pointerdown', () => console.log('Clicked sprite', i));
    group.add(s);
}

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

Интерактивность текста и графики

Текстовые объекты и графические фигуры также могут быть интерактивными:

const text = this.add.text(400, 300, 'Click me', { fontSize: '32px', color: '#ffffff' });
text.setInteractive();
text.on('pointerdown', () => {
    text.setText('Clicked!');
});

Графика:

const graphics = this.add.graphics();
graphics.fillStyle(0x00ff00, 1);
graphics.fillRect(100, 100, 200, 150);
graphics.setInteractive(new Phaser.Geom.Rectangle(100, 100, 200, 150), Phaser.Geom.Rectangle.Contains);
graphics.on('pointerdown', () => graphics.clear());

Использование Phaser.Geom позволяет точно контролировать hit area для любых нестандартных форм.

Управление состоянием интерактивности

  • disableInteractive() — отключает интерактивность объекта.
  • input.enabled = false — альтернативный способ отключить обработку событий без удаления hit area.
  • input.hitArea и input.hitAreaCallback — позволяют вручную изменять область взаимодействия на лету.

Обработка drag & drop

Phaser встроенно поддерживает перетаскивание интерактивных объектов:

sprite.setInteractive({ draggable: true });
this.input.setDraggable(sprite);

sprite.on('drag', (pointer, dragX, dragY) => {
    sprite.x = dragX;
    sprite.y = dragY;
});

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

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

  • setInteractive превращает любой объект в интерактивный.
  • Hit area можно задавать кастомно для сложных форм.
  • События pointer управляют реакцией на ввод мыши и касания.
  • Контейнеры и группы требуют индивидуальной настройки интерактивности объектов.
  • Drag & drop реализуется через draggable и события drag.

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

Оглавление