JMonkeyEngine3——NiftyGUI介绍

前言

完整游戏引擎通常会包括内置的GUI库用于构建游戏内GUI（您可能希望玩家按下按钮来保存游戏，您希望滚动文本字段显示最高分，文本标签显示分数，下拉菜单选择键盘映射首选项，或复选框指定多媒体选项。通常，您可以使用 Swing 控件解决这些任务。虽然可以在 Swing GUI中嵌入jME3 画布，但 3D 游戏通常以全屏方式运行，或在自己的窗口中运行），JME3也不例外，在JME3中，尽管NiftyGUI不是官方开发的，但是自始至终它都被认为是JME3目前官版引擎源码中提供的内置GUI库。

注意：

构建JME3游戏内GUI除NiftyGUI之外，还有其他一些选择，比如Lemur，但是NiftyGUI有一个很大的优势是现今已有的JME3游戏内GUI无法比拟的，那就是支持XML布局和人性化的Java代码与XML布局交互绑定，这是与仅支持用纯代码编写GUI最大的不同（如果你用纯Swing代码构建过图形界面，并且还是用过SwingEditor可视化工具构建过图形界面，你会知道我所说的），NiftyGUI的优势类似Android界面开发，在不借助可视化工具时，你可以以极快的方式通过xml布局编写界面，同时NiftyGUI还提供了可视化工具，这使得它对于JME3 GUI新手而已非常便捷（尽管可视化工具存在一些bug导致烦人的问题，但你可以自己下载源码修复bug重新构建）。

 

在接下来中，本文将向你介绍Nifty GUI，这是一个用于为游戏或类似应用程序构建交互式图形用户界面 (GUI) 的 Java 库。Nifty GUI（de.lessvoid.nifty软件包）通过该软件包与 jME3 完美集成com.jme3.niftygui。您可以在 XML 中定义基本GUI布局，并通过 Java 代码动态控制它。必要的 JAR 库包含在您的 jME3 下载中，您无需安装任何额外内容。（只需确保它们位于类路径上即可。）

NiftyGUI的概念

如上图所示，Nifty GUI 由的组成是根元素包含一堆screen元素，每个screen的必须以layer作为第二层元素（一个screen可以包含多个layer），然后每个layer层可以包含具体的控件(control)或以容器(panel)来包含一组控件(control)，必须严格按照screen->layer->control/plane->control来添加层级，具体一点，NiftyGui由以下元素组成：

  • Nifty GUI包含一个或多个屏幕。

    • 每次只能看到一个屏幕。

    • 如果你有一个屏幕命名start则默认加载后启动该屏幕，其他屏幕可按您喜欢的名称命名。

    • 屏幕由 Java Controll类控制。

  • 一个屏幕包含一个或多个层。

    • 图层是对其内容强制对齐的容器（垂直、水平或居中）

    • 图层可以重叠（z 顺序），但不能嵌套。

  • 一个层包含多个面板。

    • 面板是强制对齐其内容的容器（垂直、水平或居中）

    • 面板可以嵌套，但不能重叠。

  • 面板包含图像、文本或控件（按钮等）。

  • NiftyGUI元素基本分为两部分，一部分元素直接以特定名称命名标签，比如panel，image，screen，layer等标签，其他元素统一使用control定义，并通过name指定要使用的控件，如<control name="button">，使用一个button组件（组件的意思就是control）。

第一个NiftyGUI例子

这里作者所有的案例均在JMESDK中完成，作者本身也使用jetbrains家族IDEA，但是JME根据我的使用经验，SDK是最方便的，省去你找各种类库的依赖版本，还有内置SDK创建Filter，Scene，Material，NiftyGUI，Font的功能，同时jetbrains家族IDEA该有的大部分功能（代码自动完成，查找引用，全局搜索函数等在SDK都有，只是快捷键不太一样，可以通过配置完成）。

