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