Trouble with display groups

Solar2D General Questions/Discussion
#1

Just when I think I’ve mastered display groups I run into an issue that just throws me for a loop. I’m trying to create a shop where tapping a button makes the items slide onto/off the screen depending on which page of the store you’re looking at (Upgrades, or Coins). This is a mockup of how the screen is supposed to look:

When I add the first group of items everything looks ok:

But then, when I add the second group of items, which is supposed to be offscreen, it just pushes the first group to the right like so:

Both groups of items are within a third “wrapper” group, which has anchorChildren = true. Here is some code

wrapper = display.newGroup() wrapper.anchorChildren = true wrapper:setAnchor(.5, 0) wrapper.x = popup.x wrapper.y = shopPageBackground.y + shopPageBackground.height\*.5 + 10 popup:insert(wrapper) coinsGroup = createCoinItems(popup, shopInfo.coins) if coinsButton.active then coinsGroup.x = 0 else coinsGroup.x = popup.x\*2 end wrapper:insert(coinsGroup) upgradesGroup = createUpgradeItems(popup, shopInfo.upgrades) if upgradesButton.active then upgradesGroup.x = 0 else upgradesGroup.x = -popup.x\*2 end wrapper:insert(upgradesGroup)

Popup is just another displayGroup with anchorChildren = true as well.

I can’t figure out why this is happening.

#2

I’ll admit right now that I don’t understand the anchorChildren property. However, from what you’re saying about the behaviour of your child images in your display group, I would assume that anchorChildren causes the parent group’s relative (0,0) for it’s child display objects to be re-positioned.

Given that, what I think is happening is that when you add a second image (or any display object) to the display group, the (0,0) location is shifted and all the objects within it are moved relative to that new (0,0) location.

TL;DR: IMHO don’t use anchorChildren. Just don’t set it at all. I’ve never done it and I’ve done what you’re trying to achieve many, many times.

So, how would you do what you want to achieve? First, create the wrapper display group and position it at the top left of where you want your “Display Group 1” to be. Now, add your “Display Group 1” to the wrapper with it’s top left corner at (0,0). Then, when you add your second display object (in this case “Display Group 2”) to the wrapper, position it at x=0-DisplayGroup1.width

Any other child of the wrapper would be added at: wrapper.numChildren * -child.width

If you’d like some code for that, let me know. I just think your problem right now is the anchorChildren property being involved.

#3

Btw, those are really nice graphic assets. Would you mind sharing your artist’s details, please?

#4

Without seeing more code, I can only guess that at some point the anchorPoint on the group is confusing things and causing it to center.  Groups are boundless containers that just have an origin, but has a soft width and height based on the content in it.  Groups have an origin which isn’t the center of the content in the group.  That origin starts out at 0, 0.  If you put your objects at an X greater than 0 it will be on screen, if its at a -X it will be off screen.  Later to slide it on screen, transition the group to the right.  However, it’s possible because there is an anchor point attempting to center the group, when the new content is added, it’s soft width changes and that center point moves, shifting the whole group.  Try leaving the anchor point off and see if things change.

Rob

#5

@horacebury , I think your humble opinion is correct. I find anchorChildren to be useful in certain situations but it seems to cause headaches like this…“Popup” is actually more than just a display group, it’s a modal dialog widget that I created and I use it extensively throughout my game. For some reason (which I can’t recall), I use anchorChildren for the main display group that holds all the contents of the popup and so all my code for placing objects in the popup does everything with respect to anchorChildren being true. I think I’m going to disable that but it will mean a couple days of refactoring at least :wacko: .

As for the graphics, I wish I could take credit but I downloaded them from GraphicBurger. I’m just using them as placeholder assets for now until I can tackle the art side.

@Rob , thanks for the suggestion. I found that turning anchorChildren off made the group behave in the way that I expected so I’m going to take that route.

Thanks for the help guys!

#6

I’ll admit right now that I don’t understand the anchorChildren property. However, from what you’re saying about the behaviour of your child images in your display group, I would assume that anchorChildren causes the parent group’s relative (0,0) for it’s child display objects to be re-positioned.

Given that, what I think is happening is that when you add a second image (or any display object) to the display group, the (0,0) location is shifted and all the objects within it are moved relative to that new (0,0) location.

TL;DR: IMHO don’t use anchorChildren. Just don’t set it at all. I’ve never done it and I’ve done what you’re trying to achieve many, many times.

So, how would you do what you want to achieve? First, create the wrapper display group and position it at the top left of where you want your “Display Group 1” to be. Now, add your “Display Group 1” to the wrapper with it’s top left corner at (0,0). Then, when you add your second display object (in this case “Display Group 2”) to the wrapper, position it at x=0-DisplayGroup1.width

Any other child of the wrapper would be added at: wrapper.numChildren * -child.width

If you’d like some code for that, let me know. I just think your problem right now is the anchorChildren property being involved.

#7

Btw, those are really nice graphic assets. Would you mind sharing your artist’s details, please?

#8

Without seeing more code, I can only guess that at some point the anchorPoint on the group is confusing things and causing it to center.  Groups are boundless containers that just have an origin, but has a soft width and height based on the content in it.  Groups have an origin which isn’t the center of the content in the group.  That origin starts out at 0, 0.  If you put your objects at an X greater than 0 it will be on screen, if its at a -X it will be off screen.  Later to slide it on screen, transition the group to the right.  However, it’s possible because there is an anchor point attempting to center the group, when the new content is added, it’s soft width changes and that center point moves, shifting the whole group.  Try leaving the anchor point off and see if things change.

Rob

#9

@horacebury , I think your humble opinion is correct. I find anchorChildren to be useful in certain situations but it seems to cause headaches like this…“Popup” is actually more than just a display group, it’s a modal dialog widget that I created and I use it extensively throughout my game. For some reason (which I can’t recall), I use anchorChildren for the main display group that holds all the contents of the popup and so all my code for placing objects in the popup does everything with respect to anchorChildren being true. I think I’m going to disable that but it will mean a couple days of refactoring at least :wacko: .

As for the graphics, I wish I could take credit but I downloaded them from GraphicBurger. I’m just using them as placeholder assets for now until I can tackle the art side.

@Rob , thanks for the suggestion. I found that turning anchorChildren off made the group behave in the way that I expected so I’m going to take that route.

Thanks for the help guys!