Search the Community

I am currently creating a program to teach players about symmetry but I encountered some problem This is what I want to get: The program works fine when flipping horizontally. However when it comes to diagonal: Is it possible for the figure to flip diagonally while it stays on the line of symmetry and not not fly out of it? Flip code of horizontal: 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); this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true); this.game.time.events.add(Phaser.Timer.SECOND * 1, function () { this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500); 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: 0}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true); }, this); this.game.time.events.add(Phaser.Timer.SECOND * 2.5, function () { this.tweenTint(graphicsend, 0x6666ff, 0xffffff, 500); 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); this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true); }, this); this.game.time.events.add(Phaser.Timer.SECOND * 3.5, function () { this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500); 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: 0}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true); }, this); Flip code for diagonal: 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: 318}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { y: 408}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to({angle:'+90'}, 500, Phaser.Easing.Linear.None, true); this.game.time.events.add(Phaser.Timer.SECOND * 1, function () { this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500); 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: 133}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { y: 220}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to({angle:'-90'}, 500, Phaser.Easing.Linear.None, true); }, this); this.game.time.events.add(Phaser.Timer.SECOND * 2.5, function () { this.tweenTint(graphicsend, 0x6666ff, 0xffffff, 500); 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: 318}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { y: 408}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { alpha: 0.5 }, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to({angle:'+90'}, 500, Phaser.Easing.Linear.None, true); }, this); this.game.time.events.add(Phaser.Timer.SECOND * 3.5, function () { this.tweenTint(graphicsend, 0xffffff, 0x6666ff, 500); 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: 133}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { y: 220}, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to( { alpha: 1 }, 500, Phaser.Easing.Linear.None, true); this.game.add.tween(graphicsend).to({angle:'-90'}, 500, Phaser.Easing.Linear.None, true); }, this);

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?

Hi, How can I do a page flip effect in a Sprite? example: http://jsfiddle.net/kmturley/GGea5/1/

What's the status? I see last posts and questions pointing back to year 2015 Any other temporary advice on Flipping plane effect? Example -> http://jsfiddle.net/rsadwick/zwWHY/

Hi It's my first post here, glad to join you guys. Anyway I try to flip sprite(or just texture) horizontally, these are the only ways I found: sprite.scale.x = -1;or sprite.width = sprite.width * -1;but both of them are buggy ways (I don't mean that scalling has a bug). They of course flip sprite horizontally, but also move it to the left of sprite.width pixels. I don't really like the solution that we could keep state for example: sprite.flippedH = true; //user defined variable; so then we can move it to the right preventing displacement of sprite. Is there something to just flip it without changing displaying position? EDIT: Is this the only way we can do it? //extending PIXI.Sprite classPIXI.Sprite.prototype.__defineGetter__("flippedH", function() { return (this._flippedH === true);});PIXI.Sprite.prototype.__defineSetter__("flippedH", function(val) { if ( val != (this._flippedH===true) ) { if ( val ) { this.anchor.x = 0.9; //not 1, because then 1px is out of place to right side } else { this.anchor.x = 0; } this.scale.x *= -1; } this._flippedH = val;});it uses scale and anchor vars, Why it's bad way to achieve it? Because when we use anchor or scalling things to do something different that this, we need to care about negative value of scale and occupied field of anchor. Any ideas?