如下使用SDK创建一个JME3工程：

 然后右键Libraries选择Add Library...：

 添加jme3-niftygui，默认创建的jme3工程是不会包含jme3-niftygui库的：

 然后打开Project Assets，可以看到JME3工程默认给你创建了各种资源目录：

 没有要求一定要把GUI相关的都放在Interface目录中，但这通常是游戏开发中的规范，我们右键Interface目录，选择New->Other...，然后选择GUI->Empty Gui，命名为HelloNiftyGui，如下：

 点击Finish后就会在Interface目录下创建一个HelloNiftyGui.xml文件，暂时我们不去管这个xml文件的内容是什么意思：

 然后打开Source Packages->mygame，会看到一个Main.java（这是JME3工程默认给我们添加的启动类），默认工程配置是启动这个Main.java，但是我们不在这个Main.java中修改，单独右键mygame->New->Other...选择添加一个Java类，如下：

 打开HelloNiftyGui.java，添加如下代码：

 1 import com.jme3.app.SimpleApplication;
 2 import com.jme3.niftygui.NiftyJmeDisplay;
 3 import de.lessvoid.nifty.Nifty;
 4 
 5 /**
 6  * 第一个NiftyGui.<br/>
 7  * @date 2024年7月11日12点33分
 8  * @author JohnKkk
 9  */
10 public class HelloNiftyGui extends SimpleApplication{
11     private Nifty m_Nifty;
12 
13     @Override
14     public void simpleInitApp() {
15         // 初始化Nifty
16         NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
17                 assetManager,
18                 inputManager,
19                 audioRenderer,
20                 guiViewPort);
21         m_Nifty = niftyDisplay.getNifty();
22         // 将NiftyGUI显示对象添加到JME3中
23         guiViewPort.addProcessor(niftyDisplay);
24         
25         // 加载xml布局文件,设置默认屏幕为GScreen0
26         m_Nifty.fromXml("Interface/HelloNiftyGui.xml", "GScreen0");
27     }
28     
29     public static void main(String[] args) {
30         HelloNiftyGui helloNifityGui = new HelloNiftyGui();
31         helloNifityGui.start();
32     }
33 
34 }

此时点F6默认启动的是Main.java（可以修改工程默认启动类文件），我们这里在鼠标停留在HelloNiftyGui.java文件的情况下按下Shift+F6可以启动当前这个HelloNiftyGui.java的main函数，还可以鼠标点击一下HelloNiftyGui.java（使得选中状态），然后Shift+F6：

 启动后我们看到一篇黑色，恭喜你成功创建了一个带有NiftyGui的JME3程序：

 打开HelloNiftyGui.xml，修改如下：

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <nifty xmlns="http://nifty-gui.lessvoid.com/nifty-gui" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:schemaLocation="https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd https://raw.githubusercontent.com/void256/nifty-gui/1.4/nifty-core/src/main/resources/nifty.xsd">
 3     <!-- +++++++++++++++++++++++++++++++++++++++ -->
 4     <!-- start screen -->
 5     <!-- +++++++++++++++++++++++++++++++++++++++ -->
 6     
 7     <!-- 如果不添加默认controls库和默认style库,是不会有任何渲染的,因为我们使用的基础空间和样式都在这两个库里 -->
 8     <useControls filename="nifty-default-controls.xml"/>
 9     <useStyles filename="nifty-default-styles.xml"/>
10     
11     
12     <screen id="GScreen0" controller="mygame.Main">
13         <layer id="GLayer0" childLayout="absolute">
14             <control id="MyButton" childLayout="center" x="164" y="284" label="TestButton" name="button"/>
15         </layer>
16     </screen>
17 </nifty>

这里我们添加了一个id为MyButton，显示文本为TestButton的control（组件），该组件是一个button（name属性定义了这个control具体表示什么类型的组件），再次运行如下：

 恭喜你，第一个NiftyGui程序已经显示成功。

外部文档

从 NiftyGUI 页面了解更多信息：

posted @ 2024-07-11 14:02  JhonKkk  阅读(142)  评论(0)    收藏  举报