Camera shake artifact when shaders are applied?

[poppij]

I'm developing a game that makes generous use of camera.shake. Since I've added shaders (filters), I've noticed that camera.shake only affects some layers of the graphics, resulting in artifacts like in the attached picture. A filter is applied on the lava. Notice the misalignment of the ground tiles with the other layers -- the ground tiles got moved by the shake, but everything else unexpectedly stayed in place. When disabling the filter, camera.shake works as expected.

Am I doing something wrong? Is this a bug? Panning the camera manually through the x/y coordinates does not exhibit this artifact.

[poppij]

Here's a minimal jsfiddle that demonstrates the problem. https://jsfiddle.net/9yok8p0x/1/

Commenting out line 37

sprite.filters = [ filter ];

will cause shaking to work.

[ForgeableSum]

Camera shake causes other problems too:

https://github.com/photonstorm/phaser/issues/2889

https://github.com/photonstorm/phaser/issues/2841

Bumping for visibility.

I examined the Phaser code for the camera shake and feel like I'm only looking at half the puzzle - 1 half is in Phaser and the other in Pixi. 

How exactly does the camera shake code work? Does it not simply move the camera x/y position rapidly? If no, why shouldn't it simply do that to avoid these rendering conflicts? 

[Stoneman]

Hello,

It seems like the camera shake modifies the offsets and not x,y directly. Need to take a deeper look if want to fix this. I will try to look at these problems as soon as possible.

[poppij]

If it helps anyone, here's my custom shake implementation in TypeScript.

[ForgeableSum]

14 hours ago, poppij said:

If it helps anyone, here's my custom shake implementation in TypeScript.

Neat. Do you happen to have a vanilla JS version for those of us not fluent in TS?

[poppij]

10 hours ago, feudalwars said:

Neat. Do you happen to have a vanilla JS version for those of us not fluent in TS?

Here you go

[ForgeableSum]

hmm, it doesn't seem to do anything for me. Using Phaser 2.6.2:

test = new Shake(game);

test.shake(.1,300,true,true); 

 

[poppij]

37 minutes ago, feudalwars said:

hmm, it doesn't seem to do anything for me. Using Phaser 2.6.2:

Did you call test.update() in your state's update function?

Also, I notice you're using an amplitude .1, which seems strange to me unless your stage is way zoomed in. It's not supposed to be a drop-in replacement for Phaser's shake, because it's tailored for my game with a fixed resolution. So, the amplitude (first parameter) is actually the amount of pixels you want the camera to move, not a ratio like Phaser's shake.

Another incompatibility with Phaser's shake is that it attenuates the amplitude over time, which I don't think Phaser's shake does.

[ForgeableSum]

Ah, yeah, I assumed it paralleled the built-in one. 

Okay, it works like a charm now! The only time it doesn't work is when the camera is following an object. I assume this is because camera follow coordinate manipulations overwrite the shake coordinate manipulations.  Any ideas for workarounds?

[poppij]

1 minute ago, feudalwars said:

Ah, yeah, I assumed it paralleled the built-in one. 

Okay, it works like a charm now! The only time it doesn't work is when the camera is following an object. I assume this is because camera follow coordinate manipulations overwrite the shake coordinate manipulations.  Any ideas for workarounds?

This is lifted straight from my game which doesn't really do any advanced stuff with the camera beyond simple panning for now, so I haven't looked into this yet. But I may actually need to follow objects soon, so I'll post back if I fix this issue. If you manage fix it before me, I'm also interested to hear about it!