微信小游戏开发实战3:绘制网格

Posted 2022-04-18 小蚂蚁教你做游戏

在“精致1010”游戏中，我们会使用网格作为底，然后在上方放置方块，类似于下面这样。

这一节我们就试着动态的创建一个10x10的网格。

首先，熟悉一下微信小游戏制作工具中的坐标系。

如图，蓝色线框中间的区域为游戏最终能够显示的区域，如果一个物体位于蓝色的线框外，那么最终在游戏界面中是不会显示的。红色的坐标轴，水平方向为x轴，竖直方向为y轴，中心点（0,0）位于显示区域的正中央。图中的白色的正方形线框的位置就是（0,0），即位于屏幕的正中央。以后，当你遇到一个物体位置为（500,500）时，你就应该知道它大概位于屏幕的右上方。

接下来，我们要画一个方格，方格的中间位置位于屏幕的正中央，把它放在坐标系里应该是这个样子。

我们将从左下角开始，一行一行的向上绘制，直到网格绘制结束。想要绘制网格，需要知道以下几项数据。

• 单个正方形格子的边长 n
• 网格的总行数 r
• 网格的总列数 c

这几项数据可以帮助我们计算出起点的位置以及每一个格子的位置。

如图，根据已知的数据，可以计算出起点的位置，然后根据起点的位置可以计算出网格中的每一个格子的位置。

下面开始进行绘制操作。

先在场景中导入一个小的正方形线框。

如图，导入了一个边长为64的正方形线框（线框的边为2个像素），如果你没有正方形的线框资源，可以使用下方的正方形64x64的线框。

(上方是一个白色线框图片（64x64），如果你的背景是白色的话，会看不到)

先将图片保存到电脑上，然后通过微信小游戏开发工具中的“上传素材”，将线框添加到自己的素材库中，然后就可以在开发工具中使用了。

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

“单个格子边长”，“总行数”，“总列数”是上方提到的需要设置的3个数据，“起点X坐标”“起点Y坐标”用于存储计算出的起点位置。“行号”和“列号”用于循环遍历使用。

选择“线框方块”对象，为其增加如下的逻辑。

场景启动后，首先根据“总行数”“总列数”“单个格子的边长”三个变量计算出起点X和Y坐标，并存储在全局变量中，然后接着进行一个双层循环遍历依次创建网格中的每一个单元格。每个单元格被创建后，通过“起点坐标”，“行号”，“列号”和“格子边长”计算并设置自己的位置。

点击“预览场景”看一下结果。

如图，在屏幕的正中央创建了一个10x10的网格。仔细观察一下，网格内部的线要比网格四周的线粗。这是因为每个单元格的边框线是2个像素，我们使用64作为单个格子边长的话，两个格子拼接处的边框线就会变为4个像素，我们调整一个“单个格子边长”的全局变量，将其数值设置为62。这样两个格子的拼接处的边框线就会重叠，依旧保持2个像素。

修改“单个格子边长”的全局变量数值为62，再次点击“预览场景”看下效果。

可以看到所有的线都一样粗了，都是2个像素。

接着我们将“单个格子边长”设置为68，看一下。

看起来似乎也不错，组成的网格的每个格子看起来都是独立的。

你可以通过设置“总行数”“总列数”“单个格子边长”的数值，来看一下不同的数值下最终生成的网格的效果。

总结一下：

这一节我们学习了动态的创建一个网格，并且通过设置全局变量的数值来控制最终生成的网格的效果。

练一下：

当前的网格总是在屏幕的正中间显示（即中心点为(0,0)），试着使用全局变量来设置网格的中心点。通过设置中心点的位置，来控制最终网格在屏幕中的显示位置。 

---

我是会做游戏也会教你做游戏的小蚂蚁，想学习做游戏的话，关注我就对啦！欢迎关注公众号【小蚂蚁教你做游戏】，领取全网最全的微信小游戏开发原创教程资料。