Jump to content

Microlags with fast-moving objects


vdddslep
 Share

Recommended Posts

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

Link to comment
Share on other sites

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 by lloydevans
Link to comment
Share on other sites

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;
        }
    }
}
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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
}

 

Link to comment
Share on other sites

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

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...