序言

在Cocos Creator游戲開發(fā)中，我們經(jīng)常需要進(jìn)行坐標(biāo)空間的獲取、計(jì)算、判斷與轉(zhuǎn)換等操作。因此，掌握其中相關(guān)的基礎(chǔ)知識(shí)顯得非常重要。本文我們就一起來(lái)梳理回顧下。

一、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的模，向量的長(zhǎng)度：", v3.mag());`9. ?` ? ? ? ?// v3歸一化，將向量的長(zhǎng)度變成單位長(zhǎng)度，游戲手柄`10. ?` ? ? ? ?v3 = v3.normalize();`11. ?` ? ? ? ?console.log("歸一化后v3=", v3, v3.x, v3.y);`12. ?` ? ? ? ?console.log("單位向量v3的模，向量的長(zhǎng)度：", v3.mag());`14. ?` ? ? ? ?// *self方法改變調(diào)用這個(gè)方法的原有向量`15. ?` ? ? ? ?console.log("調(diào)用*self方法前，v1=", v1, "v2=", v2);`16. ?` ? ? ? ?v3 = v1.addSelf(v2);`17. ?` ? ? ? ?console.log("調(diào)用后*self方法v1=", v1, "v2=", v2);`

常用方法案例如上，運(yùn)行結(jié)果如下，其它方法類似，重點(diǎn)掌握向量的基本屬性、取模、比較相等、歸一化、加減乘除，區(qū)別帶self后綴的方法即可。

二、cc.Size/cc.Rect尺寸和矩形

1: cc.Size: 包含寬度和高度信息的對(duì)象 {width: 100, height: 100}; 2: new cc.Size(w, h), cc.size(w, h)創(chuàng)建一個(gè)大小對(duì)象; 3: cc.Rect: 矩形對(duì)象 new cc.Rect(x, y, w, h); cc.rect(x, y, w, h); {x, y, width, height} 4: contains(Point): 點(diǎn)是否在矩形內(nèi); 5: intersects : 兩個(gè)矩形是否相交; 6：intersection：計(jì)算兩個(gè)矩形的相交部分。

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中的坐標(biāo)系

1: 世界(屏幕)坐標(biāo)系; 2: 相對(duì)(節(jié)點(diǎn))坐標(biāo)系，兩種相對(duì)節(jié)點(diǎn)原點(diǎn)的方式(1) 左下角為原點(diǎn), (2) 錨點(diǎn)為原點(diǎn)(AR) 3: 節(jié)點(diǎn)坐標(biāo)和屏幕坐標(biāo)的相互轉(zhuǎn)換; 我們到底使用哪個(gè)？通常情況下帶AR; 4: 獲取在父親節(jié)點(diǎn)坐標(biāo)系下(AR為原點(diǎn))的節(jié)點(diǎn)包圍盒; 5: 獲取在世界坐標(biāo)系下的節(jié)點(diǎn)包圍盒; 6: 觸摸事件對(duì)象世界坐標(biāo)與節(jié)點(diǎn)坐標(biāo)的轉(zhuǎn)換;

1. ?` ? ?onLoad () {`2. ?` ? ? ? ?// 1 屏幕坐標(biāo)系，左下角為原點(diǎn)，向右為x軸正方向，向上為y軸正方向`3. ?` ? ? ? ?let worldPos : cc.Vec2 = new cc.Vec2(0, 0);`4. ?` ? ? ? ?console.log("worldPos=", worldPos);`6. ?` ? ? ? ?// 2: 相對(duì)(節(jié)點(diǎn))坐標(biāo)系，兩種相對(duì)節(jié)點(diǎn)原點(diǎn)的方式(1) 左下角為原點(diǎn), (2) 錨點(diǎn)為原點(diǎn)(AR)`7. ?` ? ? ? ?let localPos :cc.Vec2 = this.node.convertToNodeSpace(worldPos);`8. ?` ? ? ? ?console.log("localPos節(jié)點(diǎn)左下角為坐標(biāo)原點(diǎn):", localPos);`9. ?` ? ? ? ?localPos = this.node.convertToNodeSpaceAR(worldPos);`10. ?` ? ? ? ?console.log("localPosAR節(jié)點(diǎn)錨點(diǎn)為坐標(biāo)原點(diǎn)", localPos);`12. ?` ? ? ? ?// 3: 節(jié)點(diǎn)坐標(biāo)和屏幕坐標(biāo)的相互轉(zhuǎn)換; 我們到底使用哪個(gè)？通常情況下帶AR;`13. ?` ? ? ? ?localPos = cc.v2(0, 0);`14. ?` ? ? ? ?worldPos = this.node.convertToWorldSpace(localPos);`15. ?` ? ? ? ?console.log("世界坐標(biāo)", worldPos);`16. ?` ? ? ? ?worldPos = this.node.convertToWorldSpaceAR(localPos);`17. ?` ? ? ? ?console.log("世界坐標(biāo)", worldPos);`19. ?` ? ? ? ?// 4: 獲取在父親節(jié)點(diǎn)坐標(biāo)系下(AR為原點(diǎn))的節(jié)點(diǎn)包圍盒;`20. ?` ? ? ? ?let box : cc.Rect = this.node.getBoundingBox();`21. ?` ? ? ? ?console.log("父節(jié)點(diǎn)下的包圍盒子=", box);`23. ?` ? ? ? ?// 5: 獲取在世界坐標(biāo)系下的節(jié)點(diǎn)包圍盒;`24. ?` ? ? ? ?box = this.node.getBoundingBoxToWorld();`25. ?` ? ? ? ?console.log("世界坐標(biāo)下的包圍盒子=", box);`26. ?` ? ?}`

1. ?` ? ?start () {`2. ?` ? ? ? ?// 6: 觸摸事件對(duì)象世界坐標(biāo)與節(jié)點(diǎn)坐標(biāo)的轉(zhuǎn)換;`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("觸摸點(diǎn)的世界坐標(biāo)和本地坐標(biāo)：", worldPos, localPos);`8. ?` ? ? ? ? ? ?localPos =this.node.convertTouchToNodeSpace(e);`9. ?` ? ? ? ? ? ?console.log("觸摸點(diǎn)的本地坐標(biāo)(節(jié)點(diǎn)左下角為坐標(biāo)原點(diǎn))：", ?localPos);`10. ?` ? ? ? ? ? ?localPos =this.node.convertTouchToNodeSpaceAR(e);`11. ?` ? ? ? ? ? ?console.log("觸摸點(diǎn)的本地坐標(biāo)(節(jié)點(diǎn)錨點(diǎn)為坐標(biāo)原點(diǎn))：", ?localPos);`12. ?` ? ? ? ?}.bind(this), this);`13. ?` ? ?}`

運(yùn)行結(jié)果如下，點(diǎn)擊藍(lán)色塊中間的位置。

關(guān)鍵點(diǎn)在于理解坐標(biāo)參考原點(diǎn)在哪？