FXGL JAVA游戏引擎 教程 03.游戏UI

当我们拥有一个实体并且对其绑定了可移动的组件之后，我们拥有了一个可以自由操控控制的角色。但是距离成为一个真正的游戏还有几个必不可少的组件需要实现。其中游戏ui就是不可或缺的一个组件。

---

1. 坐标系

对于所有游戏引擎而言，坐标系的概念都至关重要。FXGL采取的默认坐标是右下。即屏幕的最左上角为坐标（0,0,0）向右下依次递增。

    例如1080*720的屏幕大小最右下角坐标就是（1080,720,0）

坐标系不会随着窗口的高度和宽度变化而变化，所以在窗口改变的时候，ui的位置也必须做出改变。当然，FXGL中可以时时获取到app屏幕的高度和宽度。

   2. 源于javaFX的图形组件

---

这里我们会使用到一个javaFX中的图形组件： 矩形组件

Rectangle.class

我们在app中重写方法initUi（）  在其中绘制一个矩形。并且使用我们提前下载好的图片作为矩形图标。

//加载ui图片  
 Image image = new Image("assets/ui/buttons/ui1.png");
//创建大小为50 50 的矩形
        Rectangle rectangle = new Rectangle(50, 50);
//填充矩形 使用刚才的图片
        rectangle.setFill(new ImagePattern(image));
//添加到ui节点中，同时设置节点位置
        FXGL.addUINode(rectangle,900,20);

当我们启动项目的时候，就在项目的右上角展示了一个全新的ui图标（不包含红框）

 

当然 ，我们可以给他添加鼠标点击事件。（图为模拟使用按键P）

  Image image = new Image("assets/ui/buttons/ui1.png");
        Rectangle rectangle = new Rectangle(50, 50);
        rectangle.setFill(new ImagePattern(image));
        rectangle.setOnMouseClicked(e -> FXGL.getInput().mockKeyPress(KeyCode.P));
        FXGL.addUINode(rectangle,900,20);

---

3.动态的展示ui

除了固定展示的图标按钮外，我们时常会遇到很多动态展示ui的情况，比如时间啊，分数啊，生命值啊。除了使用update组件进行硬性更新外，我们还有一种更加适合经常更加高效率的方法，数据绑定（类似vue中的v-modle）

1. 全局变量池

重写app中的初始化参数方法，并且在参数池中放入分数"score"，同时在update方法中刷新并且让score+1 

    @Override
    protected void initGameVars(Map<String, Object> vars) {
        vars.put("score",0);
    }






    @Override
    protected void onUpdate(double tpf) {
//这里让分数随着每次刷新，累加1
        FXGL.inc("score",1);
    }

1. 数据绑定

我们到这里还需要将参数绑定到ui控件中，在initUi方法中增加以下代码

    
@Override
    protected void initUI() {
        Image image = new Image("assets/ui/buttons/ui1.png");
        Rectangle rectangle = new Rectangle(50, 50);
        rectangle.setFill(new ImagePattern(image));
        rectangle.setOnMouseClicked(e -> FXGL.getInput().mockKeyPress(KeyCode.P));

//新建一个矩形
        Rectangle windowsUi = new Rectangle(100, 100);
//设置矩形边框颜色
        windowsUi.setStroke(Color.BLUE);
//设置边框大小
        windowsUi.setStrokeWidth(3);
//新建一个ui的text
        Text score = FXGL.getUIFactoryService().newText(FXGL.getip("score").asString());
//新建一个容器 并且吧矩形和text组合起来
        StackPane stackPane = new StackPane(windowsUi,score);
//添加到ui控件中
        FXGL.addUINode(stackPane,900,200);
        FXGL.addUINode(rectangle,900,20);
    }

 成果：

FXGL攻略总目录