2022-08-15 01:46:36 +03:00
|
|
|
|
---
|
2022-11-19 03:36:06 +03:00
|
|
|
|
title: "🔣 Текст в PixiJS"
|
2022-08-15 01:46:36 +03:00
|
|
|
|
date: 2022-08-15T01:17:22+03:00
|
2022-08-15 01:49:56 +03:00
|
|
|
|
draft: false
|
2022-08-15 01:46:36 +03:00
|
|
|
|
tags: [pixijs, javascript, gamedev, tutorial]
|
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
|
|
В данном уроке рассмотрим отображение текста в PixiJS.
|
|
|
|
|
|
|
|
|
|
|
|
Сразу в бой, держи код.
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
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);
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Работает, но выглядит просто. Давай добавим стилей.
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
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](https://pixijs.download/dev/docs/PIXI.TextStyle.html).
|
|
|
|
|
|
|
|
|
|
|
|
Что дальше? Сделаем кликабельный счётчик!
|
|
|
|
|
|
|
|
|
|
|
|
```javascript
|
|
|
|
|
|
// Создамит новый текст
|
|
|
|
|
|
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);
|
|
|
|
|
|
```
|
