Докуметация Cтарт Статьи Форум Лента Вход
Не официальное русскоязычное сообщество
Главная
    Документация jMonkeyEngine
        jMonkeyEngine Уроки и Документация
            Вклады
                Лемур GUI
                    Компоненты GUI

Компоненты GUI

Опубликованно: 01.09.2017, 14:04
Последняя редакция, Andry: 16.09.2017 21:20
  • Компоненты GUI
    • Компонент Компоновка(Layout)
      • Вычисление подходящего размера
      • Перекраивание(Reshape)
    • Базовые компоненты
      • QuadBackgroundComponent
      • TbtQuadBackgroundComponent
      • IconComponent
      • DynamicInsetsComponent
    • Внутренние компоненты
      • InsetsComponent
      • TextComponent
      • TextEntryComponent

Элементы GUI создаются из стека компонентов GUI, которые реализует интерфейс GuiComponent. Стеки составлены таким образом, что каждый слой действует как своего рода «декоратор» для следующего слоя (снизу вверх).

Например, Кнопка(Button) создается из нескольких разных возможных слоёв, и приложение может изменять любой из этих слоёв.

Test Button1

Поэтому, чтобы понять, как настроить элементы GUI, чтобы получить нужный внешний вид, необходимо понимать какие компоненты GUI, предоставляет Лемур. Или знать, как писать свои собственные.

Компонент Компоновка(Layout)

Лемур использует гибкий подход на основе слоев, к тому какой компоненты имеют размер и расположение относительно их следующего и предыдущего уровней. Каждый нижний слой действует как декоратор для слоя выше. Таким образом, верхний уровень управляет «предпочтительным размером» всего стека, в то время как нижний уровень управляет «настоящим размером».

Для общего использования компонентов нет необходимости так подробно знать эту информацию. Она предоставляется в качестве фона, поскольку она помогает объяснить некоторые другие свойства, такие как смещения(offsets) и края(margins), и.т.д. эта информация также полезна и важна, для всех кто пишет свои собственные компоненты.

Вот тестовая кнопка более подробно:

test button

На втором изображении чётко показаны границы различных слоёв для того что бы можно было различить отдельные слои, начиная от фонового слоя, до слоя значка, текстового поля и текста внутри него.

В кратком и разобранном виде это можно представить так:

test button layers

Вычисление предпочтительного размера

Лемур рассчитывает предпочтительный размер, начиная с верхнего слоя компонента и снижаясь к самому нижнему. Каждый новый компонент имеет возможность откорректировать предпочитаемый размер.

test button size

Это не обязательно должно идти в такой последовательности. Например, слой компонента значка может добавляться на другую ось, если он выровнен по верху, а не слева. Так же, он может добавляться к обоим осям, если он находится в верхнем левом углу.

Перекраивание(Reshape)

Родительский элемента GUI, берет все предпочтительные размеры и присваивает все остальные ограничения (контейнер компоновки, и.т.п.), затем перекраивает компоненты, начиная с нижнего. Затем стек компонентов Lemur выполняет процесс перекраивания следующим образом:

test button reshape

Каждый слой в этом случае получает возможность переместить «начальное» смещение(offset) и уменьшить размер, что будет использовать уже следующий слой. Поэтому в этом примере размер начинается с полного размера компонента, а смещение начинается с 0,0 в нижнем слое. Фоновый слой подталкивает смещение к краю, и усекает границы по краю(margin) * 2. Слой значка(icon) перемещает свою геометрию в начальное положение и проверяет правильность её размер, а затем перемещает начальное положение в соответствие с отображаемой шириной значка и вычитает эту же ширину от размера. Текстовые слои теперь настроены для размещения текста в надлежащий месте.

