源码学习网 首页 编程学园 Unity3d教程 查看内容

Unity快速入门小游戏----消消乐

2019-7-14 01:38| 发布者: opiye| 查看: 81| 评论: 0

摘要: 1示例教程—消消乐示例图片:大家应该都玩过3消类这样的游戏吧,比如现在特别火热的开心消消乐,现在我们就来自己做一款这样的小游戏吧,这些图片、动物、图标都是我在网上随便找的,大家可以找自己喜欢的东西来代替 ...
腾讯云服务器秒杀

1 示例教程—消消乐

示例图片:

大家应该都玩过3消类这样的游戏吧,比如现在特别火热的开心消消乐,现在我们就来自己做一款这样的小游戏吧,这些图片、动物、图标都是我在网上随便找的,大家可以找自己喜欢的东西来代替哦。

场景搭建:游戏属于2D游戏,所以场景我们用2D精灵(Sprite)来搭建

2 创建面板

2.1 开始面板

创建开始面板,然后加一个开始游戏button点击进入下一个关卡面板

2.2 关卡面板

关卡面板可以放很多关卡button让玩家进入不同的关卡界面,在我们这个小游戏呢只有一个关卡,大家有兴趣可以多做几关试试哦

2.3 过关标准面板

过关面板上就显示每一关需要达到的每一种动物的数量就可以了

2.4 闯关成功面板

当你成功闯关的时候显示闯关成功面板即可

2.5 闯关失败面板

反之当你闯关失败的时候显示闯关失败面板

3 精灵

首先在unity工程里创建一些精灵(Sprite),然后把我们找好的动物,盒子,黄色小边框的图片都弄在精灵上面,并且给每一个动物都加上BoxCollider2D碰撞盒子,然后把它们放到我们的Resources文件下面,弄成一个一个的预设体方面后面动态创建动物。

4 初始化盒子

首先我们可以看到每一个小动物的背后都有一个蓝色的小格子对吧,然后我设计的是一个6*6的矩阵,现在我们就来动态创建它们吧!

4.1 改变层级

经过上一步我们已经把盒子的预设体在Resources下面建立好了,因为动物在盒子的前面显示,所有我们需要在盒子的Sprite Renderer 的上面把他的Order in Layer改为-1,让它在动物后面显示。

4.2 创建脚本

首先我们需要创建一个CreaeAnimals的脚本,把它随便挂在一个空物体GameObject上。

4.3 动态创建盒子

从游戏的界面上我们可以看到很多盒子有规则的排着, 所有我们可以把它们放在一个二维数组里面来依次遍历它们

创建好数组过后,我们就该在数组里面去依次的动态创建我们的盒子,算好每一个相邻盒子左右上下的距离,依次动态创建。

这样我们的盒子就依次动态创建好了,如下图

5 初始化动物

5.1 初始化动物

从Resources文件下面的Prefabs文件夹里面用random随机一个小动物出来

5.2 定位动物

这样就能在面板上面看到一个随机出来的小动物精灵,但是我们还要把它放到相对应的盒子上面去对吧,这时候我们就要创建一个为check的脚本,并把它挂载到盒子上面。

5.2.1 新建对象

首先在check里面new一个CreaeAnimals 的动物对象

5.2.2 判断盒子里是否有动物

如果盒子没有子孩子就说明盒子里面没有动物,这时候我们就可以调用前面在CreaeAnimals脚本里面写好的初始化动物的函数来创建一个一个的动物。

5.2.3 设置父对象

创建好动物过后,我们还要把动物的父对象设置成盒子,并且让动物在盒子上面跟着盒子移动,如下图

这样我们的动物就创建好啦,并且把每个小动物预设体的Order in Layer改为2让它们在盒子上面显示,最后效果如下图

6 初始化黄色边框

我们玩消消乐游戏的时候,是不是每当我们点击选择一个小动物的时候,都会显示出一个小框视为我们已经选中这个小动物了对吧,所有接下来我们也要做一个小黄框,当我们点击选择一个小动物的时候,让它出现。

6.1 初始化小黄框

初始化小黄框的步骤其实就和上面初始化动物的步骤几乎一模一样啦

6.2 定位小黄框

大家看了上面的创建动物,有没有兴趣自己写写定位小黄框呢,和定位动物是一样的步骤哦,大家自己试着写一写吧,我看好你们嘻嘻,不过我要提醒大家一点动物的父对象是盒子,小黄框的父对象是动物哦,大家不要也弄成盒子了,创建好了过后把小黄框的Order in Layer改为-2,让它在最下面先不显示就好了,后面我们会说到什么时候让它显示的。

7 点击事件

大家玩过消消乐知道会交换两个小动物对吧,所有我们首先要获取到我们鼠标点击的是哪个小动物,接下来我们来写点击事件,点击方法很多,不止我写的这一种,大家有更好的方法也可以试试哦。

