Cocos Creator 中 _worldMatrix 到底是什么(下)
1. 摘要
上篇介紹了矩陣的基本知識以及對應圖形變換矩陣推倒，中篇具體介介紹了對應矩陣轉換成cocos creator代碼的程序，這篇我們將通過一個具體的實體來驗證我們上篇和中篇的結果，
2. 場景準備
新建一個cocos專案，在層級管理器Canvas下依次完成以下節點建立，
- 新建一個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坐標系，
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開發了一個小游戲【坦克俠】，感興趣的朋友一個可以來玩玩
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/179055.html
標籤：JavaScript
下一篇：13 個 JS 陣列精簡技巧