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

Размещение GUI в XML

Опубликованно: 19.08.2017, 15:39
Последняя редакция, Andry: 22.08.2017 17:37
  1. Концепция Nifty GUI
  2. Nifty GUI Рекомендации
  3. Nifty GUI XML Компоновка или Nifty GUI Java Компоновка
  4. Nifty GUI Накладывается или Nifty GUI Проецируется
  5. Nifty GUI Java Взаимодействие

Вы можете «нарисовать» GUI на экране, написав XML-код (альтернативно, вы также можете использовать Java).

Планирование компоновки вашего GUI

gui-layout-draft

В этом уроке вам нужно создать для игры два экрана: StartScreen вне-игр, которые игроки видят перед началом игры; и игровой HUD, который отображает информацию во время игры. Перед написанием кода вы планируете компоновку GUI либо на бумаге, либо в графическом приложении.

StartScreen содержит:

  • Фоновый слой имеет компоновку по центру и содержит изображение.
  • Верхний слой имеет вертикальную компоновку, содержащую 3 панели:
    • Верхняя панель содержит метку с названием игры,
    • Средняя панель содержит текстовое поле с описанием игры.
    • Нижняя панель имеет горизонтальную компоновку и содержит еще две панели:
      • Левая панель содержит кнопку [Start].
      • На правой панели находится кнопка[Quit].

HUD содержит:

  • Фоновый слой имеет компоновку по центру и содержит частично прозрачное изображение HUD.
  • Верхний слой имеет горизонтальную компоновку, содержащую 2 панели:
    • Левая панель — прозрачная прокладка.
    • Правая панель имеет вертикальную компоновку, содержащую 2 панели, метку и изображение.

Внедрение вашей компоновки GUI

nifty-screen-layer-panel

Создайте пустой файл screen.xml в папке assets/Interface/ вашего проекта. (Щелкните [ПК Мыши] по Interface ▸ Новый ▸ Другое … ▸ GUI ▸ Empty NiftyGui file). Затем создайте папку assets/Interface/Fonts и добавьте новый шрифт, например Arial. (Щелкните [ПК Мыши] по Interface ▸ Новый ▸ Другое … ▸ GUI ▸ Font)

Один XML-файл может содержать несколько или даже все экраны. Напоминаем: Nifty отображает один экран за раз; экран содержит несколько слоев друг над другом; каждый слой содержит панели, в которые встроено все остальное; панели содержат фактическое содержимое (текст, изображения или элементы управления).

Сделаем экраны

Следующий минимальный XML-файл содержит начальный экран и экран HUD. (И они еще не определены, пока).

<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns="http://nifty-gui.sourceforge.net/nifty-1.3.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd">
  <screen id="start">
    <!-- ... -->
  </screen>
  <screen id="hud">
    <!-- ... -->
  </screen>
</nifty>

Каждый Nifty GUI должен иметь начальный экран. Остальные (в этом примере — это экран HUD) являются необязательными.

В следующих примерах заголовок схемы XML сокращен до <nifty>

Сделаем слои

Следующий минимальный XML-файл показывает, как мы добавили слои в начальный экран и экран HUD. Удалите все из файла и добавьте следующий код:

<nifty>
  <screen id="start">
    <layer id="background" backgroundColor="#000f">
      <!-- ... -->
    </layer>
    <layer id="foreground" backgroundColor="#0000" childLayout="vertical">
      <!-- ... -->
    </layer>
  </screen>
  <screen id="hud">
    <layer id="background" backgroundColor="#000f">
      <!-- ... -->
    </layer>
    <layer id="foreground" backgroundColor="#0000" childLayout="horizontal">
      <!-- ... -->
    </layer>
  </screen>
</nifty>

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

Сделаем панели

Панель является внутренним контейнером (который будет содержать фактическое содержимое: текст, изображения или элементы управления). Вы размещаете панели внутри слоев. Следующие панели входят в слой foreground, start экрана:

      <panel id="panel_top" height="25%" width="75%" align="center" childLayout="center"
             backgroundColor="#f008">
      </panel>
      <panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center"
             backgroundColor="#0f08">
      </panel>
      <panel id="panel_bottom" height="25%" width="75%" align="center" childLayout="horizontal"
             backgroundColor="#00f8">
        <panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center"
             backgroundColor="#44f8">
        </panel>
        <panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center"
             backgroundColor="#88f8">
        </panel>
      </panel>

