From 67de369d34cece3f138b4400711622a833837a8a Mon Sep 17 00:00:00 2001
From: Alexander Popov <iiiypuk@fastmail.fm>
Date: Mon, 15 Aug 2022 01:46:36 +0300
Subject: [PATCH] text in pixi.js

---
 content/posts/pixijs/02-text-in-pixi.md | 81 +++++++++++++++++++++++++
 1 file changed, 81 insertions(+)
 create mode 100644 content/posts/pixijs/02-text-in-pixi.md

diff --git a/content/posts/pixijs/02-text-in-pixi.md b/content/posts/pixijs/02-text-in-pixi.md
new file mode 100644
index 0000000..0055097
--- /dev/null
+++ b/content/posts/pixijs/02-text-in-pixi.md
@@ -0,0 +1,81 @@
+---
+title: "Текст в PixiJS"
+date: 2022-08-15T01:17:22+03:00
+draft: true
+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);
+```