游戏蛮牛学习群(纯技术交流,不闲聊):539178957
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

开发者专栏

关注:2282

当前位置:游戏蛮牛 技术专区 开发者专栏

__________________________________________________________________________________
开发者干货区版块规则:

  1、文章必须是图文形式。(至少2幅图)
      2、文章字数必须保持在1500字节以上。(编辑器右下角有字数检查)
      3、本版块只支持在游戏蛮牛原创首发,不支持转载。
      4、本版块回复不得无意义,如:顶、呵呵、不错......【真的会扣分的哦】
      5、......
__________________________________________________________________________________
查看: 2840|回复: 48

[士郎] 连连看游戏教程——后宫大作战

[复制链接]  [移动端链接]
排名
3
昨日变化

6668

主题

7189

帖子

2万

积分

Rank: 16

UID
1231
好友
185
蛮牛币
8960
威望
30
注册时间
2013-7-29
在线时间
3420 小时
最后登录
2018-8-14

社区QQ达人活力之星原创精华达人突出贡献奖财富之证游戏蛮牛QQ群会员蛮牛妹VIP

发表于 2018-5-3 14:44:12 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
1.png

连连看游戏看上去简单,但在实现过程中对于训练初级开发者的算法思维是很有裨益的。实际上,《编程之美》一书中就有一章节是专门讲连连看的。
    为了防止大家看的有点晕,这里先对下文中频繁出现的两个名词做一下说明:当前点指第一次选择的点,目标点指第二次选择的点。
    另外,本文的主要灵感来自于博主:artzok 发布的博客提供的思路,在这里表示由衷的感谢。

连连看原理了解一下

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

条件1:图片类型必须相同
条件2:连接2张图片的线条的弯曲次数必须得小于等于2次。
我们将条件2细化分析,可得出连线可有3种情况。
情况1:不进行弯曲直接连线
2.jpg
情况2:弯曲一次进行连线
3.jpg
情况3:弯曲2次进行连线
4.jpg
场景搭建与图片制作
了解情况后,我们首先在unity中搭建场景,将我们的场景的画布大小设置为1920*1080,如图:
5.jpg
设置完成后,制作我们游戏中用到的图片。新建一个Button,关闭上面的图片显示,设置锚点,并调整像素大小为100*100;然后在下面新建6个Image类型的UI,分别用来显示连连看使用的图片,点击遮罩,以及上下左右4条线段的显示。如图:
6.jpg
7.jpg
然后调整用于显示线段图片的属性,使其刚好能够覆盖上下左右4个方向,而且不留下空隙。如图:
8.jpg
9.jpg
完成后,我们将这个Button制作为预制体,放在Resources文件夹下,方便游戏的使用。
代码实现
1.图片标识添加与下级引用获取
在开始游戏前,我们需要对图片进行标识,才能进行图片的识别与消除。于是我们新建一个LikeChride.cs文件。写入以下代码,进行当前图片的标识,以及下级图片的引用获取,然后将我们的脚本挂载到预制体当中,然后这步就算完成了。如下:
[AppleScript] 纯文本查看 复制代码
public Button nowButton;             //自己身上的按钮组件
public int index;                    //当前的图片类型
public int x;                        //当前图片的X
public int y;                        //当前图片的Y
public bool isLook = true;           //当前图片是否显示
public GameObject lineUp;            //上方线条图片
public GameObject lineDown;          //下方线条图片
public GameObject lineLeft;          //左边线条图片
public GameObject lineRight;         //右边线条图片
public Image background;             //背景图片
public GameObject mask;              //遮罩的背景
void Awake ()
    {
        lineUp = transform.Find("LineUp").gameObject;
        lineDown = transform.Find("LineDown").gameObject;
        lineLeft = transform.Find("LineLeft").gameObject;
        lineRight = transform.Find("LineRight").gameObject;
        background = transform.Find("ImgBackGround").gameObject.GetComponent<Image>();
        mask = transform.Find("Image_Mask").gameObject;  //一开始获取引用
        lineUp.SetActive(false);
        lineDown.SetActive(false);
        lineLeft.SetActive(false);
        lineRight.SetActive(false);
        mask.SetActive(false);                           //关闭不需要的显示
    }

