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

67 lines
2.3 KiB
Markdown
Raw Normal View History

2022-08-15 02:12:43 +03:00
---
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'); });
```