Buttery smooth slow movements

[nuthinking]

Hi guys, I am struggling to have graphic elements moving continuously smoothly. I tried 2 different movement logics but still no luck.

 

First one using fixed delta, hoping that the video card doesn't lose frames: http://codepen.io/anon/pen/NGeZdO?editors=001

 

The second, I believe frame drop proof, just moving the elements based on the time passed between a rendering and the previous one: http://codepen.io/anon/pen/avPgqm?editors=001

 

In both cases the items which move slowly are visibly not smooth, as if Pixi didn't support decimal values for x positions, which I guess it's not the case, especially considering that the antialiasing option for the rendering is enabled. So maybe it is something to do with my logic.

 

I am using an old mac book pro, but I would assume it should easily run this basic graphics.

 

Any idea on how I could fix my problem?

 

Thanks,

chr

[nuthinking]

Smoother on the iPhone 6S I must say.

[ivan.popelyshev]

That's WebGL rendering problem. Antialiasing in 2d mode is much better. 

 

I made that smoother by using cacheAsBitmap and linear filter on texture: http://codepen.io/anon/pen/ZbVgEO?editors=001 .

 

Lets see what others will say.

[xerver]

There is no antialiasing in the stencil buffer (where graphics are drawn) therefore you see them "jump" since it doesn't interpolate between pixels well.

[ivan.popelyshev]

There is no antialiasing in the stencil buffer (where graphics are drawn) therefore you see them "jump" since it doesn't interpolate between pixels well.

 

Then why Graphics dont use simple shader for that thing? Its just a square

[nuthinking]

There is no antialiasing in the stencil buffer (where graphics are drawn) therefore you see them "jump" since it doesn't interpolate between pixels well.

So @xerver, what would be the solution? Not using pixi but straight DOM with translateX?

 

Thanks!

[bubamara]

solution could be not using graphics at all. you can :

 

- draw rectangle on canvas and make texture from it, then apply to sprite

- use spritesheets as textures for rectangles (preffered, as this is faster in WebGL)

[ivan.popelyshev]

solution could be not using graphics at all. you can :

 

- draw rectangle on canvas and make texture from it, then apply to sprite

- use spritesheets as textures for rectangles (preffered, as this is faster in WebGL)

 

That's what I did in http://codepen.io/anon/pen/ZbVgEO?editors=001

[nuthinking]

That's what I did in http://codepen.io/anon/pen/ZbVgEO?editors=001

In your case Ivan, looks like cacheAsBitmap is making the difference. So I guess to have decimal positioning the content of these elements needs to be rendered as a texture. Quite annoying considering in the project I am working the content will have its own animations. So maybe i have to render those internal animations as spritesheet.