2022-08-15 02:12:43 +03:00
|
|
|
|
---
|
2022-11-19 03:36:06 +03:00
|
|
|
|
title: "♦️ Фигуры в PixiJS"
|
2022-08-15 02:12:43 +03:00
|
|
|
|
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'); });
|
|
|
|
|
|
```
|
