🔣 Текст в PixiJS

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

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

В данном уроке рассмотрим отображение текста в PixiJS.

Сразу в бой, держи код.

let app = new PIXI.Application({ width: 400, height: 400, backgroundColor: 0x339955 });
document.body.appendChild(app.view);

const basicText = new PIXI.Text('Просто обычный текст');
basicText.anchor.set(0.5);
basicText.x = app.screen.width / 2;
basicText.y = 60;

app.stage.addChild(basicText);

Работает, но выглядит просто. Давай добавим стилей.

const style = new PIXI.TextStyle({
  fontFamily: 'serif',
  fontSize: 36,
  fontStyle: 'italic',
  fontWeight: 'bold',
  fill: ['#ffffff', '#00ff99'], // gradient
  stroke: '#4a1850',
  strokeThickness: 5,
  dropShadow: true,
  dropShadowColor: '#000000',
  dropShadowBlur: 4,
  dropShadowAngle: Math.PI / 6,
  dropShadowDistance: 6,
  wordWrap: true,
  wordWrapWidth: 400,
  lineJoin: 'round',
});

const richText = new PIXI.Text('Текст со всякими стилями', style);
richText.anchor.set(0.5, 0);
richText.x = app.screen.width / 2;
richText.y = 100;

app.stage.addChild(richText);

Круто, не правда ли?

А ты обратил внимание, что текст автоматически перенёсся на новую строку, потому что не влез по длине? :) Фантастика!

По умолчанию пренос текста не происходит. За эту фичу отвечает параметр стилей wordWrap.

Смотри сколько их много PIXI.TextStyle.

Что дальше? Сделаем кликабельный счётчик!

// Создамит новый текст
const basicTextCounter = new PIXI.Text('0');
basicTextCounter.style.fontSize = 50;
basicTextCounter.anchor.set(0.5);
basicTextCounter.x = app.screen.width / 2;
basicTextCounter.y = 275;

// Добавим интерактива
basicTextCounter.interactive = true;
basicTextCounter.cursor = 'pointer';
basicTextCounter.on('click', (event) => {
  // Код, который инкрементируем значение
  basicTextCounter.text = parseInt(basicTextCounter.text) + 1;
});

app.stage.addChild(basicTextCounter);