Search the Community

Showing results for tags 'transformation'.

More search options

  • Search By Tags

    Type tags separated by commas.
  • Search By Author

Content Type


  • HTML5 Game Coding
    • News
    • Game Showcase
    • Facebook Instant Games
    • Web Gaming Standards
    • Coding and Game Design
  • Frameworks
    • Phaser 3
    • Phaser 2
    • Pixi.js
    • Babylon.js
    • Panda 2
    • melonJS
  • General
    • General Talk
  • Business
    • Collaborations (un-paid)
    • Jobs (Hiring and Freelance)
    • Services Offered

Find results in...

Find results that contain...

Date Created

  • Start


Last Updated

  • Start


Filter by number of...


  • Start



Website URL





Found 8 results

  1. Probably some easy question... but I've been struggling too long with the math. Does anybody know how to compute the Linear Velocity (world space) of a Circus Cannon Ball based on the Cannon Tube mesh orientation? In this case I use positive Y axis of cannon tube as 'forward', but in general I use the local Z axis as forward (to adhere to the definitions of BABYLON.Vector3.Forward() etc.). Once I know how to dynamically compute the (normalized) direction of the tube, I can then scale this vector with the cannon's shooting power (e.g. longer fire button press results in farther shooting). And add some random vector noise to make easy ball have a slightly different path each time. Please note that the tube is a child mesh on purpose so the orientation needs to be translated to world first. Here's the playground so far: The solution to this question will probably be useful for anyone else who is creating some kind of ballistic shooter game (not first person). I noticed that all physics vectors are in world space only so therefore I am looking for these kind of transformations to roll up local mesh orientation to world physics direction. Thanks Q P.S. The cannon is set to auto-fire but you can use SPACE for fire as well, and [ and ] to turn the cannon.
  2. 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
  3. Hello there, the last couple of days I was playing around with Phaser a lot, and I quite like it so far! My current project is supposed to be a kind of side-scrolling Beat'EmUp where the movement and action is turn-based and takes place on a pre-defined grid of rows and columns. Now, the idea was that it has a pseudo-3d look, and thus needs some kind of perspective projection. I've messed around with the Isometric-Plugin for Phaser, but the isometric perspective is not what I'm looking for. The camera would be static (the person is moving from left to right and the tiles on the ground keep scrolling in), so my guess is that it should somehow be possible in Phaser to mimic this effect by matrix manipulation of the coordinates or such. It's been a while I've been doing this, but I'd be willing to look up some maths again for this. I did a Tetris 3D game 2 years ago with Three.js, so I know that this setup is basic in true 3D environments, but for now, I'd like to know if anyone of you guys maybe has experience with things like this in Phaser, because I'd really like to stick with this framework. But if it should be too complicated to implement I'd also maybe have a look at Babylon.js or Three.js once more. As far as I know, those two lack those neat game-mechanics-implementations that Phaser offers...anyway, thanks for reading and taking your time, maybe one of you has an idea!
  4. Hello, I'm trying to get a coordinate system with (0,0) at the center of the screen. If I understood the API documentation correctly, adding a Container, applying PIXI.Container.setTransform(x, y, scaleX, scaleY, rotation, skewX, skeyY, pivotX, pivotY) and then adding Sprites as children to that Container should apply the transformation to all of them, right? So I created a Container, set x to width/2 and y to height/2, and added Sprites. Problem is, they still appear with (0,0) at top-left corner. Also modifying Container.x/y or Container.position.x/y would not add translations to children Sprites. Of course I could solve the problem by adding the width/2 and height/2 offsets to every sprite I create, but I really think display parameters should be seperated from the model data. What am I doing wrong? Is there a better solution?
  5. Hi! I want to transform sprite in the way like on attached pic (curved distortion from the top and bottom and then slightly skewing). I plan doing this dynamicaly, so parameters of the distortion should be chnaged in realtime. What is the best way of doing such transformations? I think, mesh should help or there is something more optimal?
  6. Hello. I got stuck in a issue that maybe you guys could help me out with your experience. I am developing a puzzle game where we have few circles on the screen. The user can drag one over the other and than the two circles merge into a new one (sometimes bigger, sometimes smaller). My issue is that I don't know how to model these circles. I thought about using the Graphics library, but I want them to have animations (with spritesheet and even using particles for a merge animation), so I think I can't use Graphics (can I?). Then, I thought about using simple sprites with the spritesheet, but then the problem is with the size transformations during the game. Notice that if the user drag one circle over the other one, I will delete the two original circles and create a new one based on the size of the two original (which can make the new circle be either smaller or bigger). I'll be grateful with any suggestion or directions on this. Best regards.
  7. Hello ! I'm trying to set a mesh at the center of my canvas while using a free camera, but I have difficulties. Considering that it's a mandatory feature in fps games, I thought that I may have a response using babylon js transformations classes, and camera worldMatrix and viewMatrix. Thank you in advance !
  8. Hello, I have a problem with parent/child transformation. I have two meshes. I'd like to apply a rotation to one mesh, then define this mesh as parent and the other as child. But the child is also rotate. I wish to know how to rotate the parent without moving the child before assigning the parent relation. Thanks