Containers and Anchor points

[Satheesh]

I am unable to set anchor points for containers …

I have a group, which has lots of elements(around 30)

When I try to insert the group inside a container (whose width and height are the same as the group’s width and height), the container clips the group at its Top Left.  

The Container docs state 

By default, the clip bounds are centered about the container's origin. You can adjust the anchor to control this.  

So I tried changing the anchor points to .5, .5 
Sill doesn’t work. Same problem…

What am I doing wrong here?

Here is my code 
[lua]
 

–this is the group where the circles are inserted

local localGroup = display.newGroup()

 

–create 27 circles in 3 rows here 

local rad = 10

local circleW,circleH = 2*rad,2*rad

local xSpace,ySpace = 10,10

local xStart,yStart = 0,0

for i=1,27 do 

    local row,col = getRowColumnFromMatrixIndex(i,3,9)

    local l = xStart + (circleW+xSpace)*(col-1)

    local t = yStart + (circleH+ySpace)*(row-1)

    local x,y = l+circleW/2, t+circleH/2 

    local circle = display.newCircle(localGroup,x,y,rad)

    

end     

–create container and insert group

local containerW,containerH = localGroup.width,localGroup.height

local container = display.newContainer(containerW,containerH)

container:translate(40,140)

container:insert(localGroup)

container.anchorChildren = false 

container.anchorX = 0

container.anchorY = 0

[/lua]

[rob]

Group’s don’t have a width and height.  They are unbounded.  I also don’t see where you’re positioning the container.   Containers by default have anchor points of 0.5 and 0.5 anyway.  You won’t see any changes until you change the anchor points other than 0.5.

Rob

[Satheesh]

Ok. Seems you are right. If I give anchorX and anchorY as 0,0 it works. 

But I still see some weird behaviour(or maybe normal behaviour which I don’t understand).
I have some doubts to how the whole thing works. 

Here are the results of my code. 

I am inserting 27 circles into my localGroup. 
Before it is inserted into the container, the circles are displayed normally

 

Now I am inserting the localGroup into my container.  

When I give container.anchorX=0.5 and container.anchorY=0.5, the result is 

When container.anchorX=0, and container.anchorY = 0, the output is 

And finally, if container.anchorX = 1 and container.anchorY = 1, none of the images are displayed 

Now how does this make sense?   
When anchorX = 0 and anchorY = 0, I assumed the “clip bounds” should be centered around 0,0(since the docs says so).
I expected something like this : 

Similarly when anchorX and anchorY are .5,.5 I expect the center of the visible area to be centered at the center of the group(since the anchor points are .5 and .5.
I expected the behaviour to be like this.

And for anchorPoints 1,1, I expect this

How is my understanding of containers and anchor points flawed here? 

 

[Satheesh]

Bump! 

Rob? Any answers to by doubts? 

[primoz.cerar]

This would all depend on where you are positioning the circles in the group and where you put the container. First of, the only time in your examples where the whole container is actually on the screen is when you set the containers anchors at 0, 0, Beacuse you are not changing it’s position which by default is 0, 0 if it’s anchors are 0.5 0.5 the top half and the left half will be off screen because the center is at screen postiion 0, 0.

Now for the group position:

If your circles have anchor points 0, 0 and you insert the top left one at 0, 0 in the group then you should position the GROUP x, y at container.width * -0.5, conatiner.height * -0.5. That is because if I remember correctly the positions inside a container are always center based. Then you should get what is in your second diagram.

If you want to go with 0.5 anchor points then to get everything in position would be like this:

container anchors 0.5 0.5

container x, y = container.width * 0.5, container.height * 0.5 (to place it in top left) or display.contentCenterX, display.contentCenterY to place it in the middle of the screen,

circles and group position same as before.

If you don’t want to move the group than you should put the top left circle in the group at x, y = container.width * -0.5, container.height * - 0.5

Try it out. Maybe I made a mistake somewhere but it should get you in the right direction.

[Satheesh]

the top half and the left half will be off screen
That is not the case here.   I am placing the container manually, should have mentioned that earlier. My bad.

I have posted the entire code and updated the screenshots… Please see both the updated posts. 

Regarding your point about moving the group(localGroup in the code), if I move the group, only the group moves. not the visible area of the container. So the group moves but the visible window remains the same
So that’s not the solution here
 

[primoz.cerar]

the top half and the left half will be off screen

Well it still is true just not half. When you have anchors on the container of 0.5 you basically move the containers center from 0, 0 (top left of the screen) to x = 40, y = 140. The container is bigger than 80 * 280 so you still get part of it off screen. And note that translate moves from current position by the amount specified. It is better to set x, y explicitly when you want things positioned properly. And as I mentioned changed anchors on the container need different x, y to keep it in same place. Changing the anchor moves the container because its x, y don’t change. That is what you see in your first picture. Please reread my post and adjust your code. What you forgot to mention is that you set the containers anchorChildren to false. While it is true you always position objects relative to the containers center while when it is false the objects positions are relative to the anchor point. This changes all the childrens positions.

This code works for anhchors 0, 0:

--this is the group where the circles are inserted local localGroup = display.newGroup() --create 27 circles in 3 rows here local rad = 10 local circleW,circleH = 2\*rad,2\*rad local xSpace,ySpace = 10,10 local xStart,yStart = 0,0 local row,col = 1, 0 for i=1,27 do     col = col + 1     if col \> 9 then         row = row + 1         col = 1     end     local l = xStart + (circleW+xSpace)\*(col-1)     local t = yStart + (circleH+ySpace)\*(row-1)     local x,y = l+circleW/2, t+circleH/2     local circle = display.newCircle(localGroup,x,y,rad)     end     --create container and insert group local containerW,containerH = localGroup.width,localGroup.height local container = display.newContainer(containerW,containerH) container.anchorX = 0 -- groups 0, 0 will be placed at container top left container.anchorY = 0 container.x = 0 -- this places containers top left at screen top left container.y = 0 container:insert(localGroup) container.anchorChildren = false

I just replaced you getRowColumnFromMatrixIndex(i,3,9) because you didn’t post it.

Now for anchor 0.5, 0.5:

--create container and insert group local containerW,containerH = localGroup.width,localGroup.height local container = display.newContainer(containerW,containerH) container.anchorChildren = false container.anchorX = 0.5 -- groups 0, 0 will be placed at container center container.anchorY = 0.5 container.x = container.width \* 0.5 -- this places containers top left at screen top left container.y = container.height \* 0.5 --here we have to move the group off center localGroup.x = - container.width \* 0.5 localGroup.y = - container.height \* 0.5 container:insert(localGroup)

For 1, 1

--create container and insert group local containerW,containerH = localGroup.width,localGroup.height local container = display.newContainer(containerW,containerH) container.anchorChildren = false container.anchorX = 1 -- groups 0, 0 will be placed at container bottom right container.anchorY = 1 container.x = container.width -- this places containers top left at screen top left container.y = container.height --here we have to move the group off bottom right localGroup.x = - container.width localGroup.y = - container.height container:insert(localGroup)

[primoz.cerar]

Your second diagram would be for anchors 0, 0 if you don’t move the group and the first one would be for 0.5, 0.5 for when anchorChilder = false, if you set the right container position also.

At anchors 1,1 your groups 0, 0 (which is top, left because you inserted object’s in it so - yes that makes a difference also) will be at container bottom right. That’s why you don’t see anything.

[Satheesh]

Uff. Now I see.
When you mentioned about positiioning the group earlier, I udnerstood it in a completely twisted way.

Anyway I get it now(at-least I think I get it  ;))

Thanks a lot for the help!  :) 
 

[primoz.cerar]

Now set the groups anchorChildren = true and change it’s anchor points. That will give you a head ache!

[primoz.cerar]

Oh just a suggestion. When placing objects in a container I always leave anchorChilder = true. That way you always position objects from it’s center and changing anchors only changes the position of the container not the children layout inside the container. I find it creates less problems for me.

[Satheesh]

I was tinkering around a lot with the containers that I had actually forgotten I had set anchorChildren to false. 
 

But yeah, it makes sense  :) 
Thanks! 

[rob]

Group’s don’t have a width and height.  They are unbounded.  I also don’t see where you’re positioning the container.   Containers by default have anchor points of 0.5 and 0.5 anyway.  You won’t see any changes until you change the anchor points other than 0.5.

Rob

[Satheesh]

Ok. Seems you are right. If I give anchorX and anchorY as 0,0 it works. 

But I still see some weird behaviour(or maybe normal behaviour which I don’t understand).
I have some doubts to how the whole thing works. 

Here are the results of my code. 

I am inserting 27 circles into my localGroup. 
Before it is inserted into the container, the circles are displayed normally

 

Now I am inserting the localGroup into my container.  

When I give container.anchorX=0.5 and container.anchorY=0.5, the result is 

When container.anchorX=0, and container.anchorY = 0, the output is 

And finally, if container.anchorX = 1 and container.anchorY = 1, none of the images are displayed 

Now how does this make sense?   
When anchorX = 0 and anchorY = 0, I assumed the “clip bounds” should be centered around 0,0(since the docs says so).
I expected something like this : 

