Jump to content

phaser/pixi transform matrix problems


DoraemonEXA
 Share

Recommended Posts

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

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...