CocosCreator中_worldMatrix到底是什麼(下)

Cocos Creator 中 _worldMatrix 到底是什麼(下)

1. 摘要

上篇介紹了矩陣的基本知識以及對應圖形變換矩陣推倒。中篇具體介介紹了對應矩陣轉換成cocos creator代碼的過程。這篇我們將通過一個具體的實例來驗證我們上篇和中篇的結果。

2. 場景準備

新建一個cocos項目，在層級管理器Canvas下依次完成以下節點建立。

1. 新建一個Sprite(單色)節點並設置大小爲100,100黃色背景,取名matrixReference
2. 新建一個Sprine(單色)節點並設置大小爲100,100淺藍色背景，取名matrix
3. 在matrix節點下新建一個空節點，取名center。然後在屬性檢查器中添加Graphics組件，並設置Stroke Color 爲藍色
4. 回到Canvas，新建一個空節點，取名line。然後在屬性檢查器中添加Graphisc組件，並設置Stroke Color爲白色

腳本文件準備。在資源管理器scripts文件夾下，新建腳本 matrix.ts 和 line.ts。matrix.ts用來完成矩陣的驗證操作。line.ts用來繪畫一個平面的xy座標系。

3. 繪製平面座標系

利用Graphic畫筆功能，分別沿水平方向和垂直方向繪製長度100的兩條直線。然後在軸的正方向繪製一個三角形箭頭。繪製代碼如下

start() {
let g = this.getComponent(cc.Graphics);
//  y軸
g.moveTo(0, -100);
g.lineTo(0, 100);
g.lineTo(-10, 80);
g.lineTo(10, 80);
g.lineTo(0, 100);
// x 軸
g.moveTo(-100, 0);
g.lineTo(100, 0);

g.lineTo(80, -10);
g.lineTo(80, 10);
g.lineTo(100, 0);
g.stroke();
}

將此用戶組件分別綁定到節點line和center下，完成後刷新瀏覽器我們會看到如下界面

從上圖可知，cocos creator 中層級覆蓋方式是下覆蓋上。所目前只能看淺藍色的方塊以及白色線條的座標系。

4. 測試代碼準備

驗證cocos creator 對應節點變換的矩陣信息，需要通過輸出當前節點的本地矩陣和世界矩陣，以及當前節點設置信息，和父級節點的設置信息。所以我們在matrix.ts中先創建一個log函數用於輸出當前節點各種屬性狀態值。代碼如下：

log(title) {
console.log(`---${title}---`);
let wm = cc.mat4();
this.node.getWorldMatrix(wm);
console.log("---1. [世界座標矩陣]---");
console.log(wm.toString());

let lm = cc.mat4();
this.node.getLocalMatrix(lm);
console.log("---2. [本地座標矩陣]---");
console.log(lm.toString());

console.log("---3. [當前各屬性狀態]---");

console.log(`
   1. position: ${this.node.position.toString()}
   2. scale: ${this.node.scale.toString()}
   3. angle: ${this.node.angle}
   4. skewX: ${this.node.skewX}
   5. skewY: ${this.node.skewY}
   6. width: ${this.node.width}
   7. height: ${this.node.height}
   8. parentWidth: ${this.node.parent.width}
   9. parentHeight: ${this.node.parent.height}`)

console.log("---4. [錨點角(0,0)座標信息]---")
let wordVec = this.node.convertToWorldSpaceAR(cc.v2(0, 0));
let localVec = this.node.parent.convertToNodeSpaceAR(wordVec);
console.log(`原點的世界座標:${wordVec.toString()}  本地座標: ${localVec.toString()}`);

console.log("---5. [右上角(50,50)座標信息]---")
wordVec = this.node.convertToWorldSpaceAR(cc.v2(50, 50));
localVec = this.node.parent.convertToNodeSpaceAR(wordVec);
console.log(`右上角的世界座標:${wordVec.toString()}  本地座標: ${localVec.toString()}`);
}

將matrix.ts以用戶組件的方式添加到matrix節點。然後回到matrix.ts腳本當中，並在start方法中添加如下代碼

start() {
  this.log("初始狀態");
}

編譯運行，刷新瀏覽器，我們就可以在Console控制檯中，看到如下信息

