首页 » 游戏资讯 » 连连看游戏教程制作环节

连连看游戏教程制作环节

时间:

连连看游戏教程制作环节已经更新,连连看的经典很难再被复制算是一代人的青春吧,这篇内容讲述了教你怎么自己制作连连看还是很不错的,可以在里面学习到非常多的内容,连连看游戏教程制作环节有需求的朋友别错过了。

内容介绍

连连看游戏看上去简单,但在实现过程中对于训练初级开发者的算法思维是很有裨益的。实际上,《编程之美》一书中就有一章节是专门讲连连看的。

为了防止大家看的有点晕,这里先对下文中频繁出现的两个名词做一下说明:当前点指第一次选择的点,目标点指第二次选择的点。

连连看原理了解一下

在传统的连连看游戏中,玩家想要成功连线并消除。需要满足2个条件才能够进行消除并得分。

条件1:图片类型必须相同

条件2:连接2张图片的线条的弯曲次数必须得小于等于2次。

我们将条件2细化分析,可得出连线可有3种情况。

情况1:不进行弯曲直接连线

情况2:弯曲一次进行连线

情况3:弯曲2次进行连线

场景搭建与图片制作

了解情况后,我们首先在unity中搭建场景,将我们的场景的画布大小设置为1920*1080,如图:

设置完成后,制作我们游戏中用到的图片。新建一个Button,关闭上面的图片显示,设置锚点,并调整像素大小为100*100;然后在下面新建6个Image类型的UI,分别用来显示连连看使用的图片,点击遮罩,以及上下左右4条线段的显示。如图:

然后调整用于显示线段图片的属性,使其刚好能够覆盖上下左右4个方向,而且不留下空隙。如图:

完成后,我们将这个Button制作为预制体,放在Resources文件夹下,方便游戏的使用。

代码实现

1.图片标识添加与下级引用获取

在开始游戏前,我们需要对图片进行标识,才能进行图片的识别与消除。于是我们新建一个LikeChride.cs文件。写入以下代码,进行当前图片的标识,以及下级图片的引用获取,然后将我们的脚本挂载到预制体当中,然后这步就算完成了。如下:

2.场景图片生成与标识添加

在创建场景时我们设置好了屏幕的像素大小,以及单个图片的显示大小。我们就能够知道我们屏幕能够显示的图片数量。然后我们新建LinkStart.cs脚本,在start函数写入以下代码进行生成,并进行标识的设置。如下:

3.连线规则

1. 0折连线

首先实现0折连线的规则,在实现这个方法之前我们可以分析出这个方法实现的目标以及需要的是什么。

目标:这2个点是否能够进行连接,能够进行连接,返回路径,否则为空。

参数:需要2个点的坐标

知道了以上需求后,我们代码中写入LinkSearchZero方法,如下:

这个方法执行后,如果能够进行连线就会返回路径,如果不能的话就返回为空,这样就实现我们这个方法的目的。

2. 1折连线

1折连线方法实现原理与0折连线原理相同,但是1折连线又可以拆分成2个0折连线,且能够进行一折连线的点,一定满足2点之间构成一个矩形,且2点之间出于对角点。那么我们可以通过这个规律,计算出矩形的另一个对角点,以这个对角点与2点进行0折计算,就可以知道这2个点是否能够进行消除。于是1折连线的方法如下:

3. 2折连线

2折连线的需求与以上2种方法一样,但是2折连线可以拆分成1折连线与0折连线的结合体。于是我们得找出当前点周围的点,是否有满足能够与目标点构成矩形的点,进行一折运算,然后在一折运算中通过这个点,找到矩形的另一个对角点进行0折运算。于是我们需要对当前点的坐标进行个4个方向的延伸判断,来查看是否满足连线要求。我们以一个轴延伸举例,如下:

连线实现

连线实际上就是线条图片的显示,经过了上面的运算,我们已经能够拿到当前点到目标点的路径列表,但是这个列表中的路径点是杂乱的,没有进行排序,而且也不知道是哪一个方向的路径图片进行显示,这样的列表显然是不能够进行使用的。于是我们的实现连线的方法的主要目的就是找到有规律的,正确显示连线方向图片的方法。我的思路就是在循环中遍历整个路径列表,找出与当前点相邻的一个路径点,然后判断找出的路径点处于当前点的什么方向,显示对应的路径图片,然后更新更新当前点为刚才找出的路径点,并将这个路径点进行删除。为了能够看到连线效果,此处使用了协程,有兴趣的同学可以下去了解以下,这里就不再过多阐述。(如果有更好的方法,欢迎指出,不胜感激)实现方法如下(PS:只以一个方向举例说明):

点击事件

现在我们实现整个连连看游戏的主要逻辑,接下来就是怎么通过按键点击来实现对这些方法进行使用了。首先我们在LikeChride.cs中添加以下代码,用于获取LinkStart的引用,自己身上的按钮组件的引用,以及添加响应事件,如下:

完成后运行游戏:

结语

我们现在已经完成了一个连连看游戏,但是现在还有一个小小的问题,我们现在游戏中,图片不能够完全不能够进行消除,不同图片的生成数量没有规定全部都是偶数,有兴趣的同学可以考虑一下,怎么解决(PS:工程已经处理)。关于图片的来源,可以科学上网的同学可以去MakeGirlsMoe看看(滑稽),好了,这期文章到此结束,下期再见吧。

上一篇:

下一篇:

网站地图