7.1 创建脚本

创建一个名为EventTriggerHandler的脚本,并把它挂载到每一个小动物的预设体上面,因为每一个小动物都要获取点击事件。这个脚本要添加EventTrigger的脚本的支援

并且要给每一个动物添加以下这个组件

7.2 添加监听事件

在这里面我们只会用到鼠标点击事件,我放了鼠标进入和鼠标划出事件大家有兴趣的可以自己做一做了解一下哦。

然后在下面的点击函数里面写上你想要点击的时候出现的效果就好了,这样鼠标就成功的获取到你点击的是哪个小动物了。

7.3 改变层级

因为我现在还没有找到一个可以用代码改变精灵Sprite Renderer的上面的Order in Layer值得方法,如果你知道你可以用你的方法去改变它的层级,让它在上面说到的点击函数OnClick里面显示在动物前面。然后我说说我的方法,首先在Sprite Renderer找到属性Sorting Layer,然后给这个属性添加一个为Frog的值。

然后做好上面这些过后我们就可以在OnClick点击事件里面写代码,首先我们这个脚本是挂载在动物身上,所有我们不能直接找到小黄框,还记得我们之间动态创建小黄框的时候是把它的父对象设置成动物的吗?所有这里我们可以用一个变量son来接收到当前动物的第一个孩子,也就是小黄框,这是我们再来判断如果这个小黄框的Sorting Layer默认值不为Frog的话我们就把它改成Frog,这样小黄框就在动物前面显示出来了,效果如下图,反之如果默认值已经为Frog,就说明我们已经点击过当前动物了,这时如果我们再点击就应该把小黄框隐藏。

8 交换动物

接下来我们就该写交换动物的代码了,当你点击第一个动物和第二个动物的时候可以让它们两互换位子

8.1 创建脚本

在unity中创建一个空物体gameobj并把脚本ChangeAnimals挂载在这个空物体上。

8.2 创建数组

8.2.1 交换函数

创建一个只能放2个动物的数组,在数组里面进行交换

8.2.2 把动物放进数组

在ChangeAnimals定义一个下标i,在EventTriggerHandler脚本用一个同类型的变量j来接收

然后在EventTriggerHandler脚本的点击函数里面把点击到的动物放在交换数组里面。

在ChangeAnimals脚本里面控制下标i,当数组里面已经有2个动物的时候,让数组又从第一位开始装其他点击获取到的动物。

8.2.3 清空数组

当我们完成一次交换过后,我们就应该把数组里面的动物清空,好方便下一次数组里面实现两个动物交换,清空数组的同时把两个交换好选中的动物的小黄框给隐藏掉。

8.3 是否可以交换

经过上面的步骤我们基本上可以交换两个动物的位子了,但是我们还要考虑两个动物是否能交换对吗?我们玩消消乐的时候是不是只有一个动物的上下左右才能和它交换呢?所有我们还要在交换的基础上给它叫上条件限制。

简单解释下这段代码,如果交换数组的第一位不为了空就说明鼠标已经点击了一个动物,这是如果鼠标在点击另一个动物,我们就该考虑它们是否应该交换。所以我用4个变量来获取当前两个动物的x坐标和y坐标,如果它们的x坐标相减的绝对值和y坐标相减的绝对值等于当初我创建格子的距离就说明它们相邻,也就代表它们可以交换,然后清空数组,如果它们不能交换,也清空数组里的动物进行下一次的交换。

9 动物消除

当一样的动物相邻并达到3个或3个以上的时候,我们就应该让它们消失,并更新其他的小动物出来。

9.1 创建脚本

创建消除XXanimals脚本挂载在动物上。

9.2 发射线

我用的是发射线来检测上下左右是否和自己的tag一样来作为是否能消除的标志。

这样我们就向当前动物的上下左右分别发射了一条射线,射线的长度为200刚好只能打到除自己外旁边的一个物体,这个发射射线的方式是会射到自己,所有返回值里面会有本身。

9.3 数组

首先我们要先创建一个水平方向的数组和一个垂直方向的数组来分开放动物。

然后在OnEnable里面去初始化它们。

然后把射线射到的物体放在一个数组里面对它们进行判定和操作。

这段代码是说传了3个变量进去,一个List数组,2个方向变量,如果当前数组里面的值小于3就说明射线还没有发出去,打到东西,这个就把左边射到的动物放在这个List数组里面,右边也是一样,但是这样当前自己这个动物就会被添加2次对吧,所有上面这个check函数就是用来判定如果添加的动物数组里已经有了,就不用添加了。

做好上面的过后,就可以在发射射线的函数里面去调用AddList了!大家看懂了吗

9.4 判断Tag

