Blog/content/posts/pixijs/03-shapes.md

---
title: "♦️ Фигуры в PixiJS"
date: 2022-08-15T01:55:35+03:00
draft: false
tags: [pixijs, javascript, gamedev, tutorial]
---

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

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

Фигуры это класс [PIXI.Graphics](https://pixijs.download/release/docs/PIXI.Graphics.html).

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

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

```javascript
const graphics = new PIXI.Graphics();

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

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

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

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

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

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

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

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

Больше примеров можно посмотреть на странице
[примеров](https://pixijs.io/examples/#/graphics/simple.js).

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

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

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