Jump to content

Reverse the sprite orientation


Recommended Posts

Hello, is there a simple way to reverse the sprite orientation using the Tween Repeat Reverse function?



I've a bird that goes from 0 to 200 and from 200 to 0 (reverse repeat). I want to change the bird orientation while he's flying from 200 to 0.
Is there a function for this?
Thank you in advance :)
Link to comment
Share on other sites

Hello enpu, thank you for your fast reply, I tried with:

var blueBird = new game.Animation(            'elements/birds/blue-1.png',            'elements/birds/blue-2.png',            'elements/birds/blue-3.png',            'elements/birds/blue-4.png',            'elements/birds/blue-5.png',            'elements/birds/blue-6.png'          );                   blueBird.animationSpeed = 0.2;         blueBird.play();         blueBird.position.set(250, 100);                  game.scene.stage.addChild(blueBird);var tween = new game.Tween(blueBird.position);         tween.to({x:0}, 2000);         tween.repeat();         tween.onRepeat({          var blueBird = new game.Animation(            'elements/birds/blue-1-reverse.png',            'elements/birds/blue-2-reverse.png',            'elements/birds/blue-3-reverse.png',            'elements/birds/blue-4-reverse.png',            'elements/birds/blue-5-reverse.png',            'elements/birds/blue-6-reverse.png'          );         });         tween.yoyo();         tween.start();

but nothing, it doesn't work, can you explain how to use onRepeat for my purpose?


Thank you again,



Link to comment
Share on other sites

Try if this works:

var blueBird = new game.Animation(    'elements/birds/blue-1.png',    'elements/birds/blue-2.png',    'elements/birds/blue-3.png',    'elements/birds/blue-4.png',    'elements/birds/blue-5.png',    'elements/birds/blue-6.png');var blueBirdReverse = new game.Animation(    'elements/birds/blue-1-reverse.png',    'elements/birds/blue-2-reverse.png',    'elements/birds/blue-3-reverse.png',    'elements/birds/blue-4-reverse.png',    'elements/birds/blue-5-reverse.png',    'elements/birds/blue-6-reverse.png');blueBird.animationSpeed = 0.2;blueBird.play();blueBird.position.set(250, 100);game.scene.stage.addChild(blueBird);var tween = new game.Tween(blueBird.position);tween.to({x:0}, 2000);tween.repeat();tween.onRepeat({     blueBird.textures = blueBirdReverse.textures;});tween.yoyo();tween.start();
Link to comment
Share on other sites

Fix'd, I added "function()" to onRepeat, I also added 3 animation array to define the right and left orientation. This is the working code:

        var blueBird = new game.Animation(        'elements/birds/blue-1.png',        'elements/birds/blue-2.png',        'elements/birds/blue-3.png',        'elements/birds/blue-4.png',        'elements/birds/blue-5.png',        'elements/birds/blue-6.png'        );                var blueBirdRight = new game.Animation(        'elements/birds/blue-1.png',        'elements/birds/blue-2.png',        'elements/birds/blue-3.png',        'elements/birds/blue-4.png',        'elements/birds/blue-5.png',        'elements/birds/blue-6.png'        );                var blueBirdReverse = new game.Animation(        'elements/birds/blue-1-reverse.png',        'elements/birds/blue-2-reverse.png',        'elements/birds/blue-3-reverse.png',        'elements/birds/blue-4-reverse.png',        'elements/birds/blue-5-reverse.png',        'elements/birds/blue-6-reverse.png'        );blueBird.animationSpeed = 0.2;blueBird.play();blueBird.position.set(250, 100);game.scene.stage.addChild(blueBird);orientation = 1;var tween = new game.Tween(blueBird.position);tween.to({x:0}, 2000);tween.repeat();tween.onRepeat(function(){    if (orientation == 1){     blueBird.textures = blueBirdReverse.textures;    orientation = 0;    }else{	blueBird.textures = blueBirdRight.textures;	orientation = 1;        }});tween.yoyo();tween.start();
Link to comment
Share on other sites

Thank you for your help enpu, I didn't know the existance of .textures :)


OT: Phonegap is really good with Panda.js :) this is my second project with Panda.js but phonegap (at the moment) is pretty good with no fps drop.


My next project will contain collision and probably some physics, I'll inform you about the performance :)

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...