How to tween flip a sprite diagonally?

[JcKairos]

I know that tween flipping horizontally and vertical can be done with sprite.scale.x*-1 and sprite.scale.y*-1.

I can get the result of diagonally flipping by implementing both the horizontal and vertical flipping, but it does not look like it is flipping when tween and instead just looks like it became small and larger again.

Is there any way to show it flipping diagonally?

[samid737]

 

You could rotate the sprite while scaling:

https://phaser.io/sandbox/edit/NSTGmvvg

but the transform matrix deals with these kind of transformations in general so you can do all sorts of crazy things with it. You could modify the a,b,c and d's (rotation 90 degrees + stretching in x and y) by tweening A parameter via A transformCallback:

 

[JcKairos]

18 hours ago, samid737 said:

 

You could rotate the sprite while scaling:

https://phaser.io/sandbox/edit/NSTGmvvg

but the transform matrix deals with these kind of transformations in general so you can do all sorts of crazy things with it. You could modify the a,b,c and d's (rotation 90 degrees + stretching in x and y) by tweening A parameter via A transformCallback:

 

Is there a way for it be visually flipping and not seem like it is becoming small and then large again?

[samid737]

Do you mean reflecting the sprite? The Reflection part in the wiki is probably what you can use. With diagonal being A line trough the origin, it would look something like (not exactly sure, you will have to play with the numbers):

    normsqrd =(trans.s*trans.s)+1; 
    
    wt.a = (1/(normsqrd))*((trans.s*trans.s) - normsqrd); 
	wt.b = (1/(normsqrd))*trans.s*2;
	wt.c = (1/(normsqrd))*(normsqrd-(trans.s*trans.s));
	wt.d = (1/(normsqrd))*trans.s*2;

 

[JcKairos]

On 2/2/2018 at 7:02 PM, samid737 said:

Do you mean reflecting the sprite? The Reflection part in the wiki is probably what you can use. With diagonal being A line trough the origin, it would look something like (not exactly sure, you will have to play with the numbers):

    normsqrd =(trans.s*trans.s)+1; 
    
    wt.a = (1/(normsqrd))*((trans.s*trans.s) - normsqrd); 
	wt.b = (1/(normsqrd))*trans.s*2;
	wt.c = (1/(normsqrd))*(normsqrd-(trans.s*trans.s));
	wt.d = (1/(normsqrd))*trans.s*2;

 

May I have the source? Don't really understand this code. (Sorry for the late reply, was on vacation)

[JcKairos]

Currently I am trying to get a graphic figure to flip diagonally, it is working fine when flipping horizontally and vertically using the codes:

this.game.add.tween(graphicsend.scale).to( { y: graphicsend.scale.y*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { y: 630}, 500, Phaser.Easing.Linear.None, true);

and

this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 450}, 500, Phaser.Easing.Linear.None, true);

However, I faced a problem when trying to flip it diagonally:

this.game.add.tween(graphicsend.scale).to( { x: graphicsend.scale.x*-1}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { x: 540}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to( { y: 540}, 500, Phaser.Easing.Linear.None, true);
this.game.add.tween(graphicsend).to({angle:'+90'}, 500, Phaser.Easing.Linear.None, true);

Even though the final result is what I desired, the progress does not look good. Instead of a smooth flip like the horizontal and vertical flip, the diagonal flip just make the graphic figure move like a crescent. It does not look like a flip but instead looks like the figure have jumped from one side to the other.

I am thinking that the problem is the anchor but how do you change the anchor for a graphic figure?