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

时间:2023-01-14 08:39:49

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}

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

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();