attach sprite to sprite

[evan312]

What is the best way to attach a sprite to another sprite at a specific point using phaser?

 

i.e. attaching a weapon sprite to the hand of a player sprite.

 

thanks!

[Mike]

I bet that Group is the way to go. Check this examples:

 

http://gametest.mobi/phaser/examples/_site/view_full.html?d=groups&f=group+transform.js&t=group%20transform

 

http://gametest.mobi/phaser/examples/_site/view_full.html?d=groups&f=group+transform+-+tween.js&t=group%20transform%20-%20tween

 

http://gametest.mobi/phaser/examples/_site/view_full.html?d=groups&f=group+transform+-+rotate.js&t=group%20transform%20-%20rotate

[rich]

Yes I would use a Group for sure as the children are offset from the groups coordinates, plus use pivot to control rotation.

[evan312]

Ok yes i see that it should do the job, but I have another few questions about the group/child roles.

 

1. Should I do the stuff specific to my player (movement, health, etc..) using the group, or the player child within the group?

 

2. how do i set the group origin to the player origin? -- I did group.x = player.body.x (and w/ y) but got some really weird behavior

 

Thank you both so much

[rich]

Personally I would create a class (that extends Group) and have the health properties, etc on that - and I'd probably add in helper functions too to control movement, but if you need to use the built-in collision then you need to move the child sprites properly (i.e. via motion on a body property). It's hard to say for sure as it's quite game dependant. There's no right/wrong way to achieve what you need.

[evan312]

sorry for my abundance of questions, but i am still having problems. 

 

it works fine if you set the group(player) coords and the person(torso) coords and don't move move, but as soon  as I either try to move, set collideWorldBounds on torso to true, or set player.x = torso.body.x (and y) it teleports and flashes and rotates bizarrely. 

 

live example here: http://evansphasertest.co.nf/

 

and here  is my main.js:

var game = new Phaser.Game(800, 600, Phaser.CANVAS, '', { preload: preload,                                                          create: create,                                                          update: update,                                                          render: render });// Variablesvar player;var torso;var pistol;// Functionsfunction keyDown(KEY) { // Shorten isDown inputs    return eval('game.input.keyboard.isDown(Phaser.Keyboard.' + KEY +')');};function preload () {    game.load.image('BG', 'assets/bg.png');    game.load.spritesheet('player', 'assets/playerSS.png', 64, 64);    game.load.spritesheet('robot1', 'assets/raw/robot1.svg', 128, 128);    game.load.image('pistol', 'assets/pistol.png');    };function create () {    // Background    game.world.setBounds(0, 0, 1600, 1200);    game.add.sprite(0, 0,'BG');    // Player    player = game.add.group();    player.x = 100;    player.y = 100;    torso = player.create(0, 0, 'player');    // Next line freaks it out too    //torso.body.collideWorldBounds = true;     torso.animations.add('walk', [0,1], 5, true);    torso.speed = 250;    torso.walkingX = false;    torso.walkingY = false;      torso.anchor.setTo(0.5, 0.5)    game.camera.follow(torso, Phaser.Camera.FOLLOW_TOPDOWN);    // Pistol    pistol = player.create(27, 21, 'pistol');    pistol.anchor.setTo(.15 , .5);    /* not relevant    // Robot    robot1 = game.add.sprite(200, 200, 'robot1');    robot1.scale.setTo(.5, .5);    robot1.animations.add('move', [0,1,2], 7, true)    */};function update () {    if (keyDown('A') || keyDown('LEFT')){        torso.body.velocity.x = -torso.speed;        torso.walkingX = true;    }    else if (keyDown('D') || keyDown('RIGHT')){        torso.body.velocity.x = torso.speed;        torso.walkingX = true;    }    else{        torso.body.velocity.x = 0;        torso.walkingX = false;    }       if (keyDown('S') || keyDown('DOWN')){        torso.body.velocity.y = torso.speed;        torso.walkingY = true;    }    else if (keyDown('W') || keyDown('UP')){        torso.body.velocity.y = -torso.speed;        torso.walkingY = true;    }    else{        torso.body.velocity.y = 0;        torso.walkingY = false;    }        if (!torso.walkingX && !torso.walkingY){        torso.animations.stop();        torso.frame = 0;    }    else        torso.animations.play('walk');            player.rotation = game.physics.angleToPointer(torso.center);        // uncommenting below lines = freak out    //player.x = torso.body.x;    //player.y = torso.body.y;          //not relevant   //robot1.animations.play('move');};function render (){    //game.debug.renderText('template', 20,20);    game.debug.renderText(player.x + ' ' + player.y, 20, 40);    game.debug.renderText(Math.round(torso.body.x) + ' ' + Math.round(torso.body.y), 20, 60);    };

[Tanikaze]

I have tried a quick solution that doesn't need to subclass phaser's classes, maybe it could be useful for quick try and prototyping pourposes. You can create a referenceSprite with no texture and set it at the desired position, the create the group and set the parent as referenceSprite. Now all the sprites taht you add to the group will have local origin in the referenceSprite's x and y. I've add some code below. I'm not sure this solution could be useful for distribution, maybe someone that knows more than me about phaser could find some collateral effects.

