JMonkeyEngine3——NiftyGui ImageSelect

ImageSelect

ImageSelect 控件允许从图像列表中选择单个图像。可以使用控件提供的左/右箭头来选择图像。要求图像具有相同的大小。更改选择将在 EventBus 上发布一个 Event。可以使用 ImageSelectBuilder 从 Java 动态创建控件，也可以使用<control name="imageSelect"></control> 标记从 XML 动态创建该控件。

常用属性

Name	Datatype	Default	Description
imageWidth	SizeValue	"0px"	此 ImageSelect 控件应显示的图像的宽度。此属性是必需的！
imageHeight	SizeValue	"0px"	此 ImageSelect 控件应显示的图像的高度。此属性是必需的！
imageList	以逗号分隔的图像文件名列表	""	此属性包含一个以逗号分隔的文件名列表，该列表定义了此图像选择控件显示的所有图像。

EventBus Notification

ImageSelect 支持对所选图像的任何更改进行 EventBus 通知。当所选图像发生更改时，将使用 ImageSelect 的 ID 作为事件的主题发布 ImageSelectSelectionChangedEvent。

Java Builder 示例

// Using the builder pattern
control(new ImageSelectBuilder("someImageSelect") {{
  imageWidth("100px"); // please note that imageWidth and imageHeight are mandatory!
  imageHeight("100px");
  imageList("images/1.png,images/2.png,images/3.png");
}});

XML 示例

<!-- example imageSelect (right out of the multiplayer example which is part of the nifty-examples project) -->
<control id="#imageSelect" name="imageSelect" width="126px" imageWidth="80px" imageHeight="80px" imageList="multiplayer/avatar1.png,multiplayer/avatar2.png,multiplayer/avatar3.png,multiplayer/avatar4.png" />

参考

https://github.com/nifty-gui/nifty-gui/wiki/ImageSelect

案例

在工程的Textures目录添加两个尺寸大小一样的图片：

 然后创建一个NiftyGuiImageSelect的xml，代码如下：

<?xml version="1.0" encoding="UTF-8" standalone="yes"?>
<nifty xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://nifty-gui.lessvoid.com/nifty-gui" 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">
    <useControls filename="nifty-default-controls.xml"/>
    <useStyles filename="nifty-default-styles.xml"/>
    <screen id="screen0" controller="mygame.NiftyGuiImageSelect" >
        <layer id="layer0" childLayout="center">
            <!-- imageList使用相对路径以及英文逗号隔开图片列表 -->
            <control name="imageSelect" id="imageSelect0" imageList="Textures/yin.png,Textures/yang.png" height="97px" width="140px" y="-1px" x="-1px"/>
        </layer>
    </screen>
</nifty>

注意第8行，通过imageList属性，添加了两个相对路径在Textures下的图片，以英文逗号隔开。

然后在mygame包下创建并打开NiftyGuiImageSelect.java类，添加如下代码：

import com.jme3.app.SimpleApplication;
import com.jme3.math.ColorRGBA;
import com.jme3.niftygui.NiftyJmeDisplay;
import de.lessvoid.nifty.Nifty;
import de.lessvoid.nifty.NiftyEventSubscriber;
import de.lessvoid.nifty.controls.ImageSelectSelectionChangedEvent;
import de.lessvoid.nifty.screen.Screen;
import de.lessvoid.nifty.screen.ScreenController;

/**
 * @date 2024年7月12日17点42分
 * @author JohnKkk
 */
public class NiftyGuiImageSelect extends SimpleApplication implements ScreenController{

    private Nifty m_Nifty;
    
    public static void main(String[] args) {
        NiftyGuiImageSelect niftyGuiLabel = new NiftyGuiImageSelect();
        niftyGuiLabel.start();
    }
    
    @Override
    public void simpleInitApp() {
        // 设置默认背景色
        getViewPort().setBackgroundColor(ColorRGBA.DarkGray);
        
        // 初始化Nifty
        NiftyJmeDisplay niftyDisplay = NiftyJmeDisplay.newNiftyJmeDisplay(
                assetManager,
                inputManager,
                audioRenderer,
                guiViewPort);
        m_Nifty = niftyDisplay.getNifty();
        // 将NiftyGUI显示对象添加到JME3中
        guiViewPort.addProcessor(niftyDisplay);
        
        m_Nifty.fromXml("Interface/NiftyGuiImageSelect.xml", "screen0");
        
        // 禁用flyCam并显示鼠标
        flyCam.setEnabled(false);
        inputManager.setCursorVisible(true);
    }
    
    @NiftyEventSubscriber(id="imageSelect0")
    public final void onImageSelectSelectionChangedEvent(final String id, final ImageSelectSelectionChangedEvent event){
        System.out.println("当前选择了第:" + event.getSelectedIndex() + "个图片!");
    }
    
    @Override
    public void bind(Nifty nifty, Screen screen0) {
    }

    @Override
    public void onStartScreen() {
    }

    @Override
    public void onEndScreen() {
    }
    
}

注意第45~48行，通过EventBus订阅了id为imageSelect0的事件执行方法，启动JME3程序，结果如下：

 值得注意的是，默认显示第一张图片，而且EventBus事件执行方法没有执行，只有当我们点击切换时才会执行：

 如果希望初始化显示的图片是索引为1（也就是第二个图片）的图片，那么无法通过xml属性配置，只能在java代码中实现，与之前的文章一样，在onScreenStar之前初始化（注意我们现在只有一个screen，当有多个screen时则根据screen判断当前是否包含ImageSelect元素来执行对应初始化工作）：

@Override
    public void bind(Nifty nifty, Screen screen0) {
        Element imageSelect0 = screen0.findElementById("imageSelect0");
        // 获取ImageSelect控制器
        ImageSelectControl imageSelectControl = imageSelect0.getNiftyControl(ImageSelectControl.class);
        imageSelectControl.setSelectedImageIndex(1);
    }

从第5行可知，NiftyGui的组件（control），都是有对应配套的xxxControl类存在，查看源码包：

 其规则基本就是组件名拼接Control.java。

回到我们的ImageSelectControl，我们通过调用setSelectedImageIndex(1)设置了初始化要显示的图片，根据前面的文章可知，在初始化阶段设置时不会触发EventBus事件执行方法的调用。

启动JME3程序，结果如下：

 此时启动默认就显示第二张图片了。