終於看完了官方的教程,開始用 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於」,立志做一個每天都有正反饋的人!