cc.Node(一)场景树

场景树

cc.Node是场景树中的节点对象。
每个节点只要在场景里面，所以任何一个节点都是一个cc.Node

Screen Shot 2019-01-24 at 22.51.02.png

cc.Component

1: 所有的组件都扩展自cc.Component(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: 组件不被允许的时候调用;

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 : 节点标签;

代码组件

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.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 


        // 孩子
        // children 是数组，可以遍历数组，也就是遍历节点的所有子节点
        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");

        // cc.Node场景树相关方法

        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 

        // 获取节点在父节点坐标系中的位置（x, y）
        var pos = item.getPosition(); // 相对位置
        console.log("pos = ", pos);
        pos = cc.p(100, 100); // cc.Vec,
        // 设置节点在父节点坐标系中的位置
        item.setPosition(pos);

        // setLocalZOrder 这个方法找不到了，改变绘制顺序
        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) {
        
    },
});