微信小游戏开发实战3:绘制网格
Posted 小蚂蚁教你做游戏
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小游戏开发实战3:绘制网格相关的知识,希望对你有一定的参考价值。
在“精致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:绘制网格的主要内容,如果未能解决你的问题,请参考以下文章
猿创征文|Unity开发实战—— 2D项目1 - Ruby‘s Adventure 游戏地图绘制(2-1)