Forums » Help » choppy / laggy movement of some entities

Hello everyone; I've been trying to locate where some laggy / choppy movement is coming from for some entities in my game. I hope it's a simple matter of calling functions out of order but I haven't been able to pinpoint it yet.

I found this forum article: http://impactjs.com/forums/help/choppy-movement and it looked like that was my problem for sure but my problem still persists after implementing the suggestions there. Here's a video showing the laggy / choppy issue:

http://dl.dropbox.com/u/21499027/choppy.mov

Below are some code snippets showing how I'm positioning my screen and entities. If you'll notice in the video my HUD / minimap are perfectly still, my player remains perfectly centered, however the entities of the exhaust and the arrow next to the player 'shake' and 'catch up' as the player slows down. I can't seem to figure out how its happening, any help would be greatly appreciated.

main.js:

init: function() {
     this.spawnEntity( EntityHud, 0, 0 );
     this.spawnEntity( EntityPlayer, 0, 0 );
}
update: function() {
     this.parent();
}

hud.js:

init: function() {
     this.mapAnim = new ig.Animation( this.mapSheet, 1, frames );//minimap
}
update: function() {
     this.parent();
}
draw: function() {
     var mapX = 0;
     var mapY = ig.system.height-tileSize-20;
     this.mapAnim.draw(mapX,mapY);
}

arrow.js: (the laggy arrow to the left of the player)

init: function( x, y, settings ) {
     this.parent( x, y, settings );
     this.addAnim( 'idle', 0.01, [0] );
}
update: function() {
     this.parent(); //i've tried this call before and after the lines below, no difference
     this.pos.x=ig.game.player.pos.x.round() - 50;
     this.pos.y=ig.game.player.pos.y.round();
}

player.js:

update: function() {
     //get mouse position
     var mx = ig.input.mouse.x - (ig.system.width / 2);
     var my = ig.input.mouse.y - (ig.system.height / 2);
     ...
     //Update vel so player moves faster the further away the mouse is.
     //Note: when the mouse isn't moving (xd and yd below are constant) issue remains.
     this.vel.x = xd;//xd and xy are based on mx and my
     this.vel.y = yd;
     ...
     ig.game.spawnEntity( EntityExhaust, epos.x, epos.y); //epos is based on player.pos 
     ...
     this.parent();
     ...
     //Set screen position
     ig.game.screen.x = this.pos.x.round() - ig.system.width/2;
     ig.game.screen.y = this.pos.y.round() - ig.system.height/2;
}

The interesting thing is the raw draw() calls on the ig.AnimationSheet + ig.Animation objects inside the hud element (such as the minimap) stay perfectly still. But the arrow which is a separate entity lags and is choppy :/

-Rob

have you tried not drawing the minimap or drawing fewer particles? I find it helps to try to isolate the issue first.

Yea, I did try that. The mini-map isn't interfering with the arrow or exhaust shaking. The most odd behavior is when the player slows to a stop via the game's friction setting the arrow 'catches up' as if its position is based on the player's position in the past relative to velocity even though the position is set to the player's position each frame.

I almost wonder if I need to somehow ensure that the player's update method is called before the arrow so the arrow's update method is using the latest coordinates...

Quote from robw00t
I almost wonder if I need to somehow ensure that the player's update method is called before the arrow so the arrow's update method is using the latest coordinates...

Probably. You can give the arrow a high .zIndex and call the Game's .sortEntities() once after your player and the arrow have spawned to ensure it's updated after the player.

Another solution would be to update the Arrow's position in its .draw() method instead of in .update() - which could be semantically justified, because it's merely a "drawing position" :)