cocos creator基礎-cc.Node(一)場景樹

 

場景樹
1: creator是由一個一個的游戲場景組成，通過代碼邏輯來控制場景跳轉;
2: creator場景是一個樹形結構;
3: 父節點, 孩子節點;
4: cc.Node就是場景樹中的節點對象。
5: 每個節點只要在場景里面，所以任何一個節點都是一個cc.Node;

 

cc.Node屬性
1: name: 獲取節點的名字
2: active: 設置節點的可見性;
3: position: 相對坐標,參照物是父親節點;
4: rotation: 旋轉,順時針為正, 數學逆時針為正;
5: scale: 縮放;
6: anchor: 錨點, 左下角(0, 0), 右上角(1, 1) 可以超過這個范圍可以
7: Size: 大小
8: Color: 環境顏色;
9: Opacity: 透明度,
10: Skew: 扭曲;
11: Group: 分組; 進行碰撞檢測
12: parent: 父親節點的cc.Node;
13: children/childrenCount: 孩子節點的數組;
14: tag : 節點標簽;

 

cc.Component
1:所有的組件都擴展自cc.Component(類, 構造函數);
2:每個cc.Component組件實例都有個成員node,指向它關聯節點的cc.Node;
3: name: 每一個cc.Component組件通過name屬性可以獲得節點的名字;
4: 組件實例入口函數:
onLoad: 在組件加載的時候調用;
start: 組件第一次激活前, 調用在第一次update之前;
update(dt): 每次游戲刷新的時候調用,
lateUpdate(dt): 在update之后調用;
enabled:組件是否被啟動;
onEnable: 組件被允許的時候調用;
onDisable: 組件不被允許的時候調用;

 

代碼組件
1:每個代碼組件實例都繼承自cc.Component(構造函數),所以有一個node數據成員指向cc.Node;
2: cc.Class({...}) 定義導出了一個新的類的構造函數，它繼承自cc.Component;
3: 當為每個節點添加組件的時候,會實例化(new)這個組件類，生成一個組件實例;(js語法new)
4: 當組件加載運行的時候，代碼函數里面的this指向這個組件的實例;
5: 代碼組件在掛載的時候擴展自cc.Component, 里面有個成員node會指向節點(cc.Node);
所以在代碼組件里面，可以使用this.node來訪問這個組件實例說掛載的節點對象;
6: 代碼里訪問cc.Node總要屬性;

 

cc.Node場景樹相關方法

1: 代碼中創建一個節點new cc.Node();
1: addChild; 加一個子節點
2: removeFromParent/ removeAllChildren; 從父節點刪除單個 / 刪除所有孩子
3: setLocalZOrder/ 繪制順序, 在下面（值越大）的會繪制在屏幕的上面;
4: 遍歷節點的子節點;
5: setPosition/getPosition,
6: getChildByName/getChildByTag, getChildByIndex, 局部查找
7: cc.find(): 方便，不通用, 消耗 全局查找

cc.Class({
    
    extends: cc.Component,

    properties: {
        // foo: {
        //    default: null,      // The default value will be used only when the component attaching
        //                           to a node for the first time
        //    url: cc.Texture2D,  // optional, default is typeof default
        //    serializable: true, // optional, default is true
        //    visible: true,      // optional, default is true
        //    displayName: 'Foo', // optional
        //    readonly: false,    // optional, default is false
        // },
        // ...
    },

    // use this for initialization
    // 組件實例在加載的時候運行
    // 組件實例.onLoad(), 組件實例.start;
    onLoad: function () {
        // this, --> 當前組件實例
        console.log(this);
        console.log("this.onLoad");

        // 代碼里面怎么找到節點？
        // 指向這個組件實例所掛載的節點
        console.log("=======================");
        console.log(this.node);
        console.log(this.node.name);
        console.log(this.node.active);
        console.log(this.node.x, this.node.y, this.node.position);
        console.log(this.node.group, this.node.groupIndex);
        if (this.node.parent) {
            console.log(this.node.parent.name);
            console.log("go if @@@@@");
        }
        else {
            // console.log(this.node.parent);
            console.log("go else @@@@@");
        }
        console.log("========================");
        // end 


        // 孩子
        var children = this.node.children; // [cc.Node, cc.Node, cc.Node]
        for(var i = 0; i < children.length; i ++) {
            console.log(children[i].name);
        }
        // end 

        console.log("yes we have:", this.node.childrenCount,"chilren");

        // 添加
        /*var new_node = new cc.Node();
        this.node.addChild(new_node);
        new_node.removeFromParent();
        this.node.removeAllChildren();*/
        // end 
        
        // 查找，局部查找
        var item = this.node.getChildByName("item1");
        console.log("^^^^^^^", item.name);
        // end 

        // 全局, 時間消耗,對於編寫通過用的模塊
        item = cc.find("Canvas/parent/item1");
        console.log("#######", item.name);
        // end 

        var pos = item.getPosition(); // 相對位置
        console.log("pos = ", pos);
        pos = cc.p(100, 100); // cc.Vec,
        item.setPosition(pos);

        var item2 = this.node.getChildByName("item2");
        item2.setLocalZOrder(100);
        item2.active = false; //  
    },

    // 組件實例
    start: function() {

    },


    // called every frame, uncomment this function to activate update callback
    // 組件實例.update
    update: function (dt) {
        
    },
});