Container - Shift the location of display objects

[yuval_forish]

Hi

I am trying to use the new container object in order to mask the screen but I am facing problem to do so. In order to display the core of the problem attach 2 code examples with the screen layout.

I am running the example on the corona simulator (2014.2189) on Windows 7.

When I am running the folowing line:
local myBox = display.newRect(160,284, 100, 50 )

All is well and a white rectangle is position on the middle of the screen (Refer to attach file : Picture1)

But running the following lines:

local myBox = display.newRect(160,284, 100, 50 )
local container = display.newContainer( 320 , 568 ) --Define the container for the whole screen size
container:translate( 160, 284 ) – Locate the containeron the center of the screen
container:insert(myBox)

The white rectangle is push into the lower right side of the screen. Why ? (Refer to attach file : Picture1)  I would like to assume that if I create container on the whole screen it will not rearrange the location of the display objects. How can I use the container and maintain the same original location/size of the objects (i.e. prior adding the objects to the container)

Also Attach the config.lua file:

application =

{
    content =

    {

      

        width = 320, --Default to Iphone 5 Scale (Original 640 * 1136)

        height = 568 ,       

        scale = “letterBox”,

        xAlign = “center”,

        yAlign = “center”,

        imageSuffix =

        {

            ["@2x"] = 1.5

            --["-small"] = 0.375,

            --high-resolution devices (Retina iPad, Kindle Fire HD 9", Nexus 10, etc.) will use @2x-suffixed images

            --devices less than 1.5*height pixels in width (iPhone4, iPad2, Kindle Fire 7", etc.) will use non-suffixed images

        },

        fps = 30 --Defult Can be changed to 60

    }

}

[RedBeach]

Hi @yuval_forish.

The container works as a display.newGroup. If you add a object to it, the object position will be automatically adjusted to the use the container as its origin reference.

Here is an example:

RectObj at position = 30, y = 60

Container at position x=10, y = 50 

If you add the RectObj to the container, its position (30,60) will then be relative to the container position (10,50), so, its “real position” (relative to the screen) would ended being (40, 110)

[yuval_forish]

Thanks - I understand that but the Container and Group objects are different in the way that the boundaries are defined which makes life harder in the scene of positioning objects in container.

For example if I create a container in the size of (300 , 300) then the upper/left coordination is (-150 , -150) and the lower/right coordination is (150,150). So is want to place a rectangle (size of 50 by 50)  in the upper/left corner of the container I should use the following code :

Local myBox = display.newRect(container, -150,-150 , 50, 50 )

 Which make the calculation of positioning objects inside container very hard (not like in group object).

Is there a way to convert the boundaries of the container so the upper/left corner will be (0,0) and lower/right corner as (300,300).

[RedBeach]

As you said, the container works as a displayGroup with the exception that is has a defined width & height, and everything that goes beyond that width or height is cropped.

So, you can achieve what you want by basically 2 different ways. The first, is to consider that the group and your newRect as centered position (i.e, the center of the object that will be set at the position x, y). So if you have a container of 300 x 300 and you want it to have its top-left at 0,0  you can simply set its position to be 150, 150. Idem for the display newRect.

The other option is to change both the anchorX, anchorY properties to be set as 0. That way your objects will have top-left position instead of a centered position.

[yuval_forish]

Sorry but trying your second option about changing the AnchorX and AnchorY without success. If you will run the code below you will see that the box is moving from the MIDDLE  of the screen to the lower-right part of the screen (where I want it to start from the upper-left of the screen all the way to the lower-right side of the screen)

local container = display.newContainer( 320 , 568 ) --define as the whole screen size
container.anchorY=0
container.anchorX=0
local myBox = display.newRect(container,0,0 , 100, 100 )
transition.to( myBox, { time=3000,  y=568, x=320 } )

[RedBeach]

Please, when you write code here at the forum, use the code tag to make the reading easier.

Try using this:

local container = display.newContainer( 320 , 568 ) --define as the whole screen size local myBox = display.newRect(0,0 , 100, 100 ) container:insert(myBox, true) transition.to( myBox, { time=3000, y=568, x=320 } )

[yuval_forish]

But in your code we are getting to the original problem, the box is indeed start from the top-left side BUT its end at the MIDDLE of the screen (and not in the lower-right side).

Obviously you can set the box to be located at (-160,-284) and move the box to (160,284) - But I would like to avoid using negative numbers as coordination. 

[RedBeach]

Try this code. I added a border so you can see where the container is.

local container = display.newContainer( display.contentWidth , display.contentHeight ) --define as the whole screen size container.anchorX = 0 container.anchorY = 0 container.anchorChildren = false print("Container Top-Left position (x,y) = ", container.contentBounds.xMin, container.contentBounds.yMin) local myBox = display.newRect(0,0 , 100, 100 ) container:insert(myBox, true) -- makes the rectangle to have top-left reference myBox.anchorX = 0 myBox.anchorY = 0 -- sets the box to have its top-left at 0,0 of the container. Since the container is also top-left at the 0,0 of the screen, this will result the box to be at the 0,0 of the screen myBox.x = 0 myBox.y = 0 transition.to( myBox, { time=3000, y=568, x=320, delay = 500 } ) -- displaying the container boundaries - this is just to help you see where the container is local b = display.newRect(0,0,container.contentWidth - 2 , container.contentHeight - 2) b.anchorX = 0 b.anchorY = 0 b.x = container.contentBounds.xMin + 1 b.y = container.contentBounds.yMin + 1 b.strokeWidth = 1 b:setStrokeColor(1,0,0) b:setFillColor(0,0,0,0)

[yuval_forish]

This is working :-) 

Now I am understanding that my fault was not setting anchorChildren to False.

Thanks so much.

[RedBeach]

Hi @yuval_forish.

The container works as a display.newGroup. If you add a object to it, the object position will be automatically adjusted to the use the container as its origin reference.

Here is an example:

RectObj at position = 30, y = 60

Container at position x=10, y = 50 

If you add the RectObj to the container, its position (30,60) will then be relative to the container position (10,50), so, its “real position” (relative to the screen) would ended being (40, 110)

[yuval_forish]

Thanks - I understand that but the Container and Group objects are different in the way that the boundaries are defined which makes life harder in the scene of positioning objects in container.

For example if I create a container in the size of (300 , 300) then the upper/left coordination is (-150 , -150) and the lower/right coordination is (150,150). So is want to place a rectangle (size of 50 by 50)  in the upper/left corner of the container I should use the following code :

Local myBox = display.newRect(container, -150,-150 , 50, 50 )

 Which make the calculation of positioning objects inside container very hard (not like in group object).

Is there a way to convert the boundaries of the container so the upper/left corner will be (0,0) and lower/right corner as (300,300).

[RedBeach]

As you said, the container works as a displayGroup with the exception that is has a defined width & height, and everything that goes beyond that width or height is cropped.

So, you can achieve what you want by basically 2 different ways. The first, is to consider that the group and your newRect as centered position (i.e, the center of the object that will be set at the position x, y). So if you have a container of 300 x 300 and you want it to have its top-left at 0,0  you can simply set its position to be 150, 150. Idem for the display newRect.

The other option is to change both the anchorX, anchorY properties to be set as 0. That way your objects will have top-left position instead of a centered position.

[yuval_forish]

Sorry but trying your second option about changing the AnchorX and AnchorY without success. If you will run the code below you will see that the box is moving from the MIDDLE  of the screen to the lower-right part of the screen (where I want it to start from the upper-left of the screen all the way to the lower-right side of the screen)

local container = display.newContainer( 320 , 568 ) --define as the whole screen size
container.anchorY=0
container.anchorX=0
local myBox = display.newRect(container,0,0 , 100, 100 )
transition.to( myBox, { time=3000,  y=568, x=320 } )

[RedBeach]

Please, when you write code here at the forum, use the code tag to make the reading easier.

Try using this:

local container = display.newContainer( 320 , 568 ) --define as the whole screen size local myBox = display.newRect(0,0 , 100, 100 ) container:insert(myBox, true) transition.to( myBox, { time=3000, y=568, x=320 } )

[yuval_forish]

But in your code we are getting to the original problem, the box is indeed start from the top-left side BUT its end at the MIDDLE of the screen (and not in the lower-right side).

Obviously you can set the box to be located at (-160,-284) and move the box to (160,284) - But I would like to avoid using negative numbers as coordination. 

[RedBeach]

Try this code. I added a border so you can see where the container is.

local container = display.newContainer( display.contentWidth , display.contentHeight ) --define as the whole screen size container.anchorX = 0 container.anchorY = 0 container.anchorChildren = false print("Container Top-Left position (x,y) = ", container.contentBounds.xMin, container.contentBounds.yMin) local myBox = display.newRect(0,0 , 100, 100 ) container:insert(myBox, true) -- makes the rectangle to have top-left reference myBox.anchorX = 0 myBox.anchorY = 0 -- sets the box to have its top-left at 0,0 of the container. Since the container is also top-left at the 0,0 of the screen, this will result the box to be at the 0,0 of the screen myBox.x = 0 myBox.y = 0 transition.to( myBox, { time=3000, y=568, x=320, delay = 500 } ) -- displaying the container boundaries - this is just to help you see where the container is local b = display.newRect(0,0,container.contentWidth - 2 , container.contentHeight - 2) b.anchorX = 0 b.anchorY = 0 b.x = container.contentBounds.xMin + 1 b.y = container.contentBounds.yMin + 1 b.strokeWidth = 1 b:setStrokeColor(1,0,0) b:setFillColor(0,0,0,0)

[yuval_forish]

This is working :-) 

Now I am understanding that my fault was not setting anchorChildren to False.

Thanks so much.