Skip to content

components.Text

vasili.kostin edited this page Aug 22, 2021 · 22 revisions

Наследуется от Sprite, и включает в себя все его свойства, кроме image.

Text - статический, видимый на игровом экране текст, использующий шрифт браузера. Text - это класс, напрямую взятый из pixi.js

Text поддерживает мультиязычность (локализацию). Подробнее

Thing-Editor расширяет стандартный pixi Text несколькими свойствами, для его совместимости с редактором свойств. В дополнение, для текста с выравниванием по середине, Thing-Editor округляет pivot, с той целью, чтобы текстовые поля имеющие не четные размеры, не размывались из-за особенностей WebGL.

Редактируемые свойства:

text

Тип: String

Строковое значение, отвечающее за то, какой именно текст будет отображаться на игровом экране. Поле напрямую унаследовано из pixi


translatableText

Тип: String

Thing-Editor поддерживает мультиязычные проекты Подробнее. Данное поле отвечает за то, какая именно текстовая строка из текстовых ресурсов, будет отображаться на игровом экране. В редакторе свойств это поле имеет вид выпадающего списка со всеми имеющимися в проекте текстовыми ресурсами. Подробнее: Редактор текстовых ресурсов


Поля стиля:

style.fontSize

Тип: Number

Размер шрифта. Поле является оберткой для pixi TextStyle.fontSize


style.align

Тип: String

Выравнивание текстового поля по ширине. В редакторе свойств это поле представляет из себя выпадающий список с доступными вариантами выравнивания. В добавок к тому, что является оберткой для pixi TextStyle.align, в Thing-Editor это поле управляет опорной точкой текстового объекта, благодаря чему текст выравнивается относительно опорной точки.


verticalAlign

Тип: String

Выравнивание текстового поля по высоте. В редакторе свойств это поле представляет из себя выпадающий список с доступными вариантами выравнивания.


style.fill

Тип: String

Цвет заливки текста. Поле является оберткой для pixi TextStyle.fill. Поддерживаются значения, корректные для CSS цвета. #FFFFFF, red, rgb(122,122,140). Для использования градиентной заливки, добавьте несколько цветовых значений через запятую.


style.fillGradientStops

Тип: String

Данное поле управляет градиентом заливки style.fill и активируется в том случае, если в заливке указано более одного цветового компонента через запятую. Подробнее и градиентах в PIXI pixi gradients. Числовые значения в данном поле указываются через запятую.


style.strokeThickness

Тип: Number

Толщина обводки текста. Поле является оберткой для pixi TextStyle.strokeThickness.


style.stroke

Тип: String

Цвет обводки. Поле является оберткой для pixi TextStyle.stroke. Поддерживаются значения, корректные для CSS цвета. #FFFFFF, red, rgb(122,122,140). Поле активно только в том случае, если значение поля strokeThickness больше нуля.


style.fontFamily

Тип: String

Шрифт текстового поля. Поле является оберткой для pixi TextStyle.fontFamily. Поддерживаются значения, корректные для свойства CSS font-family. Если это поле пустое, то будет использоваться шрифт проекта по умолчанию.


style.fontWeight

Тип: String

Шрифт текстового поля. Поле является оберткой для pixi TextStyle.fontWeight. В редакторе свойств это поле представляет из себя выпадающий список с доступными вариантами начертания шрифта. Шрифт, используемый для отрисовки поля должен поддерживать выбранное начертание, иначе изменение данного поля не будет иметь эффекта.


style.leading

Тип: Number

Межстрочное расстояние. Поле является оберткой для pixi TextStyle.leading.


style.padding

Тип: Number

Обрезка текстуры текста. Поле является оберткой для pixi TextStyle.padding. Обычно, значение это поля должно оставаться равным нулю, однако часто, некоторые шрифты и текст могут вызывать эффект обрезки букв. Увеличение значения этого поля позволяет расширить текстуру отводимую под отрисовку текста, что избавляет от эффекта обрезки.


style.letterSpacing

Тип: Number

Расстояние между символами. Поле является оберткой для pixi TextStyle.letterSpacing.


textTransform

Тип: Number

Позволяет применить верхний или нижний регистр к тексту (uppercase, lowercase), либо сделать первые буквы всех слов заглавными (capitalize).


style.lineHeight

Тип: Number

Расстояние между строками. Поле является оберткой для pixi TextStyle.lineHeight.


maxWidth

Тип: Number

Максимальная ширина текста в пикселях. При установке значения этого поля больше 0, для текстового объекта включается механизм ограничения ширины. Это имеет смысл для мультиязычных полей, когда ширина текста может меняться в зависимости от активного языка, либо для текстовых полей с динамически генерируемым текстом, когда размер текста заранее не известен, а экранная область отводимая под текст ограничена.

Ширина текстового поля ограничивается путем установки его scale.x и scale.y, что делает невозможным ручное редактирование scale.x и scale.y текстового поля.

После установки maxWidth равным нулю, чтобы отключить ограничение ширины, scale.x и scale.y могут остаться не равными единице, в этом случае может понадобиться их ручная корректировка.


Методы:

setAlign (labelName : String)

Данный метод позволяет установить способ выравнивания текстового поля. Данный метод введен для возможность управлять выравниванием поля в зависимости от ориентации игрового экрана, через OrientationTrigger вызовом метода setAlign через поля onPortrait, onLandscape.


setTextByPath (path : String)

Данный метод позволяет установить значение поля text, через data-path путь к переменной, значение которой будет взято в качестве целевого.



Служебные поля:

Edit Text

В редакторе свойств - это поле представляет из себя кнопку, для быстрого перехода в редактор тестовых ресурсов. При ее нажатии произойдет переход к редактированию текстового ресурса, привязанного к данному Text объекту (когда значение поля translatableText установлено), либо произойдет открытие диалога создания нового текстового ресурса, если значение поля translatableText не установлено. В javascript это поле не доступно.


Copy style

Paste style

Кнопки, позволяющие скопировать стиль выделенного текстового объекта во внутренний буфер, и применить его к другому текстовому объекту.


<- Предыдущая страница Следующая страница ->

Связанные темы:

редактор тестовых ресурсов

функции локализации

Свойства, унаследованные от Sprite

Компоненты

Редактируемые поля

PIXI.Text

Clone this wiki locally