Следующие панели входят в слой foreground, hud экрана:

      <panel id="panel_left" width="80%" height="100%" childLayout="vertical"
      backgroundColor="#0f08">
        <!-- spacer -->
      </panel>
      <panel id="panel_right" width="20%" height="100%" childLayout="vertical"
      backgroundColor="#00f8" >
        <panel id="panel_top_right1" width="100%" height="15%" childLayout="center"
             backgroundColor="#00f8">
        </panel>
        <panel id="panel_top_right2" width="100%" height="15%" childLayout="center"
             backgroundColor="#44f8">
        </panel>
        <panel id="panel_bot_right" width="100%" height="70%" valign="center"
             backgroundColor="#88f8">
        </panel>
      </panel>

Результат должен выглядеть следующим образом:

nifty-gui-panels

Добавление контента в панели

См. Также «Введение в Компоновку» Nifty GUI.

Добавить изображения

Изображение start-background.png это полноэкранное фоновое изображение. Добавьте его в Interface. На start экране добавим следующий элемент изображение:

    <layer id="background" childLayout="center">
        <image filename="Interface/start-background.png"></image>
    </layer>

Изображение hud-frame.png представляет собой прозрачную рамку, которую мы используем как украшение HUD. Добавьте его в Interface. На экране hud добавим следующий элемент изображение:

    <layer id="background" childLayout="center">
        <image filename="Interface/hud-frame.png"></image>
    </layer>

Чтобы сделать hud-frame.png независимым от разрешения экрана, которое вы используете, вы можете использовать атрибут imageMode для элемента изображения, объяснение Изменение Размера Изображений (ImageMode = resize)

    <layer id="background" childLayout="center">
        <image filename="Interface/hud-frame.png" imageMode="resize:40,490,110,170,40,560,40,270,40,560,40,40" width="100%" height="100%"/>
    </layer>

Изображение face1.png — это изображение, которое вы хотите использовать в качестве значка состояния. Добавьте его в Interface. В слой foreground, hud экрана добавим следующий элемент изображение:

        <panel id="panel_top_right2" width="100%" height="15%" childLayout="center">
            <image filename="Interface/face1.png" valign="center" align="center" height="50%" width="30%" >
            </image>
        </panel>

Это изображение масштабируется, чтобы использовать 50% высоты и 30% ширины его контейнера.

Добавить статический текст

Название игры — типичный пример статического текста. На start экране добавьте следующий текстовый элемент:

      <panel id="panel_top" height="25%" width="75%" align="center" childLayout="center">
          <text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%" />
      </panel>

Для более длинных фрагментов статического текста, таких как введение, вы можете использовать wrap = «true. Добавьте следующий текст в Start screen:

      <panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center">
        <text text="Here goes some text describing the game and the rules and stuff. Incidentally,
         the text is quite long and needs to wrap at the end of lines. ..."
        font="Interface/Fonts/Default.fnt" width="100%" height="100%" wrap="true" />
      </panel>

В качестве шрифта используется шрифт jME3 по умолчанию Interface/Fonts/Default.fnt, который включен в jMonkeyEngine .JAR. Вы можете добавить свои собственные шрифты в свою собственную папку assets/Interface/Fonts. Задайте путь к вашему шрифту.

Добавим элементы управления(Controls)

Прежде чем вы сможете использовать любой элемент управления, сначала необходимо загрузить Определение Control(Control Definition). Добавьте следующие две строки перед определениями экрана:

  <useStyles filename="nifty-default-styles.xml" />
  <useControls filename="nifty-default-controls.xml" />

Обратите внимание, что тег useStyles должен быть первым дочерним элементом nifty тега, иначе вы увидите ошибку вида дизайна.

Управление метками(Label Control)

Используйте элементы управления метки для текста, который вы хотите динамически редактировать в Java. Одним из таких примеров является отображение очков. В слой foreground, hud экрана добавьте следующий текстовый элемент:

        <panel id="panel_top_right" height="100%" width="15%" childLayout="center">
            <control name="label" color="#000" text="123" width="100%" height="100%" />
        </panel>

