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

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

Опубликованно: 20.08.2017, 11:34
Последняя редакция, Andry: 21.08.2017 16:26
  1. Концепция Nifty GUI
  2. Nifty GUI Рекомендации
  3. Nifty GUI XML Компоновка или Nifty GUI Java Компоновка
  4. Nifty GUI Накладывается или Nifty GUI Проецируется
  5. Nifty GUI Java Взаимодействие

Работа в процессе Вы можете «нарисовать» GUI на экране, написав Java-код, или в качестве альтернативы, использовать XML. Как правило, вы компонуете статический базовый GUI в XML и используете Java-команды, если вам нужно динамически менять GUI во время выполнения. Теоретически вы также можете вывести весь GUI на Java (но мы не будем здесь разбирать этот случай).

Примеры кода

Пример проекта

  • Исходный код: Старые пример, Примеры с github.com.
  • Загрузить демо проект: NiftyGuiDemo.zip (jme3-готовый) + Полный демо ZIP основанный на de.lessvoid.nifty.examples.controls.ControlsDemo.java.
    1. Демо игра на основе SimpleApplication (используйте например шаблон BasicGame в jMonkeyEngine SDK).
    2. Скопируйте файлы изображений и звуков в папку вашего проекта assets/Interface/. (В этом примере, я копировал из nifty-default-controls-examples/trunk/src/main/resources/ в assets/Interface/).
    3. Убедитесь что используете пути относительно папки assets/ вашего проекта .
      • Например для файлов .fnt/.png/.jpg используйте filename(“Interface/yang.png); ( не filename(“yang.png);).
      • Например для файлов .wav/.ogg используйте filename(“Interface/sounds/gong.wav); (не filename(“sounds/gong.wav);).

Так вы получите наглядный пример того, как выглядит Java Синтаксис в Nifty GUI, это самый простой пример. Он создает экран со слоем и панелью, содержащей кнопку.

package mygame;

import com.jme3.app.SimpleApplication;
import com.jme3.niftygui.NiftyJmeDisplay;
import de.lessvoid.nifty.Nifty;
import de.lessvoid.nifty.builder.ScreenBuilder;
import de.lessvoid.nifty.builder.LayerBuilder;
import de.lessvoid.nifty.builder.PanelBuilder;
import de.lessvoid.nifty.controls.button.builder.ButtonBuilder;
import de.lessvoid.nifty.screen.DefaultScreenController;

/**
 * @author iamcreasy
*/
public class Main extends SimpleApplication {

    public static void main(String[] args) {
        Main app = new Main();
        app.start();
    }

    @Override
    public void simpleInitApp() {
    NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
            assetManager, inputManager, audioRenderer, guiViewPort);
    Nifty nifty = niftyDisplay.getNifty();
    guiViewPort.addProcessor(niftyDisplay);
    flyCam.setDragToRotate(true);

    nifty.loadStyleFile("nifty-default-styles.xml");
    nifty.loadControlFile("nifty-default-controls.xml");

    // <screen>
    nifty.addScreen("Screen_ID", new ScreenBuilder("Hello Nifty Screen"){{
        controller(new DefaultScreenController()); // Свойства экрана

        // <layer>
        layer(new LayerBuilder("Layer_ID") {{
            childLayoutVertical(); // свойства layer(слоёв), добавьте больше...

            // <panel>
            panel(new PanelBuilder("Panel_ID") {{
               childLayoutCenter(); // свойства panel(панели), добавьте больше...

                // GUI элементы
                control(new ButtonBuilder("Button_ID", "Hello Nifty"){{
                    alignCenter();
                    valignCenter();
                    height("5%");
                    width("15%");
                }});

                //.. добавьте больше GUI элементов сюда

            }});
            // </panel>
          }});
        // </layer>
      }}.build(nifty));
    // </screen>

    nifty.gotoScreen("Screen_ID"); // старт экрана
    }
}

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

gui-layout-draft

В этом уроке вы воссоздаете тот же экран, что и в примере с Nifty GUI в XML.

