Is it possible to rotate object around the Z axe

I am not sure if spinning on the Z axis is actually what you are looking for. In a 2D space, the Z axis could be imagined as being a line moving directly into the screen and skewering the sprites in the middle. Rotating a sprite about its Z axis would be the same as calling setAngle(360), or tweening angle in a normal rotation.

I am wondering if you are actually thinking about rotating it on its X or Y axes, which are different than a basic rotation and would require a “flipping” motion to complete. The X axis starts at the left side of the screen, travels across the screen and cuts through the sprite from left to right. The Y axis starts at the top and travels down the screen to cut through the sprite from top to bottom. The way I always have to picture these in my head to keep them straight is I picture a long, thin piece of wood traveling across the screen (for X and Y) or into the screen (for Z) and my sprite is glued onto it and then I picture how it would look as I twirl the rod.

I am not sure if there is a native way to rotate on X and Y axes in a true 3D space in Phaser. I know you can now do it with CSS3 to DOM elements but I don’t know if that can be done without dropping down into WebGL in-game. However, there is a classic way of faking this in 2D game development, where you simply scale the sprite down in the axis opposite the one you want to rotate around. When it gets down to only a couple of pixels wide, you either flip the sprite to point in the other direction or swap it to be whatever the other side of the sprite is supposed to look like. Then you scale it back out in the same axis you shrank it on until it is full size again. It is actually quite a convincing effect if done right.

Hope this helps!

1 Like