接下来我们就该判断一下数组里面的动物是否是同一种动物呢?在最开始创建每一个小动物的预设体之前,我都给每一个小动物设置了一个Tag

如果数组里面有一个tag和自己不一样,就说明不能消除返回false,反之就返回true

这样当在AddList函数里面检测到FF返回值为true时,这时候就代表可以消动物了!

这时候你们可以试着在这个if里面打印一下,或者做一些其他的操作,看看是否成功了。

因为这个消除脚本是挂载在每一个动物身上,所有每一个动物在update里面每一帧都会发射射线去检测它的上下右左是否和它一样,最后在update里面调用XXRaycast即可。

9.5 更新数组

再消除动物和交换动物过后要更新水平数组和垂直数组的动物,以防数组没有更新,检测出差错,所以在两个脚本的方法里面加上下面的代码。

10 获取消除动物数量

每一关游戏都有它的过关标准对吧,这时我们就可以在之前创建好的过关面板上来自己设置我们过关的要求啦

这是我给第一关设置的过关要求,大家随意发挥。

10.1 创建脚本

创建一个PassPanel脚本挂载在PassPanel面板上。

10.2 设计面板

设计好你的过关面板,然后在PassPanel脚本上创建相对应的gameobject再在面板上拖到相对应的空物体上面,这样就找到它们了。

10.3 更新数据

用3个number来实时的获取到面板上动物的数量并赋值给它们。

10.4 获取相对应的动物消除数量

在XXanimals函数里面写个OnDisable方法,这个方法是在被销毁的时候只执行一帧,

这里我就只放了找到一个过关动物的方法,其他动物的一样,如果检测到该消除动物的tag为上面过关需要的动物tag,就改变PassPanel里面的number数量,并调用实时获取数据的方法PassText来更新数据,如果当前number的数量达到了目标数量,就证明该动物达到了过关的标准,你就根据需要在里面的IF做一些自己想做的操作就可以啦!

我的效果图如下,当消除动物数量大于过关需要的数量时,数字会显示绿色,并且动物上面会出现一个绿色小勾的图片,代表这个动物已经收集成功。

11 动画效果

做到这个步骤,其实游戏已经可以正常玩了,但是如果给动物消除加点动画的感觉就更加好了,接下来我们就来试试吧。

11.1 消失目标点

首先我们要找到一个动物需要移动到的目标点。

这个星星就是我设置的动物如果能消除就需要移动到的目标点位子,下面有个我加的小特效星星在闪烁。

11.2 动物移动

动物移动就需要回到之前我们写的XXanimals脚本,去写这个动物移动方法。最开始我用的携程,但是后面一直有各种不方便的小Bug所有改来改去几次变动,最后用了以下的方法。

我做了一个动物状态机,一种静止状态,一种移动状态

设置初始状态为静止状态

以下就是动物移动的方法,给当前动物一个速度,让它向着我们最快开始设置好的星星目标点移动过去,如果它们之间的距离小于0.1,也就意味着马上接近目标点,就把自己销毁,然后在前面的check中就会检测到当前盒子没有子孩子,也就会自动随机更新新的小动物出来了。

所以大家在上面可以看到我们再之前的判断中,如果FF函数返回为true就把动物的状态改为Move移动状态。

然后在update里面去检测,如果动物的状态一旦改为了Move就调用AnimalMovement函数,并且做一些其他你想做的操作,因为每一个动物都需要去自动检测周围动物,所有我延迟了0.2秒时间给它们检测,不然会出现还没检测到旁边的,就已经移动了的情况。

这样你就会看到相同的动物要消除的时候,会跑向星星的动态的感觉就出来啦!

12 移动步数

还有一个很重要的就是移动步数,当我们玩消消乐游戏的时候,步数是有限的对吧,不能无限次的移动小动物,所以接下来我们也来做一个步数的限制条件吧!

12.1 UI面板

我设置的第一关的步数为15步

12.2 创建代码

把这段代码放在ChangeAnimals脚本里面,在Start里面初始化步数为15。

实时更新面板上的步数。

然后在动物交换ExchangeAnimals函数里面,每交换成功一次动物就让步数减一

13 完成

13.1 成功面板

当游戏达到第一关的过关要求是,显示我们已经准备好的成功面板就好了。

13.2 失败面板

当游戏可移动步数为0,且过关要求没有达到时,显示准备好的失败面板即可。

13.3 游戏完成

做到这里,我们的消消小游戏基本上已经算成功完成了,然后可以在电脑上运行出来玩一玩,也可以打包在手机上面试一试,还有更多的小功能大家如果有兴趣可以发挥自己的想象做做看哦,谢谢大家观看!最后运行效果如图!




来源网址:https://zhuanlan.zhihu.com/p/37801695

鲜花

握手

雷人

路过

鸡蛋