🦹🏻 Видимые и невидимые объекты в PixiJS

Опубликовано: 15 августа 2022 г.

🏷️ pixijs 🏷️ javascript 🏷️ gamedev 🏷️ tutorial

В этом уроке рассмотрим параметр visible у объектов.

Только я хочу усложнить задачу. Сделаем что-то вроде приложения, с диском по центру холста и кнопкой, которая делает диск видимым и невидимым.

Каркас приложения.

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.

shapeRect.on('mouseover', (event) => { });

Вот код обработчиков.

shapeRect.interactive = true;
shapeRect.cursor = 'pointer';
shapeRect.on('mouseover', (event) => {
    // делаем цвет текста белым, когда курсор находится в области кнопки
  basicText.style.fill = 0xffffff;
});
shapeRect.on('mouseout', (event) => {
  // делаем цвет текста чёрным, когда курсор выходит за пределы кнопки
  basicText.style.fill = 0;
});

Теперь добавим скрытие объекта по клику на кнопку.

shapeRect.on('click', (event) => {
  shapeCircle.visible = shapeCircle.visible ? false : true;
});

Отлично. У нас получилось)
Но это ещё не всё. Хочу, чтобы диск пропадал плавно.

У каждого объекта есть параметр, который отвечает за прозрачность, который влияет и на обводку и на заливку. Называется он alpha.

Для того, чтобы добавить анимацию появления/исчезновения немного перепишем код.
Добавим переменную cirleVisible, внесём изменения в обработчик click, и напишем тикер.

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;
  }
});

Неплохо получилось, неправда ли?)