羊了个羊游戏开发教程1_堆叠牌的拾取

本文首发于公众号【小蚂蚁教你做游戏】,欢迎关注,学习更多游戏开发原创教程

嗨!大家好,我是小蚂蚁。

最近“羊了个羊”小游戏爆火。一下子让想做微信小游戏或者想学做微信小游戏的人多了很多,因为小蚂蚁一直都在长期的制作微信小游戏开发的教程,以及制作微信小游戏,所以我无缘无故的也因为这波热度得到了不少的“羊毛”。

不少人建议我写个“羊了个羊”游戏的制作教程,想了一下,为什么不写呢?反正我也是要长期持续写教程的,写别的游戏也是写,那为什么不写写当下如此爆火的游戏呢?羊毛都怼到脸上了,再不薅几把就显得有点儿奇怪了。

好了,废话不多说了。欢迎跟随者小蚂蚁开启你的游戏开发制作之旅。

这个系列教程会包含很多节(我也不知道几节能够写完),我会带你从零开始制作一个“羊了个羊”类型的消除游戏。通过学习教程,你将能够自己动手制作一个“羊了个羊”类型的游戏,并且是一个第二关可以闯过的游戏。

教程所使用的游戏开发工具是【微信小游戏制作工具】,这是微信官方出品的用于制作微信小游戏的开发工具,全中文环境,可视化的积木编程,面向的是没有任何开发经验的普通人,很容易上手,借助它你可以快速的制作出自己的微信小游戏。

这个系列教程并不属于零基础教程,它需要你有一定的基础,并且会用微信小游戏制作工具,如果你目前没有任何基础的话,可以先学习小蚂蚁的【人人都能做游戏】零基础系列教程。

接下来,让我们正式开始第一节的内容吧!

“羊了个羊”游戏本质上还是一个消除游戏,在下方的槽中凑满三个一样的图标即可消除。它跟其它消除游戏的最大的不同,在于它的布局方式上。一般的消除游戏都是一种平面的布局,即整体上是几行几列的平面,但是“羊了个羊”游戏中是一种堆叠的布局,即在一层上会叠加另一层,甚至很多层。

这比平面的布局多了一个“”的概念,图标是一层一层排列的,第一层的图标上如果有第二层图标压着它,那它就不可拾取,这个多层的堆叠布局就是这个游戏实现的难点之一。

这节课中我们就先来解决这个“堆叠牌拾取”的难点。

羊了个羊游戏开发教程1_堆叠牌的拾取

如图,我们将会制作一个这样的示例,一共有两层牌,第一层牌是 3 行 x 5 列,第二层牌是 3 行 x 4列。可拾取的牌用白色表示,不可拾取的牌用红色表示,游戏开始后,显示两层牌的布局,点击白色牌时,白色牌消失(相当于拾取),点击红色牌,红色牌不会消失(相当于不可拾取),每拾取一张牌后,所有剩余牌的状态都会刷新,如果当前牌由不可拾取状态,变为可拾取状态,则它的颜色会由红色变为白色。(文字描述有些长,大家可以借着上方的动图来理解这个示例要做的事情)

两层牌堆叠的初始布局

我们先来实现两层牌的初始布局。其实我们可以先来看看如何创建一层,因为创建一层后,再创建一层就是两层了。

羊了个羊游戏开发教程1_堆叠牌的拾取

如图是第一层的 3×5 的网格布局,我们先计算出它的左上角的起点位置。计算公式在图中列出了,如果你之前有看过小蚂蚁的教程,就应该知道,关于这个网格布局的计算我已经讲过太多次了,所以这次我就不再讲了,拿出你的纸和笔,画一画,写一写,这两个计算公式就能很好理解了。(关于网格布局的详细教程可以看【这里】)

在计算出左上角的起点位置之后,我们就可以从这里开始,依次的去一行一行的创建每一张牌了。那如何设置每张牌的位置呢?

羊了个羊游戏开发教程1_堆叠牌的拾取

如图,在知道一些已知条件之后,我们可以根据右边的计算公式,计算得到网格布局中的每个位置上的张牌的坐标。

这样第一层牌的计算公式就有了,接着看第二层牌。

羊了个羊游戏开发教程1_堆叠牌的拾取

如图,绿色的网格表示第二层牌,第二层牌压在第一层牌之上,而且它相对于第一层牌还有一个向上向右的偏移,从图中可以很直观的看出来,第二层左上角的起点位置,相对于第一层左上角的起点位置,向右上方偏移了半个格子,所以计算公式也很容易推出来,除了起点位置的计算不同,第二层牌的坐标位置的计算公式与第一层牌是一样的。

