3

彻底搞清微信小游戏开发中的循环的使用

 1 year ago
source link: https://blog.51cto.com/u_15530520/5434567
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.

彻底搞清微信小游戏开发中的循环的使用

原创

小蚂蚁教你做游戏 2022-07-01 16:13:23 博主文章分类:微信小游戏开发 ©著作权

文章标签 游戏开发 文章分类 手游开发 游戏开发 yyds干货盘点 阅读数180

循环是游戏开发中一定会用到的逻辑,不论是你想控制移动,或者进行遍历,亦或者不停的去执行某一段逻辑,都需要使用循环。那么对于循环的使用你彻底了解了吗?今天这篇文章就帮助你彻底的弄懂微信小游戏开发中的循环的用法。

首先我们来看一下微信小游戏制作工具中与循环有关的积木块。

彻底搞清微信小游戏开发中的循环的使用_游戏开发

前三个为重复执行,最后一个为逻辑循环。在使用之前,我们先弄清楚重复执行和逻辑循环的区别。

先来看一下官方文档的解释。

重复执行频率跟,约16.67ms一次

重复执行(n)次

有限次的循环,执行频率跟,约16.67ms一次

重复执行直到<条件>

一直重复执行,直到<条件>为

逻辑循环(n)次

有限次的循环,在当前帧全部执行完毕,在逻辑循环中的克隆会立即克隆

看不懂没关系,先接着往下看。

游戏开发中的帧的概念

想要彻底理解这两种循环的区别,首先必须要理解一个概念,叫做“帧”。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_02

“帧”在游戏开发中是一个常用的概念,想象一下小时候看的胶片电影,放映机上要安放一大盘胶片,最终看到的流畅的电影的画面其实是由胶片中的一个一个的图片构成的。因为人眼会有“视觉停留”,所以只要图片切换的足够快,那看上去就是流畅的画面。

你可以把游戏中的一帧类比成胶片中的一个图片,电影中的一帧只需要处理图像和声音,游戏中的一帧除了图像和声音,还需要处理更多的东西,例如输入操作(是否点击了屏幕,手指是否在屏幕上滑动等),计算操作(游戏中的角色位于哪里?他当前正在射击吗?还是正在跳跃...)等。

当前的游戏通常都是1秒钟运行60帧,1秒钟等于1000毫秒,那么1帧也就相当于16.67(1000/60)毫秒了。

“帧”的概念理解了,我们再看一下这两种循环。

  • 重复执行:1帧循环一次。假设循环60次,那么总计需要1秒钟的时间执行完。
  • 逻辑循环:在1帧之内执行完所有循环。假设循环60次,那么这60次的循环会在一帧之内执行完毕,也就是只需要16.67毫秒就可以执行完。

为了更好的理解两者间的区别,我们在开发工具中制作一个小例子。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_03

如图,在场景中增加了一个红球,一个篮球,和一个“开始移动”按钮。我们要实现如下的逻辑:点击“开始移动”按钮,两个小球同时开始向上移动,不同的是“红球”使用“重复执行”积木块来处理移动逻辑,而“蓝球”使用“逻辑循环”积木块来处理移动逻辑。

红球的移动逻辑。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_04

蓝球的移动逻辑。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_05

按钮上增加点击时发送“移动”通知。然后两个小球收到“移动”通知后会同时向上移动。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_06

预览场景,看一下结果:

彻底搞清微信小游戏开发中的循环的使用_游戏开发_07

使用“重复执行”的红球大概需要将近1.67秒(循环100次/每秒60次)的时间移动到目标位置,而使用“逻辑循环”的篮球几乎是瞬间移动到目标位置。

现在再回到上方看一下官方文档中对于两种循环的解释,现在是不是比较好理解了呢?

从上方的例子中可以看出“重复执行”的循环积木适用于游戏中的物体的运动,例如不停移动的飞机,云彩,除了移动当然也可以用于旋转或者缩放,总之如果是与运动相关的循环,我就应该选用“重复执行”积木。

使用循环进行克隆

接下来我们再来看一下循环在克隆中的使用。通常我们需要在游戏中克隆很多的物体,例如不停来进攻的敌人,不停发射的子弹等等,当需要克隆很多的物体时,我们就需要使用循环了。

现在假设我们需要连续的克隆10个小球,并且让这些小球从下往上依次排列。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_08

