FXGL Java游戏引擎教学系列第3章:打造游戏用户界面指南
最编程
2024-07-23 21:53:18
...
当我们拥有一个实体并且对其绑定了可移动的组件之后,我们拥有了一个可以*操控控制的角色。但是距离成为一个真正的游戏还有几个必不可少的组件需要实现。其中游戏ui就是不可或缺的一个组件。
-
坐标系
对于所有游戏引擎而言,坐标系的概念都至关重要。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)
- 全局变量池
重写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);
}
- 数据绑定
我们到这里还需要将参数绑定到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攻略总目录