CocosCreator中的worldMatrix是什么（上）1.(Matrix)什么是Matrix，它有什么用(Matrix)是一个神奇的存在？在开发过程中，你是不是对里面的各种值的含义摸不着头脑，摸不着头脑，想不通？今天我们就来泡顶姐牛，一起来揭开它的神秘面纱。由于内容较多，CocosCreator中的_worldMatrix将分为三篇。最后形成一个完整的demo。首先我们来看一下CocosCreator编辑器中图形变化对应的属性。下图红框分别是位移、旋转、缩放、倾斜。它们都一一对应于一个变换矩阵。.CocosCreator中的（矩阵）Matrix是一个长度为16的一维数组，按照先列后行的顺序存储一个4×4的方阵。数组下标0123分别代表矩阵第1列第1234行的数据。在2D游戏坐标系中，三维矩阵可以满足基本的变换，但是cocoscreator使用的是四维矩阵，应该和3D一致。矩阵表示如下（左边是Mat4对应属性的位置，右边是代码中经常用到的变量abcdtxty和矩阵对应的位置信息）$$\left[\begin{矩阵}m00&m04&m08&m12\\m01&m05&m09&m13\\m02&m06&m10&m14\\m03&m07&m11&m15\\\end{矩阵}\right]=>\left[\begin{矩阵}a&c&0&0\\b&d&0&0\\0&0&1&0\trix\t}\right]$$这些信息有什么用？用于存储节点旋转、缩放、倾斜和平移的图形变换信息。要知道为什么，有必要复习一下线性代数和高等数的矩阵乘法，以及相关的性质。单位矩阵、逆矩阵、矩阵转置向量齐次坐标三角函数有了上面的知识，我们可以简单推导下2d情况下，图形变换对应4种情况2.旋转矩阵推导在2d坐标系下，假设有是一个点(x,y)，我们把这个点和原点(0,0)连起来形成一条线段。此时线段与坐标系中x轴的弧度为a。我们将以原点为圆心，线段的长度为半径r。将圆弧b逆时针旋转，线段另一端坐标变为(x1,y1)，如下图(左1)三个函数相关知识正弦函数和余弦函数sin(a)=y/r=>y=r*sin(a)cos(a)=x/r=>x=r*cos(a)和角度公式cos(a+b)=cos(a)cos(b)-sin(a)sin(b)sin(a+b)=sin(a)cos(b)+cos(a)sin(b)可以从三角函数导出x1=rcos(a+b)=rcos(a)cos(b)-rsin(a)sin(b)=xcos(b)-y*sin(b)y1=rsin(a+b)=rsin(a)cos(b)+rcos(a)sin(b)=ycos(b)+xsin(b)=xsin(b)+y*sin(b)转换矩阵形式B=AX$$\left[\begin{matrix}x1\\y1\\1\end{矩阵}\right]=\left[\begin{matrix}cos(b)&-sin(b)&0\\sin(b)&cos(b)&0\\0&0&1\end{matrix}\right]*\left[\begin{matrix}x\\y\\1\end{matrix}\right]$$在cocoscreator中采用行矩阵的写法。以上在cocoscreator中的实际运行形式如下，转换公式如下$B^T=X^T*A^T$。cocoscreator中剩下的缩放、倾斜、平移请根据转置矩阵自行推导。$$\left[\begin{matrix}x1&y1&1\end{matrix}\right]=\left[\begin{matrix}x&y&1\end{matrix}\right]*\left[\begin{matrix}cos(b)&sin(b)&1\\-sin(b)&cos(b)&1\\0&0&1\end{matrix}\right]$$3。缩放矩阵求导在2d坐标系中，假设有一个点(x,y)，缩放是将坐标的x或y分别乘以一个缩放因子sx或sy。得到一个新的坐标（x1，y1），如下图左2所示。由此，缩放公式x1=xsx=xsx+y*0y1=xsy=x0+y*sy转换矩阵形式B=AX$$\left[\begin{matrix}x1\\y1\\1\end{matrix}\right]=\left[\begin{matrix}sx&0&0\\0&sy&0\\0&0&1\end{matrix}\right]*\left[\begin{matrix}x\\y\\1\end{matrix}\对]$$4。倾斜矩阵求导在2d坐标系中，假设有一个点(x,y)倾斜分为x轴倾斜和y轴倾斜。沿x轴倾斜就是连接点和点(x,0)的线段，以(x,0)为圆心，旋转一段a的弧。如下图（左3，左4）得到一个新的坐标（x1，y1）。由此，倾斜公式可以沿x轴倾斜弧度a（图中左边3）x1=x+ytan(a)y1=y转换矩阵形式B=AX$$\left[\begin{matrix}x1\\y1\\1\end{matrix}\right]=\left[\begin{matrix}1&tan(a)&0\\0&1&0\\0&0&1\end{matrix}\right]*\left[\begin{matrix}x\\y\\1\end{matrix}\right]$$沿y轴倾斜弧度a（图左4）x1=xy1=y+xtan(a)=xtan(a)+y转换矩阵形式B=AX$$\left[\begin{matrix}x1\\y1\\1\end{matrix}\right]=\left[\begin{matrix}1&0&0\\tan(a)&1&0\\0&0&1\end{矩阵}\right]*\left[\begin{矩阵}x\\y\\1\end{矩阵}\right]$$5。平移矩阵是在2d坐标中导出的，假设有一个点(x,y)平移就是变换x或y加上x方向的位移tx或y方向的位移ty。这样就可以得到新的点坐标（x1，y1）（图中左边5）。公式x1=x+txy1=y+ty转换矩阵形式B=AX$$\left[\begin{matrix}x1\\y1\\1\end{matrix}\right]=\left[\begin{matrix}1&0&tx\\0&1&ty\\0&0&1\end{matrix}\right]*\left[\begin{matrix}x\\y\\1\end{matrix}\right]$$6。复合变换将变换矩阵一一乘以得到一个新的矩阵记为$T_c$，使得$B=X*T_c$。所以在CocosCreator中，_worldMatrix就是当前节点在世界坐标系中对应的复合变换矩阵$T_c$。矩阵乘法不满足交换律。因此，在不同的顺序下，变换的效果会有所不同。7.总结待续。第二部分，我将以分析CCNode.js中的_updateLocalMatrix方法为切入点，加强对CocosCreator中_worldMatrix的理解。在接下来的部分中，使用你所了解的知识来完成图形转换的演示。再次加强对_worldMatrix的认知。欢迎感兴趣的朋友关注我的微信订阅号“小源不小”，或点击下方二维码关注。我会把自己多年开发中遇到的困难，以及一些有趣的功能发布出来，我的经验会一一发布到我的订阅号。如果需要本文的demo，可以在公众号回复matrix。维护一个CoscosCreator游戏开发组。欢迎喜欢聊技术的朋友加入我。我用cocoscreator开发了一个小游戏【坦克人】。有兴趣的朋友可以来玩
