我们上篇讲了场景切换并编写了一个场景加组件，这次我们在场景里面下功夫，在场景中创建子界面或子窗口。在Cocos Creator中实现子界面的最好方案就是: 预制件。

1. 生成预制件

Cocos Creator并没有一个新建预制件的功能菜单项，我们可以在场景中先做一个大概的布局，然后在层级管理器中将节点拖动到资源管理器中，看下图：

生成预制件

层级管理器与资源管理器的本质是内存数据与磁盘文件的关系，从层级管理器将节点拖到资源管理器，就是从内存中将数据保存到磁盘上。

需要注意的是场景中的Dialog节点与资源管理器的Dialog预制文件并没有太多的联系，只是他们的数据内容是相同的而已。

2. 编辑预制件

双击预制件文件，进入预制件的独立编辑界面：

编辑预制件

预制件与场景的编辑没有本质的区别，它们都应该保持结构的清晰，注意下面几点：

1. 有意义的节点命名
2. 注意逻辑上的层级关系，比如按钮上显示文字，应该将Label节点放在Button节点的内部
3. 建议预制件的文件与预制件的根节点名字保持一至
4. 根节点的坐标位置设置为x=0, y=0

3. 预制加载组件

cc.Class({
    extends: cc.Component,
    properties: {
        PREFAB: cc.Prefab, //预制件
        parent: cc.Node,   //预制件实例化后所在的父节点
        autoLoad: false,   //自动加载
    },
    //组件加载时检查，是否自动加载预制件
    onLoad() {
        if (this.autoLoad) {
            this.loadPrefab();
        }
    },
    //实例化预制件，设置父节点
    loadPrefab() {
        let node = cc.instantiate(this.PREFAB);
        //当父节点不存在时，使用当前组件为父节点
        node.parent = this.parent || this.node;
    }
});

我们用一个按钮点击显示Dialog对话框，一起看看在编辑器上的配置，见下图：

加载预制件

1. 在场景中添加一个Button控件
2. 将LoadPrefab组件脚本挂载到Button节点上
3. 从资源管理器中将Dialog预制件拖动到DialogLoadPrefab组件PREFAB属性上，这是我们要创建的预制件
4. 从层级管理器将Canvas节点拖动到DialogLoadPrefab组件Parent属性上，这是预制件实例化后的父节点
5. 配置按钮事件，与上篇加载场景相同，就是调用Button节点上的LoadPrefab组件上的loadPrefab函数。

编辑器配置复杂了点，但代码还是比较简单，你也可以在组件代码中监听触摸事件来调用loadPrefab函数，这样可以减化编辑器配置（同样参考场景切换一篇）。

我们的组件上还提供了一个autoLoad属性，可以在组件加载时自动创建预制件，这样可以解决直接将预制件拖入场景后，又去编辑预制件，导致场景中的预制节点与预制文件不同步的问题（预制件的嵌套）。

4. 小结

这篇我们讲解了预制件的生成，就是从内存中保存到磁盘上，之后可以通过cc.instantiate函数将预制件文件实例化为节点。同时分享我对编辑预制件的一点小经验供大家参考。

---

最后编写了一个通用的LoadPrefab组件，可以方便非程序员同学使用。
欢迎关注「奎特尔星球」微信公众号，来我们一起成长！

image