Sprite jerks at slow movement

cocos2d-x JavaScript
#1

I have experienced that sprite movement is not smooth at slow movement. At high velocity (e.g. CLOUD_VELOCITY_X = 20) sprite’s movement looks smooth without any jerks. I am using cocos2-html5 version 2.1 . Decreasing CLOUD_VELOCITY_X from 20 to 10 or lower causes as more jerks as CLOUD_VELOCITY_X getting lower.

@

var CloudManager = cc.Node.extend({
CLOUD_VELOCITY_X: 8,

ctor: function(){
this._super();
this.scheduleUpdate();
},

generateCloudInRectangle: function (rectangle) {
var index = getRandomInt(1,4);
var cloudFile = ‘Resources/Clouds/cloud’ + index + ‘.png’;
var cloud = new cc.Sprite.create(cloudFile);
var cloudRect = cloud.getBoundingBox();

// Set Cloud Position withing rectangle
var positionX = rectangle.x + cloudRect.width/2 + Math.round(Math.random() * (rectangle.width - cloudRect.width/2));
var positionY = rectangle.y + cloudRect.height/2 + Math.round(Math.random() * (rectangle.height - cloudRect.height/2));
cloud.setPosition(positionX, positionY);

this.addChild(cloud);
return cloud;
},

setCloudAtIncomingPosition:function (cloud) {
var x = -getRandomInt(90,200);
var y = getRandomInt(300,430);
cloud.setPosition(x, y);
},

update: function(dt){
var clouds = this.getChildren();
for (var i=0; i < clouds.length; i+){
var cloud = clouds[i];
// Set cloud at incoming position
if >= 900){
this.setCloudAtIncomingPosition;
}
// Move cloud
else{
var x = cloud.getPositionX;
x= dt * this.CLOUD_VELOCITY_X;
cloud.setPositionX(x);
}
}
}

});

@

#2

I’m not sure if this is the same problem that I had, but I have slow moving sprites and they animation of the movement was not smooth and they would occasionally not move for a small amount of time e.g. 0.1 or 0.2 sec - which made the animation look jerky.

I reported this as a issue on github, and the response was that it was caused by the JavaScript garbage collector running at arbitrary times which is outside the control of the cocos2d-html5 framework.

Personally I’m not convinced that this is all due to the garbage collector, or whether there is a work around. But I don’t have time to investigate the problem.

EDIT.

I’ve just been looking at some other HTML5 frameworks, and GameQuery doesn’t appear to have the same issues with jerky animation eg. http://gamequeryjs.com/demos/2/
I did notice however in the demo, that the sound does stop playback occasionally, so perhaps the garbage collector effects their sound playback.

I’m going to take a look at GameClosure to see if they have similar issues

#3

Hi guys

Sprite jerks at very slow movement was a feature/bug.

because html5 canvas draw sprites much quicker at whole digit positions as to floating point positions, eg ( x:10, y:12 compared to x:10.15124 y:11.99341 )
this is because graphics processor does not have to anti aliase the texture to try to make it between the whole digits
http://www.html5rocks.com/en/tutorials/canvas/performance/#toc-avoid-float

in addition, sprite also looks better when it is displayed at whole digit positions. the drawback is it will appear to be jerking as it moves whole number to whole number

the speed enhancement is about 5% faster for drawing, although negligible, we decided to implement that to make sprites look better

The next version we will remove this feature, with addition of the option to disable antialiasing on sprites, as most browsers supports turning anti aliase off now (except IE)

#4

Hao Wu

Thanks for the explanation. I will try rounding my sprite positions to whole numbers.

Cheers

Roger

#5

you don’t need to, the game engine already does that at the moment, thus, movement jerks if animation is slow

#6

OK.

I think my animation problems are caused because up update is not being called on a regular basis.

The delays are possibly caused by the garbage collector, but there must be a better way to handle calling update as other frameworks don’t seem to have a big problem with delays.

Or perhaps other frameworks are smaller and require less garbage collection ???

Slow MoveBy has strange effects on the edge of the Sprite
#7

how are you scheduling your animation update?

if you call scheduleUpdate(), then your “update” function will be called every frame

if you call schedule(func, interval)

then your function will be called by that interval, but this is not very stable.

as you are trying to schedule something based on your existing framerate, which is already unstable

if you want smooth animation, you can do schedule(func, 0); this way, your function will be called every frame, it will not be called more frequently than your frame rate

#8

Great Thanks, Hao Wu! It is really good news, so i can continue development without worry !

#9

This just saved me! I noticed my sprites having jerky movement. I was scheduling the update of my sprite like:

this->schedule( schedule_selector(PlayerProjectile::update) );

as soon as I changed to:

this->scheduleUpdate();

my movements are now smooth as butter! :smile:

Thanks!

Edit: actually, never mind. I still see the same jerkiness, hmm…

Im using c++

my update method looks like:

Vec2 newVec = Vec2(this->getPosition().x + cos(angle) * 40.f * dt, this->getPosition().y + sin(angle) * 40.f * dt);
this->setPosition(newVec);

Edit 2: I think my problem was another program that I had running. Not exactly sure which one, but once I closed out some programs, chrome, etc, everything is back to normal. What I was seeing that was causing the problem was every few seconds or so the frame rate would drop from 60 to 40 something… Just for a split second. This is when I was seeing the jerky behavior. Once I closed out some programs I no longer see frame rate drop and all of the jerkiness is gone!