Blog/content/posts/pixijs/03-shapes.md
2022-11-19 03:36:06 +03:00

67 lines
2.3 KiB
Markdown
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

---
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'); });
```