Forums » Help » Modular entities 'lagging' behind owner entity

I'm having a hard time figuring this one out. I have a player entity that spawns a weapon and legs (separate legs allow the player to pivot the body independent of the legs). For some reason, however, the legs always lag behind the body by 1-3 pixels while moving - more noticeably while moving diagonally.

Has anyone experienced this issue before?

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

    EntityPlayer = ig.Entity.extend({
        size: {x:32,y:32},
        animSheet: new ig.AnimationSheet( 'media/character.png', 32, 32 ),
        speed: 75,
        children: [],
        direction: null,
        init: function( x, y, settings ){
            this.parent( x, y, settings );    
            
            this.addAnim( 'walkUp', 0.1, [42] );
             /* removed the other directions to shorten */
            
            this.addModule( EntityPlayerLegs );
            this.addModule( EntityPlayerGun );
            
        },
        addModule: function (entityType) {
            var c = this.addChild(entityType, this.pos.x, this.pos.y);

            return c;
        },
        addChild: function (entityClass, x, y) {
            var c = ig.game.spawnEntity(entityClass, x, y, {daddy:this});
            this.children.push(c);
            return c;
        },
        update: function(){
            
            if( ig.input.state('up') && ig.input.state('right') ) {
                this.vel.y = -this.speed;
                this.vel.x = this.speed;
                this.direction = 'walkUpRight';
            } /* removed the other directions to shorten */
            
            if( this.direction == 'walkUpRight' && this.vel.y < 0 && this.vel.x > 0 ) {
                this.currentAnim = this.anims.walkUpRight;
            } /* removed the other directions to shorten */
            
            this.parent();    
        }
    });
    EntityPlayerLegs = ig.Entity.extend({
        name: 'playerLegs',
        animSheet: new ig.AnimationSheet('media/character.png',32,32),
        direction: null,
        daddy: null,
        init: function(x,y,settings){
            this.parent(x,y,settings);
            
            // Leg Animation
            this.addAnim( 'walkUp', 0.1, [20,21,22,23,30,31,32,33] );
             /* removed the other directions to shorten */
            
        },
        update: function() {
            this.parent();
            
            this.direction = this.daddy.direction;
            this.pos.x = this.daddy.pos.x;
            this.pos.y = this.daddy.pos.y;
            
            if( this.direction == 'walkUpRight') {
                this.currentAnim = this.anims.walkUp;
            } /* removed the other directions to shorten */
            
        }
    });
    EntityPlayerGun = ig.Entity.extend({
        name: 'playerGun',
        animSheet: new ig.AnimationSheet('media/character.png',32,32),
        direction: null,
        daddy: null,
        init: function(x,y,settings){
            this.parent(x,y,settings);
            
            // Equiped Gun Animation
            this.addAnim( 'walkUp', 0.1, [47] );
             /* removed the other directions to shorten */
            
        },
        update: function() {
            this.parent();
            
            this.direction = this.daddy.direction;
            this.pos.x = this.daddy.pos.x;
            this.pos.y = this.daddy.pos.y;
            
            if( this.direction == 'walkUpRight') {
                this.currentAnim = this.anims.walkUpRight;
            } /* removed the other directions to shorten */
        }
    });
        
});

The problem here is that your child entities are being "spawned" before the parent entity. Impact doesn't add an entity to the list until after "init" is called. So in the parent init, you're creating a child, calling its init, adding it to the world, and then adding the parent.

This means the child will update before the parent, syncing to the parent's previous location.

To fix this, you have to create the children sometime after the init method. I created a subclass of ig.Entity that adds an "spawned" method that is called on the first call to "update".

Alternatively, you can make sure that the zIndex if your subcomponents is higher than the parents, and use Impact's sortEntities function to reorder the list.