child sprite behind parent

[Titus]

Hi Guys,

I'm trying to link 3 sprites together for a player character using the addChild method on a sprite. I have backArm, player and frontArm sprites that need to be rendered in that order. The arms both rotate at the shoulder and the backArm needs to go behind the player sprite. I've seen a suggestion on  this thread to have a main sprite container with a null key and add the sprites as children of that. I've tried that and I have my sprites rendered in the correct order but the arms do not follow the player anymore when it walks across the screen. The arms just stay in place while the player walks away. Pretty sure I've made an error somewhere.  I'll put a code snippet below and any advice would be really helpful. Thanks

create: function() {


	
		
		this.game.physics.startSystem(Phaser.Physics.ARCADE);

		this.playerContainer = this.game.add.sprite(200, 500, null);
        this.backArm = this.game.add.sprite(0, 500, 'backArm');	
		this.player = this.game.add.sprite(200, 500, 'player');				
		this.frontArm = this.game.add.sprite(0, 500, 'frontArm');

		
		this.playerContainer.addChild(this.backArm);
		this.playerContainer.addChild(this.player);	
		this.playerContainer.addChild(this.frontArm);	
		this.game.physics.arcade.enable(this.player);

		this.player.anchor.setTo(0.5);
		this.frontArm.anchor.setTo(0.4866, 0.2925);	
		this.backArm.anchor.setTo(0.4866, 0.2925);		

		//walk animation
		this.player.animations.add('walkright', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 0, 24,'', 5), 24, true, false);
		this.player.animations.add('walkleft', Phaser.Animation.generateFrameNames('Fire Marshall Main_', 24, 0,'', 5), 24, true, false);		

		cursors = this.game.input.keyboard.createCursorKeys();
		

	},

	update: function() {
//player walk movement
 this.player.body.velocity.x = 0;
		if (cursors.right.isDown) {
         
        this.player.body.velocity.x = 150;
        this.player.animations.play('walkright');
    }else if (cursors.left.isDown){
      
        this.player.body.velocity.x = -150;
        this. player.animations.play('walkleft');
    }else {
    	this.player.animations.stop();
    	this.player.frame = 25; 
    }

    this.frontArm.rotation = this.game.physics.arcade.angleToPointer(this.frontArm.world);
    this.backArm.rotation = this.game.physics.arcade.angleToPointer(this.backArm.world);
  




	}

 

[samid737]

 

I think you will then have to move playerContainer.body to make it work instead of player.body. You can try it the other way around, make player the root object, add playerContainer as a Child, and then add all bodyparts to playerContainer , but make sure you move the correct sprite during input.  

[Titus]

@samid737 That worked perfectly!

 I think I had tried that initially but got some errors (probably because I had mistakenly changed the walk animation code to the container too). Thanks once again for the help.