Is it possible to rotate object around the Z axe

Phaser 3
1

Hi,

I am trying to find a way to rotate an object of the screen on on the Z axe.
think of a card for example and spin it on the side

2

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
3

Agree with @Jackolantern said.
Here are some live demos of rotating image around X/Y/Z, in css transform (without perspective feature)

  • rotateX: Scale down image’s height.
  • rotateY: Scale down image’s width.
  • rotateZ: Spin around image’s center.
1 Like
4

was away… this is currently the best solution i have found:

function create() {
scene = this;
card = this.add.sprite(300, 100, “card”).setInteractive();
card.setOrigin(0.5);

card.on("pointerdown", flipCard);

}

function flipCard() {
var tween1 = this.scene.tweens.add({
targets: card,
scaleX: sizeChange,
duration: 1500,
ease: “Linear”,
onComplete: function() {
if (currentCardFrame == 0) {
card.setFrame(1);
currentCardFrame = 1;
} else {
card.setFrame(0);
currentCardFrame = 0;
}
tween2.play();
}
});

var tween2 = this.scene.tweens.add({
  paused: true,
  targets: card,
  scaleX: 1,
  duration: 1500,
  ease: "Linear",
  onComplete: function() {
    tween1.play();
  }
});

}
}

didnt cleant it yet the function but it give some feeling of card flipping. this is start working on mouse pointer down.
the card spritesheet contain 1 card but both side. position0: card face down, position1: card face up

5

You could also use a quad and tween the corner points to simulate perspective.