3D Rotation of Sprites (card flip animation)

[Julio Rodrigues]

Hello,

 

How can I do a card flip in a Sprite? There's 3D rotation?

[xerver]

Pixi.js is a 2D library, there is no 3D support. You can do a 2D slip animation by projecting the animation and skewing the sprite.

[-AAG-]

Fake flip:

-reduce the x scale of the image until it reaches 0

-change sprite

-increase x scale until it reaches 1 (or default full size value)

 

note: image x origin should probably be the center of the image

 

That is what I did for my Memory Flip game and it doesn't look that bad. i use GM: Studio but I'm sure there is an equivalent on what you are using.

[Julio Rodrigues]

@xerver, you mean by projecting using a perspective projection matrix? How can I skew a sprite in Pixi? 

 

@-AAG-, that's a nice effect indeed, I've saw some games in flash using this animation. Thanks!

[xerver]

@xerver, you mean by projecting using a perspective projection matrix? How can I skew a sprite in Pixi? 

 

@-AAG-, that's a nice effect indeed, I've saw some games in flash using this animation. Thanks!

 

Yes, and there isn't a way to have it done for you; you would have to create a custom renderable object.

[khinjer]

animate();

var sprite_animation = true;

function animate() {

 

    requestAnimationFrame(animate);

 

    if(sprite_animation){

 

        sprite.scale.x -= 0.01;

        sprite.position.x +=0.5;

        if(sprite2.scale.x < 0 ){

          sprite_animation = false; 

        }

    }else{

 

        sprite.scale.x += 0.01;

        sprite.position.x -=0.5;

        if(sprite.scale.x == 1 ){

          sprite_animation = true;

          

        }

    }

}

[Igor Georgiev]

On 9/3/2015 at 3:02 PM, khinjer said:

animate();

 

var sprite_animation = true;

 

 

function animate() {

 

 

 

 

 

    requestAnimationFrame(animate);

 

 

 

 

 

    if(sprite_animation){

 

 

 

 

 

        sprite.scale.x -= 0.01;

 

 

        sprite.position.x +=0.5;

 

 

        if(sprite2.scale.x < 0 ){

 

 

          sprite_animation = false; 

 

 

        }

 

 

    }else{

 

 

 

 

 

        sprite.scale.x += 0.01;

 

 

        sprite.position.x -=0.5;

 

 

        if(sprite.scale.x == 1 ){

 

 

          sprite_animation = true;

 

 

          

 

 

        }

 

 

    }

 

 

}

 

is sprite2 a child of sprite?

[Igor Georgiev]

5 minutes ago, Igor Georgiev said:

is sprite2 a child of sprite?

I think it is just a typo and the last bit

  if(sprite.scale.x == 1 ){

          sprite_animation = true;

          

        }

should be > 1, because for some reason in my case it started to expand indefinitely after going through this check.

[ivan.popelyshev]

Cardflip. https://gameofbombs.github.io/pixi-bin/index.html?s=flip&f=cards.js&title=Cards

But its pixi-4.0rc fork

[Igor Georgiev]

still, quite a good solution, thanks.