专栏首页Creator星球游戏开发社区async.js在Cocos Creator中的应用

async.js在Cocos Creator中的应用

有网友在公众号上提问题,使用async.js在微信小游戏环境报错,由于Shawn这段时间有点懒癌发作,没有即时回复留言,已经超过48小时回复不了,在此表示歉意,今天用这篇教程分享async.js相关的的一些使用经验,希望对大家有所帮助!

一、在Cocos Creator中使用async.js库

在Cocos Creator项目中async.js有两种引方式:

  1. npm安装方式
  2. 源码插件方式

下面分别介绍这两种的具体操作步骤

npm安装方式

使用npm管理三方模块,首先需要在Cocos Creator项目中初始化npm的包管理配置文件package.json,在输入行中输入:

> npm init

输入命令后,会要求输入一些信息,这不是我们的重点,一路回车即可,操作完成后会在项目根目录创建一个package.json的文件,内容如下:

然后我们使用npm安装async模块:

npm install async --save

输入上面命令后,会输出一些信息,没有意外,不到10秒就安装好了,看下图:

安装好后npm会在当前目录创建一个node_modules的目录,打开后你可以看到async模块目录:

确保node_modules下的async目录存在,就可以在项目中使用async的。

2. 源码插件方式

有的人可能不习惯使用npm方式,我们可以从npm模块中将async.js的发布源码复制到工程assets目录中,然后把node_modules目录删除,看下图:

只需要将aysnc.js或async.min.js其中一个文件入assets就可以了。将文件放入assets目录,激活Cocos Creator时会提示,是否需要设置为插件,看下图:

设置为插件async会成为一个全局模块,在使用的地方不需要用require进行导入,直接直接使用即可。

以上这两种方式构建项目都可以让async.js在微信小游戏环境中运行。

二、async.js的应用场景

Shawn在使用async主要应对下面三种场景

1. 创建大量对象时减少卡顿

上图中使用async.eachLimit可以控制在遍历array变量时的并发数量,每帧调用20次this._createTile函数,它是在实例化prefab是一个耗时的操作。

我这里做了一个小测试,比较使用普通循环async异步实例化1000个prefab的情况:

不知道你是否从视频中看出点什么? 使用普通循环创建时,可以看到视频中红色方块有瞬间的停顿,因为它是在1帧里面做了1000次cc.instantiate,async异步实例化是将这1000次循环分散到了100帧去做(其实总消耗的时间会更长,注意ScrollView的滚动条)。

2. 让异步逻辑流程更清晰

当有一系列异步函数需要串行执行时,asyc.series可以很方便帮助我们解决此问题,从回调地狱中解脱出来。

3. 让异步动画灵活多变

动画的执行都需要有时间,因此也存在大量的异步控制逻辑,我们可以使用一个个的小函数将动画播放逻辑控制起来,并提供一个完成回调。

然后再用async.series将它们串连起来,而且动画的播放顺序可以根据需求灵活调整。

Shawn之前还有一篇教程《英雄之舞—凌波微步(利用async.js编写异步动画)》中对async.js在动画控制中有更多的说明,如有兴趣可以参考此篇教程。

三、小结

异步编程是JavaScript语言的一大特色,异步控制的方案流行的还有Promises、async-await,async.js仅仅只是其中的一种,如果你有更好的JavaScript异步编程经验或方案、案例欢迎留言讨论。

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-03-10

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 6. Jetpack---Paging你知道怎样上拉加载吗?

    版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。

    Hankkin
  • Excel VBA解读(160): 数据结构—字典对象的基本操作(续)

    Set dict = CreateObject("Scripting.Dictionary")

    fanjy
  • express捕获全局异常的三种方法

    express的路由里抛出异常后,全局中间件没办法捕获,需要在所有的路由函数里写try catch,这坑爹的逻辑让人每次都要多写n行代码 官方错误捕获中件间代...

    雪山飞猪
  • 《你不知道的JavaScript》:ES6 Promise API 详解

    new Promise(…) 构造器的参数必须提供一个函数回调。这个回调是同步的或者立即调用的。这个函数又接受两个函数回调参数,用以支持promise的决议。通...

    前端_AWhile
  • 一个Java程序猿眼中的前后端分离以及Vue.js入门

    前后端不分,Jsp 是一个非常典型写法,Jsp 将 HTML 和 Java 代码结合在一起,刚开始的时候,确实提高了生产力,但是时间久了,大伙就发现 Jsp 存...

    南风
  • 爬虫篇| Requests库详细的用法(四)

    对了解一些爬虫的基本理念,掌握爬虫爬取的流程有所帮助。入门之后,我们就需要学习一些更加高级的内容和工具来方便我们的爬取。那么简单介绍一下 requests 库的...

    用户6029108
  • Vue框架赶紧来了解一下

    优点:更轻量,单页面,简单易学 缺点:不支持IE8 开发团队:中国国内团队开发,作者:尤雨溪

    用户6029108
  • chrome extension develop

    打开extension调试模式,加载文件目录,在chrome extension按钮出现后,右键inspect popup,添加调试断点,F5进入断点

    sofu456
  • 兄弟组件之间联动--vue开发app点击字母展示地区列表

    下图这种地区搜索方式在很多app中都很常见,今天就使用vue框架中的 better-scroll 第三方包来实现页面滚动和点击侧边栏字母该字母开头的地区列表置顶...

    凯哥Java
  • 《你不知道的JavaScript》:Promise使用的较佳实践

    Promise的设计局限性有一个让人掉坑的地方,即Promise链中错误容易被无意中默默忽略掉。

    前端_AWhile

扫码关注云+社区

领取腾讯云代金券