Jump to content

Center-align a group


MorpheusZ
 Share

Recommended Posts

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.

 

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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

  • 1 year later...

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. 

 

Link to comment
Share on other sites

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. 

 

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

Link to comment
Share on other sites

16 hours ago, VitaZheltyakov said:

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

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

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...