TextComponent полностью является расширяемым компонентом и поэтому не корректирует размер смещения вообще. Технически не остается пространства с лева для визуализации, поэтому значение не будет иметь какой либо смысл. Однако полезно укладывать эти слои, как они должны выглядеть. Таким образом, слои верхнего уровня будут часто использовать весь остальной размер, но в ином случае они бы не могли корректировать смещение или размер для следующих слоев. Это то что позволяет тени-текста и обычному тексту использовать то же расположение и смещение.

В этом примере слой тени-текста фактически отрисовывает текст при смещении от указанного смещения. Это указывает на то, как слои могут выбирать перемещения за пределами этих «границ», если они хотят по какой-либо причине. Они технически нарушают компоновку в этот момент, но это бывает полезно для некоторых типов слоев, таких как тени-текста или наложения иконок и.т.д. В два этапа рассчитываться предпочтительный размера, и затем перекраивается к более подходящему результату.

Базовые компоненты

QuadBackgroundComponent

Этот компонент отображает простой цветной или текстурированный 2D-квадрат, который сжимается/расширяется с помощью GUI элемента. (Текстура просто растягивается без какой-либо специальной обработки. Для текстуры, у которой растягивается только часть или остаётся граница от своего обычного масштаба, см.: TbtQuadBackgroundComponent)

Квадрат всегда отображается в плоскости x/y.

QuadBackgroundComponent может создавать либо освещенный, либо нечетный квадрат в зависимости от параметров, заданных при создании. В настоящее время нет способа изменить этот параметр после создания компонента. «lit»(освещен) означает, что квадрат будет использовать Lighting.j3md и иметь соответствующие нормали.

Свойства:

  • color: цвет квадрата. Если есть текстура, то он будет сочетаться с текстурой.
  • alpha: общая альфа квадрата. Это умножается на любое альфа значение в цветовом диапазоне.
  • texture: дополнительная текстура для квадрата.
  • margin: края(margin), которые определяет размер, который получает следующий компонент в стеке. Например, GUI элемент размером 100×100 и имеет QuadBackgroundComponent за «границей» своего слоя и 5,5 margin будут отображать слой «background» на 90×90 с смещением 5,5 x/y.
  • zOffset: размер z квадрата. Полезно, когда наслаивание создает небольшие промежутки для последующих слоев.

См. также: javadoc

TbtQuadBackgroundComponent

Это похоже на QuadBackgroundComponent, за исключением того, что у него всегда есть текстура, и он реализует растягивание в стиле 9 частей.

QuadBackgroundComponent

Причина, по которой оно называется «девять частей».

В Лемуре он называется TBT Квадрат, который является коротким для «три-по-три» Квадрата и короче, чем тип «NinePatchQuadBackgroundComponent» и более уникален, чем NpQuadBackgroundComponent.

Девять частей полезны для фонов UI Элементов, потому что они обеспечивают более разумное растяжение на границах.

QuadBackgroundComponent_UI

Они могут быть несколько сложными для настройки, но Лемур пытается сделать это проще. Это, по крайней мере, проще, чем вручную вычислять координаты текстур в зависимости от размера изображения и размера цели.

При создании TBT Квадрата Lemur уменьшил параметры вплоть до imageScale и два значения координат краёв:

  • imageScale: определяет масштаб между визуальными единицами и единицами изображения. Например, если изображение равно 128×128, то масштаб 1 означает, что на экране ширина границ будет масштабироваться 1:1 по пикселям. Поэтому, если граница равна 16 пикселям изображения, тогда будет 16 пикселей на экране. Если imageScale равен 2, то та же граница будет отображаться как 32 пикселя на экране.
  • x1, y1: определяет левый нижний угол центральной полностью растягиваемой области, в пикселях изображения.
  • x2, y2: определяет правый верхний угол центральной полностью растягиваемой области, в пикселях изображения.

Изображение текстуры, используемое в примере с девятью частями выше, это «com/simsilica/lemur/icons/bevel-quad.png», включенный в Lemur по умолчанию. Это изображение 128×128, а границы — 8 пикселей изображения в ширину. Таким образом, мы могли бы создать квадратный компонент TBT со следующими параметрами: imageScale = 1, x1 = 8, y1 = 8, x2 = 119, y2 = 119