Обратите внимание, что ширина и высота не масштабируют шрифт растровое изображение, а делают определённое центрирование. Если вам нужен другой размер шрифта, вам нужно предоставить дополнительный растровый шрифт нужного размера (они имеют фиксированные размеры и не будут масштабироваться).

Управление кнопками(Button Control)

В нашем GUI на стартовом экране будут две кнопки. Вы добавляете кнопки [Start] и [Quit] в нижнюю панель start экрана с помощью элемента <control>:

        <panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center">
          <control name="button" label="Start" id="StartButton" align="center" valign="center">
          </control>
        </panel>
        <panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center">
          <control name="button" label="Quit" id="QuitButton" align="center" valign="center">
          </control>
        </panel>

Обратите внимание, что эти элементы управления еще ничего не делают — мы скоро доберемся до этого.

Теперь удалите все теги backgroundColor = «» из вашего кода. Они были нужны только что бы показать компоновку.

Ваш screen.xml должен выглядеть так:

<?xml version="1.0" encoding="UTF-8"?>
<nifty xmlns="http://nifty-gui.sourceforge.net/nifty-1.3.xsd" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://nifty-gui.sourceforge.net/nifty-1.3.xsd http://nifty-gui.sourceforge.net/nifty-1.3.xsd">
  <useStyles filename="nifty-default-styles.xml" />
  <useControls filename="nifty-default-controls.xml" />
  <screen id="start">
    <layer id="background" childLayout="center">
      <image filename="Interface/start-background.png"></image>
    </layer>
    <layer id="foreground" childLayout="vertical">
      <panel id="panel_top" height="25%" width="75%" align="center" childLayout="center">
        <text text="My Cool Game" font="Interface/Fonts/Default.fnt" width="100%" height="100%" />
      </panel>
      <panel id="panel_mid" height="50%" width="75%" align="center" childLayout="center">
        <text text="Here goes some text describing the game and the rules and stuff. Incidentally, 
the text is quite long and needs to wrap at the end of lines. ..." font="Interface/Fonts/Default.fnt"
 width="100%" height="100%" wrap="true" />
      </panel>
      <panel id="panel_bottom" height="25%" width="75%" align="center" childLayout="horizontal" >
        <panel id="panel_bottom_left" height="50%" width="50%" valign="center" childLayout="center">
          <control name="button" label="Start" id="StartButton" align="center" valign="center"></control>
        </panel>
        <panel id="panel_bottom_right" height="50%" width="50%" valign="center" childLayout="center">
          <control name="button" label="Quit" id="QuitButton" align="center" valign="center"></control>
        </panel>
      </panel>
    </layer>
  </screen>
  <screen id="hud">
    <layer id="background" childLayout="center">
      <image filename="Interface/hud-frame.png"></image>
    </layer>
    <layer id="foreground" childLayout="horizontal">
      <panel id="panel_left" width="80%" height="100%" childLayout="vertical" ></panel>
      <panel id="panel_right" width="20%" height="100%" childLayout="vertical">
        <panel id="panel_top_right1" width="100%" height="15%" childLayout="center">
          <control name="label" color="#000" text="123" width="100%" height="100%" />
        </panel>
        <panel id="panel_top_right2" width="100%" height="15%" childLayout="center">
          <image filename="Interface/face1.png" valign="center" align="center" height="50%" width="30%" ></image>
        </panel>
        <panel id="panel_bot_right" width="100%" height="70%" valign="center" ></panel>
      </panel>
    </layer>
  </screen>
</nifty>

Другие элементы управления

Nifty дополнительно предлагает множество настраиваемых элементов управления, таких как флажки, текстовые поля, меню, чаты, вкладки, … См. Также Элементы Nifty GUI.

Промежуточный результат

Когда вы будете осуществлять пред просмотр этого кода в jMonkeyEngine SDK, наша учебная демонстрация должна выглядеть следующим образом: Стартовый экран с двумя кнопками, и простой игровой HUD экран с рамкой и синим кубом (который обозначает любой игровой контент jME3).

nifty-gui-simple-demo

Сравните свой результат компоновки с черновым выше.

Следующие шаги

Интегрируйте GUI в игру. Как правило, вы накладываете GUI.


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

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

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