Cocos Creator 大厅+子游戏，从入门到进阶！

在去年 Cocos Creator 2.4 发布的时候，Cocos 老朋友 B 站 up 主 Nowpaper 为我们做了一次版本更新的盘点，对其中 Asset Manager 和 Bundle 部分专门做了重点盘点，并用一个小例子展示能力，讲解了一波应用场景。

视频非常受欢迎，也收到了许多小伙伴更多关于实际使用问题的咨询。Nowpaper 发现很多问题是由于使用方法不对造成的，所以他抽时间专门撰写本篇文章，详细讲解 Bundle 的使用方法，并通过三个实际应用展示。欢迎阅读！

此外，Nowpaper 曾做客我们 Cocos 人物志接受专访，感兴趣的同学可以点击阅读噢。

01

目录

本文将会按照下面的结构：

1. 例子展示 

2. 手撸工程

   2.1 同项目 Bundle，动态加载

   2.2 跨项目 Bundle，大厅+子游戏

   2.3 跨项目 Bundle，代码互调 

3. 踩坑总结

本文有视频版本，目前还未剪辑完成，敬请期待发布完成。

工程项目已发布至 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 的场景资源。