О чем этот пример
Работа с координатами — основа любой игровой механики. Понимание, как управлять положением объектов относительно центра или других точек, открывает путь к созданию симметричных уровней, отражений и сложных траекторий. В этом примере мы рассмотрим метод `invert()` класса `Phaser.Math.Vector2`, который позволяет мгновенно получить координаты, противоположные исходным относительно начала системы координат (точки 0,0). Это простой, но мощный инструмент для геометрических преобразований.
Версия Phaser: код и демо в этой статье рассчитаны на Phaser 3.90.0.
Живой запуск
Ниже встроен рабочий билд примера. Оригинальный источник: GitHub.
Исходный код
class Example extends Phaser.Scene
{
create ()
{
const graphics = this.add.graphics({ fillStyle: { color: 0x2266aa } });
const point = new Phaser.Math.Vector2(400, 100);
this.input.on('pointermove', pointer =>
{
point.copy(pointer);
redraw();
});
redraw();
function redraw ()
{
graphics.clear();
graphics.fillPointShape(point, 15);
point.invert();
graphics.fillStyle(0x00aa00);
graphics.fillPointShape(point, 15);
}
}
}
const config = {
width: 800,
height: 600,
type: Phaser.AUTO,
parent: 'phaser-example',
scene: Example
};
const game = new Phaser.Game(config);
Что делает метод `invert()`?
Метод invert() объекта Phaser.Math.Vector2 выполняет операцию инвертирования вектора. Проще говоря, он умножает каждую из его координат (x и y) на -1. В результате точка с координатами (x, y) мгновенно превращается в точку (-x, -y).
Геометрически это означает отражение точки относительно начала координат (точки 0,0 на экране). Если представить себе систему координат, то инвертированная точка будет находиться в противоположном квадранте на том же расстоянии от центра.
Разбор примера: интерактивное зеркало
В предложенном примере создается интерактивная визуализация. Пользователь перемещает курсор мыши, а на экране отображаются две точки: исходная (синяя) и её инвертированная версия (зеленая).
Сначала создается вектор point, который будет отслеживать положение курсора. Слушатель события pointermove обновляет координаты этого вектора при каждом движении мыши и вызывает функцию перерисовки redraw().
const point = new Phaser.Math.Vector2(400, 100);
this.input.on('pointermove', pointer =>
{
point.copy(pointer);
redraw();
});Визуализация в функции `redraw()`
Функция redraw() отвечает за отрисовку. Она очищает холст и рисует две точки. Ключевой момент: метод invert() вызывается непосредственно на объекте point, изменяя его координаты на месте. После этого для рисования инвертированной точки используется тот же вектор, но уже с новыми значениями.
Важно понимать, что invert() модифицирует исходный объект. Если вам нужно сохранить первоначальные координаты, следует создать копию вектора перед инвертированием.
function redraw ()
{
graphics.clear();
// Рисуем исходную точку (синюю)
graphics.fillPointShape(point, 15);
// Инвертируем координаты точки
point.invert();
// Меняем цвет и рисуем инвертированную точку (зеленую)
graphics.fillStyle(0x00aa00);
graphics.fillPointShape(point, 15);
}Обратите внимание, что после первой отрисовки точка point уже инвертирована. Однако при следующем движении мыши слушатель события pointermove снова копирует в неё новые координаты курсора (point.copy(pointer)), перезаписывая инвертированные значения. Таким образом, цикл начинается заново.
Практическое применение в играх
Инвертирование вектора — это не просто абстрактная математика. Вот несколько практических сценариев:
* **Создание симметричных противников или уровней:** Расположив объект в точке (100, 200), его "зеркальную" копию можно мгновенно получить в точке (-100, -200) относительно центра сцены. * **Расчет отскока от центра:** При столкновении с условным "ядром" мира можно использовать инвертирование вектора скорости для простой симуляции отталкивания. * **Траектории и паттерны атак:** Генерация атак, симметричных относительно босса в центре экрана.
Для работы относительно произвольной точки (не начала координат) используется не invert(), а комбинация других методов, например, сначала вычесть координаты центра из координат точки, затем инвертировать результат и снова прибавить координаты центра.
Что попробовать дальше
Метод invert() — это быстрый и эффективный способ получить координаты, противоположные исходным. Он работает напрямую с объектом, изменяя его данные. Поэкспериментируйте: попробуйте инвертировать не вектор позиции, а вектор скорости объекта для создания эффекта "отталкивания" от центра. Или сохраните исходную точку в отдельной переменной, чтобы рисовать линию, соединяющую объект с его зеркальным отражением, создавая интересные визуальные паттерны.