Flipping effect on a group

[nemoidstudio]

Hello,

 

I am very new to phaser and I think I need some explanations on what can be done with a group:

for our next game we need to have a flipping effect on a "group". The group is composed of 2 sprites (a background and an illustration) and a text.

I followed the instruction given here on how to do it on a single sprite but I'm facing a problem with my group : it doesn't have an anchor property. So I have to create a second tween to update its y coordinate.

My question: why groups doesn't have an anchor ? Also why groups doesn't have events ? I have to set the click event on my background sprite.

 

Here is the complete code to illustrate my question:

window.onload = function() {    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create });    var movie;    var group_background;    var height;    function preload() {        game.load.image('group_background', 'http://www.clker.com/cliparts/b/E/s/M/D/a/blank-black-button.svg');        game.load.image('movie_cover', 'http://a1435.phobos.apple.com/us/r30/Video/3c/e9/0c/mzi.dtdrrsqk.170x170-75.jpg');    }    function create() {        game.stage.backgroundColor = "#485d6b";        group_background = game.add.sprite(50,50,'group_background');        var movie_cover = game.add.sprite(410,80,'movie_cover');        var style = { font: "40px Arial", fill: "#ff0044", align: "center" };        var title = game.add.text(100, 140, "The game", style);        movie = game.add.group();        movie.add(group_background);        movie.add(movie_cover);        movie.add(title);        height = movie.height;        // this doesn't work, group has no anchor        // movie.anchor.setTo(.5,.5);        group_background.inputEnabled = true;        group_background.events.onInputDown.add(first_flip, this);    }    function first_flip() {        tween = game.add.tween(movie.scale).to({y: 0}, 500, Phaser.Easing.Linear.None, true);        tween.onComplete.add(second_flip, this);        // so we have to create a second tween to move its y coordinate        tween2 = game.add.tween(movie).to({y:movie.y + height/2}, 500, Phaser.Easing.Linear.None, true);    }    function second_flip() {        group_background.tint = 0xfff;        tween = game.add.tween(movie.scale).to({y: 1}, 500, Phaser.Easing.Linear.None, true);        // same here        tween2 = game.add.tween(movie).to({y:movie.y - height/2}, 500, Phaser.Easing.Linear.None, true);    }}

ps: if you have any remarks on how my code I am also open to improvement

[lewster32]

Anchors are very specific in Phaser - they're meant to offset the texture of the sprite from its origin. Since groups do not have textures, an anchor in this context is inappropriate. You could make this work by setting the anchors of all of the sprites to 0.5, 0.5 instead.

 

Another way you could do this is rather than using a group, use a sprite with no key set instead, and then use movie.addChild(group_background) etc. You still need to set the anchors of the individual items and then flip the movie as normal, but you can use the familiar sprite methods and properties on the top level 'container' sprite.

        movie = game.add.sprite();        movie.addChild(group_background);        movie.addChild(movie_cover);        movie.addChild(title);

[nemoidstudio]

Thanks for your quick answer.

 

I tried your second proposition but could not make it work : it does not flip on the center of the "group". Here is my code:

window.onload = function() {    var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload, create: create });    var movie;    var group_background;    function preload() {        game.load.image('group_background', 'http://www.clker.com/cliparts/b/E/s/M/D/a/blank-black-button.svg');        game.load.image('movie_cover', 'http://a1435.phobos.apple.com/us/r30/Video/3c/e9/0c/mzi.dtdrrsqk.170x170-75.jpg');    }    function create() {        game.stage.backgroundColor = "#485d6b";        group_background = game.add.sprite(250,200,'group_background');        group_background.anchor.setTo(.5,.5);        var movie_cover = game.add.sprite(400,200,'movie_cover');        movie_cover.anchor.setTo(.5,.5);        var style = { font: "40px Arial", fill: "#ff0044", align: "center" };        var title = game.add.text(150, 150, "The game", style);        title.anchor.setTo(.5,.5);        movie = game.add.sprite();        movie.anchor.setTo(.5,.5);        movie.addChild(group_background);        movie.addChild(movie_cover);        movie.addChild(title);        group_background.inputEnabled = true;        group_background.events.onInputDown.add(first_flip, this);    }    function first_flip() {        tween = game.add.tween(movie.scale).to({y: 0}, 500, Phaser.Easing.Linear.None, true);        tween.onComplete.add(second_flip, this);    }    function second_flip() {        group_background.tint = 0xfff;        tween = game.add.tween(movie.scale).to({y: 1}, 500, Phaser.Easing.Linear.None, true);    }}

What am I doing wrong ?

[lewster32]

The group has to be moved, not the sprites. Place all the sprites at 0, 0 in the group, then set the group.x and group.y to where you want the whole lot to be. The group will scale about its 0, 0 point, so if the sprites are there, they'll flip as expected. If you move the sprites, they will appear off-centre when the group flips.

[nemoidstudio]

Great, I got it working without the 2nd tween. Thanks!

 

Another question : any idea how I can add a perspective effect on a sprite ? Maybe it requires going down to PIXI if phaser doesn't permit that ?

[lewster32]

I think even at the pixi level it won't be straightforward, as pixi is designed to be a 2D renderer - you'd expect that it'd be straightforward to rotate a quad on its y axis (and indeed it is) but because pixi also supports canvas, you don't get the native 3D stuff.

[nemoidstudio]

Yes of course pixi is a 2D renderer but I though maybe there a way to render a sprite in a trapezoid shape? Or it does not make sense at all and a sprite must be a rectangle?

 

edit: I just found this post explaining how to do it. I'll try this out.

 

 

Thanks for your help!

[lewster32]

I'm unsure as to whether you can do trapezoid transforms easily; scale and rotation are easy, and a combination of the two can give skew, but trapezoid transforms are more complex from my understanding. It's not impossible by any means, but there's no native way to do it in Phaser/pixi that I know of.

[wayfinder]

There isn't native projective mapping (yet?), although PIXI's Ropes do something similar. The way to fake it is to split the trapezoid into triangles – triangles can be projective mapped with just the native transforms (look into the worldTransform matrix property for that). 

 

I adapted code from cartagen that I found on google code to work with phaser, and implemented non-realtime projective mapping for arbitrary non-complex quads. It turned out not to be the best option for my use case (so I ended up using Strips/Ropes), but it's possible