我们上篇讲了场景切换并编写了一个场景加组件，这次我们在场景里面下功夫，在场景中创建子界面或子窗口。在Cocos Creator中实现子界面的最好方案就是: 预制件。
1. 生成预制件
Cocos Creator并没有一个新建预制件的功能菜单项，我们可以在场景中先做一个大概的布局，然后在层级管理器中将节点拖动到资源管理器中，看下图：
层级管理器与资源管理器的本质是内存数据与磁盘文件的关系，从层级管理器将节点拖到资源管理器，就是从内存中将数据保存到磁盘上。
需要注意的是场景中的Dialog节点与资源管理器的Dialog预制文件并没有太多的联系，只是他们的数据内容是相同的而已。
2. 编辑预制件
双击预制件文件，进入预制件的独立编辑界面：
预制件与场景的编辑没有本质的区别，它们都应该保持结构的清晰，注意下面几点：
- 有意义的节点命名
- 注意逻辑上的层级关系，比如按钮上显示文字，应该将Label节点放在Button节点的内部
- 建议预制件的文件与预制件的根节点名字保持一至
- 根节点的坐标位置设置为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对话框，一起看看在编辑器上的配置，见下图：
- 在场景中添加一个Button控件
- 将LoadPrefab组件脚本挂载到Button节点上
- 从资源管理器中将Dialog预制件拖动到DialogLoadPrefab组件PREFAB属性上，这是我们要创建的预制件
- 从层级管理器将Canvas节点拖动到DialogLoadPrefab组件Parent属性上，这是预制件实例化后的父节点
- 配置按钮事件，与上篇加载场景相同，就是调用Button节点上的LoadPrefab组件上的loadPrefab函数。
编辑器配置复杂了点，但代码还是比较简单，你也可以在组件代码中监听触摸事件来调用loadPrefab函数，这样可以减化编辑器配置（同样参考场景切换一篇）。
我们的组件上还提供了一个autoLoad属性，可以在组件加载时自动创建预制件，这样可以解决直接将预制件拖入场景后，又去编辑预制件，导致场景中的预制节点与预制文件不同步的问题（预制件的嵌套）。
4. 小结
这篇我们讲解了预制件的生成，就是从内存中保存到磁盘上，之后可以通过cc.instantiate函数将预制件文件实例化为节点。同时分享我对编辑预制件的一点小经验供大家参考。
最后编写了一个通用的LoadPrefab组件，可以方便非程序员同学使用。
欢迎关注「奎特尔星球」微信公众号，来我们一起成长！