Issues Removing Children From Groups

[filvoyage]

Hey guys,

 

I did a search of the forums as well as the Phaser/Pixi docs and came up short (let me know if it's answered anywhere else).

 

I'm trying to create a mechanic whereby the player is able to pick up and drop sprites. I've been able to achieve pickups by using the group.add() function where the group parent is the player sprite, but when using .remove() to drop the sprite, the sprite just completely disappears. Its position, alpha, scale etc all look sensible and haven't been modified. What I have seen however is that the sprite parent name changes to being undefined, which seems unhealthy as when it spawns in the world its parent appears to be "__world". I also tried directly calling addChild() inherited from Pixi which is used in the Phaser groups, and the result was the same. It's easy to reproduce, my code is below.

 

This is in .create()

	this.testGroup = game.add.group(PLAYER)	this.testLight = game.add.sprite(300, 300, "buttonGradient");

This is in .update()

	if (PLAYER_OBJECT.inputIsActive("y")) 	{		this.testGroup.add(this.testLight);	}	if (PLAYER_OBJECT.inputIsActive("u")) 	{		this.testGroup.remove(this.testLight);	}

Does anyone know if my setup is bad, or if there are other ways to achieve my desired effect? I had a look at the group remove example on the official examples page and the same thing happens there - I don't know if it's a bug or an intentional result of the system.

 

Thanks in advance!

[rich]

Why are you removing the Sprite from the Group? Is it like some container that they should only be in when picked up?

[lewster32]

You should probably instead do game.world.add(this.testLight) to add it back to the world (this will take it out of the testGroup). The way groups work (in this case, the whole caboodle is called a 'scene graph') is pretty straightforward if not immediately obvious; all objects in the world can have a single parent, which it derives all of its transforms from each frame. When you change an object to use a different group, it will immediately start using its new parent's transforms. This will have some unwanted side effects, such as the object suddenly seeming to move or disappear altogether, as its coordinates suddenly reflect its new parent - you'd have to take this into account when changing something's group.

 

If you don't want to deal with the maths involved, it may be better just to on each update change the object's position to match the player holding it (with offsets to put it in the correct place).

[filvoyage]

Why are you removing the Sprite from the Group? Is it like some container that they should only be in when picked up?

 

I was using Groups as the basis for my physical hierarchy. The Sprite gets added to the player Group (and thus physically parented to the player) when picked up, meaning when the player moves after that the Sprite moves with it (after adjusting the position to reflect the new parents transforms).

 

 

You should probably instead do game.world.add(this.testLight) to add it back to the world (this will take it out of the testGroup). The way groups work (in this case, the whole caboodle is called a 'scene graph') is pretty straightforward if not immediately obvious; all objects in the world can have a single parent, which it derives all of its transforms from each frame. When you change an object to use a different group, it will immediately start using its new parent's transforms. This will have some unwanted side effects, such as the object suddenly seeming to move or disappear altogether, as its coordinates suddenly reflect its new parent - you'd have to take this into account when changing something's group.

 

If you don't want to deal with the maths involved, it may be better just to on each update change the object's position to match the player holding it (with offsets to put it in the correct place).

 

I think you're right - the extra maths required in getting all the transforms to update coupled with the hierarchical setup is probably more trouble than its worth. I'll create something in the update that maintains the offset for all the picked up objects.

 

Thanks for your help guys!

[lewster32]

For what it's worth, I think the maths is actually quite simple for positioning if you're just moving an object one level up (i.e. moving the object to its parent) - you just add the parent's x and y values to the object's x and y values, and when it's moved it will appear in the same place relative to the world. Anything more complex than that and it's harder as you've got to iterate over all of the parents in the tree adding the positions together.

 

I don't know if Phaser or pixi has any kind of helpers that would make this process easier, but I don't recall seeing anything. Typically scene graphs provide localToGlobal and globalToLocal helpers so you can work out where something should be positioned when moved from any point in the graph to any other. Can anyone shed any light on this?

[wayfinder]

The standard update functions in PIXI (and by extension Phaser) are called top-down (so stage calls world, world calls its children, each of those call their children, and so forth), and transform the object according to its own parameters and that of its parent (which by the time the code gets to it has already updated itself with ITS own transform and that of its parent, which in turn etc etc, all the way up). That means that local transforms are always relative to the parent.