What is the world matrix in cocos creator

Time:2019-12-10

What is the world matrix in cocos creator

1. (matrix) what is matrix and what is its use

Matrix a magical existence? Is the meaning of the values in the development process scratching your ears and scratching your cheeks? Today, we’re going to break the mystery. Due to the large amount of content, the “worldmatrix” in cocos Creator will be divided into three articles. Finally form a complete demo

First of all, let’s look at the attributes of the corresponding graph changes in the Cocos creator editor, as shown in the following figure

IDE中变换属性-小院不小

The red boxes areDisplacement, rotation, scaling, tiltThey all correspond to a transformation matrix one by one.

Matrix in cocos creator is a length16One dimensional array ofRow firstStore a4 x 4The square array of. Array index0 1 2 3Respectively represent matrixFirst columnThe first1 2 3 4 That’s okData. In 2D game coordinate system, a three-dimensional matrix can satisfy the basic transformation, but cocos creator uses a four-dimensional matrix, which should be consistent with 3D. The matrix is represented as follows (the left side represents the corresponding attribute arrangement position of mat4. On the right is the position information of the variable a B C D TX ty that is often used in the code and the matrix.)

$$
\left[
\begin{matrix}
m00&m04&m08&m12\
m01&m05&m09&m13\
m02&m06&m10&m14\
m03&m07&m11&m15\
\end{matrix}
\right]
=>
\left[
\begin{matrix}
a&c&0&0\
b&d&0&0\
0&0&1&0\
tx&ty&tz&1
\end{matrix}
\right]
$$

What’s the use of such information? Used to store nodesrotate zoom tilt translationGraphics transformation information of. To know the reason, it is necessary to review linear algebra and high numbers

  1. Matrix multiplication and related properties
  2. Unit matrix, inverse matrix, matrix transpose
  3. vector
  4. Homogeneous coordinates
  5. trigonometric function

With the above knowledge, we can simply deduce the corresponding 4 cases of graph transformation in 2D case

2. Derivation of rotation matrix

In 2D coordinate system, if there is a point (x, y), we connect the point with the origin (0, 0) to form a line segment. At this time, the radian of the line segment and the x-axis in the coordinate system is a. We will take the origin as the center of the circle, the length radius of the line segment R. Rotate radian B anticlockwise, and the coordinate at the other end of the line changes to (x1, Y1), as shown in the following figure (left 1)

旋转推导

Knowledge of three functions

  • Sine and cosine functions
    sin(a)=y/r => y = rsin(a)
    cos(a)=x/r => x = r
    cos(a)
  • Sum angle formula
    cos(a+b) = cos(a)cos(b) – sin(a)sin(b)
    sin(a+b) = sin(a)cos(b) + cos(a)sin(b)

Can be derived from trigonometric function
x1 = rcos(a+b) = rcos(a)cos(b) – rsin(a)sin(b) = xcos(b) – ysin(b)
y1 = r
sin(a+b) =rsin(a)cos(b) + rcos(a)sin(b) = ycos(b) + xsin(b) = xsin(b)+ysin(b)
Transformation matrix form B = ax

$$
\left[
\begin{matrix}
x1\y1\1
\end{matrix}
\right]
=
\left[
\begin{matrix}
cos(b)&-sin(b)&0\
sin(b)&cos(b)&0\
0&0&1
\end{matrix}
\right]
\times
\left[
\begin{matrix}
x\y\1
\end{matrix}
\right]
$$

In cocos creator, row matrix is used. The actual operation form of Cocos creator is as follows, and the conversion formula is as follows $B ^ t = x ^ t * a ^ t $. For the rest of zooming, tilting and translating in cocos creator, please deduce by yourself according to the transpose matrix.

$$
\left[
\begin{matrix}
x1&y1&1
\end{matrix}
\right]
=
\left[
\begin{matrix}
x&y&1
\end{matrix}
\right]
\times
\left[
\begin{matrix}
cos(b)&sin(b)&1\
-sin(b)&cos(b)&1\
0&0&1
\end{matrix}
\right]
$$

3. Derivation of scaling matrix

In 2D coordinate system, if there is point (x, y) scaling, it is to multiply X or y of coordinate by a scaling factor SX or sy respectively. Get a new coordinate (x1, Y1), as shown in Figure 2 on the left.

旋转推导

So we can get the scaling formula
x1=xsx = xsx + y0
y1=x
sy = x0 + ysy
Transformation matrix form 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]
\times
\left[
\begin{matrix}
x\y\1
\end{matrix}
\right]
$$

4. Derivation of tilt matrix

In 2D coordinate system, it is assumed that there is a point (x, y) tilt divided into X-axis tilt and y-axis tilt. Tilting along the x-axis is a line segment connecting the point and the point (x, 0), with (x, 0) as the center, rotating radian a. As shown in the following figure (left 3, left 4), a new coordinate (x1, Y1) is obtained.

旋转推导

From this, we can get the tilt formula

  • Tilt radian a along X axis (Fig. 3 on the left)
    x1=x+ytan(a)
    y1=y
    Transformation matrix form 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]
\times
\left[
\begin{matrix}
x\y\1
\end{matrix}
\right]
$$

  • Tilt radian a along Y axis (Fig. 4 on the left)
    x1=x
    y1=y+xtan(a)=xtan(a)+y
    Transformation matrix form 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{matrix}
\right]
\times
\left[
\begin{matrix}
x\y\1
\end{matrix}
\right]
$$

5. Derivation of translation matrix

In 2D coordinates, it is assumed that the translation of the existing point (x, y) is to add X or y to the x-direction displacement TX or Y-direction displacement ty, respectively. So we can get a new point coordinate (x1, Y1) (Figure 5 on the left)

旋转推导

The formula can be obtained

x1=x+tx
y1=y+ty

Transformation matrix form 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]
\times
\left[
\begin{matrix}
x\y\1
\end{matrix}
\right]
$$

6. Composite transformation

By multiplying the transformation matrix, we get a new matrix named $t_c $, which makes $B = x * t_c $. Therefore, the “worldmatrix” in * * cocos creator is the composite transformation matrix * * $t ﹣ C $corresponding to the current node in the world coordinate system. The multiplication of matrix does not satisfy the commutative law. So the effect of transformation will be different in different order.

7. summary

To be continued, in the second part, I will analyze the “updatelocalmatrix” method in ccnode.js as a starting point to enhance the understanding of “worldmatrix” in cocos creator. In the next part, we use the knowledge of understanding to complete the graph transformation demo. Once again, strengthen the understanding of “worldmatrix”.

Welcome interested friends to follow my wechat subscription number “small yard is not small”, or click the QR code below to follow. I will publish the difficulties encountered in the development for many years and some interesting functions to my subscription number one by one. NeedThis article demoYou can reply in the public address.matrix

微信关注【小院不小】

Maintain a COSCOs creator game development group, welcome friends who like chatting technology to join

微信群

I have nothing to do with my spare time. I developed a small game “Tank Man” with cocos creator. One of my interested friends can play it

小游戏坦克侠