Создайте файл Screen.Java в папке assets/Interfaces/ вашего проекта. Один файл Java может содержать несколько или даже все экраны. Напоминаем: Nifty отображает один экран за раз; экран содержит несколько слоев друг над другом; каждый слой содержит панели, в которые встроено все остальное; панели содержат фактическое содержимое (текст, изображения или элементы управления).

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

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

nifty.addScreen("start", new ScreenBuilder("start"){{
    controller(new DefaultScreenController());
    // <!-- ... -->
  }}.build(nifty));

nifty.addScreen("hud", new ScreenBuilder("hud"){{
    controller(new DefaultScreenController());
    // <!-- ... -->
  }}.build(nifty));

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

Сделаем слои

Следующий код Java показывает, как мы добавляем слои(layer) в начальный экран и HUD экран:

nifty.addScreen("start", new ScreenBuilder("start"){{
        controller(new DefaultScreenController());

         // добавим layer(слой)
         layer(new LayerBuilder("background") {{
            childLayoutCenter();
            backgroundColor("#000f");

            // <!-- ... -->
         }});

         layer(new LayerBuilder("foreground") {{
                childLayoutVertical();
                backgroundColor("#0000");

            // <!-- ... -->
         }});
         // добавим layer(слой)

      }}.build(nifty));

Повторите то же самое, но используя

