在去年 Cocos Creator 2.4 发布的时候,Cocos 老朋友 B 站 up 主 Nowpaper 为我们做了一次版本更新的盘点,对其中 Asset Manager 和 Bundle 部分专门做了重点盘点,并用一个小例子展示能力,讲解了一波应用场景。
视频非常受欢迎,也收到了许多小伙伴更多关于实际使用问题的咨询。Nowpaper 发现很多问题是由于使用方法不对造成的,所以他抽时间专门撰写本篇文章,详细讲解 Bundle 的使用方法,并通过三个实际应用展示。欢迎阅读!
此外,Nowpaper 曾做客我们 Cocos 人物志接受专访,感兴趣的同学可以点击阅读噢。
01
目录
本文将会按照下面的结构:
例子展示
手撸工程
2.1 同项目 Bundle,动态加载
2.2 跨项目 Bundle,大厅+子游戏
2.3 跨项目 Bundle,代码互调
踩坑总结
本文有视频版本,目前还未剪辑完成,敬请期待发布完成。
工程项目已发布至 GitHub 地址在文章后面 ╮( ̄▽  ̄)╭
02
例子
我将完成结果先放在前面,帮助各位可以快速找到自己所需要的部分。
第一个例子,同项目 Bundle,动态加载
直接加载内部的 Bundle 包,它是项目本身的某个目录,只不过被设置为 Bundle,里面包含了动画、脚本、场景、资源等。
我们可以看到,项目运行起来的时候,被设置为 Bundle 的部分,不会被加载,只有主动加载的时候才会载入,通过 API 也可以读取内部的素材,就像我们现在做的这样,读取了一个 Prefab 创建成 Node,还有就是读取一张图片显示出来。
第二个例子,跨项目 Bundle,大厅+子游戏
加载另外一个项目的 Bundle 包,它没有和主项目在一起,而是另外一个 Cocos Creator 项目的一部分,我把生成的素材放在一个资源服务器上,让主项目去载入它,然后运行,通过远程载入创建出来,它是实现动态加载的核心,一会儿后面咱们详细讲解。
第三个例子,跨项目 Bundle,代码互相调方案
不同 Bundle 内资源或代码的互相调用测试,这个例子主项目为子游戏 Bundle 提供调用接口,我们可以看到除了能调用主项目,也可以通过一些方法被调用,那么怎么做到呢?且听后面分解。
03
手撸详解
看完例子,那么我们把上面的全部手撸一遍,注意本视频中的所有代码为 TypeScript,使用的是 Cocos Creator 2.4.5。
一、同项目 Bundle,动态加载
首先我们先创建一个 Cocos Creator 项目,这个项目必须使用的 v2.4.0 以上的版本创建,这样才能有 Bundle 的特性,项目名称叫做 BundleLobby。
打开项目,建立一些目录和场景,随便来一个目录就叫:aaa 吧。这个名字越随便越好,以后就会设置成为 Bundle,在它下面建立一些基本的项目目录,比如 res、src,用来存放你的资源和代码。
创建一个主场景叫做 Main,搭建一下基本的 UI 功能,这里做了两个按钮:一个用来读取,一个用来跳转,还有一个进度条,用来表示 Bundle 的读取成功与否。
现在为 aaa 的目录里增加一些素材,创建一个 aaa 的场景,简单摆放一下,为了方便展示它的复杂性,所以我加入了一个 Spine 动画,并且把 spineboy 制作成了一个 Prefab。
先实现一下基本的场景跳转,也就是没有把它配置成为 Bundle 的情况下,它只是整个项目的一部分,写一些代码让 Main 和 aaa 两个场景互相跳转,需要完成两个组件代码,我这里为 aaa 场景和 Main 场景各自加入了一个组件 Script,并且为各自的场景添加了场景跳转代码:
onClickSceneTo(){
cc.director.loadScene('aaa');
}
这种跳转是最普通的情况,当把 aaa 这个目录给配置成为 Bundle 之后,就不一样了。
此时跳转到 aaa 的按钮已经不管用了,我们看调试信息里已经给出了报错信息,它找不到名为 aaa 的场景资源。