Center-align a group

[MorpheusZ]

Is it possible to create a group and configure in such a way that any child with position (0, 0) would be the center of the group instead of its top left corner?

As I add bigger sprites to the group and its size increases, things get misaligned. The manual solution seems to involve re-adjusting the positions of the object in the group every time I add/remove something to it, which is kinda ugly.

 

[lewster32]

The 0, 0 point is only relative to whatever the group is inside, so if you place a group in the center of your world (by setting its x and y properties, just like any other display object) and set the anchor on sprites added to that group to 0.5, 0.5 and their position to 0, 0, they will appear in the center of the world too. Groups don't have a 'center' because they don't really have a width or height, just bounds derived from what's in them.

[MorpheusZ]

hmm.. that doesn't seem to work, or at least I'm not using it correctly.

 

Here's how it behaves under different setups:

 

Setup 1:

group = game.add.group();bigImage = game.add.image(0, 0, 'bigImage');group.add(bigImage);// Now if I move the group (group.x = target.x; group.y = target.y;), the bigImage is somehow correctly centered around the target location.

Setup 2:

group = game.add.group();bigImage = game.add.image(0, 0, 'bigImage');bigImage.anchor.x = 0.5;bigImage.anchor.y = 0.5;group.add(bigImage);smallImage = game.add.image(0, 0, 'smallImage');smallImage.anchor.x = 0.5;smallImage.anchor.y = 0.5;group.add(smallImage);// Now if I move the group, the bigImage's bottom right corner touches the the target location, but the small image is correctly centered within the big image.

Setup 3:

group = game.add.group();bigImage = game.add.image(0, 0, 'bigImage');group.add(bigImage);smallImage = game.add.image(0, 0, 'smallImage');smallImage.anchor.x = 0.5;smallImage.anchor.y = 0.5;group.add(smallImage);// Now if I move the group, the bigImage is (-smallImage.width / 2, -smallImage.height / 2) away from the target location, and the small image is centered around the top left corner of the big image.

[Robske]

Use the 'pivot' property on the group.

[MorpheusZ]

could you please explain how setting the group's pivot could help?

 

regardless of the pivot value, the small image is still centered on the top left corner of the big image

[lewster32]

I'm not entirely sure what's happening in your tests, but I've replicated them in a fiddle and they're working as expected: http://jsfiddle.net/lewster32/2dd3zkz6/

[Igor Georgiev]

Here is what I do to resolve this:
Assuming that you gave created a group and already have populated it with sprites  - a simple approach is to set the group.x/y as world.centerX/Y (or whatever other element's coordinates).

TO EVERYONE: why nobody uses this kind of code snippet? Everybody is posting their code in one horizontal scrolling line. Any reason?

this.container = this.add.group();
this.container.add(sprite);
this.container.x = this.world.centerX - (this.doorsContainer.width * 0.5);
this.container.y = this.world.centerY - (this.doorsContainer.height* 0.5);
//this.world.centerX/Y could be replaced with any object.x that you want your group to be relative to. 

 

[VitaZheltyakov]

5 hours ago, Igor Georgiev said:

Here is what I do to resolve this:
Assuming that you gave created a group and already have populated it with sprites  - a simple approach is to set the group.x/y as world.centerX/Y (or whatever other element's coordinates).

TO EVERYONE: why nobody uses this kind of code snippet? Everybody is posting their code in one horizontal scrolling line. Any reason?

this.container = this.add.group();
this.container.add(sprite);
this.container.x = this.world.centerX - (this.doorsContainer.width * 0.5);
this.container.y = this.world.centerY - (this.doorsContainer.height* 0.5);
//this.world.centerX/Y could be replaced with any object.x that you want your group to be relative to. 

 

Код печатали в одну линию в старых постах. У форума не было нормальной поддержки переноса строк.

[drhayes]

The old code snippet formatting was broken when the forum was updated, yeah.

[Igor Georgiev]

16 hours ago, VitaZheltyakov said:

Код печатали в одну линию в старых постах. У форума не было нормальной поддержки переноса строк.

Спасибо, я понимаю.

[Igor Georgiev]

Thanks, I get it.