一文带你彻底明白如何实现动态添加子节点及修改子节点属性

终于看完了官方的教程，开始用 Cocos Creator 做第一个游戏——《消灭病毒-重力版》（PS：等做完之后会出一个完整的教程，敬请期待┗( ▔, ▔ )┛！），可是第一步就遇到了坑，本来想动态的通过预制件来添加病毒节点，并修改病毒的血量，可是添加节点之后无论如何都不能对节点的属性进行修改，查了半天资料原来是没有获取子节点的组件，白白浪费了两个小时，这就是自学的弊端吧，有一个好的老师真的是太重要了！为了让大家少走弯路，今天写一个 Demo 来教大家如何实现动态添加子节点及修改子节点属性。

 

1.首先在场景中添加一个 Sprite 节点，添加上对应的纹理：

 

2.在资源管理器目录中添加两个 JS 文件：

 

3.先编辑 star.js 文件脚本如下，给 star 添加血量属性：

/**
 * star.js
 */
cc.Class({
    extends: cc.Component,

    properties: {
        blood:10    // 血量属性
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start () {

    },

    // update (dt) {},
});

 

4.编辑好 star.js 后将脚本挂载到 star 节点上：

 

5.将挂载好脚本组件的 star 节点拖到资源管理器的 prefabs 目录下后就可以在层级管理器中删掉 star 节点了：

 

6.接下来编辑 game.js 脚本，首先在属性中添加预制件属性，之后就可以动态添加子节点并设置子节点属性了（PS：修改子节点属性时千万不要忘记先通过 getComponent( ) 获取子节点的脚本组件。）：

/**
 * game.js
 */
cc.Class({
    extends: cc.Component,

    properties: {
        StarPrefab: {
            default: null,
            type: cc.Prefab
        }
    },

    // LIFE-CYCLE CALLBACKS:

    // onLoad () {},

    start() {
        //动态生成新的子节点并设置位置
        var star_1 = cc.instantiate(this.StarPrefab);
        this.node.addChild(star_1);
        star_1.setPosition(100,100);

        //获取新生成的子节点的属性并修改
        console.log("blood:"+star_1.getComponent('star').blood);
        star_1.getComponent('star').blood = 100;
        console.log("blood:"+star_1.getComponent('star').blood);
        
    },

    // update (dt) {},
});

 

7.接下来将编辑好的 game.js 后将脚本挂载到 Canvas节点上，并将 star 预制件拖到对应属性位置：

 

8.之后就可以预览了，可以看到已经成功动态地添加了 star 节点，并将 star 节点 blood 属性从 10 修改成了 100：

 

结束语：

自学的路上必定充满艰辛，愿大家早日找到适合自己的学习方法，实现自己的游戏梦！

---

我是「Super于」，立志做一个每天都有正反馈的人！欢迎大家关注我的公众号「游戏开发小白变怪兽」，一起进步！