A Fuse Powered Company

Jump to content

[TOPIC: topicViewTemplate]
[GLOBAL: userSmallPhoto]
Photo

Containers and Anchor points
Started by Satheesh Feb 25 2014 10:12 AM

11 replies to this topic
container anchor point graphics graphics 2.0 reference group display object
[TOPIC CONTROLS]
[/TOPIC CONTROLS]
[modOptionsDropdown]
[/modOptionsDropdown]
[reputationFilter]
[TOPIC: post.html]
#1

Satheesh

[GLOBAL: userInfoPane.html]
Satheesh
  • Starter
  • PipPipPipPipPipPip
  • 701 posts
  • Jedi

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 

 

--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


[TOPIC: post.html]
#2

Rob Miracle

[GLOBAL: userInfoPane.html]
Rob Miracle
  • Corona Staff
  • 10,410 posts
  • Jedi

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



[TOPIC: post.html]
#3

Satheesh

[GLOBAL: userInfoPane.html]
Satheesh
  • Starter
  • PipPipPipPipPipPip
  • 701 posts
  • Jedi

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 
xo4RTId.png

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

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






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 : 
alV6h9i.png


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.
DIycVdx.png

And for anchorPoints 1,1, I expect this
YC8v1Of.png




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

 



[TOPIC: post.html]
#4

Satheesh

[GLOBAL: userInfoPane.html]
Satheesh
  • Starter
  • PipPipPipPipPipPip
  • 701 posts
  • Jedi

Bump! 

Rob? Any answers to by doubts?  :)



[TOPIC: post.html]
#5

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Starter
  • PipPipPipPipPipPip
  • 447 posts
  • Jedi

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.



[TOPIC: post.html]
#6

Satheesh

[GLOBAL: userInfoPane.html]
Satheesh
  • Starter
  • PipPipPipPipPipPip
  • 701 posts
  • Jedi

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

 



[TOPIC: post.html]
#7

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Starter
  • PipPipPipPipPipPip
  • 447 posts
  • Jedi

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)


[TOPIC: post.html]
#8

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Starter
  • PipPipPipPipPipPip
  • 447 posts
  • Jedi

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.



[TOPIC: post.html]
#9

Satheesh

[GLOBAL: userInfoPane.html]
Satheesh
  • Starter
  • PipPipPipPipPipPip
  • 701 posts
  • Jedi

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!  :) 
 



[TOPIC: post.html]
#10

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Starter
  • PipPipPipPipPipPip
  • 447 posts
  • Jedi

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



[TOPIC: post.html]
#11

primoz.cerar

[GLOBAL: userInfoPane.html]
primoz.cerar
  • Starter
  • PipPipPipPipPipPip
  • 447 posts
  • Jedi

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.



[TOPIC: post.html]
#12

Satheesh

[GLOBAL: userInfoPane.html]
Satheesh
  • Starter
  • PipPipPipPipPipPip
  • 701 posts
  • Jedi


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! 




[topic_controls]
[/topic_controls]



Also tagged with one or more of these keywords: container, anchor point, graphics, graphics 2.0, reference, group, display object