0. 前言

刚开始准备写UI系列的时候，我本来想以教科书方式来一步一步推进知识点，但是这个可能就会成为一个非常冗长枯燥的系列内容。知识点固然要积累，但只有自己遇到问题相关的知识点，大脑才能乐意的把它存储进去。

学习不应该是一种痛苦的过程，尤其是作为我们喜欢游戏的读者来说，能把自己的想法和创意在现实中表达出来，那成就感简直是太棒了！

1. 参考游戏

前几天被安利玩了最囧游戏2，笔者不得不佩服作者的脑洞无比的大。 里面很多关卡设置的很有新意，比如将让你找吃的，最后你将钻石的中间拉到粪便下方组成冰淇淋通关。让你找船长的钩子，结果是文字内容里面的问号。游戏内容很有趣，同时它的实现方法很简单，利用点击和拖拽的事件就可以做到了。

那么我们这篇文章的目标就是制作一款像最囧游戏一样的简单益智解谜游戏。

开始准备一些资源

背景图片

找一个可爱的字体

直接在攻略网站上下载图片，然后PS扣取图片

然后全部将图片放在Unity工程中设置Sprite格式（注意修改图片名字成英文）

字体文件创建个Font名字的文件夹存放

（ArtRes目录是自定义创建的目录，用来存放美术资源。工程文件划分清楚结构是一个很有必要事情）

2. 制作第一个关卡

创建界面

创建一个新的画布，在画布下面新建一个Image组件作为背景层图片。将Image组件的SourceImage选定为作业本的Sprite，调整好图片宽度和高度，铺满屏幕。

创建一个Text组件

组件的字体选择我们网上下载的字体

调整大小，输入抬头

这里注意这里的字体是纯显示用的，因此不能勾选RaycastTarget选项，否则我们的点击事件会点到字体上。

加入更多的装饰物体，这里先将钻石中间我们要用来达成通关的物体加上一个Button组件

基本上第一关的界面完成了，感觉像是那么回事，接下来要开始实现操作功能

UI的拖拽操作

创建一个DragUI名字的脚本，他主要功能为实现我们的拖拽操作。该脚本继承IDragHandler接口,这样Unity会检测到该UI发生拖拽操作的时候进入OnDrag函数

让输入的位置直接赋值给UI物体

将脚本拖到我们要移动的物体上

播放效果：

判定当前UI是否到达位置点

创建一个空的物体，添加2D碰撞脚本，设置BoxCollider2D的Size大小适应我们想判定成功的区域大小

因为我们是在抬起操作的时候判定UI是否达到目标区域，因此在DragUI中增加点击位置抬起接口。

在OnPointerUp（）函数中我们利用Unity的碰撞检测，检测UI是否在设定的目标区域内。如果处于目标区域我们将UI固定到目标区域位置。

这里新添加了名为targetCol的属性，用来关联外部的目标碰撞区域，将之前设置的目标物体拖到脚本的targetCol框中完成绑定。

运行的效果：

增加一个结算界面

我们将之前拼的界面UI放在一个名为Tran_Puzzle空的挂点下，表示解谜界面。创建一个Tran_Pass空的挂点，里面放一个Text文本写上通关的文字，表示一个通过界面。

这样我们就可以直接控制两个挂点的开关激活来实现界面的变化

在这里我们拖拽UI到达目标点后，代码只要将解谜界面关闭，通关界面打开就实现该次通关。

运行效果：

3.0 完整的游戏流程

现在解谜游戏的基本功能都大体实现了，但是实际上的游戏流程会在此基础上优化结构和功能。

UI预制体化

首先我们不能把UI界面直接放在场景里面做存储，我们应该把做好的UI界面存放为一个预制体，不然我们做一个有10个解谜关卡的游戏，每个界面都放在场景中激活关闭就太麻烦了。

我们将刚做好的Canvas物体保存为预制体，修改名字为Page_Level01，意义为第一关界面

整理需要的脚本

DragUI：该脚本判定游戏是否通关，同时实现拖拽UI的效果

LevelInfo：用来记录当前关卡的数据信息，这里用来保存切换解谜和通关两个界面的挂点

LevelOver：处理关卡结束，告诉LevelManager可以开始下一关了。

LevelManager：保存我们的所有关卡数据，当前的关卡进度。

LevelInfo脚本存储当前的界面信息

LevelOver脚本处理每次通关，点击UI事件后，调用开始关卡函数，该脚本挂载在通关界面的按钮上。

设计第二关

和第一关设计是一样的，我们这里单独的将问号用一个Text文件来显示，加上DragUI脚本，并在船长的右手加上一个目标区域。

拼接完UI，我们将第二关的Canvas界面改名为Page_Level02做成预制体

创建一个空物体，挂载LevelManager，并把我们的关卡预制体赋值给LevelManager的LevelList

运行后的效果

最后附上项目源码：

https://github.com/chs71371/DragDemo

对游戏开发感兴趣的同学，欢迎围观我们：【皮皮关游戏开发教育】 ，会定期更新各种教程干货，更有别具一格的线下小班教育。在你学习进步的路上，有皮皮关陪你！~

我们的官网地址：http://levelpp.com/

我们的游戏开发技术交流群：610475807

我们的微信公众号：皮皮关