What Cocos Creator in _worldMatrix in the end is (in)
1. novella Summary
In Part I mainly do three things
- Simply expressed the basic knowledge of the matrix, and trigonometric functions related to the knowledge needed
- Derived graph transformation displacement, rotation, scaling the corresponding transformation matrix.
- Matrix storage cocos creator
In this blog entry we will use the transformation matrix is derived, one by one validation logic behind the code update node transformation matrix code. Game scene node into a tree of parent-child relationship. WorldMatrix current node is obtained by the parent node corresponding to the matrix, the current scene is only one node, the current node should localMatrix same worldMatrix (not tested). So here we come to know through the analysis updateLocalMatrix.
Graphics transformation of indicia to inform a manner rendering flow of dirty data to update the transformation matrix cocos creator. Positioning calculation using the conversion information stored in the current need to be updated. updateLocalMatrix method of long lines of code, but also to facilitate the analysis, it will be split block. To view this whole block of code, download the v2.1.3 version of cocos creator. Code corresponding to the installation file \ resources \ engine \ cocos2d \ core \ CCNode.js
2. updateLocalMatrix overall logic function
It can be demonstrated from the following code conversion procedure I described upper, dirty determination value update without return. Determine whether the graphics transformation, update no return. Here it is necessary to explain how lower-level operations are done store multiple values.
ABC provided a choice of three options exist, the correct option for the AC. We set the weight of ABC are A = 001 B = 010 C = 100, AC weights AC = A | B = 101. At this point, if the user selects B, the program only need to AC & B> 0 know is correct. Code to just use this conversion process in the node, changing the value of the present conversion localMatDirty.
// author:herbert 公众号:小院不小
// 原文链接 https://www.cnblogs.com/yfrs/p/ccmatrix2.html
_updateLocalMatrix() {
let dirtyFlag = this._localMatDirty;
if (!dirtyFlag) return;
let t = this._matrix;
if (dirtyFlag & (LocalDirtyFlag.RT | LocalDirtyFlag.SKEW)) {
// 旋转 缩放 倾斜
}
t.m12 = this._position.x;
t.m13 = this._position.y;
this._localMatDirty = 0;
this._worldMatDirty = true;
}Tag (LocalDirtyFlag.RT | LocalDirtyFlag.SKEW)LocalDirtyFlag.RT = LocalDirtyFlag.POSITION | LocalDirtyFlag.SCALE | LocalDirtyFlag.ROTATION code if it is determined whether or not there is a transformation of the current position, scale, rotation, skew. Although the position is determined, and if not put in the code block is provided, perhaps any other position transformation results in transform. The final step is to restore mark, and tell rendering the stream was updated worldMatrix.
3. inclined rotating zoom code logic
Matrix multiplication is not commutative, i.e. AB <> BA embodied in the code so the reason is determined also rotation and tilt zoom settings. Converting the composite sequence affects the final position of the node. This part of the code logic is as follows
// author:herbert 公众号:小院不小
if (dirtyFlag & (LocalDirtyFlag.RT | LocalDirtyFlag.SKEW)) {
let rotation = -this._eulerAngles.z;
let hasSkew = this._skewX || this._skewY;
let sx = this._scale.x, sy = this._scale.y;
if (rotation || hasSkew) {
// 旋转 倾斜
}
else {
t.m00 = sx;
t.m01 = 0;
t.m04 = 0;
t.m05 = sy;
}
}Tag, no rotation or tilt information on the left scale. Then the current matrix is scaling matrix, simply put values on the diagonal of the matrix in turn set sx sy. let rotation = -this._eulerAngles.z;Takes a negative value because, rotation clockwise is positive, then the Euler angles, counterclockwise is positive. Take the z-axis rotation angle, because the rotary shaft 2d is the z-axis.
4. The presence of the inclination of the code logic
It is seen from the code, if the presence of the complex transform. cocos creator transform order, the rotation -> Zoom -> inclination -> Displacement. There are two places need attention
- Incoming angle of rotation needs to be converted to radians. Not often used math.cos math.sin may not know the parameters of these functions are in radians
- Math.sin (Math.PI / 6) is not equal to 0.5 because of floating point
// author:herbert 公众号:小院不小 wx:464884492
// 原文链接 https://www.cnblogs.com/yfrs/p/ccmatrix2.html
if (rotation || hasSkew) {
let a = 1, b = 0, c = 0, d = 1;
// rotation
if (rotation) {
let rotationRadians = rotation * ONE_DEGREE;
c = Math.sin(rotationRadians);
d = Math.cos(rotationRadians);
a = d;
b = -c;
}
// scale
t.m00 = a *= sx;
t.m01 = b *= sx;
t.m04 = c *= sy;
t.m05 = d *= sy;
// skew
if (hasSkew) {
// 倾斜
}
}Rotation matrix codes in the block, to extract only the four upper left corner, draw concrete block of matrix A. At this point it should be equal to A selection matrix, i.e. a = cos (b) b = sin (b) c = -sin (b) d = cos (b). From the last chapter we derive is a rotation matrix rotated counterclockwise down. Then the code in order to comply with habits rotation is clockwise. All the corresponding rotation matrix should be multiplied by -1;
Since cos is an even function, sin is an odd function, into the matrix -1 is obtained
a = cos (b) b = -sin (b) c = sin (b) d = cos (b); Next scaling process, the Right scaling matrix multiplication (Cocos transformation matrix composite, left or right by multiplying, where not explicitly described. here is the code by thrust reverser may be incorrect) matrix after the change, as shown in FIG.
(Row by column) seen from the rules of matrix multiplication
A = A SX B = B SX C = C SY D = D SY
The inclined code logic
In fact, two inclined transform, X axis tilt and Y axis tilt. In Part derivation, to give the corresponding transformation matrix. Block Matrix with only taken as the upper left corner of A. wherein
// author:herbert 公众号:小院不小 wx:464884492
if (hasSkew) {
let a = t.m00, b = t.m01, c = t.m04, d = t.m05;
let skx = Math.tan(this._skewX * ONE_DEGREE);
let sky = Math.tan(this._skewY * ONE_DEGREE);
if (skx === Infinity)
skx = 99999999;
if (sky === Infinity)
sky = 99999999;
t.m00 = a + c * sky;
t.m01 = b + d * sky;
t.m04 = c + a * skx;
t.m05 = d + b * skx;
}Since tan (90) approaches infinity when the calculated value Infinity skx and sky are defined to be a value. Next, look at the code corresponding to the transform matrix. First, start with the sequence x to y will Asky and a composite matrix obtained by multiplying Askx. And then multiplying the current transformation matrix p, order and control front, still using abcd
Matrix multiplication is associative rate, first multiplying two matrices on the right
Therefore, a new value obtained by the rules of matrix multiplication
M00 Sky = A + C * C + A * = M04 SKX
M01 * = D + B D + B = Sky M05 * SKX
6. Summary
It is not easy with respect to the medium-length articles, an interval of more than a month, original. Matrix has been catching graphics and knowledge during this period. Initial analysis of version 2.0.10, then there is rotationX rotationY rotation code, and when rotationX rotationY are not equal, has been stuck in the analysis of that code. And later also go to the official forums to ask questions https://forum.cocos.com/t/topic/84680/4 , did not get a satisfactory result, many people did not reply. Later, a variety of information search, only to find that code official will be removed, by way of the Euler angles. All I will upgrade the local version to v2.1.3 version. After this version, and stuck in the rotation = the let - this._eulerAngles.z this negative number problem. The analysis of the more, the more the feeling of a lack of Euler angles, quaternions. While the feeling may not write a novella, but I found a sense of derivation of the novella is completed. Of course, I think there are unclear
- In version 2.0.10 Y-axis and the X axis is selected question, why the result can be divided into two according to the axis Z
- In version 2.1.3 z Euler angles of rotation takes a negative sign problem, rotation matrix issues are negated value bc
- Right-multiplication transform matrix composite multiplication problem, in this article I is derived by multiplying the code should be left
- Asky and skew transformation sequence multiplied Askx two centering problem, results obtained codes right-multiplying x y
Maintains a Coscos Creator game development group, welcomed like friends to join chat technology
Nothing else to do, using cocos creator has developed a small game [Man] tanks, interested friends can play a