nifty.addScreen("hud", new ScreenBuilder("hud"){{

для HUD экрана.

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

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

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

    nifty.addScreen("start", new ScreenBuilder("start") {{
        controller(new DefaultScreenController());
        layer(new LayerBuilder("background") {{
            childLayoutCenter();
            backgroundColor("#000f");
            // <!-- ... -->
        }});

        layer(new LayerBuilder("foreground") {{
                childLayoutVertical();
                backgroundColor("#0000");

            // добавим panel(панель)
            panel(new PanelBuilder("panel_top") {{
                childLayoutCenter();
                alignCenter();
                backgroundColor("#f008");
                height("25%");
                width("75%");
            }});

            panel(new PanelBuilder("panel_mid") {{
                childLayoutCenter();
                alignCenter();
                backgroundColor("#0f08");
                height("50%");
                width("75%");
            }});

            panel(new PanelBuilder("panel_bottom") {{
                childLayoutHorizontal();
                alignCenter();
                backgroundColor("#00f8");
                height("25%");
                width("75%");

                panel(new PanelBuilder("panel_bottom_left") {{
                    childLayoutCenter();
                    valignCenter();
                    backgroundColor("#44f8");
                    height("50%");
                    width("50%");
                }});

                panel(new PanelBuilder("panel_bottom_right") {{
                    childLayoutCenter();
                    valignCenter();
                    backgroundColor("#88f8");
                    height("50%");
                    width("50%");
                }});
            }}); // добавим panel(панель)
        }});

    }}.build(nifty));

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

    nifty.addScreen("hud", new ScreenBuilder("hud") {{
        controller(new DefaultScreenController());

        layer(new LayerBuilder("background") {{
            childLayoutCenter();
            backgroundColor("#000f");
            // <!-- ... -->
        }});

        layer(new LayerBuilder("foreground") {{
            childLayoutHorizontal();
            backgroundColor("#0000");

            // добавим panel(панель)
            panel(new PanelBuilder("panel_left") {{
                childLayoutVertical();
                backgroundColor("#0f08");
                height("100%");
                width("80%");
                // <!-- spacer -->
            }});

            panel(new PanelBuilder("panel_right") {{
                childLayoutVertical();
                backgroundColor("#00f8");
                height("100%");
                width("20%");

                panel(new PanelBuilder("panel_top_right1") {{
                    childLayoutCenter();
                    backgroundColor("#00f8");
                    height("15%");
                    width("100%");
                }});

                panel(new PanelBuilder("panel_top_right2") {{
                    childLayoutCenter();
                    backgroundColor("#44f8");
                    height("15%");
                    width("100%");
                }});

                panel(new PanelBuilder("panel_bot_right") {{
                    childLayoutCenter();
                    valignCenter();
                    backgroundColor("#88f8");
                    height("70%");
                    width("100%");
                }});
            }}); // добавим panel(панель)
        }});
    }}.build(nifty));

Попробуйте пример. Не забудьте активировать экран с помощью nifty.gotoScreen(“start); и hud соответственно. Результат должен выглядеть следующим образом:

nifty-gui-panels

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

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

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

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

    nifty.addScreen("start", new ScreenBuilder("start") {{
        controller(new DefaultScreenController());
        layer(new LayerBuilder("background") {{
            childLayoutCenter();
            backgroundColor("#000f");

            // добавим изображение
            image(new ImageBuilder() {{
                filename("Interface/tutorial/start-background.png");
            }});

        }});

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

    nifty.addScreen("hud", new ScreenBuilder("hud") {{
        controller(new DefaultScreenController());

        layer(new LayerBuilder("background") {{
            childLayoutCenter();
            backgroundColor("#000f");

            // добавим изображение
            image(new ImageBuilder() {{
                filename("Interface/tutorial/hud-frame.png");
            }});

        }});

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

                panel(new PanelBuilder("panel_top_right2") {{
                    childLayoutCenter();
                    backgroundColor("#44f8");
                    height("15%");
                    width("100%");

                    // добавим изображение
                    image(new ImageBuilder() {{
                        filename("Interface/tutorial/face1.png");
                        valignCenter();
                        alignCenter();
                        height("50%");
                        width("30%");
                    }});

                }});

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

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

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

           // добавим panel(панель)
            panel(new PanelBuilder("panel_top") {{
                childLayoutCenter();
                alignCenter();
                backgroundColor("#f008");
                height("25%");
                width("75%");

                // добавим текст
                text(new TextBuilder() {{
                    text("My Cool Game");
                    font("Interface/Fonts/Default.fnt");
                    height("100%");
                    width("100%");
                }});

            }});

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

            panel(new PanelBuilder("panel_mid") {{
                childLayoutCenter();
                alignCenter();
                backgroundColor("#0f08");
                height("50%");
                width("75%");
                // добавим текст
                text(new TextBuilder() {{
                    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");
                    wrap(true);
                    height("100%");
                    width("100%");
                }});

            }});

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

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

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

    nifty.loadStyleFile("nifty-default-styles.xml");
    nifty.loadControlFile("nifty-default-controls.xml");

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

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

                panel(new PanelBuilder("panel_top_right1") {{
                    childLayoutCenter();
                    backgroundColor("#00f8");
                    height("15%");
                    width("100%");

                    control(new LabelBuilder(){{
                        color("#000");
                        text("123");
                        width("100%");
                        height("100%");
                    }});

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

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

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

                panel(new PanelBuilder("panel_bottom_left") {{
                    childLayoutCenter();
                    valignCenter();
                    backgroundColor("#44f8");
                    height("50%");
                    width("50%");

                    // добавим control
                    control(new ButtonBuilder("StartButton", "Start") {{
                      alignCenter();
                      valignCenter();
                      height("50%");
                      width("50%");
                    }});

                }});

                panel(new PanelBuilder("panel_bottom_right") {{
                    childLayoutCenter();
                    valignCenter();
                    backgroundColor("#88f8");
                    height("50%");
                    width("50%");

                    // добавим control
                    control(new ButtonBuilder("QuitButton", "Quit") {{
                      alignCenter();
                      valignCenter();
                      height("50%");
                      width("50%");
                    }});

                }});

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

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

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

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

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

Удалите все строки, которые задают цвета фона, они нужны вам только, чтобы видеть расположение.

nifty-gui-simple-demo

Настройки Nifty Java

Перед инициализацией Nifty экранов вы настраиваете свойства и регистрируете медиа.

Методы Nifty  Описание
registerSound(“mysound, “Interface/abc.wav); 
registerMusic(“mymusic, “Interface/xyz.ogg); 
registerMouseCursor(“mypointer, “Interface/abc.png, 5, 4); 
registerEffect(?);  ?
setDebugOptionPanelColors(true);  Выделите все панели, упростит их расстановку.

Пример:

nifty.registerMouseCursor("hand", "Interface/mouse-cursor-hand.png", 5, 4);

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

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


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

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

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