CreatorPrimer|组件编码心得(下)

这次是《组件编码心得》的最后一篇,第一次我们讲到将组件分为两大类:功能型控制型;第二篇介绍了功能型组件与控制型组件的编码上需要注意的地方,最后还提到控制型组件与预制件的组合形成独立模块,这次分享我在预制件上编码、编辑时的一点心得。

1. 预制件与控制组件的关系


简单梳理一下配套的预制件与控制型组件的关系是:

肉体与灵魂 显示与控制

预制体由1~n个节点构成,就像人体的骨骼,挂载到各个节点的功能型组件则为血脉、神经以支撑整体模块的运作,而控制组件就是这个模块的灵魂。

还有一种更有意思比喻,预制件与控制组件是朋友与朋友的关系,到底那男女如何对应大家可以琢磨一下!

2. 控制组件编码心得


其实前一篇只介绍了控制组件的对内、对外要点,在编码上具体要如何去做没有细说,请看下图:

上一篇说过,不应该用properties属性做成员节点、组件访问,他是对外的接口。对界面设计无关的属性接口不要暴露到组件面板上,方案是使用引擎API: getChildByName\cc.find等,或者自己包装过的工具函数,比如:uikiller。

3. 预制件编辑心得


上面讲的是控制组件的编写,我们再来看预制件的编辑,需要注意些什么:

下面我对图中的内容做一个简单的说明:

1. 配套的组件与预制件文件同名、放在同一路径是为了方便管理,要走一起走,要留一起留下,天生一对!看下面的例子:

将有关联的一组预制件与组件脚本放在一个路径下,成对的命名一至。

2. 将控制组件挂载到预制件的根节点上,最好只挂载一个组件,由它来统领当前预制件及下面的子节点,看下图:

上图中预制体文件名预制体根节点名字组件的名字三者保持一至,当把这个预制实例化出来时,在编辑器上直接可看到它的控制组件,请看下图:

在使用代码实例化预制件时,可以用预制体的名字索引到匹配的组件对象,看下面代码:

cc.Class({
    properties: {
        //这里用全大写命名预制资源变量,代码中不要修改它
        NUMBER_DOT_PREFAB: cc.Prefab, 
    }
    onLoad() {
        let node = cc.instantiate(this.NUMBER_DOT_PREFAB);
        //使用硬编码'NumberDot'获取组件对象
        //let numberDot = node.getComponent('NumberDot');


        //组件与预制件文件同名,
        //通过预制对象名,直接取出实例化的预制件根节点组件对象
        let numberDot = node.getComponent(this.NUMBER_DOT_PREFAB.name);

        numberDot.xxx = ...;
    }
})

不论是在编辑器中还是在代码里,保持命名统一,代码也相对更简洁、灵活。

3. 最后节点命名要有意义、保持清晰层级关系这些是为了让预制件经后可维护,一套规范化的节点命名规范还是很有必要的。

我习惯以下划线“_”为前缀,在代码中会获取这类节点,将规范告诉UI编辑人员,遇到以下划线”_“开头的节点不需要随便删除修改,其它非下划”_“的节点可以随便操作。

保持稳定的UI树结构是因为控制型组件中会使用到getChildByName、cc.find、getComponent等函数来获取子节点,所以节点树不能随意改动,如果要修改同时也需要修改组件代码。

4. 小结


本篇主是介绍组件与预制体的结合,这也是《组件心得三部曲》的最后一篇分享。单纯写好代码并不是最重要的,探索如何高效率、高质量产出代码的方法提升生产力才是关键,且更具价值,希望我的一点经验能起到抛砖引玉的作用,欢迎留言讨论!

本文分享自微信公众号 - Creator星球游戏开发社区(creator-star)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-10-19

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

扫码关注云+社区

领取腾讯云代金券