Issues With Following an Object within a Group.

[fillmoreb]

I'm having some issues when I try setting the camera to follow a display object that is contained within a group.  The camera seems to respond only the the object's local x/y within the group, instead of global.  Also, when I adjust the scale of the group, the camera appears to jump slightly at the start and end of scaling.  I have an example posted here:

http://www.benfillmore.com/ZoomTest/

*** UPDATE ***

I've solved both parts of this problem now.

First, Phaser.Camera.updateTarget() function looks only at the target's X and Y properties, which do not accurately reflect the target's actual position.  I've forgone using the built-in Phaser.Camera.follow() function and instead use Phaser.Camera.focusOnXY() in my state's update.

Doing so has fixed the camera not following the sprite during translation of the group.

Second, the the jump at the beginning and end seem to be because the changes I make to the groups scale do not propagate down the display list until a different portion of phaser's main loop.  So, I manually calculate the actual position using both the sprite's and the group's X and Y, and then multiply by the group's scale.  If I had more nested groups than this, I would need to include the scales and positions for each one.

The code below has been updated to work correctly, as well as the sample implementation I linked to.  Hopefully somebody else with similar issues finds this helpful someday.

*** END UPDATE ***

Here is the code for my example:

window.onload = function() {

	var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update });
	var group;
	var target;
	var cursors;

	function preload () {

		game.load.image('target', 'target.png');
		game.load.image('foot', 'foot.png');

	}

	function create () {
		game.stage.backgroundColor = 0xFFFFFF;
		game.world.setBounds(0,0,4000,4000);  // Make the world big.
		group = game.add.group();
		for(var i = 0; i < 30; i++){
			var foot = game.add.image(500+ Math.random()*800,500 + Math.random()*600, "foot", null, group);
			var scale = Math.random() * .25 + .25;
			foot.scale.setTo(scale,scale);
			foot.tint = Math.random() * 0xFFFFFF;
		}
		target = game.add.image(900,800, "target", null, group);
		target.anchor.setTo(0.5,0.5);
		// I've removed the following line as per my description above.
		// game.camera.follow(target);
		cursors = game.input.keyboard.createCursorKeys();
	}

	function update () {
		if(cursors.up.isDown){
			group.scale.x /= 0.99;
			group.scale.y /= 0.99;
		}
		if(cursors.down.isDown){
			group.scale.x *= 0.99;
			group.scale.y *= 0.99;
		}
		if(cursors.left.isDown){
			group.x -= 2;
		}
		if(cursors.right.isDown){
			group.x += 2;
		}
		// I've added the following line in my update as a solution.
		game.camera.focusOnXY(target.x * group.scale.x + group.x, target.y * group.scale.y + group.y);

	}

};

If anybody has any insight into why this is happening, or how to address it, I would be very appreciative.  I can work around the camera not following the object when the group is moved, but the jump on scaling is killing me.

Thanks in advance,

Ben

[Zeterain]

On 2/5/2016 at 3:27 PM, fillmoreb said:

...when I adjust the scale of the group, the camera appears to jump slightly at the start and end of scaling...

 

I'm particularly interested in what's causing the jumping.

[fillmoreb]

I have solved this, please see the edited original post.