微信小游戏开发实战教程3-绘制网格
**这是小蚂蚁游戏开发公众号原创的第38篇。本篇主要内容包括使用微信小游戏开发工具动态的绘制一个网格，并通过使用变量来控制最终生成的网格的效果。
如果你没有任何的游戏开发经验，欢迎阅读我的“人人都能做游戏”系列教程，它会手把手的教你做出自己的第一个小游戏。
在“精致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)），试着使用全局变量来设置网格的中心点。通过设置中心点的位置，来控制最终网格在屏幕中的显示位置。
如果你对游戏开发感兴趣，欢迎关注我的微信公众号：小蚂蚁游戏开发。了解更多与游戏开发有关的内容。
微信小游戏开发实战教程3-绘制网格相关推荐
- 微信小游戏开发实战教程13-随机生成形状功能的实现
微信小游戏开发实战系列的第13篇. 本节内容包括:通过使用列表来实现可以设置权重的随机功能,以及游戏中的随机生成形状功能的具体实现. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游 ...
- 微信小游戏开发实战教程15-关卡编辑器的制作以及关卡分享功能的实现
微信小游戏开发实战系列的第15篇. 本节主要内容有游戏中的关卡编辑器的实现思路以及如何利用分享功能将自己制作的关卡与好友分享. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游戏&q ...
- 微信小游戏开发实战教程8-消除处理
这是小蚂蚁游戏开发公众号原创的第42篇,微信小游戏开发实战系列的第8篇,点击上方的#微信小游戏开发实战话题可以查看本系列的所有内容. 本篇主要内容包括如何对网格上满足消除条件的方块进行消除处理. 如果 ...
- 微信小游戏开发实战教程14-闯关模式的实现
这是微信小游戏开发实战系列的第14篇. 本文主要内容是介绍精致1010闯关模式的设计和实现思路. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游戏"系列教程,它会手把手的 ...
- 微信小游戏开发实战教程11-使用本地缓存
这是微信小游戏开发实战系列的第11篇. 本节主要内容:使用本地缓存来记录玩家的设置以及各种类型数据的本地缓存和读取操作. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游戏" ...
- 微信小游戏开发实战教程系列开启
**这是小蚂蚁游戏开发公众号原创的第35篇. 在写完了"人人都能做游戏"的新手系列教程后,我收到了不少反馈.有人告诉我,因为看了我的系列教程做出了自己人生的第一个小游戏.也有人告诉 ...
- 微信小游戏开发实战教程12-广告的开通和接入
微信小游戏开发实战系列的第12篇, 本节内容主要包括:如何尽快的开通广告功能,以及如何将广告接入到微信小游戏中. 如果你没有任何的游戏开发经验,欢迎阅读我的"人人都能做游戏"系列教 ...
- 微信小游戏开发实战教程2-使用表格处理数据
**这是小蚂蚁游戏开发公众号原创的第36篇. 本篇内容包括微信小游戏开发工具中的表格的使用.重点学习表格中的数据的设置,遍历和查找操作,以及如何使用"调试场景"来验证游戏中的逻辑是 ...
- 微信小游戏开发新手教程14-整合到一起，做出你的小游戏
终于到了真正动手做游戏的时刻,在这一节里,我会带你从头开始将我们的"太空保卫者"按照设计方案制作出来.这一节里的内容会非常的多,一遍消化不了,可以多读几遍.别着急,慢慢来. 首先, ...
最新文章
- bzoj 1026: [SCOI2009]windy数 数位DP算法笔记
- string类的用法详解
- 链表_有序链表（给数组排序-应用）
- postman raw带文件_postman raw模拟各种http post请求
- haarcascades---各种分类器xml文件下载地址
- 信息学奥赛一本通（1218：取石子游戏）
- 【ECJTU_ACM 11级队员2012年暑假训练赛（8） - F - A Mame】
- MySQL多版本并发控制机制(MVCC)-源码浅析
- ThinkPHP5学习笔记(6)请求和响应
- 4款时尚优雅宋体Logo字体（可免费商用）
- svnserver 修改配置后重启
- 在Mind+下使用Easy loT实现mqtt消息消息的通讯
- excel文件怎么转成vcf_批量excel转vcf格式的方法
- 阿里内核月报2014年12月
- Python学习日志12 - 办公自动化
- tomcat启动许多gc_tomcat gc问题总结
- 叉积 微分 恒等式_微分几何（一）
- 什么是哲学，兼谈如何理解道德经
- 周杰伦2014新专辑《哎呦，不错哦》
- STC89C52RC定时器2串口通信