gui-box.md 6.0 KB
title: GUI-нода Box
brief: В данном руководстве объясняется, как использовать GUI-ноду Box.
GUI-нода Box
Нода Box --- это прямоугольник, заполненный цветом, текстурой или анимацией.
Добавление ноды Box
Добавьте новую ноду Box, либо кликнув ПКМ в Outline и выбрав Add ▸ Box, либо нажав A и выбрав Box.
Можно использовать изображения и анимацию из атласов или тайловых источников, добавленных в GUI. Добавьте текстуры, кликнув ПКМ по иконке папки Textures в Outline и выбрав Add ▸ Textures.... Затем задайте свойство Texture для ноды Box:
{srcset="images/gui-box/[email protected] 2x"}
Важно отметить, что ноды Box будет оттенять графику. Цвет оттенка умножается на данные изображения, то есть если установить белый цвет (по умолчанию), то оттенок применяться не будет.
{srcset="images/gui-box/[email protected] 2x"}
Ноды Box всегда рендерятся, даже если им не назначена текстура, или их альфа установлена в 0, или они имеют размер 0, 0, 0. Ноды Box всегда должны иметь назначенную им текстуру, чтобы рендерер мог правильно их сортировать и уменьшить количество вызовов отрисовки.
Воспроизведение анимации
Ноды Box могут воспроизводить анимацию из атласов или тайловых источников. За подробностями обращайтесь к руководству по мультикадровой анимации.
Текстурирование Slice9
В графических интерфейсах часто встречаются элементы, чувствительные к контексту в отношении их размера: панели и диалоговые окна, размер которых необходимо изменять, чтобы вместить содержащееся в них содержимое. Это может вызвать визуальные проблемы, если применять текстурирование к изменяемой в размерах ноде.
Обычно движок масштабирует текстуру, чтобы она соответствовала границам ноды Box, но, определив краевые области Slice9, можно определить границы того, какие части текстуры должны масштабироваться:
{srcset="images/gui-box/[email protected] 2x"}
Нода Box Slice9 включает в себя 4 числа, которые определяют количество пикселей для левого, верхнего, правого и нижнего полей, которые не должны подвергаться регулярному масштабированию:
{srcset="images/gui-box/[email protected] 2x"}
Поля устанавливаются по часовой стрелке, начиная с левого края:
{srcset="images/gui-box/[email protected] 2x"}
- Угловые сегменты никогда не масштабируются.
- Краевые сегменты масштабируются вдоль одной оси. Левый и правый краевые сегменты масштабируются по вертикали. Верхний и нижний краевые сегменты масштабируются по горизонтали.
- Центральная область текстуры масштабируется по горизонтали и вертикали по мере необходимости.
Описанное выше масштабирование текстуры Slice9 применяется только при изменении размера ноды Box:
{srcset="images/gui-box/[email protected] 2x"}
Если изменить параметр Scale ноды Box --- нода и текстура будут масштабироваться без применения параметров Slice9.
Из-за того, как работает мипмаппинг в рендере, при масштабировании сегментов текстуры иногда могут возникать артефакты. Это происходит при масштабировании сегментов ниже исходного размера текстуры. Затем рендерер выбирает для сегмента мипмап с более низким разрешением, что приводит к появлению визуальных артефактов.
{srcset="images/gui-box/[email protected] 2x"}
Чтобы избежать этой проблемы, убедитесь, что сегменты текстуры, которые будут масштабироваться, достаточно малы, чтобы никогда не масштабироваться в меньшую сторону, а только в большую.