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

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


本文主要内容为游戏开发中常用的循环的使用方法。

如果你没有任何的游戏开发经验,欢迎阅读我的“人人都能做游戏”系列教程,它会手把手的教你做出自己的第一个小游戏。


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


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


640.png


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


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


重复执行

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

重复执行(n)次

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

重复执行直到<条件>

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

逻辑循环(n)次

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


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


游戏开发中的帧的概念


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


640.jpg


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


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


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


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


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


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


c2e21c5c338bc35a9dfb676bd6de6e83.png


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


红球的移动逻辑。


255e0097d872ee7018985ba2e018819d.png


蓝球的移动逻辑。


2892483179bf45419927a6d4e3df7486.png


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


db2e037ba04f8f3476889ab125706a05.png


预览场景,看一下结果:


fd036f8d6cf839b6f5cb07800c7ef9c7.gif


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


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


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


使用循环进行克隆


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


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


293683f73a37653a599ac9e94ea468c4.png


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


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


36ff2d6f3645df9c1d75898ae0058cd3.png


接着看一下红球的逻辑。


a3452f087bcbd4fc535a089b35c32747.png


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


64339555aca2f15dc88bfd8694fece64.png


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


e3e8ddcb5cfb6e7de44f3cb64d3b07a3.gif


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


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


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


fbabadbc5bb589b69b0a3d81ccb75316.gif

相关文章
|
1月前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
485 7
|
1月前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
541 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
111 7
ly~
|
2月前
|
存储 供应链 小程序
除了微信小程序,PHP 还可以用于开发哪些类型的小程序?
除了微信小程序,PHP 还可用于开发多种类型的小程序,包括支付宝小程序、百度智能小程序、抖音小程序、企业内部小程序及行业特定小程序。在电商、生活服务、资讯、工具、娱乐、营销等领域,PHP 能有效管理商品信息、订单处理、支付接口、内容抓取、复杂计算、游戏数据、活动规则等多种业务。同时,在企业内部,PHP 可提升工作效率,实现审批流程、文件共享、生产计划等功能;在医疗和教育等行业,PHP 能管理患者信息、在线问诊、课程资源、成绩查询等重要数据。
ly~
78 6
|
1月前
|
数据可视化 前端开发 小程序
5G时代-探索微信小游戏
5G时代-探索微信小游戏
24 2
5G时代-探索微信小游戏
|
1月前
|
缓存 小程序 索引
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
uni-app开发微信小程序时vant组件van-tabs的使用陷阱及解决方案
193 1
|
1月前
|
缓存 数据可视化 Serverless
微信小游戏 案例一 像素飞机
微信小游戏 案例一 像素飞机
19 2
|
1月前
|
小程序 前端开发 数据安全/隐私保护
微信小程序全栈开发中的身份认证与授权机制
【10月更文挑战第3天】随着移动互联网的发展,微信小程序凭借便捷的用户体验和强大的社交传播能力,成为企业拓展业务的新渠道。本文探讨了小程序全栈开发中的身份认证与授权机制,包括手机号码验证、微信登录、第三方登录及角色权限控制等方法,并强调了安全性、用户体验和合规性的重要性,帮助开发者更好地理解和应用这一关键技术。
63 5
|
1月前
|
小程序 前端开发 JavaScript
微信小程序全栈开发中的PWA技术应用
【10月更文挑战第3天】微信小程序作为新兴应用形态,凭借便捷体验与社交传播能力,成为企业拓展业务的新渠道。本文探讨了微信小程序全栈开发中的PWA技术应用,包括离线访问、后台运行、桌面图标及原生体验等方面,助力开发者提升小程序性能与用户体验。PWA技术在不同平台的兼容性、性能优化及用户体验是实践中需注意的关键点。
60 5
|
1月前
|
小程序 JavaScript API
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机
这篇文章介绍了如何在uni-app和微信小程序中实现将图片保存到用户手机相册的功能。
547 0
微信小程序开发之:保存图片到手机,使用uni-app 开发小程序;还有微信原生保存图片到手机