Blog/content/posts/pixijs/04-object-visible.md

104 lines
3.5 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-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;
}
});
```
Неплохо получилось, неправда ли?)