「Unity入门」Step by Step的太空清理垃圾游戏Part 3：飞船移动与UI

完成基础的太空场景后，我们就可以来实现一些可交互的操作了。在这个游戏中主要可交互的操作有控制飞船飞行方向和点按垃圾收集。在游戏开始后，飞船会以恒定的速度向前方移动，用户则可以摇杆来控制飞船左右、上下转动。通过除此之外，还有切换前后镜头、加速等附加功能。这些操作都是通过“用户界面（UI）来完成的”。相信在日常生活的使用中，大家对此也并不陌生。在这一章节中，我们会完成飞船的以上基本操作和一个可交互的UI。

老规矩，配合教学视频食用效果更佳哦～

这游戏怎么做来着？Step by Step的太空清理游戏教程-Part 3

飞船向前移动 – transform

在航空动力学中，飞机可以围绕三个轴进行旋转，分别是Vertical axis（垂直于机身的轴）、Tranverse axis（横穿机身的轴）、和Longitudinal axis（从头到尾穿过机身的轴）。为了区别这三种旋转，给他们分别取名为yaw，pitch，roll。

（图源Wikipedia）

这个游戏中，飞船可以pitch（上下转动）和yaw（左右转动）。有许多可以控制旋转的交互方法，比如摇杆，按钮，两指移动视角等等。在这里，我选择了用摇杆的上-下-左-右来控制它的转动。

来到Unity Asset Store，找到一个合适的飞船模型。

• 选择“Open in Unity”。在Unity编辑器的package manager中打开后下载并导入。

• 将文件夹中的飞船模型的prefab拖拽到场景中。重命名为”Spacecraft”。

• 在资产栏的“Scripts”文件夹中新建一个代码文件“Spacecraft”，双击打开。

• 新建一个公开的变量speed – 我们可以在测试时更简单的改变飞船的初始速度。

public float speed；

• 在Update中输入：

transform.position += transform.forward * Time.deltaTime * speed;

这代表在开始运行后的每一帧改变飞船的位置（transform.position)，改变方向为transform.forward，改变的大小为Time.deltaTime * speed。

• 保存后回到Unity编辑器。将“Spacecraft”拖拽到飞船的属性栏中。将speed那一栏设定为任意值。

• 运行游戏，这时飞船开始匀速运动了。

现在，我们添加摇杆。允许用户互动并且控制飞船的旋转。

用户交互界面 – Canvas

在Unity中，所有的用户界面（UI）都需要在Canvas上完成。Canvas本意是画布、幕布，这块幕布可以覆盖在游戏场景上，不会受到相机位置的影响，成为我们所说的“用户界面”。一个游戏中，大多数交互（比如用摇杆控制飞船方向）都需要以Canvas为载体。

新建一个Canvas：

• 在场景栏中，右击 – 选择”UI“ – ”Canvas”

单击场景栏中的Canvas，按键盘上的”F“，就会聚焦到选中的物体上。可以看到，初始状态的Canvas就是一个空白的巨大幕布。相比之下，场景中其他的物体都及其的小。但在运行后，它们的比例不会这么离谱，canvas只会覆盖整个屏幕，而canvas中的各个部分会保持相应的比例。

把摇杆加到canvas上。

我们提到，Unity Asset Store中不只有各种可以直接使用的模型，还有插件、音效、模版等等好用的工具。这次，我们就会用到Asset Store中的一个摇杆工具。与我们之前用过的3D模型不同的是，摇杆Prefab中自带的代码文件允许仅用简单的参数设置和代码就可以实现摇杆控制。

• 将链接中的摇杆工具导入到Unity编辑器中。

• 选中左侧场景栏中的“Canvas”，将摇杆工具的Prefab拖拽到“Canvas”下，使之成为Cavnas的子部分。

  • 可以canvas名称左侧的小三角来伸缩子部件。

• 重命名为“Controller”，略微调整摇杆到适合的大小和位置。

  • 可以点击运行来测试用户会看到的摇杆位置，进行更合适的调整。

  • 在运行后，摇杆是可以用鼠标拖动的（虽然目前什么效果都不会有）。

控制飞船方向 – Joystick

摇杆工具有两个input：用户在横向和纵向移动的幅度和方向。分别用Vertical和Horizontal表示。

那么，我们该如何把摇杆接收到的用户操作反映在飞船的旋转轨迹中呢？

还记得在行星围绕星球时用到的“center”变量吗？在这里，可以新建一个Joystick（摇杆）变量。在update中，运用Joystick.Vertical和Joystick.Horizontal就可以获得每一帧摇杆在纵向和横向上的变化了。我们再通过得到的变化量改变transform.Rotate，即飞船的方向。

（逻辑示意图）

• 双击打开Spacecraft。

• 新建一个公开的Joystick变量

• public Joystick joystick;

  • 通过这个公开的变量，我们可以将Controller拖入到这个变量，从而获得它的输入。

新建两个公开的旋转速度变量

public float pitchSpeed;

public float yawSpeed;

方便我们在调试时修改两个轴上的旋转速度。

• 在update中，

​​​​​​​transform.Rotate(-pitch * pitchSpeed * Time.deltaTime, yaw * yawSpeed * Time.deltaTime, 0);

​​​​​​​Rotate会改变物体在(x,y,z)轴上的旋转。而改变的量 = 方向 * 速度 * 时间

飞船只会pitch和yaw（见图一），所以Rotate的第三个参数为0。

• 保存，回到编辑器中将pitchSpeed和yawSpeed都改为20。

现在，运行游戏，拖动摇杆就可以改变飞船的旋转方向啦。

如果有任何疑问或者建议，也欢迎在下方留言评论哟～