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

Head-Up Display (HUD)

Опубликованно: 04.05.2017, 18:40
Последняя редакция, Andry: 03.10.2017 12:38

HUD (Head-Up Display) является частью визуального пользовательского интерфейса игры. Это оверлей, который отображает дополнительную информацию как (обычно) 2х-мерный текст или значки на экране, поверх 3D-сцены. Не все игры имеют или нуждаются в HUD. Чтобы избежать нарушения погружения и загромождения экрана, используйте только HUD, если это единственный способ передачи определенной информации.

HUD используются для предоставления игрокам необходимой информации об игровом состоянии.

  • Статус: оценка, миникарта, очки, скрытый режим, …
  • Ресурсы: боеприпасы, жизни/здоровье, время, …
  • Приборы для транспортных средств: Кабина, спидометр, …
  • Навигационные средства: перекрестие, указатель мыши или …

У вас есть несколько вариантов создания HUD.

Варианты Плюсы Минусы
Присоединить элементы по умолчанию к guiNode: Легко обучаема. JMonkeyEngine встроенный API для прикрепления простых изображений и растрового текста. Только основные функции.
Вам нужно будет написать специальные элементы управления / кнопки / эффекты, если они вам понадобятся.
Используйте расширенную интеграцию Nifty GUI: Полнофункциональный интерактивный интерфейс пользователя.
Включает кнопки, эффекты, элементы управления. + Поддержка макетов XML и Java.
Более крутая кривая обучения.
Используйте библиотеки пользовательского интерфейса, такие как tonegodgui или Lemur: У обоих есть много функций, которые было бы трудно сделать с Nifty
Включает кнопки, эффекты, элементы управления.
Новые функции все еще бывает дописываются
Нет гарантии будущих обновлений, и не так хорошо документированы

Использование GUI Node — это подход по умолчанию в jme3 для создания простых HUD. Если вы просто хотите быстро отобразить строку текста или простой значок на экране, используйте графический узел без излишеств, так проще.

Простой HUD: узел GUI

Вы уже знаете rootNode, который содержит 3х-мерный граф сцены. JME3 также предлагает двумерный (ортогональный) узел, guiNode.

Вот как вы используете guiNode для HUD:

  • Создайте элемент GUI: объект BitmapText или Picture.
  • Присоедините элемент к guiNode.
  • Поместите элемент в ортогональную очередь визуализации, используя setQueueBucket(Bucket.Gui).

BitmapTexts и Pictures отображаются как 2х-мерные элементы на экране.

По умолчанию, guiNode имеет прикрепленную статистику графа сцены. Чтобы очистить guiNode перед присоединением собственных элементов графического интерфейса, используйте следующие методы:

setDisplayStatView(false); setDisplayFps(false);

Отображение изображений в HUD

Простое изображение можно отобразить с помощью com.jme3.ui.Picture.

Picture pic = new Picture("HUD Picture");
pic.setImage(assetManager, "Textures/ColoredTex/Monkey.png", true);
pic.setWidth(settings.getWidth()/2);
pic.setHeight(settings.getHeight()/2);
pic.setPosition(settings.getWidth()/4, settings.getHeight()/4);
guiNode.attachChild(pic);

Когда вы устанавливаете последнее значение boolean в setImage() равным true, альфа-канал вашего изображения становится прозрачным/полупрозрачным.

Отображение текста в HUD

Для отображения текста на экране используете com.jme3.font.BitmapText.

BitmapText hudText = new BitmapText(guiFont, false);
hudText.setSize(guiFont.getCharSet().getRenderedSize());      // размер шрифта
hudText.setColor(ColorRGBA.Blue);                             // цвет шрифта
hudText.setText("You can write any string here");             // текст
hudText.setLocalTranslation(300, hudText.getLineHeight(), 0); // расположение
guiNode.attachChild(hudText);

Объект BitmapFont guiFont является шрифтом по умолчанию, предоставленным SimpleApplication. Скопируйте собственные шрифты в виде файлов .fnt плюс .png в каталог assets/Interface/Fonts и загрузите их так:

BitmapFont myFont = assetManager.loadFont("Interface/Fonts/Console.fnt");
hudText = new BitmapText(myFont, false);

Расположение элементов HUD

  • При расположении текста и изображений графического интерфейса в 2D, нижний левый угол экрана имеет значение (0f, 0f), а верхний правый угол (settings.getWidth(), settings.getHeight()).
  • Если у вас есть несколько 2D элементов в GUI-сегменте, которые перекрывают друг друга, определите их глубину, указав значение Z. Например, используйте pic.move (x, y, -1) для перемещения изображения на задний план или hudText.setLocalTranslation(x, y, 1) для перемещения текста на передний план.
  • Значения размера и длины в ортогональной очереди визуализации обрабатываются как пиксели. Большой квадрат 20*20-wu при визуализации оказывается шириной 20 пикселей.

Отображение геометрий в HUD

Технически возможно присоединить Quads и 3D-геометрию к HUD. Они отображаются как плоские, статические графические элементы. Единицей размера для guiNode являются пиксели, а не единицы мира. Если вы присоедините геометрию, использующую освещенный материал, вы должны добавить свет в guiNode.

Если вы не видите прикрепленный объект в GUI, проверьте его положение и материал (добавьте свет в guiNode). Также проверьте, не слишком ли он крошечный, чтобы ее можно было увидеть. Для сравнения: куб шириной 1 единицу мира, будет шириной всего 1 пиксель при подключении к guiNode! Возможно, вам придется увеличить масштаб.

Сохранение HUD актуальной

Используйте цикл обновления для обновления содержимого.

public void simpleUpdate(float tpf) {
  ...
  hudText.setText("Score: " + score);
  ...
  picture.setImage(assetManager, "Interface/statechange.png", true);
  ...
}

Расширенный HUD: Nifty GUI

Рекомендуемый подход для создания HUD — использование Nifty GUI.

  1. Разместите графический интерфейс в одном или нескольких файлах Nifty XML или Java.
  2. Напишите классы контроллера в Java.
  3. Загрузите XML-файл с объектом контроллера в метод simpleInit() вашей игры.

Преимущество графического интерфейса Nifty заключается в том, что он хорошо интегрирован в jME и jMonkeyEngine SDK и предлагает все функции которые вы ожидаете от профессионального современного пользовательского интерфейса.

Для HUD вы в основном следуете тем же инструкциям, что и для создания нормального Nifty GUI, вы просто не делаете паузу в игре, пока HUD установлен.

Смотрите также


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

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

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