Cocos Creator中坐标空间的转换
序言
在Cocos Creator游戏开发中，我们经常需要进行坐标空间的获取、计算、判断与转换等操作。因此，掌握其中相关的基础知识显得非常重要。本文我们就一起来梳理回顾下。
一、Vec2二维向量
1. ` let v1 : cc.Vec2 = new cc.Vec2(1, 0);`2. ` console.log(v1.equals(cc.Vec2.RIGHT));`4. ` let v2 : cc.Vec2 = cc.v2(0, 1);`5. ` let v3 : cc.Vec2 = v1.add(v2);`6. ` console.log("v3=", v3, v3.x, v3.y);`7. ` console.log("v3的模，向量的长度：", v3.mag());`9. ` // v3归一化，将向量的长度变成单位长度，游戏手柄`10. ` v3 = v3.normalize();`11. ` console.log("归一化后v3=", v3, v3.x, v3.y);`12. ` console.log("单位向量v3的模，向量的长度：", v3.mag());`14. ` // *self方法改变调用这个方法的原有向量`15. ` console.log("调用*self方法前，v1=", v1, "v2=", v2);`16. ` v3 = v1.addSelf(v2);`17. ` console.log("调用后*self方法v1=", v1, "v2=", v2);`
常用方法案例如上，运行结果如下，其它方法类似，重点掌握向量的基本属性、取模、比较相等、归一化、加减乘除，区别带self后缀的方法即可。
二、cc.Size/cc.Rect尺寸和矩形
1: cc.Size: 包含宽度和高度信息的对象 {width: 100, height: 100}; 2: new cc.Size(w, h), cc.size(w, h)创建一个大小对象; 3: cc.Rect: 矩形对象 new cc.Rect(x, y, w, h); cc.rect(x, y, w, h); {x, y, width, height} 4: contains(Point): 点是否在矩形内; 5: intersects : 两个矩形是否相交; 6：intersection：计算两个矩形的相交部分。
1. ` onLoad () {`2. ` let s : cc.Size = new cc.Size(100, 200);`3. ` console.log("s=", s, s.height, s.width);`5. ` let s2 = cc.size(50, 60);`6. ` console.log("s2=", s2, s2.height, s2.width);`7. ` console.log("s和s2尺寸是否相等：", s.equals(s2));`8. ` console.log("s2的toString：", s2.toString());`9. ` }`
1. ` start () {`2. ` let r : cc.Rect = new cc.Rect(0, 0, 100, 200);`3. ` console.log("r=", r, r.center, r.origin, r.size);`4. ` console.log("rx=", r.x, r.xMin, r.xMax);`5. ` console.log("ry=", r.y, r.yMin, r.yMax);`6. ` let r2 : cc.Rect = cc.rect(0, 0, 10, 20);`8. ` console.log("r和r2是否相交:", r.intersects(r2));`9. ` let r3 : cc.Rect = new cc.Rect();`10. ` r.intersection(r3, r2);`11. ` console.log("r和r2的相交部分：", r3);`13. ` let p : cc.Vec2 = new cc.Vec2(50, 60);`14. ` console.log("p是否在矩形r中：", r.contains(p));`15. ` console.log("p是否在矩形r2中：", r2.contains(p));`16. ` }`
三、Cocos Creator中的坐标系
1: 世界(屏幕)坐标系; 2: 相对(节点)坐标系，两种相对节点原点的方式(1) 左下角为原点, (2) 锚点为原点(AR) 3: 节点坐标和屏幕坐标的相互转换; 我们到底使用哪个？通常情况下带AR; 4: 获取在父亲节点坐标系下(AR为原点)的节点包围盒; 5: 获取在世界坐标系下的节点包围盒; 6: 触摸事件对象世界坐标与节点坐标的转换;
1. ` onLoad () {`2. ` // 1 屏幕坐标系，左下角为原点，向右为x轴正方向，向上为y轴正方向`3. ` let worldPos : cc.Vec2 = new cc.Vec2(0, 0);`4. ` console.log("worldPos=", worldPos);`6. ` // 2: 相对(节点)坐标系，两种相对节点原点的方式(1) 左下角为原点, (2) 锚点为原点(AR)`7. ` let localPos :cc.Vec2 = this.node.convertToNodeSpace(worldPos);`8. ` console.log("localPos节点左下角为坐标原点:", localPos);`9. ` localPos = this.node.convertToNodeSpaceAR(worldPos);`10. ` console.log("localPosAR节点锚点为坐标原点", localPos);`12. ` // 3: 节点坐标和屏幕坐标的相互转换; 我们到底使用哪个？通常情况下带AR;`13. ` localPos = cc.v2(0, 0);`14. ` worldPos = this.node.convertToWorldSpace(localPos);`15. ` console.log("世界坐标", worldPos);`16. ` worldPos = this.node.convertToWorldSpaceAR(localPos);`17. ` console.log("世界坐标", worldPos);`19. ` // 4: 获取在父亲节点坐标系下(AR为原点)的节点包围盒;`20. ` let box : cc.Rect = this.node.getBoundingBox();`21. ` console.log("父节点下的包围盒子=", box);`23. ` // 5: 获取在世界坐标系下的节点包围盒;`24. ` box = this.node.getBoundingBoxToWorld();`25. ` console.log("世界坐标下的包围盒子=", box);`26. ` }`
1. ` start () {`2. ` // 6: 触摸事件对象世界坐标与节点坐标的转换;`3. ` this.node.on(cc.Node.EventType.TOUCH_START, function(e){`4. ` let worldPos = e.getLocation();`5. ` let localPos = this.node.convertToNodeSpaceAR(worldPos);`6. ` console.log("触摸点的世界坐标和本地坐标：", worldPos, localPos);`8. ` localPos =this.node.convertTouchToNodeSpace(e);`9. ` console.log("触摸点的本地坐标(节点左下角为坐标原点)：", localPos);`10. ` localPos =this.node.convertTouchToNodeSpaceAR(e);`11. ` console.log("触摸点的本地坐标(节点锚点为坐标原点)：", localPos);`12. ` }.bind(this), this);`13. ` }`
运行结果如下，点击蓝色块中间的位置。
关键点在于理解坐标参考原点在哪？
