Microlags with fast-moving objects

[vdddslep]

When trying to move an object with high speed across the scene, I've noticed that the movement is not really smooth - there are some small
but really annoying glitches. I've tried both manual moving and moving with TweenLite, the glitches persist in both cases. 

I'm using  Pixi.js 4.5.3 

This is how I create the Render,  maybe something wrong with it:

let canvas = <HTMLCanvasElement>document.getElementById("canvas");
this.renderer = PIXI.autoDetectRenderer(1500, 1200, {
    // ScenesManager.renderer = new PIXI.CanvasRenderer(800, 600, {
    view: canvas,
    antialias: false,
    roundPixels: false,
});
this.renderer.backgroundColor = 0x000000;
document.body.appendChild(this.renderer.view);

And this is my tween:

let wall:PIXI.Sprite = PIXI.Sprite.fromFrame("1.png");
this.addChild(wall);
wall.position = new PIXI.Point(4*64, 2*64);
TweenLite.to(wall.position, 15, {
    x: 99*64, y: 2*64, ease: Linear.easeNone});

And I also made the demo (see the attachment)

I would really appreciate any help or ideas on what can cause such microlags, cause I've spent many hours trying to sort this out. 

The number of objects on scene doesn’t really matter, there are lags even on small test scene with just 1 moving object.

 Any thoughts on what's happening?

TestTween.zip

[OSUblake]

Hi @vdddslep

I look at your demo and noticed dropped frames, which will be very noticeable in an linear animation. If you don't use interpolation and move your object the same amount on every animation frame, it should fix the problem. However, that might not be a good idea as it might get out sync with other parts of your game.

[ivan.popelyshev]

You have to synchronize TweenLite and pixi, add its handler to the same RAF where render() is called. I dont know TweenLite good enough to do that, but if you really really really need that i can look.

[lloydevans]

https://greensock.com/docs/TweenLite/static.ticker

[lloydevans]

Oh, another thing is you are using canvas renderer with large dimensions, so even if you have RAF set up correctly you may still notice some little hitches in the framerate..

Edit - didn't see you using autoDetectRenderer because the text is formatted white. Depending on browser you may still be using the canvas renderer.

Edited July 27, 2017 by lloydevans

[lloydevans]

OK, had a little look at your code, and it seems your use of cacheAsBitmap on the background object is causing the dropped frames (even on WebGL renderer).

The idea with cacheAsBitmap is you merge multiple objects into a single texture to save draw calls, but you seem to be setting many individual containers to cacheAsBitmap..

for (var x = this.chunkGridWidth - 1; x >= 0; x--) {

    for (var y = this.chunkGridHeight - 1; y >= 0; y--) {

        var chunk = this.chunkGrid[x][y];

        if (chunk.width > 0 && chunk.height > 0) {

            //commenting this out fixes the frame drops for me

            //chunk.cacheAsBitmap = true;

        }

    }

}

[vdddslep]

Hi everyone,
Sorry for delayed response. I checked the forum couple of days after the post and decided there wouldn’t be response at all.

In my game I do not use Tweens to move the objects, I used it just for the demo, because I thought that tweenLight use some kind of interpolation under the hood, seems like I was wrong.
 

So, in the game, on each iteration I calculate the distance using actual time elapsed, I thought that it is kind of interpolation:

This is how I do it:
 let curTime = performance.now();
 let delta = curTime - this.lastTickTime;
 let distance = 0.001 * this.pawn.speed * delta * GRID.SIZE;

And then:
    this.transform.position.x += this.direction.x * distance;
    this.transform.position.y += this.direction.y * distance;

BTW, thank you for the link on TweenLight static.ticker, I didn't know about it before.

And yes I made demo with: chunk.cacheAsBitmap = true; because I thought that it could be related to microlags which I have

[OSUblake]

On 7/29/2017 at 10:27 PM, vdddslep said:

In my game I do not use Tweens to move the objects, I used it just for the demo, because I thought that tweenLight use some kind of interpolation under the hood, seems like I was wrong.

That's what it is doing under the hood. Tweening is interpolation. And TweenLite has some lagSmoothing built into it, but that won't fix your issue, which is dropped frames in a linear animation.

It doesn't matter if you manually interpolate the position or use a tween, if more than 33ms pass between ticks, you're probably going to notice it.

let now = performance.now();
let delta = now - lastTime;
lastTime = now;

if (delta > 33) {
  // lag
}

 

[vdddslep]

Am I right that it is impossible to make smooth animation because of this lags?

[OSUblake]

Have you profiled your code? Garbage collection is a common reason you might see a dropped frame.

To make the lag less noticeable, try adding an slight ease to the animation. It will be much harder to notice lag when the object isn't moving at a constant speed.

Or you could make your animation frame dependent. Move it the same amount on every frame, like in this example.

http://pixijs.github.io/examples/#/layers/lighting.js

 

[vdddslep]

On 8/9/2017 at 7:08 AM, OSUblake said:

Have you profiled your code? Garbage collection is a common reason you might see a dropped frame.

To make the lag less noticeable, try adding an slight ease to the animation. It will be much harder to notice lag when the object isn't moving at a constant speed.

Or you could make your animation frame dependent. Move it the same amount on every frame, like in this example.

http://pixijs.github.io/examples/#/layers/lighting.js

 

Thank you for reply, I guess I understand the idea.