pixi.js shapes

content/posts/pixijs/03-shapes.md

@@ -0,0 +1,66 @@
+---
+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'); });
+```