简介

基本上所有游戏都离不开UI编辑器，因为能大量减少手工写代码的工作量

WYSWYG

这是Phaser上面看到的一个术语（What you see is what you get）的缩写，（莫名想到了不潮不花钱这首歌=。=）

举个例子，我们3d建模，我们可以用代码一个个三角面拼上去，但是基本上，我们第一眼只能看到一堆复杂的数据在我们的面前，不会理解到这个模型是什么样子的，因此建模工具就给到一个可视化的形式，让我们快速去理解并去使用它

游戏也是同样的道理，如果代码内大量的创建显示对象，定好位置，我们基本上想要看懂还是很费劲的，因此UI编辑器应运而生

序列化

印象中这是cocos官网看到的一个术语，其实序列化就是 “人为的”，“结构化的”一种数据形式

如ui数据，egret使用xml，laya使用json，目的就是能够解析这些数据，能够还原我们原本的游戏场景

序列化还有一个好处，就是能够更简短，如果我们写代码，我们需要new, addchild, x=1, y=2等等一长串的流程

组件化

随着游戏开发深入，我们会发现有很多类似功能，不同界面的组件，这个时候很多游戏就会把界面，更进一步的抽离成为一个“组件”

如玩家的头像框，顶部状态栏，通用的面板弹窗，等等，我们都可以使用一个组件的形式打包成自定义组件，在场景内直接使用

因此UI编辑器的场景会存在交错的可能，很多游戏的UI编辑器也实现了这个功能

打组

一开始会很难理解打组是什么意思，其实打组从矩阵的角度来说是变换的代理，从用户的角度来说一个人坐自行车，手脚头是一个人的组，轮子坐垫是自行车的组（如果美术图是零散的话），一个组就是一个整体，一起会有一个整体的运动

不过打组会遇到一个很麻烦的问题，真正拉一个组的时候到底需要多宽，里面所有物体到底起始点在什么位置比较好

理论上，打组是所有部件包裹起来的最小矩形框，不过个人觉得，差不多就行了，其实我们真正关心的不是这个框的大小（除非有点击事件），而是位置或者锚点，因为一般逻辑就是对这个整体平移和缩放

egret在打组上很讲究，获取组的宽高是会动态遍历子元素来进行计算，而laya剔除了这个，默认组不考虑宽高，而是注重锚点和位置

逻辑耦合

编辑器虽然可以单纯的定义图片，文本位置，但是如果想要进一步使用，难免会有和逻辑耦合的地方

主要有几点

• 构造参数
  因为编辑器内显示对象都是自动new的，无法实现构造时候参数传递，所以使用的时候会使用额外的接口来数据传递

• 自定义构造
  egret可以使用自定义组件来实现，Laya有类似Runtime的方式，不过方式都是通过全局的类来耦合
  自定义构造主要是为了拓展一些常用的组件，常见的功能

• 不确定性
  1.如消消乐的棋盘，我们无法一开始就在就确定场景的形态，这个时候我们可以把某个棋子，抽离成为一个部件，代码添加，也可以使用List，通过修改数据源形式
  2.有时候我们不想因为一个简单的部件，定义多一个一个类，但是数量又不确定，如进度条的节点插槽，我们可以先摆好一个，通过一个封装的clone方法来摆放
  3.所有的不确定性，都是尽可能的使用编辑器来编辑代码，尽可能不牺牲可读性为基础

• 适配
  1.很多游戏引擎都会自带一些适配方法，如egret百分比布局，laya的bottom，百分比锚点
  2.后续会进一步详解下适配的一些技巧，这里建议场景按照一个固定的比例（其他比例可以根据这个作为一个参考系，动态换算）来调整，如750*1334

• 组件化开发
  不少引擎都用到这个点，可以后续单独详解