Forums » Help » Flip projectile animation depending on char's facing?

Let me just start off by saying thank you to Dominic for this amazing framework. Without Impact I would still be messing around with rpg makers and whatnot.

So, I have started working on a game for a college class assignment. Everything is going pretty well for the most part, but I have stumbled upon a problem that I just can't seem to fix myself. I am trying to get my player's attack projectile (sword) to flip according to the facing of my character. I have the sword entity traveling in the correct directions, but the sprite doesn't flip to aim in the right direction.

I have looked at every forum thread pertaining to flipping animations, and nothing there has fixed the problem. I did find the (this.currentAnim.flip.x = true) statement, which seems to flip the sword like I need. Problem is I am still new to the workings of basing things off of the parent entity. Anyone mind helping me with the structure of how to flip the animation if the character is facing left?

Here is the player entity which includes the sword:

ig.module(
   'game.entities.player'
)
.requires (
   'impact.entity'
)

.defines(function() {

EntityPlayer = ig.Entity.extend({
   
   size: {x:16, y:32},
   maxVel: {x: 100, y: 220},
   health: 100,
   flip: true,
   friction: {x: 0, y: 0},
   accelGround: 400,
   accelAir: 400,
   jump: 220,
   invincible: true,
   invincibleDelay: 2,
   invincibleTimer: null,
   type: ig.Entity.TYPE.A,
   checkAgainst: ig.Entity.TYPE.NONE,
   collides: ig.Entity.COLLIDES.PASSIVE,
   
   animSheet: new ig.AnimationSheet('media/wink2.png',16,32),
    init: function(x,y,settings){
        this.parent(x,y,settings);
        
        this.addAnim('idle',1,[0]);
        this.addAnim('run',0.25,[0,1]);
        this.addAnim('jump',1,[0]);
        
        this.invincibleTimer = new ig.Timer();
        this.makeInvincible();
		
	/*	if( !ig.global.wm )
        {
        ig.game.spawnEntity(EntityHealthBar,this.pos.x , this.pos.y,{ Unit: this });
        }
		*/
    },
    
    makeInvincible: function(){
         this.invincible = true;
         this.invincibleTimer.reset();
    },
    
    receiveDamage: function(amount, from){
         if(this.invincible)
              return;
         this.parent(amount, from);
    },
    
    draw: function(){
         if(this.invincible)
             this.currentAnim.alpha = this.invincibleTimer.delta()/this.invincibleDelay * 1 ;
         this.parent();
    },
    
    update: function() {
        var accel = this.standing ? this.accelGround : this.accelAir;
        if( this.standing && ig.input.pressed('jump') ) {
            this.vel.y = -this.jump;
        }
        if(ig.input.state('left')) {
            this.vel.x = -80;
            this.flip = true;
        }
        else if(ig.input.state('right')) {
            this.vel.x = 80;
            this.flip = false;
        }
        else {
            this.vel.x = 0;
        }
        if( this.vel.x != 0 ) {
            this.currentAnim = this.anims.run;
        }
        else {
            this.currentAnim = this.anims.idle;  
        };
        if(ig.input.pressed('throw')) {
            ig.game.spawnEntity( EntitySword, this.pos.x, this.pos.y, {flip:this.flip});
        }
        this.currentAnim.flip.x = this.flip;
        this.parent();
        if( this.invincibleTimer.delta() > this.invincibleDelay ) {
            this.invincible = false;
            this.currentAnim.alpha = 1;
        }
    },
});
   EntitySword = ig.Entity.extend({
      size: {x:16, y:16},
      animSheet: new ig.AnimationSheet('media/sword.png',16 ,16),
      maxVel: {x:150, y:0 },
      type: ig.Entity.TYPE.NONE,
      checkAgainst: ig.Entity.TYPE.B,
      collides: ig.Entity.COLLIDES.PASSIVE,
      check: function(other) {
         other.receiveDamage(10, this );
         this.kill();
      },
      
   init: function( x, y, settings ) {
      this.parent( x + (settings.flip ? -4 : 8) , y+8, settings ); 
      this.vel.x = this.accel.x = (settings.flip ? -this.maxVel.x : this.maxVel.x);
      this.addAnim( 'idle', 0.2, [0] );
    //This flips the sword sprite, but then it will always face left even if traveling right.
      this.currentAnim.flip.x = true;
   },
   
   handleMovementTrace: function( res ) {
      this.parent(res);
      if(res.collision.x || res.collision.y) {
         this.kill();
      }
   }
   
});
});

If you check out the Jump'n'Run demo from your download page there's a player entity in there that fires projectiles depending on the direction it's facing. Take a look at that :)

Also, when pasting code into the forum, wrap it in two #'s (two on top before it, and two after it all).

Yeah, sorry about the lack of code block. I tried every combination of tags I could think of lol.

Also, I did check out that demo already. I already have the firing of projectiles on the direction of the player's facing. That demo is still missing the flipping of the projectile sprite itself, unless I completely missed that block of code. That is the part I can't seem to figure out.

You are already passing the player facing when spawning your Sword entity:

ig.game.spawnEntity( EntitySword, this.pos.x, this.pos.y, {flip:this.flip});

Now you just need to take this flip parameter and pass it along to the sword's animation:

init: function( x, y, settings ) {
      this.parent( x + (settings.flip ? -4 : 8) , y+8, settings ); 
      this.vel.x = this.accel.x = (settings.flip ? -this.maxVel.x : this.maxVel.x);
      this.addAnim( 'idle', 0.2, [0] );

      this.currentAnim.flip.x = settings.flip; // <- magic :)
},

Btw., the settings object is merged with the Entity when you call the this.parent() in init(). So you could also do:

this.currentAnim.flip.x = this.flip;

I had a feeling it was going to be something very small that I was missing. Thanks much for your help Dom. Great customer service. =)