JME3 圖形介面 nifty 筆記 @ 來喝杯JAVA咖啡

1. 使用nifty

要使用nifty的話，就在程式碼中加入下列這一段

 NiftyJmeDisplay niftyDisplay = new NiftyJmeDisplay(assetManager, inputManager, audioRenderer,guiViewPort);
 Nifty nifty = niftyDisplay.getNifty();
 nifty.fromXml("nifty.xml", "start", this);
 guiViewPort.addProcessor(niftyDisplay);

程式就會取用 nifty.xml 中的 start 場景作為格式排版

2.轉換場景

nifty.gotoScreen("nextScreen");

執行此行，就會跳轉到 nextScreen場景

以下三種修改方法，使用到三種ElementRenderer
詳細參閱API
http://nifty-gui.sourceforge.net/projects/1.3/nifty/apidocs/de/lessvoid/nifty/elements/render/ElementRenderer.html

3.修改文字

 Element e = nifty.getCurrentScreen().findElementByName("textfield");
 e.getRenderer(TextRenderer.class).setText(newString);
 e.getParent().layoutElements();

取得指定Element之後(通常是text標籤)，把文字改成 (String)newString

雖然使用 findElementByName 的方法，不過實際上是找 TEG 的 ID

後面的 layoutElements 方法是要用來把文字做warp 的動作

4.修改圖片

 Element e = nifty.getCurrentScreen().findElementByName("picture");
 NiftyImage img = nifty.getRenderEngine().createImage("picture.png", false);
 e.getRenderer(ImageRenderer.class).setImage(img);

其中 createImage 的參數 false 為是否開啟 filterLinear ，大概是處理縮放時候的處理演算法

5.修改背景色

 Element e = nifty.getCurrentScreen().findElementByName("block");
 e.getRenderer(PanelRenderer.class).setBackgroundColor(Color.Red);

6.滑鼠觸發事件

詳細參閱API

http://nifty-gui.sourceforge.net/projects/1.3/nifty/apidocs/de/lessvoid/nifty/elements/ElementInteraction.html#setAlternateKey(java.lang.String)

http://nifty-gui.sourceforge.net/projects/1.3/nifty/apidocs/de/lessvoid/nifty/elements/ElementInteractionClickHandler.html

Element e = nifty.getCurrentScreen().findElementByName("block");

  //mouse over
e.getElementInteraction().setOnMouseOver(new NiftyMethodInvoker(nifty, "myCustomMethod()", this));

  //mouse click
e.getElementInteraction().getPrimary().setOnClickMethod(new NiftyMethodInvoker(nifty, "myCustomMethod()", this));

7.改變寬度、高度

 Element e = nifty.getCurrentScreen().findElementByName("box");
 e.setConstraintWidth(new SizeValue("50%"));
 e.setConstraintHeight(new SizeValue("20%"));
 e.getParent().layoutElements();

(ಠдಠ)ﾉ nifty 的功能性並不完備，官方討論區裡面其實就有承認，目前只能使用這些還堪用的方法把功能發揮到極限

nifty 沒有提供更改margin的方法，因此如果想要做出方塊移動的效果，就必須在方塊的旁邊放一個隱藏的方塊，改變隱藏方塊的寬高，達到移動方塊的效果

最後要呼叫上層框架的 layoutElements 方法，讓排版刷新

使用XML作為排版

典型的排版範例

記得修改紅字部分，與程式碼對應

<screen id="start" controller="packege.Controller">
   <layer childLayout="vertical">
      <panel id="space" height="70%" width="100%" childLayout="horizontal"/>
      <panel height="30%" width="75%" align="left" childLayout="horizontal" backgroundColor="#0f08"> 
         <text id="textfield" text="xxx" font="xxx.fnt" width="100%" height="100%" wrap="true" textHAlign="left"/>
      </panel>
   </layer>
</screen>

常用排版

未命名

記得修改紅字部分，與程式碼對應

<screen id="start" controller="packege.Controller">
   <layer childLayout="vertical">
      <panel id="top" height="20%" width="100%" childLayout="horizontal">
         <panel id="top_left" height="100%" width="50%" childLayout="horizontal" backgroundColor="#0f05"/>
         <panel id="top_right" height="100%" width="50%" childLayout="horizontal" backgroundColor="#f005"/>
      </panel>

      <panel id="center" height="50%" width="100%" childLayout="horizontal"/>

      <panel id="bottom" height="30%" width="100%" align="left" childLayout="horizontal" >
         <panel id="bottom_left" height="100%" width="75%" childLayout="horizontal" backgroundColor="#00f5"/>
         <panel id="bottom_right" height="100%" width="25%" childLayout="horizontal" backgroundColor="#0ff5"/>
      </panel>
   </layer>
</screen>

未命名

記得修改紅字部分，與程式碼對應

<screen id="start" controller="packege.Controller">
   <layer childLayout="center">
      <panel id="menu" width="50%" childLayout="vertical">
         <panel height="70px" weidth="100%" childLayout="center">
            <panel id="button1" height="95%" width="95%" childLayout="center" backgroundColor="#0f05">
               <interact onClick="button1()"/>
               <effect>
                  <onHover name="pulsate" startColor="#0066" endColor="#00f6" cycle="false" post="true"/>
               </effect>
            </panel>
         </panel>
         <panel height="70px" weidth="100%" childLayout="center">
            <panel id="button2" height="95%" width="95%" childLayout="center" backgroundColor="#0f05">
               <interact onClick="button2()"/>
               <effect>
                   <onHover name="pulsate" startColor="#0066" endColor="#00f6" cycle="false" post="true"/>
               </effect>
            </panel>
         </panel>
         <panel height="70px" weidth="100%" childLayout="center">
            <panel id="button3" height="95%" width="95%" childLayout="center" backgroundColor="#0f05">
               <interact onClick="button3()"/>
               <effect>
                  <onHover name="pulsate" startColor="#0066" endColor="#00f6" cycle="false" post="true"/>
               </effect>
            </panel>
         </panel>
      </panel>
   </layer>
</screen>