From adaaa2e6fa30c3ede7ce34b00339a7c43be8d876 Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@fastmail.fm>
Date: Mon, 15 Aug 2022 02:12:43 +0300
Subject: [PATCH] pixi.js shapes

---
 content/posts/pixijs/03-shapes.md | 66 +++++++++++++++++++++++++++++++
 1 file changed, 66 insertions(+)
 create mode 100644 content/posts/pixijs/03-shapes.md

diff --git a/content/posts/pixijs/03-shapes.md b/content/posts/pixijs/03-shapes.md
new file mode 100644
index 0000000..e2b598c
--- /dev/null
+++ b/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'); });
+```