Similarly when anchorX and anchorY are .5,.5 I expect the center of the visible area to be centered at the center of the group(since the anchor points are .5 and .5.
I expected the behaviour to be like this.

And for anchorPoints 1,1, I expect this

How is my understanding of containers and anchor points flawed here? 

 

[Satheesh]

Bump! 

Rob? Any answers to by doubts? 

[primoz.cerar]

This would all depend on where you are positioning the circles in the group and where you put the container. First of, the only time in your examples where the whole container is actually on the screen is when you set the containers anchors at 0, 0, Beacuse you are not changing it’s position which by default is 0, 0 if it’s anchors are 0.5 0.5 the top half and the left half will be off screen because the center is at screen postiion 0, 0.

Now for the group position:

If your circles have anchor points 0, 0 and you insert the top left one at 0, 0 in the group then you should position the GROUP x, y at container.width * -0.5, conatiner.height * -0.5. That is because if I remember correctly the positions inside a container are always center based. Then you should get what is in your second diagram.

If you want to go with 0.5 anchor points then to get everything in position would be like this:

container anchors 0.5 0.5

container x, y = container.width * 0.5, container.height * 0.5 (to place it in top left) or display.contentCenterX, display.contentCenterY to place it in the middle of the screen,

circles and group position same as before.

If you don’t want to move the group than you should put the top left circle in the group at x, y = container.width * -0.5, container.height * - 0.5

Try it out. Maybe I made a mistake somewhere but it should get you in the right direction.

[Satheesh]

the top half and the left half will be off screen
That is not the case here.   I am placing the container manually, should have mentioned that earlier. My bad.

I have posted the entire code and updated the screenshots… Please see both the updated posts. 

Regarding your point about moving the group(localGroup in the code), if I move the group, only the group moves. not the visible area of the container. So the group moves but the visible window remains the same
So that’s not the solution here
 

[primoz.cerar]

the top half and the left half will be off screen

Well it still is true just not half. When you have anchors on the container of 0.5 you basically move the containers center from 0, 0 (top left of the screen) to x = 40, y = 140. The container is bigger than 80 * 280 so you still get part of it off screen. And note that translate moves from current position by the amount specified. It is better to set x, y explicitly when you want things positioned properly. And as I mentioned changed anchors on the container need different x, y to keep it in same place. Changing the anchor moves the container because its x, y don’t change. That is what you see in your first picture. Please reread my post and adjust your code. What you forgot to mention is that you set the containers anchorChildren to false. While it is true you always position objects relative to the containers center while when it is false the objects positions are relative to the anchor point. This changes all the childrens positions.

This code works for anhchors 0, 0:

--this is the group where the circles are inserted local localGroup = display.newGroup() --create 27 circles in 3 rows here local rad = 10 local circleW,circleH = 2\*rad,2\*rad local xSpace,ySpace = 10,10 local xStart,yStart = 0,0 local row,col = 1, 0 for i=1,27 do     col = col + 1     if col \> 9 then         row = row + 1         col = 1     end     local l = xStart + (circleW+xSpace)\*(col-1)     local t = yStart + (circleH+ySpace)\*(row-1)     local x,y = l+circleW/2, t+circleH/2     local circle = display.newCircle(localGroup,x,y,rad)     end     --create container and insert group local containerW,containerH = localGroup.width,localGroup.height local container = display.newContainer(containerW,containerH) container.anchorX = 0 -- groups 0, 0 will be placed at container top left container.anchorY = 0 container.x = 0 -- this places containers top left at screen top left container.y = 0 container:insert(localGroup) container.anchorChildren = false

I just replaced you getRowColumnFromMatrixIndex(i,3,9) because you didn’t post it.

Now for anchor 0.5, 0.5:

--create container and insert group local containerW,containerH = localGroup.width,localGroup.height local container = display.newContainer(containerW,containerH) container.anchorChildren = false container.anchorX = 0.5 -- groups 0, 0 will be placed at container center container.anchorY = 0.5 container.x = container.width \* 0.5 -- this places containers top left at screen top left container.y = container.height \* 0.5 --here we have to move the group off center localGroup.x = - container.width \* 0.5 localGroup.y = - container.height \* 0.5 container:insert(localGroup)

For 1, 1

--create container and insert group local containerW,containerH = localGroup.width,localGroup.height local container = display.newContainer(containerW,containerH) container.anchorChildren = false container.anchorX = 1 -- groups 0, 0 will be placed at container bottom right container.anchorY = 1 container.x = container.width -- this places containers top left at screen top left container.y = container.height --here we have to move the group off bottom right localGroup.x = - container.width localGroup.y = - container.height container:insert(localGroup)

[primoz.cerar]

Your second diagram would be for anchors 0, 0 if you don’t move the group and the first one would be for 0.5, 0.5 for when anchorChilder = false, if you set the right container position also.

At anchors 1,1 your groups 0, 0 (which is top, left because you inserted object’s in it so - yes that makes a difference also) will be at container bottom right. That’s why you don’t see anything.

[Satheesh]

Uff. Now I see.
When you mentioned about positiioning the group earlier, I udnerstood it in a completely twisted way.

Anyway I get it now(at-least I think I get it  ;))

Thanks a lot for the help!  :)