Camera shake exceptions

Phaser 3
1

Is there a way I can exclude game objects like a hotbar, a health bar, some ui, and a points bar, from a camera shake?
My shake code:

this.cameras.main.shake(500, getRandomInt(3,15) / 1000)

I could in theory just write enemies.shake, player.shake, base.shake, etc. but that could become cumbersome even with a helper function.

Are there any workarounds?

Bread

:bread:

2

You can use multiple cameras in a scene (i.e., ignore) or a separate UI scene.

3

You can try using object.setScrollFactor(0); for your UI objects to avoid rewriting everything into separate scenes.

This will keep them fixed on the screen without needing to move them to a different scene.

4

Thanks! I implemented the UICam.ignore and corresponding ui, but when the shake occurs (on enemy hitting the base), it seems to have created another set of the ui, which it doesnt shake, but the original ui underneath it still does. This leads to a weird double effect which isn’t entirely bad, but isn’t the desired effect I’m looking for.

How would I go around fixing this?

This is how I use UICam:

const UICam = this.cameras.add(0, 0, 800, 600);
UICam.ignore(hotbar, healthBars, moneyBars, hotbaritems, shopIcon, settingsIcon);

I can send a screenshot if you wish.
No errors are being thrown.

:bread: B

5

ignore() has exactly one argument. Change to

UICam.ignore([ hotbar, healthBars, moneyBars, hotbaritems, shopIcon, settingsIcon ]);
6

I changed it as you’d shown but it still makes the doubling effect.

574×278 29.6 KB

7

Make sure every value in ignore([ ]) is a game object (can be a Container or Layer). Or if you have arrays of game objects, use spread:

UICam.ignore([ ...goldBars, ...candyBars ])
8

I .push game objects on a repeating function into groups[1] to make my bars, like var newBar = healthBars.create(xPos,yPos,"health_box"). When I use spreads ([...healthBars]) it gives me the err healthBars is not iterable.

Here’s the full code:

// SHAKE IGNORE
const UICam = this.cameras.add(0, 0, 1200, 1000);
UICam.ignore([ hotbar, ...healthBars, ...moneyBars, ...hotbaritems, shopIcon, settingsIcon ]);

Am I simply using the wrong syntax? I haven’t used spreads before, lol

Thanks for your help,
:bread:

  1. hotbaritems = this.physics.add.group(); ↩︎

9

Actually I was wrong and you can pass arrays or groups to ignore(), so you don’t need spreads.

You’ll need to use ignore() twice, once for each camera, to split all the game objects between the two cameras.