DoraemonEXA

Members
  • Content count

    4
  • Joined

  • Last visited

  1. DoraemonEXA

    Loading rotated texture atlas

    Thanks for reply. I just read this article and confirm that Phaser supports texture-atlas with rotation enabled, so I don't need any pre-processing now. https://phaser.io/tutorials/advanced-rendering-tutorial/part7 It seems that the comments of altas loaders are not updated, it still says that the "rotate" option in the atlas software must be disabled? https://photonstorm.github.io/phaser-ce/Phaser.Loader.html#atlasJSONHash
  2. DoraemonEXA

    How to scale game to all popular mobile devices

    If your game is landscape orientation, may be you can try this code, generally i call it "fixed height" scale mode, and the target width & target height is the design resolution of your game (I use typescript) class SimpleGame { game: Phaser.Game; static readonly targetWidth = 2560; static readonly targetHeight = 1280; constructor() { this.game = new Phaser.Game(SimpleGame.targetWidth, SimpleGame.targetHeight, Phaser.AUTO, 'content', { preload: this.preload }); } preload() { this.game.scale.scaleMode = Phaser.ScaleManager.USER_SCALE; this.game.scale.setResizeCallback(function (scale: Phaser.ScaleManager, parentBounds: Phaser.Rectangle) { let h = scale.game.canvas.parentElement.offsetHeight; let scaleY = h / scale.game.height; scale.setUserScale(scaleY, scaleY, 0, 0); scale.setGameSize(SimpleGame.targetWidth, SimpleGame.targetHeight); }, null); } }
  3. DoraemonEXA

    Loading rotated texture atlas

    I have a texture atlas generated by Texture Packer with the "rotate" option is enabled. In order to load & render all the frames correctly, now I have to use a simple script to pre-process the json file, swap the "w" and "h" properties if the frame is marked "rotated". Is it possible to make a custom loader to load such texture atlas and store the restored frame in the cache
  4. DoraemonEXA

    phaser/pixi transform matrix problems

    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