Search the Community

What I'm trying to accomplish is to basically write all my game logic in world units and use camera to see part of it rendered on the screen. Let's say my world is an infinite plane and I want to add a sprite, which will have dimensions of one unit in x axis and one unit in y axis. Then, I define a camera with dimensions of 4 units on x axis and 2 units on y axis. Visualization below. To get close to my desired result I followed the example in this blog post and used RenderTextureSystem to actually define source canvas dimensions equal to my world dimensions and target dimensions to the browser window size. Here is the code class WorldContainer extends DisplayObject { sortDirty: boolean; public content: Container; public camWidth = 4; public camHeight = 2; public camOffsetX = 0; public camOffsetY = 0; constructor() { super(); this.content = new Container(); } calculateBounds(): void { return this.content._calculateCachedBounds(); } removeChild(child: DisplayObject): void { this.content.removeChild(child); } removeChildren(): DisplayObject[] { return this.content.removeChildren(); } addChild(child: DisplayObject): DisplayObject { return this.content.addChild(child); } render(renderer: Renderer) { const targetWidth = renderer.view.width; const targetHeight = renderer.view.height; const targetRatio = targetWidth / targetHeight; const sourceWidth = this.camWidth; const sourceHeight = this.camHeight; const sourceRatio = sourceWidth / sourceHeight; let requiredWidth = 0; let requiredHeight = 0; if (sourceRatio >= targetRatio) { // source is wider than target in proportion requiredWidth = targetWidth; requiredHeight = requiredWidth / sourceRatio; } else { // source is higher than target in proportion requiredHeight = targetHeight; requiredWidth = requiredHeight * sourceRatio; } renderer.renderTexture.bind( null, new Rectangle(this.camOffsetX - this.camWidth / 2, -this.camOffsetY + this.camHeight / 2, this.camWidth, this.camHeight), new Rectangle((targetWidth - requiredWidth) / 2, (targetHeight - requiredHeight) / 2, requiredWidth, requiredHeight), ); this.content.render(renderer); renderer.batch.flush(); renderer.renderTexture.bind(null); } updateTransform() { super.updateTransform(); const { _tempDisplayObjectParent: tempDisplayObjectParent } = this.content; this.content.parent = tempDisplayObjectParent as Container; this.content.updateTransform(); this.content.parent = null; } } I have done some extra work to preserve aspect ratio of camera, when drawing to canvas, so it won't get stretched and will just fit the screen. However, real issue comes when I try to make sprites, because when I give it a texture and let's say dimensions of my texture are 64x64 pixels, then my sprite is huge filling the whole screen. That's when I thought just setting width and height of the sprite should be enough. For example to recreate the example in the picture above, I would make the sprite like this and add it to the content of world container. const sprite: Sprite = Sprite.from('sadge.png'); sprite.anchor.set(0.5); sprite.x = 1.5; sprite.y = 1.5; sprite.width = 1; sprite.height = 1; worldContainer.content.addChild(sprite); Now, what I don't like about this solution is, that when I add child sprite to that previous sprite and give it's x to be equal to 1, y to be equal to 0, I expect it to appear on second row and third column. However, not only the child sprite is not in my expected position, it's also not visible. After, hours of debugging I found out, that when setting width and height for parent sprite, under the hood pixi modifies scale and it ruins everything for child sprite. If, I set sprite's width height to be 1x1, it sets scale for sprite to be ( 4 / canvas_w, 2 / canvas_h), which is very tiny and because that scale is also applied to its children, they get so small that they are not visible. I know that I can manually multiply by inverse of the scale ratio for every child and cancel that effect, but to be frank it is very ugly solution. I was wondering if you could help me to fix this issue, or give me a directing advice on how to approach it. If feels like I am solving this whole world unit issue in a very wrong way and there is far simpler and neater solution. I've been struggling with this thing for weeks now and would really appreciate any help.

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: http://playground.babylonjs.com/#R8ZH46 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.

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

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!

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?

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?

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.

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 !

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