Textures jittering

Hello, as you can see in the video when i use setBody and setTexture to change the shape and texture of my ship then the texture is jittering. If i use setOrigin(0.5) then it stop jittering but the body/shape and the texture aren’t at the same place as you can see in the video 2.

This is my code without setOrigin(0.5) :

ships[0].setBody(shapes["spaceship"+(shipFrame == 90 ? shipFrame=1 : shipFrame)], {});

ships[0].setTexture('skyship', "spaceship" + (shipFrame == 90 ? shipFrame=1 : shipFrame));

I would like to be able to rotate my ship without having this problem.

jittering vs non-jittering:

With debug on true:

So you can see that when i rotate my ship to the right then it starts jittering. When i turn to the left it doesn’t because i add setOrigin(0.5).

Thanks to help me.

It seems like it cause jittering because the center offset of the body is changing each time i change the shape, and the texture is trying to replace itself according to the shapes. Why the center offset is not always the same ? I tried to change it but it continues.

The body shape should refer itself to the displayWidth and displayHeight of the texture frame in order to create it’s pivot point so the texture and the body are at the same place, but it seems like it doesn’t work like that, so it’s the texture that is trying to replace itself at the same point that the body… How can i avoid that ? The framework doesn’t work well with PhysicsEditor and polygon because it shouldn’t have this behavior.

I tried to change the body offset according to the size and center of my texture (240x240) and the jittering stopped, but look at the result, the body doesn’t respect the center point from 240x240 based on the texture frame:

        ships[0].body.centerOffset.x = 120;
        ships[0].body.centerOffset.y = 120;

EDIT: Look at what happen if i put a polygon at the top of the 240x240 frame in PhysicsEditor, the rest of the body is ok now, but of course it’s not a solution.

Ok so the offsets of the body is constantly changing because it doesn’t respect
the pivot point. Each time that i change the body then the texture reposition itself according to the body, but Phaser is generating the body’s offsets based on the height /width of the body shape and not based on the height/width of the texture. It shouldn’t work like that, Phaser should place the body according to only one pivot point and it should be the one generated by Texture Packer. Each vertex point a bit placed too righly, leftly, uply or downly with PhysicsEditor, make the body offset completely different, causing texture jittering.

This is why when i create a body with one vertex placed at the top of the 240x240px frame (like on my picture above) then the texture and body is placed at the same place, but like i said it’s not a solution, it only shows that Phaser need improvements at this subject.

So now i have to code a solution to do a correction of the offsets at each frame, because i have many ships and it would be too long to rework all the vertexes created by PhysicsEditor to check those which make the body a pixel righter or lefter. Or i’ll try to change Phaser code source.

Phaser should create the offsets of the bodies by thinking “hey, the pivot point of the Texture is 0.5 of 240px, so the offset of the body is 0.5 of 240px”.

(for example, when i turn my ship at 360° then it uses 90 different textures and bodies, one at each frame, and at each of these frames the offsetX of the bodies is going up from 0.530000000 to 0.58000000, but some offsets isn’t going up but down, and this because like i said Phaser is generating the body offsets by calculating the distance between the vertexes… which is different from the height and width of the texture when calculating the offset of the texture. Phaser shouldn’t do that)

Thank to improve the framework please.

Have you tried just changing frames on a simple sprite, without physics?

Yes, without physics it works fine. I’ll try to upload my whole code later.

This is a codepen with the bug.

If you press left key then setTexture is applied before setBody and if you press right key then setTexture is applied before setBody. As you can see the result is different. Turn off the debugger to see the jittering, there is a big difference.

I think setTexture() followed by setBody() is proper, not the other.

https://labs.phaser.io/edit.html?src=src/physics/matterjs/get%20shape%20bounds.js seems relevant.

Thanks but unfortunately after some test it doesn’t solve the problem.

The offset of the body is constantly jittering and when the texture is set then it makes the same thing on the texture. Like i said Phaser is not suitable for avanced isometric game with rotation like that, it’s should not take in account the height/width of the shape to create the offset but the same height/width than the texture. I saw in PhysicsEditor that if i choose Box2D i can set a pivot point, which is not the case for Phaser and the problem is there. Phaser should take in account a predefined pivot point based on the maximum height/width of the texture frame (the one created with TexturePacker, for example).

Ok so i solved the problem by creating better polygon on PhysicsEditor.
I increased the transpency treshold value to 25 and the number of vertexes,
so my polygon is more accurate. The fluidity is now better but not perfect if the polygon aren’t very accurate.

As you can see on the screenshots below, the polygon generated automatically by PhysicsEditor wasn’t very good so Phaser was pushing the body more to the left/right.

The cause of the jittering:

Non-jittering:

Now everything seem to be Ok.

So i can continue with Phaser.

Thank you.

1 Like