pixi visible objects

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

@@ -0,0 +1,103 @@
+---
+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;
+  }
+});
+```
+
+Неплохо получилось, неправда ли?)