В прошлых двух уроках мы уже разобрали азы движка PixiJS, однако азы азов не затронули.

Сейчас я расскажу тебе о фигурах.

Фигуры это класс PIXI.Graphics.

Он отвечает за рисование простых примитивов, таких как линии, круги и прямоугольники.

Их рисование похоже на рисование фигур Canvas в JavaScript.

const graphics = new PIXI.Graphics();

// Прямоугольник
graphics.beginFill(0xDE3249);
graphics.drawRect(50, 50, 100, 100);
graphics.endFill();

А так можно нарисовать диск.

// lineStyle(0) необходим, чтобы нарисовать круг без внешней обводки
graphics.lineStyle(0);
graphics.beginFill(0xDE3249, 1);
graphics.drawCircle(100, 250, 50);
graphics.endFill();

Или даже кольцо.

// А так мы нарисуем круг без заливки. Кольцо
graphics.lineStyle(2, 0xFEEB77, 1);
graphics.beginFill(0, 0);
graphics.drawCircle(250, 250, 50);
graphics.endFill();

Обрати внимание на два аргумента beginFill.

Первый отвечает за цвет, а второй за прозрачность.

Если изменить значение на graphics.beginFill(0, .5);, мы получит полупрозрачный чёрный круг с жёлтой обводкой.

Больше примеров можно посмотреть на странице примеров.

Обрати внимание, что в данном примере фигуры рисуются в одном объекте.

Если к нему применить interactive = true, все фигуры будую являться одной “кнопкой”.

graphics.interactive = true;
graphics.buttonMode = true;
graphics.on('click', (event) => { console.log('Click on shape'); });