Если этот компонент рисуется на экране размером 100×50, границы будут по-прежнему иметь ширину 8 пикселей в ширину, а растянутая область будет 84×34 пикселя. Если параметр imageScale изменить на значение 2, тогда границы будут шириной 16 пикселей, а растянутая область — 52×2.

Как и в случае с QuadBackgroundComponent, TbtQuadBackgroundComponent может создавать либо освещенный, либо выше указанный неосвещенный квадрат в зависимости от параметров, заданных при создании. В настоящее время нет способа изменить этот параметр после создания компонента. «lit»(освещен) означает, что квадрат будет использовать Lighting.j3md и иметь соответствующие нормали.

Свойства:

  • color: цвет квадрата. Если есть текстура, то он будет сочетаться с текстурой.
  • alpha: общая альфа квадрата. Это умножается на любое альфа-значение цветовом диапазоне.
  • texture: текстура, которая применяется к квадрату.
  • margin: края(margin), которые определяет размер, который получает следующий компонент в стеке. Например, GUI элемент размером 100×100 и имеет TbtQuadBackgroundComponent за «границей» своего слоя и 5,5 margin будут отображать слой «background» на 90×90 с смещением 5,5 x/y. По умолчанию TbtQuadBackgroundComponent будет использовать при создании значения x1, y1 в качестве границ.
  • zOffset: размер z квадрата. Полезно, когда наслаивание создает небольшие промежутки для последующих слоев.

См. также: javadoc

IconComponent

Этот компонент отображает одно изображение, которое может отделить себя от последующих слоев или просто лежать под ними. Выравнивание изображения можно установить на любую из сторон или углов, установив горизонтальное и/или вертикальное выравнивание. Этот компонент полезен для добавления изображений значков в такие вещи кнопки.

Свойства:

  • imageTexture: текстура, содержащая изображение значка. Она задаётся во время создания компонента, но также может быть сброшена во время выполнения при необходимости.
  • color: цвет, который будет умножен на цвета текстуры изображения значков.
  • alpha: общая альфа для изображения. Это будет умножено на альфа-значение свойства цвета.
  • iconScale: масштаб изображения значка относительно нужных единиц. Например, масштаб 1, отображаемый на экране, установит размер значка так, чтобы 1 пиксель изображения составлял 1 пиксель экрана.
  • HAlignment: горизонтальное выравнивание изображения внутри слоя. Одно из HAlignment.Left, HAlignment.Right или HAlignment.Center. (Примечание: задание как VAlignment, так и HAlignment на Center может иметь странные результаты для последующих слоев.)
  • VAlignment: вертикальное выравнивание изображения внутри слоя. Одно из VAlignment.Top, VAlignment.Bottom или VAlignment.Center. (Примечание: задание как VAlignment, так и HAlignment на Center может иметь странные результаты для последующих слоев.)
  • margin: добавленная граница вокруг значка в этом слое.
  • zOffset: z-размер слоя. Полезно, когда наслаивание создает небольшие промежутки для последующих слоев.
  • offset: смещение на x, y, z относительно нормального места расположения значка. Это можно использовать для настройки размещения значков, для учета деформированных изображений, или просто для выравнивания значков, когда чисто автоматическое выравнивание не будет работать.
  • overlay: установить значение в true, когда размер и расположение значка не должны влиять на следующий уровень. Это действительно хорошее «основание», поскольку она влияет на последующие слои. Это тот случай, когда VAlignment и HAlignment могут быть логически установлены в Center, поскольку это означает, что изображение будет центрироваться под любыми последующими слоями, например, тексте.

DynamicInsetsComponent

