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

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

Опубликованно: 20.08.2017, 11:34
Последняя редакция, Andry: 09.05.2018 12:04
  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.
  • Так вы получите наглядный пример того, как выглядит Java Синтаксис в Nifty GUI, это самый простой пример. Он создает экран со слоем и панелью, содержащей кнопку.

    package mygame;
    
    import com.jme3.app.Application;
    import com.jme3.app.SimpleApplication;
    import com.jme3.app.state.BaseAppState;
    import com.jme3.niftygui.NiftyJmeDisplay;
    import de.lessvoid.nifty.Nifty;
    import de.lessvoid.nifty.builder.LayerBuilder;
    import de.lessvoid.nifty.builder.PanelBuilder;
    import de.lessvoid.nifty.builder.ScreenBuilder;
    import de.lessvoid.nifty.controls.button.builder.ButtonBuilder;
    import de.lessvoid.nifty.screen.DefaultScreenController;
    
    public class MyStartScreen extends BaseAppState {
    
        @Override
        protected void initialize(Application app) {
            //Технически безопасно выполнять всю инициализацию и очистку в методах 
            //onEnable()/onDisable(). Выбор использования initialize() и
            //cleanup() для этого, дело эффективности для конкретного
            //разработчика.
            //TODO: инициализацию AppState, например присоединить spatials к rootNode
        }
    
        @Override
        protected void cleanup(Application app) {
            //TODO: очистите то, что вы инициализировали в методе initialize ,
            // например удалить все spatial-ы из rootNode
        }
    
        //onEnable()/onDisable() могут использоваться для управления вещами, которые должны 
        //существовать только при включенном состоянии(state). Основными примерами были бы привязка
        //графа сцены или привязки слушателя ввода.
        @Override
        protected void onEnable() {
            NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
                    getApplication().getAssetManager(),
                    getApplication().getInputManager(),
                    getApplication().getAudioRenderer(),
                    getApplication().getGuiViewPort());
    
            Nifty nifty = niftyDisplay.getNifty();
            getApplication().getGuiViewPort().addProcessor(niftyDisplay);
            ((SimpleApplication) getApplication()).getFlyByCamera().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 elements
                        control(new ButtonBuilder("Button_ID", "Hello Nifty"){{
                            alignCenter();
                            valignCenter();
                            height("5%");
                            width("15%");
                        }});
    
                        //.. добавьте больше GUI элементов сюда
    
                    }});
                    // </panel>
                  }});
                // </layer>
              }}.build(nifty));
            // </screen>
    
            nifty.gotoScreen("Screen_ID"); // старт экрана
        }
    
        @Override
        protected void onDisable() {
            //Вызывается, когда состояние(state) было ранее включено, но теперь отключено
            //либо потому, что вызвано setEnabled(false) либо состояние
            //очищается(cleaned up).
        }
    
        @Override
        public void update(float tpf) {
            //TODO: реализовать поведение для времени выполнения
        }
    
    }

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

    gui-layout-draft

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

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

    Затем настройте дисплей Nifty.

    NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
            getApplication().getAssetManager(),
            getApplication().getInputManager(),
            getApplication().getAudioRenderer(),
            getApplication().getGuiViewPort());
    
    Nifty nifty = niftyDisplay.getNifty();
    getApplication().getGuiViewPort().addProcessor(niftyDisplay);
    ((SimpleApplication) getApplication()).getFlyByCamera().setDragToRotate(true);
    
    nifty.loadStyleFile("nifty-default-styles.xml");
    nifty.loadControlFile("nifty-default-controls.xml");
    
    // <!-- ... -->
    
    nifty.gotoScreen("start"); // старт экрана

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

    Следующий минимальный файл 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 экран слоя foreground входят следующие панели:

    nifty.addScreen("start", new ScreenBuilder("start") {{
        controller(new DefaultScreenController());
        // добавим layer(слой)
        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(панель)
        }});
        // добавим layer(слой)
    
    }}.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 — Руководство: Layouts» и «Введение в Компоновку» Nifty GUI.

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

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

    nifty.addScreen("start", new ScreenBuilder("start") {{
        controller(new DefaultScreenController());
        // добавим layer(слой)
        layer(new LayerBuilder("background") {{
            childLayoutCenter();
            backgroundColor("#000f");
    
            // добавим изображение
            image(new ImageBuilder() {{
                filename("Interface/start-background.png");
            }});
        }});
        // <!-- ... -->
    }}.build(nifty));

    Изображение 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/hud-frame.png");
            }});
        }});
        // <!-- ... -->
    }}.build(nifty));

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

    panel(new PanelBuilder("panel_top_right2") {{
        childLayoutCenter();
        backgroundColor("#44f8");
        height("15%");
        width("100%");
    
        // добавим изображение
        image(new ImageBuilder() {{
            filename("Interface/face1.png");
            valignCenter();
            alignCenter();
            height("50%");
            width("30%");
        }});
    }});

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

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

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

    // добавим 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». Установка wrap = «true» будет работать только при установке ширины для текстового элемента, так что Nifty знает, когда нужно обернуть строку. Добавьте следующий текст в 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/. Задайте свой шрифт который вы создали во время начала этапа Реализации GUI.

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

    Прежде чем вы сможете использовать любой элемент управления, сначала необходимо загрузить Определение 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 дополнительно предлагает множество настраиваемых элементов управления, таких как флажки, текстовые поля, меню, чаты, вкладки, …

    См. Также:

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

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

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

    nifty-gui-simple-demo

    Ваш файл Screen.java должен выглядеть так:

    package mygame;
    
    import com.jme3.app.Application;
    import com.jme3.app.SimpleApplication;
    import com.jme3.app.state.BaseAppState;
    import com.jme3.niftygui.NiftyJmeDisplay;
    import de.lessvoid.nifty.Nifty;
    import de.lessvoid.nifty.builder.ImageBuilder;
    import de.lessvoid.nifty.builder.LayerBuilder;
    import de.lessvoid.nifty.builder.PanelBuilder;
    import de.lessvoid.nifty.builder.ScreenBuilder;
    import de.lessvoid.nifty.builder.TextBuilder;
    import de.lessvoid.nifty.controls.button.builder.ButtonBuilder;
    import de.lessvoid.nifty.controls.label.builder.LabelBuilder;
    import de.lessvoid.nifty.screen.DefaultScreenController;
    
    public class Screen extends BaseAppState {
    
        @Override
        protected void initialize(Application app) {
            //Технически безопасно выполнять всю инициализацию и очистку в методах 
            //onEnable()/onDisable(). Выбор использования initialize() и
            //cleanup() для этого, дело эффективности для конкретного
            //разработчика.
            //TODO: инициализацию AppState, например присоединить spatials к rootNode
        }
    
        @Override
        protected void cleanup(Application app) {
            //TODO: очистите то, что вы инициализировали в методе initialize ,
            // например удалить все spatial-ы из rootNode
        }
    
        //onEnable()/onDisable() могут использоваться для управления вещами, которые должны 
        //существовать только при включенном состоянии(state). Основными примерами были бы привязка
        //графа сцены или привязки слушателя ввода.
        @Override
        protected void onEnable() {
            NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
                    getApplication().getAssetManager(),
                    getApplication().getInputManager(),
                    getApplication().getAudioRenderer(),
                    getApplication().getGuiViewPort());
    
            Nifty nifty = niftyDisplay.getNifty();
            getApplication().getGuiViewPort().addProcessor(niftyDisplay);
            ((SimpleApplication) getApplication()).getFlyByCamera().setDragToRotate(true);
    
            nifty.loadStyleFile("nifty-default-styles.xml");
            nifty.loadControlFile("nifty-default-controls.xml");
    
            nifty.addScreen("start", new ScreenBuilder("start") {{
                controller(new DefaultScreenController());
                // добавим слой(layer)
                layer(new LayerBuilder("background") {{
                    childLayoutCenter();
    //                backgroundColor("#000f");
    
                    // добавим изображение
                    image(new ImageBuilder() {{
                        filename("Interface/start-background.png");
                    }});
                }});
    
                layer(new LayerBuilder("foreground") {{
                    childLayoutVertical();
    //                backgroundColor("#0000");
    
                    // добавим панель(panel )
                    panel(new PanelBuilder("panel_top") {{
                        childLayoutCenter();
                        alignCenter();
    //                    backgroundColor("#f008");
                        height("25%");
                        width("75%");
    
                        text(new TextBuilder() {{
                            text("My Cool Game");
                            font("Interface/Fonts/Arial.fnt");
                            height("100%");
                            width("100%");
                        }});
                    }});
    
                    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/Arial.fnt");
                            wrap(true);
                            height("100%");
                            width("100%");
                        }});
                    }});
    
                    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%");
    
                            // добавим элемент управления
                            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(new ButtonBuilder("QuitButton", "Quit") {{
                                alignCenter();
                                valignCenter();
                                height("50%");
                                width("50%");
                            }});
                        }});
                    }}); // добавим(panel)
                }});
                // добавим слой(layer)
    
            }}.build(nifty));
    
            nifty.addScreen("hud", new ScreenBuilder("hud") {{
                controller(new DefaultScreenController());
    
                layer(new LayerBuilder("background") {{
                    childLayoutCenter();
    //                backgroundColor("#000f");
    
                    // добавим изображение
                    image(new ImageBuilder() {{
                        filename("Interface/hud-frame.png");
                    }});
                }});
    
                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%");
    
                            control(new LabelBuilder(){{
                                color("#000");
                                text("123");
                                width("100%");
                                height("100%");
                            }});
                        }});
    
                        panel(new PanelBuilder("panel_top_right2") {{
                            childLayoutCenter();
    //                        backgroundColor("#44f8");
                            height("15%");
                            width("100%");
    
                            // добавим изображение
                            image(new ImageBuilder() {{
                                filename("Interface/face1.png");
                                valignCenter();
                                alignCenter();
                                height("50%");
                                width("30%");
                            }});
                        }});
    
                        panel(new PanelBuilder("panel_bot_right") {{
                            childLayoutCenter();
                            valignCenter();
    //                        backgroundColor("#88f8");
                            height("70%");
                            width("100%");
                        }});
                    }}); // добавим панель(panel)
                }});
            }}.build(nifty));
    
            nifty.gotoScreen("hud"); // старт экрана
    
        }
    
        @Override
        protected void onDisable() {
            //Вызывается, когда состояние(state) было ранее включено, но теперь отключено
            //либо потому, что вызвано setEnabled(false) либо состояние
            //очищается(cleaned up).
        }
    
        @Override
        public void update(float tpf) {
            //TODO: реализовать поведение для времени выполнения
        }
    
    }

    Настройки 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. Все права сохранены.