Shake Camera but don't shake UI

[Secretmapper]

Is there any way to prevent shaking of some elements with game.camera.shake? fixedToCamera only seems to make it fixed to the camera as far as the position of it goes, but they are still affected by screen shake.

[Zampano]

I had the same problem and the solution I came up with was a custom shake function to which you can give an element or an array of elements to shake. 

Maybe this helps you, too. If you want to shake multiple objects at once, pass them as an array or otherwise they will be shaken independently of one another.

setBaseXY = function (element) {
	element.xbase = element.x;
	element.ybase = element.y;
}

shakeElement = function(element, game, x = 15,y = 15, delay = 0, duration = 1200, loops = 0) { //ALWAYS SET BASE XY
	var e = [];
	if(isArray(element)) e = element;
	else e[0] = element;
	
	var x_arr = [];
	var y_arr = [];
	
	if(loops === 0) loops = game.math.roundTo(duration/200,0);
	if (loops < 1) loops = 1;
	
	for (var ii = 0; ii < loops*2; ii++) {				
		x_arr[ii] = game.rnd.sign()*game.rnd.integerInRange(x/3,x)*((loops-ii/2)/loops)		
		y_arr[ii] = game.rnd.sign()*game.rnd.integerInRange(y/3,y)*((loops-ii/2)/loops)
	}

	for(var i = 0; i < e.length; i++) {
		if(typeof e[i].xbase === "undefined") {
			console.log("########## WARNING: NO BASE XY FOR OBJECT: ");
			console.log(e[i]);
			setBaseXY(e[i]);
		}
	
		var x_arr_e = [];
		var y_arr_e = [];
		
		for (var iii = 0; iii < x_arr.length; iii++) {		
			x_arr_e[iii] = e[i].xbase+x_arr[iii]
			y_arr_e[iii] = e[i].ybase+y_arr[iii]
		}
		
		x_arr_e.push(e[i].xbase);
		y_arr_e.push(e[i].ybase);
		e[i].shaketween = game.add.tween(e[i]).to({ x: x_arr_e, y: y_arr_e }, duration, Phaser.Easing.Cubic.Out, true, delay);
	
	}	
}

Edit: for some reason whenever I pick javascript as language for the code element^ it does not save the choice... so sorry for the lack of syntax highlighting

[Secretmapper]

That's a good approach. Sad that it's not natively supported by phaser but it would have to do for now!

[gauravD]

Ideally, only the world should shake (and everything within it). All 'camera' transformations are applied to the world. So when you have a sprite in a huge world that the camera follows, the world translates/rotates, but the stage's transformation matrix remains unchanged - so any UI that goes on the stage will remain static.

For some reason, the shake is applied to all display objects (the stage too).

@rich Perhaps the `offsetVector uniform` can be removed and Camera's `update()` modified to account for `_shake.x` and `_shake.y` when you update `this.displayObject.position` with `this.view`? Or am I missing something?