微信小游戏开发实战5-重复执行和逻辑循环的区别

简介: **这是小蚂蚁游戏开发公众号原创的第40篇。本篇主要内容包括了解帧的概念,以及理解重复执行和逻辑循环这两种循环积木块之间的区别。

将循环分为重复执行和逻辑循环,应该是微信小游戏开发工具中所特有的。因为之前做游戏,无论是使用哪种工具或者哪种编程语言,对于循环来说,都只有一种,不会存在歧义或者误用。但是这里将循环分为了两种,如果误用的话会导致出现一些奇怪的问题。所以需要单独拿出来区分一下,避免掉进这个“坑”。


首先来看一下官方文档,对于这两种循环的解释。

640.png

重复执行

重复执行频率跟游戏的刷新频率一致,约16.67ms一次

重复执行(n)次

有限次的循环,执行频率跟游戏的刷新频率一致,约16.67ms一次

重复执行直到<条件>

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

逻辑循环(n)次

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

如果你看完这个解释感觉还是无法理解,没关系,我会以更直白的方式解释一下,并且我们会结合一个小例子,就容易理解了。


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


640.jpg

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


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


当前的游戏通常都是1秒钟运行60帧,1秒钟等于1000毫秒,那么1帧也就相当于16.67毫秒了。想象一下游戏在1秒钟之内需要处理图像,声音,输入,计算等操作60次。是不是有点儿厉害?


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


  • 重复执行:1帧循环一次。假设循环60次,那么总计需要1秒钟的时间执行完。

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

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

640.png

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


红球的移动逻辑。

640.png


蓝球的移动逻辑。

640.png


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

640.png


预览场景,看一下结果:

640.gif

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


对照着例子再重新理解一下这两种循环之间的差异,是不是就比较容易理解了呢?


在“绘制网格”一节中,我们使用了“重复执行”的循环来绘制100个格子,它看起来是这个样子的。

640.gif

这种网格绘制的方式看起来还是蛮不错的,但是如果你希望的是当游戏启动后,立刻呈现一个完整的网格的话,那么就要将网格绘制逻辑中的“重复执行”积木块更换为“逻辑执行”。

因为思维的惯性,我忽略了这两种循环的区别,一直都是使用“重复执行”来处理循环,但是,当我需要遍历100个网格中的数据进行验证和匹配时,原本想要的是立刻马上得到结果,因为误用了循环,导致计算结果被往后延迟了。找了很长时间的问题,最后才发现问题出在了循环上。希望你能提前了解这两者之间的差异,避免掉进这个“坑”。


总结一下:


这一节里,我们了解了“帧”的概念,并且了解了“重复执行”和“逻辑循环”这两种循环的区别。“重复执行”比较适合用于游戏中的物体的移动,“逻辑循环”比较适合用于游戏中的计算。理解了它们的区别,才能更好的进行应用,在不同的情境下使用不同的循环。


练一下:


在第二节使用表格处理数据中,我们使用了“重复执行”积木来对表格进行遍历和检查,对于处理计算来说,这显然是错误的。试着用“逻辑循环”积木替换“重复执行”积木,然后通过“调试场景”看一下这两者之间的计算时间的差异。


如果你对游戏开发感兴趣,欢迎关注我,如果你有对游戏开发感兴趣的朋友,也欢迎把这个系列文章推荐给他。



相关文章
|
3月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
832 7
|
3月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
855 1
|
3月前
|
数据可视化 前端开发 小程序
5G时代-探索微信小游戏
5G时代-探索微信小游戏
39 2
5G时代-探索微信小游戏
|
3月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
284 1
|
3月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
29 2
|
3月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
1446 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
|
3月前
|
存储 小程序 安全
微信的开发管理都需要配置什么?
【10月更文挑战第17天】微信的开发管理都需要配置什么?
44 0
|
3月前
|
JavaScript 小程序 开发者
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
uni-app开发实战:利用Vue混入(mixin)实现微信小程序全局分享功能,一键发送给朋友、分享到朋友圈、复制链接
630 0
|
3月前
|
小程序
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
uni-app开发微信小程序使用onPullDownRefresh(下拉刷新)总结
765 0
|
3月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
207 7