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

Создание новых тем

Опубликованно: 02.05.2017, 19:37
Последняя редакция, Andry: 02.05.2017 20:27

Создание новых тем

Понимание Styles

Класс Style настроен так, чтобы быть максимально удобным для создания пользовательских элементов управления.

Каждое свойство стиля может иметь один из следующих типов данных:

  • String
  • float
  • int
  • boolean
  • ColorRGBA
  • Vector2f
  • Vector3f
  • Vector4f
  • Effect
  • Object

Чтобы извлечь тег из стиля, вы должны использовать метод get для типа данных, который вы пытаетесь получить, например:

screen.getStyle(“StyleName”).getColorRGBA(“TagNameInStyle”);

Они могут использоваться в качестве флагов для настройки ваших элементов управления или для конкретной информации по умолчанию для Look & Feel

Давайте посмотрим на файл Button.xml в качестве примера:

<root>
    <element name=”Button”>
        <font>
            <property name=”fontSize” type=”float” value=”18″ />
            <property name=”fontColor” type=”ColorRGBA”>
                <r value=”0.8″ />
                <g value=”0.8″ />
                <b value=”0.8″ />
                <a value=”1.0″ />
            </property>
            <property name=”textAlign” type=”String” value=”Center” />
            <property name=”textVAlign” type=”String” value=”Center” />
            <property name=”textWrap” type=”String” value=”Clip” />
            <property name=”hoverColor” type=”ColorRGBA”>
                <r value=”1.0″ />
                <g value=”1.0″ />
                <b value=”1.0″ />
                <a value=”1.0″ />
            </property>
            <property name=”pressedColor” type=”ColorRGBA”>
                <r value=”0.6″ />
                <g value=”0.6″ />
                <b value=”0.6″ />
                <a value=”1.0″ />
            </property>
        </font>
        <attributes>
            <property name=”resizeBorders” type=”Vector4f”>
                <x value=”5″ />
                <y value=”5″ />
                <z value=”5″ />
                <w value=”5″ />
            </property>
            <property name=”defaultSize” type=”Vector2f”>
                <x value=”100″ />
                <y value=”30″ />
            </property>
        </attributes>
        <images>
            <property name=”defaultImg” type=”String” value=”tonegod/gui/style/def/Button/button_x_u.png” />
            <property name=”hoverImg” type=”String” value=”tonegod/gui/style/def/Button/button_x_h.png” />
            <property name=”pressedImg” type=”String” value=”tonegod/gui/style/def/Button/button_x_d.png” />
        </images>
        <effects>
            <property name=”event0″ type=”Effect”>
                <event value=”Hover” />
                <effect value=”Pulse” />
                <speed value=”3″ />
            </property>
            <property name=”event1″ type=”Effect”>
                <event value=”Press” />
                <effect value=”ImageSwap” />
                <speed value=”0″ />
            </property>
            <property name=”event2″ type=”Effect”>
                <event value=”LoseFocus” />
                <effect value=”ImageSwap” />
                <speed value=”0″ />
            </property>
        </effects>
    </element>
</root>

XML-файл стиля для любого заданного элемента управления может содержать столько элементов, сколько пожелаете. Каждый из них становится другим стилем, который можно получить через:

screen.getStyle("styleName");

Каждый элемент тега делится на 4 раздела:

  • fonts
  • attributes
  • images
  • effects

Первые 3 взаимозаменяемы и только для организационных целей.

Четвертый (эффекты) более специфичен, так как эффекты сохраняются и извлекаются через EffectManage экрана.

Теги для хранения свойств форматируются следующим образом:

  • Если тип данных имеет одно значение, значение хранится в единственном теге свойства:
    <property name="ID" type="float" value="0.5" />
  • Если тип данных имеет несколько значений, тег свойства будет содержать внутренние теги, названные после значения, например:
    <property name="ID" type="Vector4f />
        <x value="0.5 />
        <y value="0.5 />
        <z value="0.5 />
        <w value="0.5 />
    </property>

Опять же, чтобы получить это, вы должны вызвать:

screen.getStyle("styleName").getVector4f("ID");

Тег ‘effects’

Чтобы добавить к элементу управления эффект по умолчанию, вы должны добавить свойства тега под тегом «effects», например:

<property name=”event0″ type=”Effect”>
    <event value=”Hover” />
    <effect value=”Pulse” />
    <speed value=”3″ />
</property>

Использование эффектов можно найти ЗДЕСЬ.

style_map.xml

Файл style_map.xml состоит из списка всех других XML документов, содержащих информацию о стиле для элементов управления. Все другие XMLdocs вполне могли быть единым XML-документом, содержащим все стили, однако, для целей организации, я решил сделать в этом списке столько, сколько вы хотели бы добавить.

Каждая запись в файле style_map.xml форматируется следующим образом:

<style control=”CustomControl” path=”somePath/MyNewControl.xml” />
control= property не применяется, вам необходимо отслеживать, какой XML-файл используется для какого элемента управления.

Настройка настраиваемого глобального стиля Look & Feel для вашего пользовательского интерфейса

ШАГ 1: Скопируйте файл style_map.xml в локальный каталог в папку Project Assets.

<?xml version="1.0" encoding="UTF-8"?>
<root>
        <cursors path="somePath/Cursors.xml" />
        <audio path="somePath/Audio.xml" />
        <style control="Font" path="somePath/Fonts.xml" />
        <style control="Common" path="somePath/Common.xml" />
        <style control="Scrolling" path="somePath/Scrolling.xml" />
        <style control="Window" path="somePath/Window.xml" />
        <style control="Button" path="somePath/Button.xml" />
        <style control="Menu" path="somePath/Menu.xml" />
        <style control="Label" path="somePath/Label.xml" />
        <style control="Slider" path="somePath/Slider.xml" />
        <style control="TextField" path="somePath/TextField.xml" />
        <style control="ChatBox" path="somePath/ChatBox.xml" />
        <style control="Indicator" path="somePath/Indicator.xml" />
</root>

ШАГ 2: Задайте своему классу Screen новый файл style_map.xml.

Screen screen = new Screen(this, "somePath/style_map.xml");

Теперь вы можете скопировать существующие XML-документы для каждого из перечисленных в файле style_map.xml и внести корректировки, которые вы хотели бы использовать в качестве стилей по умолчанию.

Не забудьте обновить путь в файле style_map.xml, чтобы указать на локальную копию для каждого XML-файла, который вы копируете/редактируете.

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

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

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