2.场景图片生成与标识添加
在创建场景时我们设置好了屏幕的像素大小,以及单个图片的显示大小。我们就能够知道我们屏幕能够显示的图片数量。然后我们新建LinkStart.cs脚本,在start函数写入以下代码进行生成,并进行标识的设置。如下:
[AppleScript] 纯文本查看 复制代码
for (int i=0;i<10;i++)
    {
        for (int j=0;j<18;j++)
        {
            var icon = Instantiate(nowIcon, pos2, Quaternion.identity);
            var chidren = icon.GetComponent<LikeChidren>();
            chidren.x = j;
            chidren.y = i;                              //设置图片坐标标识
            chidren.index = Random.Range(0, 10);        //随机图片类型
            nowChidrens[j, i] = chidren;                //保存图片的引用
            icon.transform.SetParent(transform);
            icon.transform.position = pos2;
            pos2 += new Vector3(100, 0, 0);
            if (j == 0 || j == 17 || i == 0 || i == 9)  //边界隐藏方便游戏
            {
                chidren.isLook = false;
                chidren.background.gameObject.SetActive(false);
            }
            else
            {
                imgNumber[chidren.index]++;             //相同图片有多少
            }
        }
        pos2 = new Vector3(90, 90, 0);
        pos2 += new Vector3(0, 100, 0) * (i+1);
    }

3.连线规则
1. 0折连线
首先实现0折连线的规则,在实现这个方法之前我们可以分析出这个方法实现的目标以及需要的是什么。
目标:这2个点是否能够进行连接,能够进行连接,返回路径,否则为空。
参数:需要2个点的坐标
知道了以上需求后,我们代码中写入LinkSearchZero方法,如下:
[AppleScript] 纯文本查看 复制代码
public List<Pos> LinkSearchZero(int x1,int y1,int x2,int y2)
{
    List<Pos> nowPos = new List<Pos>();  //用于返回路径的列表
    if (x1!=x2 && y1!=y2)
    {
        return null;
    }
    //X轴相等,Y轴进行延伸,判断能否一条直接相连
    if (x1==x2)
    {
        int yMax = y1 > y2 ? y1 : y2;
        int yMin = y1 < y2 ? y1 : y2;
        for (int i=++yMin;i<yMax;i++)
        {
            Pos tmpPos = new Pos();
            tmpPos.x = x1;
            tmpPos.y = i;
            nowPos.Add(tmpPos);
            bool tmpIsLook = nowChidrens[x1, i].isLook;
            if (tmpIsLook)  //如果道路上有图片在进行显示就返回空
            {
               return null;
            }
       }
        return nowPos;
    }
    //Y轴相等,X轴进行延伸,判断能否一条直接相连
    if (y1==y2)
    {
        int xMax = x1 > x2 ? x1 : x2;
        int xMin = x1 < x2 ? x1 : x2;
        for (int i=++xMin;i<xMax;i++)
        {
            Pos tmpPos = new Pos();
            tmpPos.x = i;
            tmpPos.y = y1;
            nowPos.Add(tmpPos);
            bool tmpIsLook = nowChidrens[i, y1].isLook;
            if (tmpIsLook)
            {
                return null;
            }
        }
        return nowPos;
       }
    return null;
}

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

2. 1折连线
1折连线方法实现原理与0折连线原理相同,但是1折连线又可以拆分成2个0折连线,且能够进行一折连线的点,一定满足2点之间构成一个矩形,且2点之间出于对角点。那么我们可以通过这个规律,计算出矩形的另一个对角点,以这个对角点与2点进行0折计算,就可以知道这2个点是否能够进行消除。于是1折连线的方法如下:
[AppleScript] 纯文本查看 复制代码
public List<Pos> LinkSearchOne(int x1, int y1, int x2, int y2)
{
    if (x1==x2 || y1==y2)
    {
        return null;
    }
    bool isLookOne = nowChidrens[x1, y2].isLook;
    if (!isLookOne)
    {
        List<Pos> linkOne = LinkSearchZero(x1,y2,x1,y1);
        List<Pos> linkTwo = LinkSearchZero(x1,y2,x2,y2);
        if (linkOne!=null && linkTwo!=null)
        {
            Pos tmpPos = new Pos();
            tmpPos.x = x1;
            tmpPos.y = y2;
            linkOne.Add(tmpPos);
            return MergeList(linkOne,linkTwo); //进行路径列表合并
         }
     }
    bool isLookTwo = nowChidrens[x2, y1].isLook;
    if (!isLookTwo)
    {
        List<Pos> linkOne = LinkSearchZero(x2, y1, x1, y1);
        List<Pos> linkTwo = LinkSearchZero(x2, y1, x2, y2);
        if (linkOne != null && linkTwo != null)
        {
            Pos tmpPos = new Pos();
            tmpPos.x = x2;
            tmpPos.y = y1;
            linkOne.Add(tmpPos);
            return MergeList(linkOne, linkTwo);
        }
    }
    return null;
}

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

