MorpheusZ

Center-align a group

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.

 

Share this post


Link to post
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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

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. 

 

Share this post


Link to post
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. 

 

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

Share this post


Link to post
Share on other sites
16 hours ago, VitaZheltyakov said:

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

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

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.