evan312

attach sprite to sprite

Recommended Posts

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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);    };

Share this post


Link to post
Share on other sites

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 () {	}};

Share this post


Link to post
Share on other sites

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/

Share this post


Link to post
Share on other sites

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!)

Share this post


Link to post
Share on other sites

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.

 

goggles-wip-anim-24092014.gif

 

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

 

Cheers

Owen

Share this post


Link to post
Share on other sites

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();

 

Share this post


Link to post
Share on other sites

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.  

Share this post


Link to post
Share on other sites
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?

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.