效果演示：

 

 

学习前准备

目标

• 学会隐藏游戏默认UI。
• 学会隐藏超出元件范围的子集。

基础要求

• 学习本教程之前，请先学习：
  • UI编辑器基础：《UI编辑器》和《UI逻辑讲解》；
  • 上传自定义图片功能。

 

搭建简易外观

隐藏游戏默认UI的小地图，添加小地图外框和方向箭头。

找到“小地图”，点右边“…”，隐藏即可。

 

这时在创建一个“小地图图片”，成为框的子集。

 

我们可以看到，框外的没有显示出来。这就是部分视野的思路了。

（可以用“与父元件对齐”快速更改位置）

 

然后还原小地图的场景（其实应该先做场景，再做小地图）。

 

了解逻辑

 

构建数学公式

 

辨认坐标

一、定义概念

在这里，我们定义一个概念“参照点”，它是UI和地图同步的中介。

参照点有两个，UI参照坐标和地图参照坐标，都设定在红色方形区域的左上角（假定北为右），但一个是小地图元件坐标、一个是主地图坐标。

 

二、设定UI参照坐标

首先，让图片的红方形左上角移动到箭头。

注意：是图片移动，不是箭头移动！

打开图片属性界面，找到位置坐标，记下来。我这里是(−15,−15) 。

 

三、设定地图参照坐标

站在地图参照点，按M打开系统小地图，查看坐标。

 

地图参照坐标是 (−21,−20)​。

 

四、找准中心点

另外，还需要找到地图和UI视野的中心点。

我这里地图中心点是 (−1,0)，UI中心点是( -38 , -38 )。

注意：点以箭头映照在小地图上的位置为目标，取图片相对于框的位置为UI小地图坐标。

 

确定坐标移动关系

我们已经拿到了UI参照坐标( -15 , -15 )，地图参照坐标( -21 , -20 )；UI中心点( -38 , -38 )，地图中心点( -1 , 0 )。

也就是说，当玩家从( -1 , 0 )移动到( -21 , -20 )时，UI小地图的坐标从( -38 , -38 )移动到了( -15 , -15 )。

由此得到，当玩家移动( -20 , -20 )时，UI图片移动( 23 , 23 )。

 

算一算，得到玩家移动( -1 , -1 )时，UI图片移动( 1.15 , 1.15 )。

也就是说，当玩家x或z坐标（y是高度，所以不算在其中）增加1格时，UI图片减少1.15个坐标单位。

简单地说，UI的x坐标是地图x坐标的-1.15倍，z也一样。

好了，数学推导到此结束。

 

实战提示

实战中，最好先做完地图，然后再按照地图样貌1:1做出图，上传时不要修改图片尺寸。这样就不会得到1.15这样的小数了。

（这次我没按步骤走，幸运的是得到了1.15，而不是一个循环小数）

如果图片实在太大了，可以做成2:1或4:1，这样只要用坐标对前项整除，得到的结果就是需要图片移动的坐标单位。如：地图是600*600的，图片是300*300的，是2:1，设玩家的x坐标是70，那图片就应该移动 70÷2=35 个坐标单位。

 

触发器设置

视野移动

有了数学推导，视野移动就简单了。

 

 

测试一下效果：

 

貌似不太对？偏离的有些大了。

因为我们没有加上UI元素的原始位置（中心位置）。

 

再试一次：

 

移动视野是没问题了，但还差点什么……

 

箭头旋转

对照一下流程图，发现少了刷新箭头方向。

改变方向，一般叫“旋转”。

直接改变旋转角度的话，箭头的视觉位置会改变：

由于作者比较懒，作出公式而且没验算就懒得写触发器了，这里写出公式，UI里就用红点替换。

对于旋转的角度  α  ，箭头元件对角线长 s 个坐标单位：需要上移 s sin α 个坐标单位，还要右移 s -  s cos α  个坐标单位。

 

成果测试