MyGame.MyLevel.prototype = {	referenceSprite: null,	group: null,	create: function () {		this.referenceSprite = this.game.add.sprite (300, 300);		this.group = this.game.add.group(this.referenceSprite);		this.group.create (-10, -10, 'foo');		this.group.create (10, 10, 'bar');	},	render: function () {	},	update: function () {	}};

[lewster32]

I would've thought just using sprite.addChild would suffice in the majority of cases such as this?

// Main 'holder' spriteplayer = game.add.sprite(0, 0, null);// Torsoplayer.torso = game.add.sprite(0, 0, 'player');player.torso.anchor.setTo(0.5);player.addChild(player.torso);// Pistolplayer.pistol = game.add.sprite(27, 21, 'pistol');player.pistol.anchor.setTo(0.15, 0.5);player.addChild(player.pistol);

I've built fairly complex looking characters out of parts using this technique: http://rotates.org/phaser/xv/

[Tanikaze]

Cool, so sprites can work as groups. So groups are basically sprites without a texture, or some of the features that they implement (like the iterator et similar) aren't implemented in the sprite?

[lewster32]

Yeah, pretty much all Phaser display objects can have child objects which will respect the scene graph.

[owen]

That seems really simple I think I will give it a try!

 

The alternative is to replace the sprite texture of your player with a whole new sprite who looks like he's carrying a different weapon. (That's what I was planning to do until I read this thread!)

[owen]

Yes. Thank you Lewster. I've tried it and it works perfectly.  I have also used pivot along with a looping angle tween to make the attached child sprite 'rotate' around the player sprite.  See example below.

 

 

Just one problem for me now, how to destroy the added child sprites?   player.children.destroy() does not seem to work.

 

Cheers

Owen

[lewster32]

The children property is just an array, so you'd treat it as such to act upon each element in it:

player.children.forEach(function(child) {
	child.destroy();
});
// or...
for (var c = 0, l = player.children.length; c < l; c++) {
	player.children[c].destroy();
}

These would be the 'iterator' ways of doing it - you could also just ensure you keep a variable/property reference to any added children and do it directly:

player.orbit1 = game.add.sprite(0, 0, 'orbiter');
player.addChild(player.orbit1);

// and then later on...
player.orbit1.destroy();

 

[frankstein]

how you add collision to a sprite.child?

[charlieRobinson]

Hello! Let me first start out with.. I have no idea what I am doing.

But, what I am TRYING to do is make a rectangle and add that to a sprite. A health bar that floats above the player.

I can make the bar and add it to the screen but I cannot get it to stick to the player and move with the player ?????? what am I doing wrong?

var bmd = game.add.bitmapData(0,0);
bmd.ctx.beginPath();
bmd.ctx.rect(0,0,15,15);
bmd.ctx.fillStyle = '#ff0000';
bmd.ctx.fill();
var bar =  game.add.sprite(player.x, player.y-10, bmd);
player.addChild(bar);

 

If I omit the addChild line , the bar appears. But if I try to add it to the player sprite it disappears.  

[charlieRobinson]

On 12/30/2013 at 7:53 PM, rich said:

Personally I would create a class (that extends Group) and have the health properties, etc on that - and I'd probably add in helper functions too to control movement, but if you need to use the built-in collision then you need to move the child sprites properly (i.e. via motion on a body property). It's hard to say for sure as it's quite game dependant. There's no right/wrong way to achieve what you need.

 

how do you move the body of a sprite that is in a group while moving the entire group with the sprite? For example.. if the player sprite has a name tag and a health bar that needs to stay with the player sprite.. how do you move the player sprite but have the name tag and health bar move with it?

[drhayes]

Set the position on the group and all the children will recalculate their positions. Is that what you're asking?

[charlieRobinson]

22 minutes ago, drhayes said:

Set the position on the group and all the children will recalculate their positions. Is that what you're asking?

 

If I add sprite2 to sprite1, sprite 2 disappears. If I make a group and add sprite 1 and sprite 2 its fine. But when I move sprite 1 body sprite 2 does not move with sprite 1.

I need a solution to combine multiple sprites and move the body of 1 sprite and have the rest of the sprites stick together and move with sprite 1 body.

[charlieRobinson]

well the problem was,,,, the x and y coords of the child sprite were made relative to the parent and putting it who knows where. I changed the coords to 0,0 and went from there.

All is well. im a n00b

[drhayes]

Everyone starts a noob. That's what the forum's for.  Glad you got it solved.

[owen]

Hi, I know I'm almost a year late but I still want to know how to add collision to a child sprite.

For example I have a player holding a sword (player.sword) and I want to detect when the sword hits an enemy.

The collision for player hitting sprites isn't picking this up.

Any ideas?

 

Cheers,

Owen

[murmurr]

I know that this is an old post, but I am looking at it now in order to make sure a small untextured sprite is attached to another sprite.

I have:

core = game.add.sprite(350,450,'core');
ccore = game.add.sprite(350,450,'ccore');

core.addChild(ccore);

However, when I move around the core sprite, its child (ccore) stays still and does not follow.

I keep thinking that I am missing something but I have no clue what it could be.

[murmurr]

OHHHHH 

I see the coordinates are relative

I thought it wasnt working because when I moved around core ccore.x and ccore.y were the same, but ccore.body was really changing.

[samme]