DoraemonEXA Posted February 26, 2018 Share Posted February 26, 2018 hi, I'm new to Phaser and recently translating a Cocos2dx extension to Phaser(2.8.7) with Typescript. This extension is written in C++ and basically is a skeleton animation run-time, it uses an additional matrix (3x3) to transform the cells (CCSprite object, similar to the Phaser.Sprite) of the skeleton. In Cocos2dx, the additional transformation is done by the following code, the CCSprite object stores this matrix as m_sAdditionalTransform, and re-calculate its local transformation matrix m_sTransform. (simplified from CCNode::nodeToParentTransform) // Translate values // m_obPosition = Phaser.Sprite.position float x = m_obPosition.x; float y = m_obPosition.y; // Rotation values // Change rotation code to handle X and Y // If we skew with the exact same value for both x and y then we're simply just rotating float cx = 1, sx = 0, cy = 1, sy = 0; // m_fRotationX = m_fRotationY = Phaser.Sprite.angle if (m_fRotationX || m_fRotationY) { float radiansX = -CC_DEGREES_TO_RADIANS(m_fRotationX); float radiansY = -CC_DEGREES_TO_RADIANS(m_fRotationY); cx = cosf(radiansX); sx = sinf(radiansX); cy = cosf(radiansY); sy = sinf(radiansY); } bool needsSkewMatrix = ( m_fSkewX || m_fSkewY ); // optimization: // inline anchor point calculation if skew is not needed // Adjusted transform calculation for rotational skew // m_obAnchorPointInPoints is similar to the PIXI.DisplayObject.pivot? x += cy * -m_obAnchorPointInPoints.x * m_fScaleX + -sx * -m_obAnchorPointInPoints.y * m_fScaleY; y += sy * -m_obAnchorPointInPoints.x * m_fScaleX + cx * -m_obAnchorPointInPoints.y * m_fScaleY; // Build Transform Matrix // Adjusted transform calculation for rotational skew m_sTransform = CCAffineTransformMake( cy * m_fScaleX, sy * m_fScaleX, -sx * m_fScaleY, cx * m_fScaleY, x, y ); // simple matrix multiplication, m_sTransform x m_sAdditionalTransform m_sTransform = CCAffineTransformConcat(m_sTransform, m_sAdditionalTransform); After doing some research and writing some test code, I know the only way to implement similar transformation is through the Sprite.transformCallback and modify the wt (Phaser.Matrix) parameter. By comparing with the source code within PIXI.DisplayObject.updateTransform, I found their code are very similar, but give different matrix: For example, if the parents of the sprite don't have any transformation, and m_sTransform represents a matrix (a, b, c, d, x, y) in Cocos2dx, in Phaser, the world transform matrix will be (a, -b, -c, d, wtx, wty), here (x, y) is the local position of the sprite and translated by the 'pivot' (anchorPointInPoints), (wtx, wty) is the world position of the sprite. I know the coordinate systems are different between these two engines(bottom-left vs top-left), and the pivot point also works in different way (in Cocos2dx the anchor point is the same as the pivot), I'm wondering is it possible to retrieve a local transform(node-to-parent)matrix of a sprite in Phaser/Pixi, so i can add the additional transform matrix to it and regenerate a correct world transform matrix. My english is not good so if you need more information or code sample just leave your comments Link to comment Share on other sites More sharing options...
Recommended Posts