到这里,创建两层堆叠牌的理论基础我们就搞定了,接下来到微信小游戏制作工具中实现一下。

来到微信小游戏制作工具中,首先我们准备两个素材。

羊了个羊游戏开发教程1_堆叠牌的拾取

如图,一个是“卡牌”的图片,一个是“创建卡牌”的方块,这个方块不会在游戏中显示,它只是用于放置创建卡牌的积木逻辑。

接着,我们再创建一些全局变量

羊了个羊游戏开发教程1_堆叠牌的拾取

第一层起点位置X/Y:用于记录第一层卡牌左上角起点的位置;

第二层起点位置X/Y:用于记录第二层卡牌左上角起点的位置;

单元格的宽度/高度:用于设置每个卡牌所占用的格子的宽度和高度(这里我们把格子的大小设置为 100×120);

当前创建的卡牌层级:用于区分当前创建的是第一层卡牌还是第二层卡牌;

行/列迭代:用于循环中的遍历;

网格中点位置X/Y:用于设置整个网格布局的中心位置。

除了这些全局变量之外,我们还创建了两个表格数据(这个在后续会用到)。

第一层表格:用于记录第一层卡牌的状态;

第二层表格:用于记录第二层卡牌的状态;

接着来看一下“创建卡牌”精灵上的积木逻辑。

羊了个羊游戏开发教程1_堆叠牌的拾取

羊了个羊游戏开发教程1_堆叠牌的拾取

根据之前推导出的计算公式,先计算出两层网格的左上角起点的位置,接着使用双重循环,一行一行的创建卡牌,这里注意了,我们使用“当前创建的卡牌层级”这个变量来区分创建的是哪一层的牌,另外每一层创建多少张牌,是根据这一层的表格来确定的(这个稍后会讲),除此之外,在创建卡牌前我们还进行了一个判断,只有表格中当前位置上的数据为 1 时,才创建卡牌,可以先猜一下为什么要这样。

接着,再看一下卡牌上的积木逻辑。

羊了个羊游戏开发教程1_堆叠牌的拾取

卡牌被创建出来之后,根据不同的层级,来计算和设置自己的坐标位置(计算用的就是我们上方推导出的卡牌位置坐标的计算公式)。

你应该也发现了,在卡牌克隆逻辑刚开始的时候,我们设置了几个变量,这几个变量都是位于“卡牌”上的局部变量。

羊了个羊游戏开发教程1_堆叠牌的拾取

行/列号:记录当前卡牌在整个网格布局中的行列号位置;

层级:记录当前卡牌位于第几层;

是否可抽取:用于判断当前的卡牌是否可以点击拾取(如果上方被其它卡牌压住了就不能拾取);

到这里,两层牌堆叠的初始布局就制作好了,可以点击预览看一下。

羊了个羊游戏开发教程1_堆叠牌的拾取

因为我们在创建第二层牌之前等待了 0.5 秒,所以能够明显的看出两层牌的创建顺序。

检测卡牌的状态

完成初始布局之后,接着我们来实现第二个功能,每张牌都有两个状态,一个是可拾取状态,一个是不可拾取状态。我们使用不同的颜色来区分卡牌的状态,红色表示不可拾取,白色表示可拾取。

两层共计 27 张牌,如何判断哪张牌是可拾取的,哪张牌是不可拾取的呢?接下来我们就需要借助数据抽象了。想要更好的理解数据抽象,可以学习【这篇教程】。

羊了个羊游戏开发教程1_堆叠牌的拾取

如图,我们将两个表格中填满了数字 1,1 表示的就是这个位置上有牌,如果一个位置上的牌被取走了,我们就把该位置上的 1 设置为 0,表示这个位置上没有牌了。

这里我们把这两个表格平铺开了,因为这样方便查看,其实它们在游戏中更像是下面这样。

羊了个羊游戏开发教程1_堆叠牌的拾取

看起来很混乱,所以后续讲解的时候我们还是将它们平铺开来,但是你要能够自己脑补它们堆叠的样子。

羊了个羊游戏开发教程1_堆叠牌的拾取

来看一下这张图,左下角的蓝色牌是第一层的牌,它目前是不可拾取状态,如果它要变成拾取状态的话,就需要拿走第二层左下角第一张红色的牌,对不对?也就是说,第一层某个位置上的牌能不能拾取,要取决于第二层有没有牌压在它上面,如果有的话,那它就是不可拾取状态,否则的话是可拾取状态

接着再来看一下另外两种情况。