Это компонент позиционирования, который не имеет своей собственной геометрии. Он похож на обычный InsetsComponent, за исключением того, что он динамически определяет свои вставки(insets) на основе фактического размера, указанного в нем, по сравнению с его собственным предпочтительным размером. Значения Inset3f представляют собой доли «промежутков» между фактическим и предпочтительным размером.

Например, если предпочтительный размер компонента равен 200×100, но имеющаяся компоновка хочет отобразить компонент как 300×200, то если Insets3f — все 0,5, 0,5, 0,5 и.т.д., последующие слои будут размещены непосредственно в центре, 50 единиц промежуток со всех сторон. (0,5 * (300-200)) = 50 (0,5 * (200-100)) = 50

С другой стороны, если Insets3f top = 0, bottom = 1, left = 0, right = 1, то последующие слои будут размещены в левом верхнем углу, то есть: вычисленные нижние правые вставки станут 100×100.

Свойства:

  • insets: динамические вставки как части разницы между предпочтительным и фактическим размером. Примечание: фактические значения «сбалансированы», поэтому они всегда добавляются как 1.0. Таким образом, если вставляются вставки top = 50 и bottom = 50, то они преобразуются в 0,5 и 0,5.

Внутренние компоненты

InsetsComponent

Это компонент позиционирования и не отображающий геометрию самостоятельно. Компонент вырезает некоторое определенное подмножество пространства для компонентjd следующего слоя на основе предоставленного объекта Insets3f. Объект Insets3f определяет количество ограниченного пространства для каждого из направлений: верх, лева, низ, право, спереди и сзади. Они соответствуют +y, -x, -y, +x, +z и -z соответственно.

Во время вычисления предпочтительного размера InsetsComponent добавит свои значения вставки в предпочтительным размер. Во время компоновки reshape() он будет корректировать смещение с лева, низу и сзади. Это уменьшит сторону для размера потомков — все поля insets3f.

Например, если вставки Insets3f (2, 5, 2, 5, 1, 1) и установлены как «insets»(вставки) слоя элемента GUI, то если предпочтительный размер следующего слоя равен 100x100x1, тогда будет рассчитываться реальный предпочтительный размер как 110x104x3. Как правило, следующим слоем является слоем границ или фоновым слем. Если reshape() происходит с числом 0,0 с размером 200x100x5, тогда InsetsComponent будет передавать 5, 2 в качестве смещения на следующий уровень и 190, 96, 3 в качестве размера.

Свойства:

  • insets: значения Insets3f, которые будут добавлены к предпочтительному размеру и будут вычтены из перекраивания(reshapes).

TextComponent

Этот компонент отображает один слой текста, потенциально выравнивая его в пространстве компонентов элемента GUI. Это используется как текст метки(label), так и тени-текста в элементе GUI Label(метка) и его подклассах.

Свойства:

  • text: текст, отображаемый в компоненте.
  • font: шрифт, используемый для визуализации текста.
  • fontSize: размер, используемый для масштабирования шрифта.
  • color: цвет визуализируемого текста.
  • alpha: отдельная альфа, которая умножается на альфа-значение цвета для угасания текста в/из.
  • HAlignment: горизонтальное выравнивание текста в общем виде компонента.
  • VAlignment: вертикальное выравнивание текста в общем виде компонента.
  • offset: x, y, z смещено относительно позиции текста по умолчанию. Может использоваться для «смещения» текста относительно того, где он в нормальном состоянии будет отображаться, это может быть сделано для слоя тени-текста или выделенного слоя.
  • layer: заставляет текст сортировать выше или ниже некоторой другой геометрии со значением слоя. Слои специфичны для компараторов геометрии Лемура, которые позволяют грубо сортировать вперед/назад на основе слоя в структуре графа сцены.

TextEntryComponent


Переведено для jmonkeyengine.ru, оригинал
Автор перевода: Andry

Добавить комментарий

jMonkeyEngine.ru © 2017. Все права сохранены.