cc.Node 的坐标空间与ACTION的学习

1、创建二维的向量坐标

    //创建向量坐标方法一
    let new_pos1 = new cc.Vec2(100, 100);
    //创建向量坐标方法二
    let new_pos2 = cc.v2(200, 200);
    console.log(new_pos1, new_pos2);
    //输出 Vec2 {x: 100, y: 100} Vec2 {x: 200, y: 200}
    //求向量之间的减法
    let new_dir = new_pos2.sub(new_pos1);
    console.log(new_dir);
    //输出 Vec2 {x: 100, y: 100}
    //求向量之间的加法
    let new_plus = new_pos1.add(new_pos2);
    console.log(new_plus);
    //输出 Vec2 {x: 300, y: 300}
    //求向量的长度
    let new_length = new_dir.mag();
    console.log(new_length);
    //输出 141.4213562373095

2、创建宽度和高度的信息对象，矩形对象

    //创建宽高度的方法一
    let new_size1 = new cc.Size(200, 200);
    //创建宽高度的方法二
    let new_size2 = cc.size(300, 300);
    console.log(new_size1, new_size2);
    //输出 Size {width: 200, height: 200} Size {width: 300, height: 300}

    //创建矩形的方法一
    let new_rect1 = new cc.Rect(0, 0, 100, 100);
    //创建矩形的方法二
    let new_rect2 = cc.rect(0, 0, 200, 200);
    console.log(new_rect1, new_rect2);
    //输出 Rect {x: 0, y: 0, width: 100, height: 100} Rect {x: 0, y: 0, width: 200, height: 200}

    //判断是否被包含的关系
    console.log(cc.rect(0, 0, 300, 300).contains(cc.v2(200, 200)));
    //判断矩形是否包含指定的点，输出 true
    console.log(cc.rect(0, 0, 100, 100).contains(cc.v2(200, 200)));
    //输出 false

    //intersects 判断两个矩形是否相交
    console.log(cc.rect(0, 0, 200, 200).intersects(cc.rect(100, 100, 200, 200)));
    //输出true

3、creator 坐标系

坐标系分成两个部份，

世界(屏幕)坐标系=>以canvas的左下脚为原点

相对(节点)坐标系=>1、以左下角为原点 ；2、以锚点为原点（AR）

通常情况下是需要使用带AR版本的

节点坐标与世界坐标的互相转换(注意：不同的屏幕下，如h5下与default下的值可能是不同的)

    //把相对坐标转成世界坐标(以左下角为原点)注意：世界坐标系是以(0,0)为原点,cc.v2(0,0)表示世界坐标原点
    let p1 = this.node.convertToWorldSpace(cc.v2(0, 0));
    let son = this.node.getChildByName('son');
    let p2 = son.convertToWorldSpace(cc.v2(0, 0));
    console.log(p1, p2);
    //输出 Vec2 {x: 364, y: 223} Vec2 {x: 314, y: 173}

    //把相对坐标转成世界坐标(以锚点为原点)注意：世界坐标系是以(0,0)为原点,cc.v2(0,0)表示世界坐标原点
    let m_p1 = this.node.convertToWorldSpaceAR(cc.v2(0, 0));
    let m_p2 = son.convertToWorldSpaceAR(cc.v2(0, 0));
    console.log(m_p1, m_p2);
    //输出 Vec2 {x: 364, y: 223} Vec2 {x: 364, y: 223}  两个锚点是重合的

    //把世界坐标转成相对坐标(以左下角为原点),p1是表示以p1为参照物，并且是相对于this.node来转的
    let n_p1 = this.node.convertToNodeSpace(p1);
    let n_p2 = son.convertToNodeSpace(p1);
    console.log(n_p1, n_p2);
    //输出 Vec2 {x: 0, y: 0} Vec2 {x: 50, y: 50}

    //把世界坐标转成相对坐标以锚点为原点,p1是表示以p1为参照物
    let n_p3 = this.node.convertToNodeSpaceAR(p1);
    let n_p4 = this.node.convertToNodeSpaceAR(p1);
    console.log(n_p3, n_p4);
    //输出 Vec2 {x: 0, y: 0} Vec2 {x: 0, y: 0}

4、计算节点的包围盒

    let item1 = this.node.getChildByName('item1');
    let item2 = this.node.getChildByName('item2');
    //计算节点相对于父亲节点的包围盒
    let box1 = item1.getBoundingBox();
    let box2 = item2.getBoundingBox();
    console.log(box1, box2);
    //输出 Rect {x: -100, y: -100, width: 200, height: 200} Rect {x: -50, y: -50, width: 100, height: 100}
    //计算节点相对于世界坐标的包围盒
    let box3 = item1.getBoundingBoxToWorld();
    let box4 = item2.getBoundingBoxToWorld();
    console.log(box3, box4);
    //输出 Rect {x: 380, y: 220, width: 200, height: 200} Rect {x: 430, y: 270, width: 100, height: 100}

  

