嗨！大家好，我是小蚂蚁。

今天我们正式开始连连看游戏系列教程的第一节——创建初始化的网格布局，什么是网格布局呢？我们来看一下下方的这张连连看游戏的图片。

游戏中一共有 10 行 x 8 列的图片，我们把每张图片看做是一个格子，这就是一个 10 x 8 的网格布局。在连连看游戏正式开始之前，需要先创建好这样的布局，这也是我们这篇教程的主要任务：创建一个 10 x 8 的连连看游戏初始布局。

先理论

我们先来看一下理论方面，要创建这样的一个网格布局，实现的思路是：先获取到左上角第一个图标的坐标位置，然后以此图标位置为起点，一行一行的创建其他的图标。

如何获取到网格布局中左上角第一个图标的坐标位置呢？看下图：

要创建的行数和列数是已知的，每张图片的宽度和高度也是已知的，假设整个网格的布局刚好位于屏幕的中心，这个位置也是坐标系的中心。有了这些已知条件，我们就能够计算出左上角第一个图标的坐标(x,y)。

有了左上角第一个图标的位置坐标，如何计算其他位置上的图片的坐标呢？

如图，在知道了起点的位置坐标之后，只需要根据要计算位置的行列号，以及单个格子的宽高，即可计算出指定行列号位置的坐标。

上面的这些理论部分并不复杂，不会超出初中的数学知识，如果你读起来感觉晦涩难懂，我的建议是拿出纸和笔，在纸上画一下网格和坐标系，然后再尝试着去推导这两个计算公式。

后实践

理解了理论部分的两个计算公式之后，我们再来看一下如何将这两个公式应用于游戏的制作中。

创建一个新的项目，然后添加一个正方形的素材，我们先用它当作连连看游戏的图标。

把这个正方形图片的宽度和高度先设置为 60。

接着，我们创建几个全局变量。

起点位置坐标X/Y这两个变量的作用是记录左上角第一个位置图片的坐标，其他变量的作用直接根据字面意思理解即可。

可以看到我在所有的变量前面都加上了“全局-”的前缀，这是一个好习惯，后期当游戏中的变量增多的时候，可以根据前缀很方便的区分出一个变量是全局变量还是局部变量。

接下来，我们在正方形上增加初始化网格布局的逻辑。

逻辑很简单，游戏启动后，先计算出左上角第一个位置图标的坐标，然后使用两个逻辑循环一行一行的创建图标，图标被创建出来之后，根据起点位置坐标以及自己的行列号，计算并设置自己的坐标位置。

预览一下场景：

我们在屏幕上看到了一个小正方形和一个大长方形，左上方的小正方形是图片的本体，中间的大长方形是创建出的 10 x 8 的网格布局。

为什么看到的是一张白板，而不是一个图片一个图片的呢？

如图，我们之前将导入的正方形素材的宽高设置为了60，60，在全局变量中我们也为图片的宽度和高度设置为了 60，60，这就导致了每张图片刚好填满了一个格子，格子与格子之间没有任何缝隙，所以最终看到的就是一块白板。

做一下调整，我们将全局变量中的宽度和高度设置为 65，为了区分不同的宽度和高度，我将全局变量中的图片宽度/高度，改名为格子宽度/高度。

再次预览一下，可以看到这次每张图片之间有间隙了。

作为一个连连看游戏，很明显这样的图片尺寸太小了，我们继续调整宽度和高度数值，让图片能够充满整个屏幕。

经过数值的调整，最终把图片的大小设置为 80x80，将各自的宽高设置为 90x90。

预览后的效果如下，图片填充满了屏幕。

如何调整整个网格布局的位置

有的时候我们在游戏中会有这样的需求，例如我希望这个 10x8 的图片布局向屏幕上方偏移一些，这样下方就能够留出一定的空间用于放置各种道具按钮了。

想让整个布局向上偏移该怎么做呢？我们当前所有的计算都是假设整个布局的中心点位于屏幕的中心，也就是（0，0）的位置，如果想要让整个布局向上移动，那么只需要调整中心位置的 y 坐标即可。如果我想要整个布局向上偏移 100，那么就可以以（0，100）作为网格的中心。

如图，我们增加了一个新的全局变量“全局-网格中心坐标Y”，用于设置网格布局中心的 Y 坐标，然后在计算坐标Y 的时候用这个新的全局变量替换了原来的 0 。

再次预览场景：

可以看到这个网格布局向屏幕上方偏移了。如果想让整个布局在水平方向上偏移呢？只需要设置网格布局中心的 X 坐标即可。

总结一下

这一节我们学习了连连看游戏网格布局的初始化，学习了实现思路，并且在微信小游戏制作工具中进行了实现。

理论部分重点在于两个计算公式的推导，掌握了这两个公式，以后再遇到任何类似的网格布局都能够一通百通。

这种网格布局几乎可以应用于任何的消除游戏中，希望大家能够花点儿时间好好的研究透彻，并亲自动手把它制作出来。

欢迎关注我的微信公众号【小蚂蚁教你做游戏】，可领取原创的游戏开发学习路线和教程资料合集。