Заливка и обводка: fillStyle, lineStyle

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

Объект Graphics

Для рисования фигур в Phaser создаётся объект Graphics:

const graphics = this.add.graphics();

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

Метод fillStyle

Метод fillStyle задаёт цвет и прозрачность заливки для всех последующих фигур.

Синтаксис:

graphics.fillStyle(color, alpha);
  • color — целое число в формате 0xRRGGBB, задающее цвет заливки.
  • alpha — число от 0 до 1, определяющее прозрачность (0 — полностью прозрачный, 1 — полностью непрозрачный).

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

graphics.fillStyle(0xff0000, 1); // Красная заливка, непрозрачная
graphics.fillRect(50, 50, 200, 100); // Рисуем прямоугольник

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

Метод lineStyle

Метод lineStyle задаёт стиль линии для обводки фигур.

Синтаксис:

graphics.lineStyle(width, color, alpha);
  • width — толщина линии в пикселях.
  • color — целое число 0xRRGGBB, задающее цвет линии.
  • alpha — прозрачность линии, от 0 до 1.

Пример:

graphics.lineStyle(4, 0x0000ff, 1); // Синяя линия толщиной 4px
graphics.strokeRect(50, 50, 200, 100); // Обводка прямоугольника

Если lineStyle не вызывать, фигуры можно рисовать только с заливкой, без контура. Аналогично, если fillStyle не задан, фигура будет только с обводкой.

Совмещение заливки и обводки

Для создания фигуры с заливкой и обводкой нужно комбинировать fillStyle и lineStyle:

graphics.fillStyle(0x00ff00, 0.5); // Полупрозрачная зелёная заливка
graphics.lineStyle(3, 0x000000, 1); // Черная линия толщиной 3px
graphics.fillRect(100, 100, 150, 100);
graphics.strokeRect(100, 100, 150, 100);

Важно помнить, что fillRect и strokeRect — это отдельные методы: первый рисует заливку, второй — обводку. Состояние стиля применяется к каждому методу независимо.

Рисование сложных фигур

Методы beginPath, moveTo, lineTo и closePath позволяют создавать сложные полигоны и кривые:

graphics.fillStyle(0xffff00, 1);
graphics.lineStyle(2, 0xff00ff, 1);

graphics.beginPath();
graphics.moveTo(50, 150);
graphics.lineTo(150, 50);
graphics.lineTo(250, 150);
graphics.closePath();
graphics.fillPath();
graphics.strokePath();
  • beginPath() начинает новый контур.
  • moveTo(x, y) задаёт начальную точку линии.
  • lineTo(x, y) соединяет текущую точку с указанной.
  • closePath() замыкает контур, соединяя последнюю и первую точку.
  • fillPath() и strokePath() применяют текущие стили заливки и обводки к контуру.

Настройка прозрачности и динамическая смена стилей

С помощью параметра alpha можно создавать эффекты полупрозрачных фигур, наложений и плавных переходов:

graphics.fillStyle(0xff0000, 0.3); // Красная с прозрачностью 0.3
graphics.fillCircle(200, 200, 50);

graphics.fillStyle(0x0000ff, 0.7); // Синяя с прозрачностью 0.7
graphics.fillCircle(220, 220, 50);

Комбинирование различных цветов и прозрачностей позволяет создавать эффект смешения цветов, как в слоях графических редакторов.

Сброс стилей

Для возврата к дефолтным параметрам можно вызвать:

graphics.lineStyle(); // сброс обводки
graphics.fillStyle(); // сброс заливки

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

Практические рекомендации

  • Использовать отдельный объект Graphics для слоёв с разными стилями удобно для управления и оптимизации.
  • Стараться минимизировать частую смену стилей внутри одного контура для повышения производительности.
  • Для анимации прозрачности можно изменять alpha на каждом кадре через update() сцен.

Заключение по методам

Методы fillStyle и lineStyle являются базой рисования в Phaser. Они предоставляют полный контроль над цветом, прозрачностью и толщиной линий, что позволяет создавать как простые фигуры, так и сложные динамичные графические элементы. Комбинация этих методов с контурными командами (beginPath, lineTo, closePath) открывает широкие возможности для визуальных эффектов и интерактивной графики.

Оглавление