5、触摸事件对象世界坐标与节点坐标的转换

    //因为触摸事件所对应的坐是世界性的，所以在处理一些事件上，可以把触摸点转换成相对坐标
    let item1 = this.node.getChildByName('item1');
    item1.on(cc.Node.EventType.TOUCH_START, function (ev) {
        let pos = ev.getLocation();
        console.log(this.convertToNodeSpaceAR(pos));
    }, item1);

    //例子，把item2这个节点移动到世界性节点(500，600);
    item1.on(cc.Node.EventType.MOUSE_DOWN, function (ev) {
        //注意这边要以父亲节点作为参照物
        let pos = this.convertToNodeSpaceAR(cc.v2(500, 600));
        let item2 = this.getChildByName('item2');
        item2.setPosition(pos);
    }, this.node)

ACTION的学习

Action 类是动作命令类，主要是为了执行Action的动作

Action 类在Creator里面分成两类，1、瞬间完成的ActionInstant；2、要一段时间后才能完成的ActionInterval；

用cc.Node.runAction:节点运行Action

    let item1 = this.node.getChildByName('item1');
    let item2 = this.node.getChildByName('item2');
    //cc.moveTo(duration,(pos|num)),cc.moveBy(duration,(pos|num))  To表示目标  By表示变化(指某个目标变化按量变化)
    //这里5是表示5秒时间，方法一
    let mt1 = cc.moveTo(5, cc.v2(200, 200));
    //方法二
    let mt2 = cc.moveTo(3, -200, 100);
    // item1.runAction(mt1);
    // item2.runAction(mt2);

    //moveBy的第二个参数主要是表示变化的大小
    //方法一
    let mb1 = cc.moveBy(3, cc.v2(100, 100));
    let mb2 = cc.moveBy(5, -100, -100);
    // item1.runAction(mb1);
    // item2.runAction(mb2);

    //rotate rotateTo(duration,num)表示旋转到num度  rotateBy(duration,num)表示旋转了多少度
    let r1 = cc.rotateTo(5, 270);
    let r2 = cc.rotateBy(3, 720);
    // item1.runAction(r1);
    // item2.runAction(r2);

    //scale scaleTo(duration,num)表示放大到num倍，scaleBy(duration,num)表示放大num倍
    let s1 = cc.scaleTo(5, 2);
    let s2 = cc.scaleBy(3, 4);
    // item1.runAction(s1);
    // item2.runAction(s2);

    //fadeOut(duration)表示淡出 fadeIn(duration)表示淡入,fadeTo(duration,num)表示在指定时间透明到指定值
    let f1 = cc.fadeOut(5);
    let f2 = cc.fadeIn(3);
    let f3 = cc.fadeTo(2, 120);
    //先修改透明度
    // item2.opacity = 0;
    // item1.runAction(f1);
    // item2.runAction(f2);
    // item1.runAction(f3);

    //callFunc执行回调函数，会比正常的流程延后，具体看例子输出
    let func = cc.callFunc(function () {
        console.log(this);
        console.log(`这个对象是在callFunc里面调用的`);
    }.bind(item1));
    console.log('begin#####');
    item1.runAction(func);
    console.log('end#####');
    //输出 begin#####
    //end#####
    //cc_Node {_name: "item1", _objFlags: 0, _parent: cc_Node, _children: Array(0), _active: true, …}
    //这个对象是在callFunc里面调用的

    //队列清单,里面可以是参数也可以是数组
    let a = cc.moveTo(1, cc.v2(200, 200));
    let b = cc.rotateTo(1, 270);
    let c = cc.moveTo(1, cc.v2(-100, -100));
    let seq1 = cc.sequence(a, b, c);
    let seq2 = cc.sequence(b, a, c);
    //两个动作可以同时进行
    // item1.runAction(seq1);
    // item2.runAction(seq2);

    //不断的重复动作,注意一个队列属性往往只对应一个定时器，所以如果要互不影响的情况，需要定义多个属性队列
    //repeat(sequence|action,times)表示重复一定次数即可，repeatForever(sequence|action) 表示一直重复下去
    let d = cc.scaleTo(0.4, 1.2);
    let e = cc.scaleTo(0.4, 0.8);
    let f = cc.scaleTo(0.4, 1.2);
    let g = cc.scaleTo(0.4, 0.8);
    let seq3 = cc.sequence(d, e);
    let seq4 = cc.sequence(f, g);
    let rp = cc.repeatForever(seq3);
    let rp1 = cc.repeat(seq4, 8);
    // item2.runAction(rp);
    // item1.runAction(rp1);

    //添加缓动效果
    let eas = cc.rotateBy(1, 360).easing(cc.easeCubicActionOut());
    let reas = cc.repeatForever(eas);
    // item2.runAction(reas);

    //延迟效果并且实现多个组合
    let de1 = cc.rotateBy(2, 360);
    let d1 = cc.delayTime(2);
    let de2 = cc.fadeOut(2);
    let fn1 = cc.callFunc(function () {
        this.removeFromParent();
    }.bind(item2));
    let sql5 = cc.sequence([de1, d1, de2, fn1]);
    item2.runAction(sql5);

    //停止动画,参数是动画句柄或者是队列句柄，要放在声明完动画的后面
    item2.stopAction(sql5);
    //停止所有动画
    item2.stopAllActions();