羊了个羊游戏开发教程1_堆叠牌的拾取

羊了个羊游戏开发教程1_堆叠牌的拾取

一种是有两张牌压着蓝牌,一种是有四张牌压着蓝牌。

第一层牌到底能不能拾取,好像不但跟第二层牌有关,而且还跟它自己的位置有关,有的位置只有一张牌压着它,有的位置有两张压着它,有的位置有四张牌压着它…..看起来好像是没有什么规律,但是作为一个游戏开发者,你一定要相信,它背后肯定是有规律的,而找到这个规律,就是解决这个问题的关键。

羊了个羊游戏开发教程1_堆叠牌的拾取

如图,就是我找到的规律,假设当前需要判断第一层牌中行列号为 (2,4) 的牌的状态,那就需要判断第二层 4 个位置上是否有牌,这四个位置分别为(2,4),(3,4),(2,3),(3,3),第一层上的所有牌的状态判断都满足这个规律。

羊了个羊游戏开发教程1_堆叠牌的拾取

羊了个羊游戏开发教程1_堆叠牌的拾取

对于边角位置也依然满足这个规律,因为有些位置超出了第二个表格边界,超出表格边界的位置其实就相当于没有牌。

如果你的抽象能力不是很强的话,这部分读起来会很困难,不过没关系,我建议你利用现实中的道具来帮助自己理解。比如我在找这个规律的时候,就借助扑克牌来帮助自己理解这些抽象的数据表格。

羊了个羊游戏开发教程1_堆叠牌的拾取

好了,找到规律了,这个问题就解决一大半了。接下来,让我们去小游戏制作工具中实现一下吧!

还记得我们之前创建的两个表格数据吗?它们中的内容如下:

羊了个羊游戏开发教程1_堆叠牌的拾取

羊了个羊游戏开发教程1_堆叠牌的拾取

要实现所有卡牌状态的更新,我们需要借助通知,所以在数据区中创建一个“刷新卡牌”的通知。

羊了个羊游戏开发教程1_堆叠牌的拾取

接着来看一下“刷新卡牌”的积木逻辑。这段逻辑位于“卡牌”精灵上。

羊了个羊游戏开发教程1_堆叠牌的拾取

羊了个羊游戏开发教程1_堆叠牌的拾取

看上去挺长的,其实实现的就是我们上方找到的那个规律,分别判断第二层表格中的四个位置,如果任何一个位置上有牌,那么第一层这个牌就不能抽取,否则的话,就能抽取。图中你看到的那个很长的判断积木,其实就是为了判断这个位置是否超出了第二个表格的边界,位于边界之外的我们也当作无牌的情况。最后,如果当前牌是第二层的话,那全部设置为可抽取状态,因为目前第二层就是最上层了。

最后,再来看一下卡牌点击的积木逻辑。

羊了个羊游戏开发教程1_堆叠牌的拾取

如果当前牌不能抽取的话,我们就让它抖动一下,如果能抽取的话,根据它的层级设置对应的表格中的数据为 0 (表格这个位置上没有牌了),另外每当有牌被取走了,我们都应该刷新一下剩余牌的状态,这里使用了对所有卡牌的通知,让剩余的所有卡牌刷新自己的状态,最后删除掉抽取的这个卡牌。(这里暂时做简单的删除处理,在游戏中抽取的卡牌应该移动到下方的卡槽中,这个我们后续做到的时候再讲)

这样,一个堆叠牌的拾取功能就完成啦!什么?有点儿难呐?多看几遍,尽量去理解,然后多动手做,难一点的事情做到后才会有满满的成就感,加油!

在这个示例中,我们使用的是 3×5,3×4 这样满满当当的布局,如果不想要这样满当的布局该怎么做?正常游戏中每一关的布局可都是不一样的呢!

很简单,调整一个两个表格中数据即可,有牌的地方放个 1 ,没牌的地方放个 0。

羊了个羊游戏开发教程1_堆叠牌的拾取

羊了个羊游戏开发教程1_堆叠牌的拾取

再次预览一下,就有新的关卡布局啦!

羊了个羊游戏开发教程1_堆叠牌的拾取

在这篇教程里,我们学到了两层堆叠牌的实现,那三层呢?四层呢?五层呢?…… 原理都是一样的,接下去就是你动手挑战的机会啦!

天丞健:健康使者,传承健康,守护爱。

关注微信公众号“ 天丞健 ”

本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 ssrs225@163.com 举报,一经查实,本站将立刻删除。
如若转载,请注明出处:https://www.jiuea.com/24280.html