如图这里我们仍然是使用了一个红球和一个蓝球,红球使用“重复执行”进行克隆,篮球使用“逻辑循环”进行克隆。

新建两个全局变量,用于计算新克隆的球的位置。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_09

接着看一下红球的逻辑。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_10

蓝球与红球的逻辑一样,唯一的区别就是使用“逻辑循环”积木。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_11

运行一下,看看最终结果。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_12

可以看到点击克隆后,篮球是瞬间克隆了 10 个,而红球是有一个过渡的,结合上面我们所讲的帧的内容,红球是一帧克隆一个的。

在游戏开发中,如果需要在短时间内大量的克隆物体,需要选择正确的循环去进行克隆操作,例如在射击游戏中发射子弹时,子弹应该是有一定的时间间隔的,此时如果你使用了“逻辑循环”,就会在瞬间创建出大量的子弹,很显然这不是我们想要的效果。另外,在循环克隆时,尤其需要注意“逻辑循环”的使用,因为在 1 帧之内克隆大量的物体时,很有可能会导致你的游戏崩溃。

利用“重复执行”积木块的每帧执行一次的特性,可以实现逐个创建物体的效果,看起来非常不错,在精致1010中创建方块时,就是使用了这样的方式。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_13

使用双重循环

在游戏开发中我们也会经常遇到需要使用双重循环的时候,例如我们需要遍历一个 5 行 5 列的表格,或者需要创建一个 5 行 5 列的对象等。所谓的双重循环其实就是同时使用两个循环,只不过这两个循环是嵌套的,即循环中的循环。

下面我们就结合着克隆,使用双重循环来实现创建 5 行 5 列的小球。

首先,创建一个场景,放置一个红色的小球和按钮,当点击按钮后,会创建 5x5 的共计25个小球。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_14

新建两个全局变量“行”和“列”用于计算新克隆出来的小球的水平和竖直的位置。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_15

接着来看一下红色小球的逻辑。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_16

运行一下看看最终的结果。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_17

使用双重循环最重要的地方在于要捋清自己的思路,是想一行一行的创建还是想一列一列的创建,然后根据具体的需求决定哪层循环在外,哪层循环在内。至于三重循环,即循环中的循环中的循环,在游戏开发中用到的比较少,其实道理都一样,只不过又多了一层循环而已。

在循环的中退出

在使用循环时,我们也经常会遇到需要中途退出的情况,比如说在循环执行到达某个条件时,我们就不需要再继续循环了。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_18

我们可以使用这两块积木块来退出当前的循环。

以上方的创建小球为例,比如说当前我们只想要创建三行小球就满足条件了,这时我们要让循环退出,不需要再继续创建剩余的两行了。这时我们就可以通过条件判断,使用退出循环积木块来达到目的。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_19

再次运行一下。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_20

创建 3 行后退出循环,不会再继续创建了。

“退出逻辑循环”积木与“退出循环”积木的用法一样,只不过使用于逻辑循环中。

带条件的循环

最后,我们再来看一下重复执行中的一个非常好用的积木块“重复执行直到….”,这个积木块可以让这个循环一直执行,直到达成某个条件时循环才停止。

一个简单的小例子,我们让正方形不停的旋转,当点击“停”按钮后,停止旋转。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_21

首先创建一个“停下来”的全局变量。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_22

看一下正方形的逻辑。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_23

当点击按钮时,将“停下来”设置为1。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_24

预览一下。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_25

红色正方形一直旋转,点击“停”后,停止旋转。

这个带停止条件的循环可以用于很多的场景,例如敌人一直在巡逻,知道你靠近时停止巡逻,改为追击,雨一直下直到太阳出来后停止等等。

最后总结一下,在这篇文章中我们了解了下面这些关于循环内容:

  • 重复执行与逻辑循环的区别
  • 循环在物体运动中的使用
  • 循环在克隆中的使用
  • 使用双重循环
  • 在循环中途停止循环
  • 使用带条件的循环

我是会做游戏也会教你做游戏的小蚂蚁,欢迎关注微信公众号【小蚂蚁教你做游戏】,领取全网最全的微信小游戏开发原创教程资料,每天学点儿游戏开发知识。

彻底搞清微信小游戏开发中的循环的使用_游戏开发_26

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK