arrange DisplayObjects vertically, adjacent to one another

Hi all,

Just wondering what the math was to get a group of DisplayObjects to end up in a vertical arrangement, perfectly adjacent to one another. Is it something like

[lua]screenGroup[i].y = screenGroup[i - 1].y + screenGroup[i - 1].contentHeight[/lua]

to get element [lua]i[/lua] right below element [lua]i - 1[/lua]?

Thanks [import]uid: 204879 topic_id: 34317 reply_id: 334317[/import]

Hello,
There are various ways to handle this, but if I had to choose, I’d go with the “contentBounds” API to determine the yMax, then position the next object by that position minus the next object’s height divided by 2… again, there are several ways you could accomplish this, I’m just suggesting one of them.

http://docs.coronalabs.com/api/type/DisplayObject/contentBounds.html

Brent [import]uid: 200026 topic_id: 34317 reply_id: 136432[/import]

Thanks for the response, this is the first time I’ve seen contentBounds and it’s definitely going to be useful. However, I’m still having issues.

The code I’m using is essentially what you recommended:

[lua]local y = 0 – start at top of screen
for i = 1, displayGroup.numChildren, 1 do
displayGroup[i].y = y + displayGroup[i].contentHeight / 2
y = displayGroup[i].contentBounds.yMax
end[/lua]

It works for all cases except for when the [lua]displayGroup[i][/lua]'s are displayGroups themselves. In this case it spaces them way too far apart. Any idea why?

Thanks. [import]uid: 204879 topic_id: 34317 reply_id: 136477[/import]

Hi Andrew,
Try changing that “.contentHeight” to just “.height” and see what happens…
[import]uid: 200026 topic_id: 34317 reply_id: 136478[/import]

Same result. If I remove the [lua]+ screenGroup[i].contentHeight / 2[/lua] it fixes it for the displayGroup items, but breaks it for everything else. Is there some way that I can detect that an item is a displayGroup? [import]uid: 204879 topic_id: 34317 reply_id: 136479[/import]

OK, it’s becoming clearer now… display groups have a reference point of top-left, not center, so when you are putting those out in a vertical series, you need to adjust the placement of them. The math wouldn’t be the “/2” thing in that case.

There’s no “direct” way to determine if something is a display group or not, so in this case, I think you should adjust the reference point to “TopLeftReferencePoint” for every object regardless of whether it’s an image or a display group. Then, instead of doing the “/2” stuff along with “height”, just place the next item at the previous Y location (from your Y counter variable).

http://developer.coronalabs.com/reference/index/objectsetreferencepoint

See what happens with that attempt and keep me posted.
Thanks,
Brent [import]uid: 200026 topic_id: 34317 reply_id: 136480[/import]

Yep the non-uniform reference points were definitely the problem. Setting them all to the top left worked, but since everything else I’ve written assumes they will be at the center, I’m setting them to CenterReferencePoint.

Thanks again. [import]uid: 204879 topic_id: 34317 reply_id: 136482[/import]

Hello,
There are various ways to handle this, but if I had to choose, I’d go with the “contentBounds” API to determine the yMax, then position the next object by that position minus the next object’s height divided by 2… again, there are several ways you could accomplish this, I’m just suggesting one of them.

http://docs.coronalabs.com/api/type/DisplayObject/contentBounds.html

Brent [import]uid: 200026 topic_id: 34317 reply_id: 136432[/import]

Thanks for the response, this is the first time I’ve seen contentBounds and it’s definitely going to be useful. However, I’m still having issues.

The code I’m using is essentially what you recommended:

[lua]local y = 0 – start at top of screen
for i = 1, displayGroup.numChildren, 1 do
displayGroup[i].y = y + displayGroup[i].contentHeight / 2
y = displayGroup[i].contentBounds.yMax
end[/lua]

It works for all cases except for when the [lua]displayGroup[i][/lua]'s are displayGroups themselves. In this case it spaces them way too far apart. Any idea why?

Thanks. [import]uid: 204879 topic_id: 34317 reply_id: 136477[/import]

Hi Andrew,
Try changing that “.contentHeight” to just “.height” and see what happens…
[import]uid: 200026 topic_id: 34317 reply_id: 136478[/import]

Same result. If I remove the [lua]+ screenGroup[i].contentHeight / 2[/lua] it fixes it for the displayGroup items, but breaks it for everything else. Is there some way that I can detect that an item is a displayGroup? [import]uid: 204879 topic_id: 34317 reply_id: 136479[/import]

OK, it’s becoming clearer now… display groups have a reference point of top-left, not center, so when you are putting those out in a vertical series, you need to adjust the placement of them. The math wouldn’t be the “/2” thing in that case.

There’s no “direct” way to determine if something is a display group or not, so in this case, I think you should adjust the reference point to “TopLeftReferencePoint” for every object regardless of whether it’s an image or a display group. Then, instead of doing the “/2” stuff along with “height”, just place the next item at the previous Y location (from your Y counter variable).

http://developer.coronalabs.com/reference/index/objectsetreferencepoint

See what happens with that attempt and keep me posted.
Thanks,
Brent [import]uid: 200026 topic_id: 34317 reply_id: 136480[/import]

Yep the non-uniform reference points were definitely the problem. Setting them all to the top left worked, but since everything else I’ve written assumes they will be at the center, I’m setting them to CenterReferencePoint.

Thanks again. [import]uid: 204879 topic_id: 34317 reply_id: 136482[/import]