码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2019-08-05 14:11:32      阅读:85      评论:0      收藏:0      [点我收藏+]

标签:OLE   一个   修改   艰辛   prope   pre   完整   snippet   strong   

?

终于看完了官方的教程,开始用 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于」,立志做一个每天都有正反馈的人!

 

技术图片

 

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

标签:OLE   一个   修改   艰辛   prope   pre   完整   snippet   strong   

原文地址:https://www.cnblogs.com/yu97271486/p/11302455.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!