CocosCreator中worldMatrix究竟是什麼(下)

Cocos Creator 中 _worldMatrix 究竟是什麼(下)

1. 摘要

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

2. 場景準備

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

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

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

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 中層級覆蓋方式是下覆蓋上。所目前只能看淺藍色的方塊以及白色線條的座標系。markdown

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方法中添加以下代碼oop

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開發了一個小遊戲【坦克俠】，感興趣的朋友一個能夠來玩玩