67 lines
2.3 KiB
Markdown
67 lines
2.3 KiB
Markdown
---
|
||
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'); });
|
||
```
|