我们有一个实体，在将可移动组件绑定到它之后，它具有可以自由操纵控件的角色。 但是，在真正的游戏之前，还有一些组件需要实现。 其中游戏ui是不可缺少的组成部分。
坐标系坐标系的概念对所有游戏引擎都很重要。 xgl的默认坐标是右下方。 也就是说，画面的左上角是坐标(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.set fill (new image pattern ) )； 添加到//UI节点，同时设置节点位置fxgl.adduinode(rectangle，900，20 )。 当我们启动项目时，项目右上角会显示一个新的ui图标。 不包括红框。
当然，我们可以给他添加鼠标点击事件。 (图为模拟使用键p )
image image=new image (assets/ui/buttons/ui1.png )； 响应请求=新响应(50，50 )； rectangle.set fill (new image pattern ) image )； rectangle.setonmouseclicked (e-fxgl.get input ).mockkeypress ) keycode.p )； xgl.adduinode(rectangle，900，20 )； 3 .动态展示ui除了固定展示的图标按钮外，还经常遇到时间、分数、价值等动态展示的ui。 除了使用update组件进行硬件更新外，还有更高效的方法，如vue的v-modle
全局变量池重写app的初始化参数方法，在参数池中放入分数' score '，同时用update方法更新为score 1
@ overrideprotectedvoidinitgamevars (mapstring，Object vars ) vars.put ) ' score '，0 )； } @ overrideprotectedvoidonupdate (double TPF ) /其中，每次分数更新时，1fxgl.Inc ) ' score '，1 )； }数据绑定来到这里，需要将参数绑定到ui控件，并在initUi方法中添加以下代码
@Override protected void initUI () image image=new image (' assets/ui/buttons/ui1.png ' )； 响应请求=新响应(50，50 )； rectangle.set fill (new image pattern ) image )； rectangle.setonmouseclicked (e-fxgl.get input ).mockkeypress ) keycode.p )； //新的矩形rectanglewindowsui=new rectangle (100，100 )； //设置矩形边框颜色windowsUI.setstroke(color.blue )； //设置边框大小windowsUI.setstrokewidth(3； //新ui的texttext score=fxgl.getuifactoryservice (.new text ) fxgl.getip('score ' ).asString )； //创建新的容器，并使用条形矩形和文本组合stackpane=newstackpane (windows ui，score )； //UI控件包含fxgl.adduinode(stackpane，900，200 )； xgl.adduinode(rectangle，900，20 )； }成果：
xgl攻略总目录