1：UI编辑器的结构

UI编辑器的结构比其他的编辑器都要简单，它没有标签页，一共就两个区域。
左边是控件区域，右边是编辑控件数据的区域。
2：控件是什么
UI控件是一种面向对象的，以XML标记描述的图形界面要素，比如说，一个小地图就是一个控件，一个按钮面板也是一个控件。控件可以有包含的关系，比如，小地图控件内包含了同盟颜色按钮控件，按钮面板控件内包含了15个技能按钮控件等。
控件需要有描述，比如描述其坐标值在xxx，使用的图片是xxx，长宽分别是xxx等等。
控件能通过重写的方式添加自己对控件的一些设置，比如小地图本来是在左下，而我们如果想要将其移动到右上，就需要重写小地图控件的锚点属性。
3：如何修改控件属性
在以前修改控件属性是非常麻烦的事，不过现在我们有了自带UI编辑器，可以在很大程度上简化这些操作，不过请记住，UI编辑器虽然可以预览用户界面的修改，但无法保存用户界面的修改，最终你还是需要在UI编辑期内通过写XML代码的方法完成UI的重写。（不过，你可以考虑自己写一个比暴雪自带的编辑器更加强大的编辑器）

终于有ui的教程了。

2：使用游戏内置的UI编辑器查看控件的包含关系
游戏内置UI编辑器的方法是：按下Alt+Ctrl+Shift+F12，界面如下：

右上的选项请选择“框架树”，用于查看控件的包含关系。
我们点击“小地图”，可以看到右上角那里自动跳转到了“MinimapPanel”，表示这个控件叫做这个名字。
（1）点击小地图

（2）得到控件的名称

关键的一步，从这里开始顺着框架树往上面看，得到这个控件的父级包含关系：

（对于重写游戏界面来说，最顶级的父级是GameUI）
于是，我们得到了，这个小地图控件的全名是：GameUI/UIContainer/ConsoleUIContainer/MinimapPanel
这个小地图的类型是（中括号内的灰色字）：MinimapPanel
这个小地图所属的文件是：GameUI
然后，点击“描述树”，查看这个控件使用的锚点是那些，UI重载是覆盖式的，如果是修改自带UI的话，使用原有的锚点写起来会容易许多：

这个控件使用了Left和Bottom锚点。
我们已经得到了所有的资料，可以开始重写这个小地图了。

3：重载UI
回到我们的UI编辑器，我们需要新建一个布局，用它来覆盖旧有的UI描述。

这里的名称可以随便写：

现在开始重写UI。需要遵循XML的书写规范，如果不懂的话，可以查看自带的UI描述文件是怎么写的，不过要注意，自带的UI描述文件的细节和我们重写的UI文件有不同之处，下面会讲解。

这就是我们写入的UI重载数据，代码如下：
<?xml version="1.0" encoding="utf-8" standalone="yes"?>
<Desc>
<Frame type="MinimapPanel" name="GameUI/UIContainer/ConsoleUIContainer/MinimapPanel" file="GameUI">
<Anchor side="Left" relative="$parent" pos="Max" offset="-330"/>
<Anchor side="Bottom" relative="$parent" pos="Min" offset="370"/>
</Frame>
</Desc>
其中type是我们要重写的控件的类型，name是控件的父级关系，而最后一个file="GameUI"是重载UI时使用的，表示我们正在重新定义“GameUI”这个文件。游戏用户界面的控件都属于GameUI。
而锚点那里具体怎么写，多试一下你就知道了。
保存地图。进入游戏测试，你会发现小地图已经从左下角移动到了右上角：

重载游戏界面成功。

终于有详细的UI教程了
之前自学了UI 但是很多地方不明所以
另外游戏内有UI编辑器真是涨姿势了

啥米，你说我的标题明明是“如何将聊天区域移动到角落”，而最后却教授的是移动小地图的方法吗？
既然移动聊天区域是你们提出的问题，我就不会在这里贴出最终的答案，既然知道了方法，就去按照这个方法自己试一试吧~
提示：聊天区域的类型是：“GameMessageDisplay”，路径是：“GameUI/UIContainer/FullscreenUpperContainer/ChatDisplay”。

顶

【本系列教程，除地精研究院、网易官方论坛以外，禁止转载，转载请说明出处】

这篇教程什么时候吃出现的。。。。我怎么没看到，难道我当成广告直接没看？

不知道为什么，这些怎么都没颜色了，那段代码我也复制了，怎么也不会自动排版。。。
我以前的方法都不改这些额，直接在触发器调用的。。。

赞 ---来自一颗遥远的星球，信号接收正常

MARK~！