Graphics-объект и его контекст

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

Создание Graphics-объекта выполняется через сцену:

const graphics = this.add.graphics();

По умолчанию Graphics не имеет цвета заливки и линии, поэтому любое последующее рисование требует явной настройки стилей.

Настройка стиля рисования

Graphics использует два основных метода для задания внешнего вида: fillStyle и lineStyle.

// Заливка цветом 0xff0000 с прозрачностью 50%
graphics.fillStyle(0xff0000, 0.5);

// Линия толщиной 4 пикселя, зеленого цвета
graphics.lineStyle(4, 0x00ff00, 1);
  • fillStyle(color, alpha) — задает цвет заливки и прозрачность (alpha от 0 до 1).
  • lineStyle(width, color, alpha) — задает толщину линии, цвет и прозрачность.

Важно помнить, что стили применяются к всему последующему рисованию, пока не будут переопределены.

Рисование примитивов

Прямоугольники и квадраты

graphics.fillRect(50, 50, 200, 100); // x, y, width, height
graphics.strokeRect(300, 50, 200, 100);
  • fillRect — залитый прямоугольник.
  • strokeRect — только контур прямоугольника.

Окружности и эллипсы

graphics.fillCircle(150, 250, 50); // x, y, радиус
graphics.strokeEllipse(400, 250, 100, 50); // x, y, width, height
  • fillCircle создает залитую окружность.
  • strokeEllipse — контур эллипса.

Линии и кривые

graphics.beginPath();
graphics.moveTo(50, 400);
graphics.lineTo(200, 500);
graphics.lineTo(50, 500);
graphics.closePath();
graphics.strokePath();
  • beginPath() — начинает новую последовательность рисования.
  • moveTo(x, y) — устанавливает начальную точку линии.
  • lineTo(x, y) — добавляет линию к следующей точке.
  • closePath() — соединяет последнюю точку с начальной.
  • strokePath() — отрисовывает линии по текущему path.

Многоугольники и сложные фигуры

const points = [
    new Phaser.Geom.Point(300, 400),
    new Phaser.Geom.Point(350, 450),
    new Phaser.Geom.Point(400, 400),
    new Phaser.Geom.Point(350, 350)
];

graphics.fillPoints(points, true); // true — замкнуть многоугольник
graphics.strokePoints(points, true);
  • fillPoints(points, closePath) — заливка многоугольника, closePath автоматически соединяет первую и последнюю точки.
  • strokePoints(points, closePath) — рисует контур.

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

Graphics поддерживает трансформации через свойства объекта сцены:

graphics.x = 100;
graphics.y = 50;
graphics.rotation = Math.PI / 4; // вращение 45 градусов
graphics.scaleX = 1.5;
graphics.scaleY = 0.5;
  • x и y задают смещение всего объекта.
  • rotation — угол поворота в радианах.
  • scaleX и scaleY — масштабирование по горизонтали и вертикали.

Можно комбинировать с анимациями Phaser для плавного движения и трансформации:

this.tweens.add({
    targets: graphics,
    x: 400,
    y: 300,
    rotation: Math.PI * 2,
    duration: 2000,
    repeat: -1
});

Очистка и перерисовка

Для динамических эффектов часто требуется очищать графику:

graphics.clear();

После clear() можно заново задавать стили и рисовать новые фигуры. Это особенно полезно для интерактивных игр или визуализации, где объекты постоянно меняются.

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

Graphics тесно интегрирован с модулем Phaser.Geom, позволяя использовать геометрические объекты:

const circle = new Phaser.Geom.Circle(200, 200, 50);
graphics.fillCircleShape(circle);

const rect = new Phaser.Geom.Rectangle(300, 300, 100, 50);
graphics.strokeRectShape(rect);
  • fillCircleShape и strokeRectShape принимают объекты геометрии Phaser.
  • Это облегчает манипуляцию фигурами без ручного указания координат.

Использование масок и слоёв

Graphics может работать как маска для других объектов сцены:

const mask = graphics.createGeometryMask();
sprite.setMask(mask);
  • createGeometryMask() создает маску по текущей графике.
  • Любой спрайт или контейнер можно привязать к этой маске, ограничивая видимую область.

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

  • Не создавать множество Graphics-объектов для каждой фигуры, лучше использовать один объект и очищать его методом clear().
  • Для статических изображений лучше рендерить в Texture с помощью generateTexture():
graphics.fillStyle(0xff0000, 1);
graphics.fillRect(0, 0, 100, 100);
graphics.generateTexture('redSquare', 100, 100);
graphics.clear();
  • После этого можно использовать текстуру как обычный спрайт, что значительно экономит ресурсы.

Совместимость с другими объектами сцены

Graphics поддерживает все возможности сцены Phaser:

  • Можно добавлять в Containers для групповой трансформации.
  • Можно изменять depth для контроля порядка отображения:
graphics.setDepth(5);
  • Можно использовать в сочетании с cameras для динамических эффектов, например, скроллинг или масштабирование сцены.

Итоговое применение

Graphics идеально подходит для:

  • Динамической визуализации HUD и интерфейсов.
  • Рисования игровых эффектов: лазеры, траектории, зоны действия.
  • Генерации процедурных объектов.
  • Масок и сложных анимационных сцен.

Его гибкость и тесная интеграция с геометрией Phaser делают его незаменимым инструментом при разработке 2D-игр и интерактивных приложений.

Оглавление