Jump to content

Shake Camera but don't shake UI


Recommended Posts

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: ");
		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]
		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 :)

Link to comment
Share on other sites

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? 

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...