[AppleScript] 纯文本查看 复制代码
public List<Pos> LinkSearchTwo(int x1, int y1, int x2, int y2)
    {
        int xMax = nowChidrens.GetLength(0);
        int yMax = nowChidrens.GetLength(1);        //获取2维数组的各维长度
        for (int i =x1+1;i<xMax;i++)                //以X轴正方向上延伸进行判断
        {
            Pos tmpPos = new Pos();
            tmpPos.x = i;
            tmpPos.y = y1;
            nowPos.Add(tmpPos);                     //现在的路径列表添加道路点
            if (!nowChidrens[i, y1].isLook)
            {
                List<Pos> isLook = LinkSearchOne(i, y1, x2, y2);
                if (isLook!=null)
                {
                    return MergeList(nowPos,isLook); //满足条件,返回当前的路径
                }
            }
            else
            {
                break;
            }

        }
        nowPos.Clear();        //不满足条件进行清除,接下来执行其余轴向延伸判断(没有列出其余代码)
        return null;
    }


连线实现

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

[AppleScript] 纯文本查看 复制代码
IEnumerator Sort(int x, int y, List<Pos> pos)
{
    List<GameObject> lines = new List<GameObject>();     //用于存储当前显示的连线物体,方便连线结束后关闭显示。
    while (pos.Count > 0)
    {
        for (int i = 0; i < pos.Count; i++)
        {
            if (x + 1 == pos.x && y == pos.y)      //判断是否处于当前点的上方,其余3个方向相似,代码没有列出
            {
                nowChidrens[x, y].lineRight.SetActive(true);
                nowChidrens[x + 1, y].lineLeft.SetActive(true);
                lines.Add(nowChidrens[x, y].lineRight);
                lines.Add(nowChidrens[x + 1, y].lineLeft);
                x = x + 1;
                pos.RemoveAt(i);
                break;
            }
        yield return new WaitForSecondsRealtime(0.1f);   //延时0.1秒后继续执行
    }
}

点击事件

   现在我们实现整个连连看游戏的主要逻辑,接下来就是怎么通过按键点击来实现对这些方法进行使用了。首先我们在LikeChride.cs中添加以下代码,用于获取LinkStart的引用,自己身上的按钮组件的引用,以及添加响应事件,如下:
[AppleScript] 纯文本查看 复制代码
  private void Start()
    {
        nowLink = transform.parent.gameObject.GetComponent<TestLinkStart>();
        nowButton.onClick.AddListener(OnClick);   //添加按钮的响应事件
    }
    public void OnClick()
    {
        if (isLook)
        {
            mask.SetActive(true);
            nowLink.IsLink(x, y, index, mask);     //调用方法进行连线
        }
    }


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

知乎@繁华如梦


评分

参与人数 4鲜花 +11 收起 理由
青蓝枫 + 2 很给力!
好身亡 + 2 很给力!
小枫小 + 2 很给力!
nuox4 + 5 很给力!

查看全部评分


跟我念“站长妹纸萌萌哒!”我说站长,你说YO!爱你们么么哒~
回复

使用道具 举报

5熟悉之中
879/1000
排名
3031
昨日变化
15

2

主题

80

帖子

879

积分

Rank: 5Rank: 5

UID
198071
好友
0
蛮牛币
928
威望
0
注册时间
2017-1-2
在线时间
355 小时
最后登录
2018-8-14
发表于 2018-5-3 14:49:16 | 显示全部楼层
谢谢分享~受益匪浅
[发帖际遇]: 九御 乐于助人,奖励 1 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

4四处流浪
319/500
排名
12646
昨日变化
5

1

主题

199

帖子

319

积分

Rank: 4

UID
16124
好友
1
蛮牛币
1200
威望
0
注册时间
2014-3-2
在线时间
63 小时
最后登录
2018-8-11
发表于 2018-5-3 15:11:06 | 显示全部楼层
66666666666666666666666

回复 支持 反对

使用道具 举报

排名
60599
昨日变化
15

0

主题

19

帖子

46

积分

Rank: 1

UID
169478
好友
0
蛮牛币
15
威望
0
注册时间
2016-9-20
在线时间
25 小时
最后登录
2018-8-13
发表于 2018-5-3 15:46:46 | 显示全部楼层
图片生成那里定义的是什么

回复 支持 反对

使用道具 举报

7日久生情
2610/5000
排名
473
昨日变化
2

1

主题

316

帖子

2610

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
27816
好友
3
蛮牛币
8394
威望
0
注册时间
2014-6-3
在线时间
845 小时
最后登录
2018-8-14
发表于 2018-5-3 16:28:18 | 显示全部楼层
好东西,收藏一下

回复

使用道具 举报

7日久生情
1931/5000
排名
2393
昨日变化
7

1

主题

916

帖子

1931

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
216583
好友
2
蛮牛币
3219
威望
0
注册时间
2017-4-7
在线时间
468 小时
最后登录
2018-8-14
发表于 2018-5-3 17:10:47 | 显示全部楼层
多谢分享

回复

使用道具 举报

7日久生情
2022/5000
排名
616
昨日变化
2

6

主题

263

帖子

2022

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
1868
好友
3
蛮牛币
2744
威望
0
注册时间
2013-8-12
在线时间
421 小时
最后登录
2018-7-10

VIP社区QQ达人

发表于 2018-5-3 21:16:38 | 显示全部楼层
感谢大神,但放上工程可能会更好

回复 支持 反对

使用道具 举报

5熟悉之中
861/1000
排名
3651
昨日变化
17

0

主题

193

帖子

861

积分

Rank: 5Rank: 5

UID
163777
好友
1
蛮牛币
647
威望
0
注册时间
2017-2-27
在线时间
296 小时
最后登录
2018-8-14
发表于 2018-5-4 08:45:44 | 显示全部楼层
收藏一下

回复

使用道具 举报

7日久生情
1906/5000
排名
4247
昨日变化
2

0

主题

1334

帖子

1906

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
267381
好友
5
蛮牛币
3186
威望
0
注册时间
2018-2-1
在线时间
256 小时
最后登录
2018-8-6
发表于 2018-5-4 08:55:58 | 显示全部楼层
谢谢分享,怎么收藏啊?

回复 支持 反对

使用道具 举报

3偶尔光临
241/300
排名
8541
昨日变化
3

3

主题

52

帖子

241

积分

Rank: 3Rank: 3Rank: 3

UID
254117
好友
4
蛮牛币
1621
威望
0
注册时间
2017-11-13
在线时间
70 小时
最后登录
2018-8-6
发表于 2018-5-4 09:14:28 | 显示全部楼层
不错不错,谢谢分享

回复 支持 反对

使用道具 举报

5熟悉之中
577/1000
排名
15872
昨日变化
7

0

主题

360

帖子

577

积分

Rank: 5Rank: 5

UID
199204
好友
0
蛮牛币
254
威望
0
注册时间
2017-1-5
在线时间
177 小时
最后登录
2018-8-9
发表于 2018-5-4 09:25:56 | 显示全部楼层
谢谢分享

回复

使用道具 举报

5熟悉之中
856/1000
排名
3512
昨日变化
2

0

主题

266

帖子

856

积分

Rank: 5Rank: 5

UID
229748
好友
0
蛮牛币
2476
威望
0
注册时间
2017-7-1
在线时间
204 小时
最后登录
2018-8-9
发表于 2018-5-4 09:54:08 | 显示全部楼层
感谢分享

回复

使用道具 举报

5熟悉之中
754/1000
排名
3414
昨日变化
3

1

主题

41

帖子

754

积分

Rank: 5Rank: 5

UID
227495
好友
0
蛮牛币
1142
威望
0
注册时间
2017-6-19
在线时间
314 小时
最后登录
2018-8-14
发表于 2018-5-4 10:01:23 | 显示全部楼层
代码不全。。。。

回复

使用道具 举报

3偶尔光临
196/300
排名
14331
昨日变化
6

0

主题

103

帖子

196

积分

Rank: 3Rank: 3Rank: 3

UID
158334
好友
0
蛮牛币
260
威望
0
注册时间
2016-7-22
在线时间
43 小时
最后登录
2018-5-20
发表于 2018-5-4 10:05:23 | 显示全部楼层
很棒的教程,得好好看看
[发帖际遇]: 古洛兽 在论坛发帖时没有注意,被小偷偷去了 2 蛮牛币. 幸运榜 / 衰神榜

回复 支持 反对

使用道具 举报

4四处流浪
345/500
排名
7026
昨日变化
6

1

主题

50

帖子

345

积分

Rank: 4

UID
273353
好友
2
蛮牛币
411
威望
0
注册时间
2018-3-20
在线时间
126 小时
最后登录
2018-8-9
发表于 2018-5-4 10:15:45 | 显示全部楼层
收藏一下

回复

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

快速回复 返回顶部 返回列表