CreatorPrimer | 加载预制件

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

1. 生成预制件

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

CreatorPrimer | 加载预制件_第1张图片

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

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

2. 编辑预制件

双击预制件文件,进入预制件的独立编辑界面:

CreatorPrimer | 加载预制件_第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对话框,一起看看在编辑器上的配置,见下图:

CreatorPrimer | 加载预制件_第3张图片

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

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

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

4. 小结

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

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

CreatorPrimer | 加载预制件_第4张图片

你可能感兴趣的:(Cocos,Creator基础教程)