------------------初始狀態-------------------
---1. [世界座標矩陣]---
[
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
480, 320, 0, 1
]
---2. [本地座標矩陣]---
[
1, 0, 0, 0,
0, 1, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
---3. [當前各屬性狀態]---
1. position: (0.00, 0.00, 0.00)
2. scale: 1
3. angle: 0
4. skewX: 0
5. skewY: 0
6. width: 100
7. height: 100
8. parentWidth: 960
9. parentHeight: 640
---4. [錨點角(0,0)座標信息]---
原點的世界座標:(480.00, 320.00)  本地座標: (0.00, 0.00)
---5. [右上角(50,50)座標信息]---
右上角的世界座標:(530.00, 370.00)  本地座標: (50.00, 50.00)

從輸出結果可知，當前節點的世界座標，只有m12和m13有值分別是480和320。然後我們Canvas的寬高分別是960和460，錨點分別是0.5和0.5，此結果就已經說明了平移矩陣。當前節點本地座標矩陣爲單位矩陣，其他屬性都保持默認值。這裏有必要仔細看看輸出的第4和第五。分別輸出了當前節點原點位置和右上角的世界座標和本地座標。從世界座標可知，右上角的座標爲原點實際座標加上50（錨點0.5）480+50=530 。也符合預期。

5. 旋轉30度

在start中添加代碼

start() {
  this.log("初始狀態");
  this.node.angle = 30;
  this.log("1. 旋轉30°");
  this.node.rotation=30;
  this.log("2. 旋轉30°");
}

在代碼中使用了兩次旋轉分別使用angle以及rotation 前者默認逆時針方向後者默認順時針方向。也許目前您可能會認爲逆時針旋轉30°，然後再順時針旋轉30°，剛好回到0°位置。其實不是的，cocos 中矩陣的更新是通過最後的狀態值確定的。圖像最終表現爲順時針旋轉30°。在最初構思這部分內容時，想更清晰展示矩陣在遊戲開發中的魔力。計劃是通過屬性的方式將圖形變形，然後直接改變node私有變量_matrix給變回去，就泡湯了。以上代碼圖形的最終結果如下

回到控制檯，輸出的日誌信息如下

------------------旋轉30°-------------------
---1. [世界座標矩陣]---
[
0.8660254037844387, -0.49999999999999994, 0, 0,
0.49999999999999994, 0.8660254037844387, 0, 0,
0, 0, 1, 0,
480, 320, 0, 1
]
---2. [本地座標矩陣]---
[
0.8660254037844387, -0.49999999999999994, 0, 0,
0.49999999999999994, 0.8660254037844387, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
---3. [當前各屬性狀態]---
1. position: (0.00, 0.00, 0.00)
2. scale: 1
3. angle: -30
4. skewX: 0
5. skewY: 0
6. width: 100
7. height: 100
8. parentWidth: 960
9. parentHeight: 640
---4. [錨點角(0,0)座標信息]---
原點的世界座標:(480.00, 320.00)  本地座標: (0.00, 0.00)
---5. [右上角(50,50)座標信息]---
右上角的世界座標:(548.30, 338.30)  本地座標: (68.30, 18.30)

以上輸出中 math.sin(math.PI/6)=0.499,math.cos(math.PI/6)=0.866,最終使用的rotation所有需要注意負號。從當前屬性的狀態中也angle=-30也說明了問題。本地座標矩陣和世界座標矩陣結果也符合推導結果。我們這裏在看看右上角(50,50)的座標變成了(68.30,18.30)，我們通過結果矩陣來推導下這個座標值，由於cocos creator中Mat4中 toString方法做了轉置，所有需要使用點乘本地座標矩陣，即

根據矩陣公式可知

6. 分別沿x軸和y軸方向傾斜30°

修改start中代碼爲如下

start() {
 this.log("初始狀態");
 this.node.angle = 30;
 this.log("旋轉30°");
 this.node.rotation = 30;
 this.log("旋轉30°");
 this.node.skewX = 30;
 this.node.skewY = 30;
 this.log("XY傾斜30°");
}

重新編譯，您將在瀏覽器看到傾斜後的圖形，顯示如下

回到控制檯，輸出日誌如下

------------------XY傾斜30°-------------------
---1. [世界座標矩陣]---
[
1.1547005383792515, 5.551115123125783e-17, 0, 0,
1, 0.577350269189626, 0, 0,
0, 0, 1, 0,
480, 320, 0, 1
]
---2. [本地座標矩陣]---
[
1.1547005383792515, 5.551115123125783e-17, 0, 0,
1, 0.577350269189626, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
---3. [當前各屬性狀態]---
1. position: (0.00, 0.00, 0.00)
2. scale: 1
3. angle: -30
4. skewX: 30
5. skewY: 30
6. width: 100
7. height: 100
8. parentWidth: 960
9. parentHeight: 640
---4. [錨點角(0,0)座標信息]---
原點的世界座標:(480.00, 320.00)  本地座標: (0.00, 0.00)
---5. [右上角(50,50)座標信息]---
右上角的世界座標:(587.74, 348.87)  本地座標: (107.74, 28.87)

說明,在js中一個很小的值就認爲是0，針對輸出結果做一下簡單推導,由於旋轉和傾斜都是30度所有，我們用s c t 分別代表sin(30) cos(30) tan(30) 所以當前輸出的複合矩陣P有以下關係

依次帶入求值便可得到以上輸出結果。

7. 將圖形縮放0.5倍

繼續修改start方法裏邊的代碼，改動如下

start() {
this.log("初始狀態");
this.node.angle = 30;
this.log("旋轉30°");
this.node.rotation = 30;
this.log("旋轉30°");
this.node.skewX = 30;
this.node.skewY = 30;
this.log("XY傾斜30°");
this.node.scale = 0.5;
this.log("縮小50%");
}

重新編譯，您將在瀏覽器看到縮小後的圖形，顯示如下

回到控制檯，輸出日誌如下

------------------縮小50%-------------------
---1. [世界座標矩陣]---
[
0.5773502691896257, 2.7755575615628914e-17, 0, 0,
0.5, 0.288675134594813, 0, 0,
0, 0, 1, 0,
480, 320, 0, 1
]
---2. [本地座標矩陣]---
[
0.5773502691896257, 2.7755575615628914e-17, 0, 0,
0.5, 0.288675134594813, 0, 0,
0, 0, 1, 0,
0, 0, 0, 1
]
---3. [當前各屬性狀態]---
1. position: (0.00, 0.00, 0.00)
2. scale: 0.5
3. angle: -30
4. skewX: 30
5. skewY: 30
6. width: 100
7. height: 100
8. parentWidth: 960
9. parentHeight: 640
---4. [錨點角(0,0)座標信息]---
原點的世界座標:(480.00, 320.00)  本地座標: (0.00, 0.00)
---5. [右上角(50,50)座標信息]---
右上角的世界座標:(533.87, 334.43)  本地座標: (53.87, 14.43)

針對縮放相對簡單，輸出結果矩陣每項直接乘以縮放比列0.5可得

8. 將圖形向右上方平移10px

繼續修改start方法裏邊的代碼，改動如下

 start() {
   this.log("初始狀態");
   this.node.angle = 30;
   this.log("旋轉30°");
   this.node.rotation = 30;
   this.log("旋轉30°");
   this.node.skewX = 30;
   this.node.skewY = 30;
   this.log("XY傾斜30°");
   this.node.scale = 0.5;
   this.log("縮小50%");
   this.node.setPosition(10, 10);
   this.log("平移(10,10)");
 }

重新編譯，您將在瀏覽器看到平移後的圖形，顯示如下

回到控制檯，輸出日誌如下

------------------平移(10,10)-------------------
---1. [世界座標矩陣]---
[
0.5773502691896257, 2.7755575615628914e-17, 0, 0,
0.5, 0.288675134594813, 0, 0,
0, 0, 1, 0,
490, 330, 0, 1
]
---2. [本地座標矩陣]---
[
0.5773502691896257, 2.7755575615628914e-17, 0, 0,
0.5, 0.288675134594813, 0, 0,
0, 0, 1, 0,
10, 10, 0, 1
]
---3. [當前各屬性狀態]---
1. position: (10.00, 10.00, 0.00)
2. scale: 0.5
3. angle: -30
4. skewX: 30
5. skewY: 30
6. width: 100
7. height: 100
8. parentWidth: 960
9. parentHeight: 640
---4. [錨點角(0,0)座標信息]---
原點的世界座標:(490.00, 330.00)  本地座標: (10.00, 10.00)
---5. [右上角(50,50)座標信息]---
右上角的世界座標:(543.87, 344.43)  本地座標: (63.87, 24.43)

對比輸出結果可知，平移對a b c d並無影響。僅僅是將m12和m13的值分別加上(x,y)方向的平移量。從輸出4和5可知，平移改變了原點的位置。

9. 總結

遊戲中的matrix，歐拉角，四元素，複數。這些基礎知識在學習時不知其有何用。當真實使用起來時，才發現其中的奧祕。技術這塊路，不一定要追新。往往原理性的東西，那些偉人早都研究透徹了。這三篇文章，從計劃到完成預計2月時間。確實很多基礎知識需要補充。當然，其中肯定有理解不對的地方，如有發現，希望熱心的同行，能加我wx反饋。在此先謝謝了

原創歡迎感興趣的朋友關注我的微信訂閱號"小院不小"，或者點擊下方的二維碼關注。我將多年開發中遇到的難點，以及一些有意思的功能，體會都會一一發布到我的訂閱號中。需要本文demo可以在公衆號中回覆matrix

維護了一個Coscos Creator 的遊戲開發羣，歡迎喜歡聊技術的朋友加入

閒來無事，採用cocos creator開發了一個小遊戲【坦克俠】，感興趣的朋友一個可以來玩玩