UI编辑器案例：控件坐标系

1. 需求

1. 找茬界面是一个局部界面，点击找茬npc的模型交互按钮打开这个界面；
2. 点右边的图的正确的位置，显示圈；
3. 点到非正确的位置，显示叉，叉在2秒后自动隐藏；

2. 拼界面

按照惯例，还是先把界面拼好。

2.1 底板、关闭按钮、阻挡层

和之前的非全屏界面一样，需要配置底板、关闭按钮和阻挡层，因为和之前的拼法都一致，这里就不再赘述了。

2.2 界面区域`panel_range`

这里的界面区域要特别注意一下，尺寸x和尺寸y要用数值来填写，不要用百分比。



因为找茬的图片资源都是固定尺寸的，基于此性质我们的`panel_range`的尺寸也要填数值，否则界面的适配会比较奇怪。

2.3 左图与右图

然后把左图和右图贴到界面区域里就可以了。这个就非常简单了，不再贴图了。

2.4 错误区域`lyr_touch`

然后我们拼一个层盖住左图和右图，只要玩家点到了这个层，我们都认为他点到了错误的地方。



2.5 正确区域`lyr_answer`与正确的圈`spt_answer`

接下来就是一个一个地把正确的区域放到`lyr_touch`里面就可以了。注意正确的区域要吞噬点击事件，这样点到了正确区域就不会点到错误区域。`spt_answer`默认隐藏。



然后命名一定要规范，`lyr_answer_x`的对应圈必须为`spt_answer_x`，这样一来我们后面写逻辑就非常方便了。详见后面的实现部分。

2.6 错误的叉`spt_wrong`

最后再在`lyr_touch`下拼一个图片，图片资源为叉，默认隐藏即可。



3. 界面逻辑实现

3.1 点击位置正确的回调

只需要一个触发器就能完成，将这个触发器注册到所有`lyr_answer`的点击事件下。触发器内容也很简单，一行就能完成。



原理是：我们的控件命名都是规范的，`lyr_answer_x`的对应圈必为`spt_answer_x`。因此当玩家点击到位置正确的区域时，触发控件的名字就是`lyr_answer_x`，把这个名字中的`lyr`替换为`spt`就找到了这个区域对应的圈，将这个圈从显示状态变为隐藏状态即可。

3.2 点击位置错误的回调

终于到了这次最重要的内容了，因为只有这个地方用到了坐标系坐标转换的内容。

这里要实现的东西其实很简单，就是当玩家点击位置错误时，把叉显示到这个地方。但是这里需要注意，我们利用的是`lyr_touch`的点击事件，点击之后将`spt_wrong`显示在点击的位置上。而`spt_wrong`是`lyr_touch`的一个子节点，所以当我们设置`spt_wrong`的位置时，所设置的都是相对于`lyr_touch`的位置。但点击事件中可使用的『触发界面坐标』参数，是相对于世界坐标系的界面坐标，因此我们需要将『触发界面坐标』转换为相对于`lyr_touch`的坐标，也就是下图这个参数：



因为这个事件下『触发控件』就是`lyr_touch`，所以我们直接将触发界面坐标转换为相对于触发控件的坐标即可。

然后再将转换出来的值用来设置`spt_wrong`的位置，即可完成。



这里顺带插一句，如果要将相对于某个控件的坐标（控件坐标系下的坐标）转换为世界坐标系下的坐标，也就是上述转换过程的逆过程，也是可以实现的，只需要使用下图参数：