104 lines
3.5 KiB
Markdown
104 lines
3.5 KiB
Markdown
|
---
|
|||
|
|
title: "Видимые и невидимые объекты в PixiJS"
|
|||
|
|
date: 2022-08-15T02:13:35+03:00
|
|||
|
|
draft: false
|
|||
|
|
tags: [pixijs, javascript, gamedev, tutorial]
|
|||
|
|
---
|
|||
|
|
|
|||
|
|
В этом уроке рассмотрим параметр `visible` у объектов.
|
|||
|
|
|
|||
|
|
Только я хочу усложнить задачу. Сделаем что-то вроде приложения,
|
|||
|
|
с диском по центру холста и кнопкой, которая делает диск видимым и невидимым.
|
|||
|
|
|
|||
|
|
Каркас приложения.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
let app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0x2a2a3a });
|
|||
|
|
document.body.appendChild(app.view);
|
|||
|
|
|
|||
|
|
const shapeCircle = new PIXI.Graphics();
|
|||
|
|
const shapeRect = new PIXI.Graphics();
|
|||
|
|
|
|||
|
|
shapeCircle.lineStyle(4, 0x101024, 1);
|
|||
|
|
shapeCircle.beginFill(0xec8a4b, 1);
|
|||
|
|
shapeCircle.drawCircle(app.screen.width / 2, app.screen.height / 2, 50);
|
|||
|
|
shapeCircle.endFill();
|
|||
|
|
|
|||
|
|
shapeRect.lineStyle(2, 0x101024, 1);
|
|||
|
|
shapeRect.beginFill(0xDE3249);
|
|||
|
|
shapeRect.drawRect(app.screen.width / 2 - 100, app.screen.height - 100, 200, 50);
|
|||
|
|
shapeRect.endFill();
|
|||
|
|
|
|||
|
|
const basicText = new PIXI.Text('On / Off');
|
|||
|
|
basicText.anchor.set(0.5);
|
|||
|
|
basicText.x = app.screen.width / 2;
|
|||
|
|
basicText.y = app.screen.height - 75;
|
|||
|
|
|
|||
|
|
app.stage.addChild(shapeCircle, shapeRect, basicText);
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Добавим интерактива кнопки. Хочу, чтобы при наведении на неё цвет текст изменялся.
|
|||
|
|
|
|||
|
|
Для этого добавим обработчик `mouseover`.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
shapeRect.on('mouseover', (event) => { });
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Вот код обработчиков.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
shapeRect.interactive = true;
|
|||
|
|
shapeRect.cursor = 'pointer';
|
|||
|
|
shapeRect.on('mouseover', (event) => {
|
|||
|
|
// делаем цвет текста белым, когда курсор находится в области кнопки
|
|||
|
|
basicText.style.fill = 0xffffff;
|
|||
|
|
});
|
|||
|
|
shapeRect.on('mouseout', (event) => {
|
|||
|
|
// делаем цвет текста чёрным, когда курсор выходит за пределы кнопки
|
|||
|
|
basicText.style.fill = 0;
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Теперь добавим скрытие объекта по клику на кнопку.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
shapeRect.on('click', (event) => {
|
|||
|
|
shapeCircle.visible = shapeCircle.visible ? false : true;
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Отлично. У нас получилось)
|
|||
|
|
Но это ещё не всё. Хочу, чтобы диск пропадал плавно.
|
|||
|
|
|
|||
|
|
У каждого объекта есть параметр, который отвечает за прозрачность,
|
|||
|
|
который влияет и на обводку и на заливку. Называется он `alpha`.
|
|||
|
|
|
|||
|
|
Для того, чтобы добавить анимацию появления/исчезновения немного перепишем код.
|
|||
|
|
Добавим переменную `cirleVisible`, внесём изменения в обработчик `click`,
|
|||
|
|
и напишем тикер.
|
|||
|
|
|
|||
|
|
```javascript
|
|||
|
|
let cirleVisible = true;
|
|||
|
|
|
|||
|
|
shapeRect.on('click', (event) => {
|
|||
|
|
cirleVisible = cirleVisible ? false : true;
|
|||
|
|
// shapeCircle.visible = shapeCircle.visible ? false : true;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
app.ticker.add((delta) => {
|
|||
|
|
if (cirleVisible) {
|
|||
|
|
if (shapeCircle.alpha < 1) {
|
|||
|
|
shapeCircle.visible = true;
|
|||
|
|
shapeCircle.alpha += 0.05;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
else {
|
|||
|
|
if (shapeCircle.alpha > 0) shapeCircle.alpha -= 0.05;
|
|||
|
|
else shapeCircle.visible = false;
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
Неплохо получилось, неправда ли?)
|