Jittering issue

Cocos Creator
#1

Hi,

I found out there’s a jittering issue on my game. It gets crazier on low-end device, but the frame rate is still 60. For high-end mobile the issue is reduced.

Note that my case is for web mobile, not sure on native.

The visual problem is pretty much similar to this one (Heyalda’s reply video) Why jitter/jerk when following sprite with layer? (video included) . The difference is in my game it affects all sprites that are moving, even the animated ones using animation clip.

Using delta time or not gives the same result. I’ve tried to floor every variable to node position (subpixel issue maybe) but no avail. I’m not using physics engine as well.

Also by not using delta time, I am expecting that even when the frame rate jumps (which is a common nature in browser html5 game), the game would only slows down but not jump/jitter like that.

This issue can only be greatly reduced/not noticeable if I change the frame rate to 30.

Any thoughts?

#2

Sorry, disregard this answer. I didn’t read your question. I thought you were using physics and this is the only instance were I had this issue.

I had the same issue. The only workaround I found was to modify the source in CCPhysicsManager.js -> update method and ad a new event called after-step.

so it ends up looking like this:

update: function (dt) {
        var world = this._world;
        if (!world || !this.enabled) return;

        this.emit('before-step');
        
        this._steping = true;

        var velocityIterations = PhysicsManager.VELOCITY_ITERATIONS;
        var positionIterations = PhysicsManager.POSITION_ITERATIONS;

        if (this.enabledAccumulator) {
            this._accumulator += dt;
        
            // max accumulator time to avoid spiral of death
            if (this._accumulator > MAX_ACCUMULATOR) {
                this._accumulator = MAX_ACCUMULATOR;
            }

            while (this._accumulator > FIXED_TIME_STEP) {
                world.Step(FIXED_TIME_STEP, velocityIterations, positionIterations);
                this._accumulator -= FIXED_TIME_STEP;
            }
        }
        else {
            var timeStep = 1/cc.game.config['frameRate'];
            world.Step(timeStep, velocityIterations, positionIterations);
        }
        

        world.DrawDebugData();

        this._steping = false;

        var events = this._delayEvents;
        for (var i = 0, l = events.length; i < l; i++) {
            var event = events[i];
            event.target[event.func].apply(event.target, event.args);
        }
        events.length = 0;

        this._syncNode();
        this.emit('after-step');
    },

And then update your positions in a listener:

this.physicsManager = cc.director.getPhysicsManager();
this.physicsManager.on('after-step', this.afterStep);
#3

Are you using update or lateUpdate?

#4

no problem thanks for the reply effort though. :grinning:
I’m using update() by the way.

#5

and if you switch to lateUpdate it also the same?

#6

I’ve tried to change to lateUpdate but it’s still the same. Actually even the animated ones (using animation clip) also have the same issue. Basically everything that moves on the screen jitters except non-moving objects like GUI (cause they aren’t moving).

#7

Have you solved the issue?:thinking: