How can I make a multisprite sprite?

[Loupax]

I guessed group, but this didn't actually work in my case, since I wanted to apply physics to the group, but not it's children.

 

I tried adding a "slave" sprite that follows the "master" sprite (example here) but as you'll see, the "slave" (white rectangle) sprite doesn't lock as I wanted it to to the master (black rectangle), causing it to wobble when the sprite moves

 

Here is the code for that sprite

(function(win){	var Hero = function(game,x,y){            Phaser.Sprite.call(this, game, x, y, 'hero_body');	    var brain = initializeBrain(game), brain_offset = {x: 8, y:4};			    this.width = 38.2;	    this.height = 61.8;	    game.physics.enable(this, Phaser.Physics.ARCADE);	    this.body.collideWorldBounds = true;	    	    this.body.bounce.set(0.2);    	    this.body.gravity.set(0, 180);    	    var that = this;	    // Move to the right when clicking            game.input.onDown.add(function(){	    	brain.addBees(1);		    	that.body.velocity.x = 100;	    });            // Stop moving	    game.input.onUp.add(function(){	    	that.body.velocity.x = 0;	    });	    	    this.update = function(){	    	brain.emitter.forEach(function(bee){                        // Custom method that collides the "bees" inside a specific rectangle instead of the world			bee.body.checkCustomBounds(brain.getBounds());		});                // Make sure the brain stays where it should according to the bodys position		brain.x = this.x + brain_offset.x;		brain.y = this.y + brain_offset.y;	    };	   	};	var initializeBrain = function(game){	    var emitter = game.add.emitter(0, 0, 250);	    emitter.width = 100;	    emitter.height = 100;	    game.physics.enable(emitter, Phaser.Physics.ARCADE);	    // Beez are bouncing inside my heaaaaad            emitter.bounce.set(1,1);	    emitter.makeParticles('bee');	    emitter.setAll('width', 4);	    emitter.setAll('height', 4);	    emitter.minParticleSpeed.setTo(-400, -400);	    emitter.maxParticleSpeed.setTo(400, 400);	    emitter.gravity = 0;	    var brain = game.add.sprite(0,0, 'hero_brain', 'hero_brain');	    brain.width  = 25;	    brain.height = 25;	    brain.emitter = emitter;	    brain.addBees = function(howMany){	    	if(howMany === undefined){howMany = 1;}	    	emitter.start(true, 0, 0,howMany);		    };	    return brain;	}	Hero.prototype = Object.create(Phaser.Sprite.prototype);	Hero.prototype.constructor = Hero;	win.Hero = Hero;})(window)

Is my approach wrong here? How should I make a multisprite hero?

[jyapayne]

You can add the brain as a child to the hero. I'm not sure if it's what you need, but I think you can call this.addChild(brain); and it will update the sprite position and stuff for you.

[Loupax]

Yes, that was exactly what I needed. Thank you!

[Loupax]

Actually it's almost there... Don't know if this is a bug or not, but when adding a sprite as child to another, the size of the child sprite gets stretched to match that of the parent as well... That would make sense, since I might want to scale the entire sprite, by simply changing the size of the root sprite, but when I try to correct the size of the children, the size does not get changed properly. 
 
Check this fiddle, and play with the values in lines 11 and 15 to see what the problem is. The end result I need is a body of 32*64 and a head 32*32 in this case, and each of them must be a separate sprite