Can't fit an rectangle to the screen edge

[rubenshcm]

Hi,

I’m a starter in corona projects, trying to do my first project i had a surprise, the walls was not fit in the screen as it should and as i saw in the videos tutorials and as it is written in the tutorials in the net.

the code that i copied and the results were not the expected 

i just doesn´t know why the command rect not fit the rectangle in the screen edges

what am i doing wrong? some configuration in config? the image is attached

Code:

local physics = require(“physics”)

physics.start()

physics.setGravity(0,5)

display.setStatusBar( display.HiddenStatusBar )

local fundo = display.newImageRect( “Desert.png”, 320, 480 )

fundo.x = 160

fundo.y = 240

local bola = display.newImageRect( “Icon.png”, 57, 57 )

bola.x = 112

bola.y = 117

physics.addBody(bola)

local topWall = display.newRect( 0, 0, display.contentWidth, 10 )

local bottomWall = display.newRect( 0, display.contentHeight - 10, display.contentWidth, 10 )

local leftWall = display.newRect( 0, 0, 10, display.contentHeight )

local rightWall = display.newRect( display.contentWidth - 10, 0, 10, display.contentHeight )

– make them physics bodies

physics.addBody(topWall, “static”, {density = 1.0, friction = 0, bounce = 1, isSensor = false})

physics.addBody(bottomWall, “static”, {density = 1.0, friction = 0, bounce = 1, isSensor = false})

physics.addBody(leftWall, “static”, {density = 1.0, friction = 0, bounce = 1, isSensor = false})

physics.addBody(rightWall, “static”, {density = 1.0, friction = 0, bounce = 1, isSensor = false})

[Alan_PlantPot]

The video tutorials are probably old. When you create a display.newRect object, it’s X and Y position refer to the center of the rect by default. However the x and y position used to refer to the top left corner of the rect.  

 So for example:

local topWall = display.newRect( 0, 0, display.contentWidth, 10 )

The first 2 arguments are x and y. In your code, you are saying that you want the center of the rect to be at position 0, 0 which is the top left corner of the screen.

You have 2 ways of fixing this:

1. Change the anchor points for the rects so that they are back to the top left corner:

   local topWall = display.newRect( 0, 0, display.contentWidth, 10 ) topWall.anchorX = 0 topWall.anchorY = 0 local bottomWall = display.newRect( 0, display.contentHeight - 10, display.contentWidth, 10 ) bottomWall.anchorX = 0 bottomWall.anchorY = 0 …etc

2. Change the x/y positions of the walls so that the center of the rect is placed in the correct position:

   local wallThickness = 10 local topWall = display.newRect( display.contentWidth * 0.5, wallThickness * 0.5, display.contentWidth, wallThickness ) local bottomWall = display.newRect( display.contentWidth * 0.5, display.contentHeight - (wallThickness * 0.5), display.contentWidth, 10 ) local leftWall = display.newRect( wallThickness * 0.5, display.contentHeight * 0.5, wallThickness, display.contentHeight ) local rightWall = display.newRect( display.contentWidth - (wallThickness * 0.5), display.contentHeight * 0.5, wallThickness, display.contentHeight )

[rubenshcm]

@Alan\_PlantPot

The video tutorials are probably old. When you create a display.newRect object, it’s X and Y position refer to the center of the rect by default. However the x and y position used to refer to the top left corner of the rect.  

 So for example:

local topWall = display.newRect( 0, 0, display.contentWidth, 10 )

The first 2 arguments are x and y. In your code, you are saying that you want the center of the rect to be at position 0, 0 which is the top left corner of the screen.

You have 2 ways of fixing this:

1. Change the anchor points for the rects so that they are back to the top left corner:

   local topWall = display.newRect( 0, 0, display.contentWidth, 10 ) topWall.anchorX = 0 topWall.anchorY = 0 local bottomWall = display.newRect( 0, display.contentHeight - 10, display.contentWidth, 10 ) bottomWall.anchorX = 0 bottomWall.anchorY = 0 …etc

2. Change the x/y positions of the walls so that the center of the rect is placed in the correct position:

   local wallThickness = 10 local topWall = display.newRect( display.contentWidth * 0.5, wallThickness * 0.5, display.contentWidth, wallThickness ) local bottomWall = display.newRect( display.contentWidth * 0.5, display.contentHeight - (wallThickness * 0.5), display.contentWidth, 10 ) local leftWall = display.newRect( wallThickness * 0.5, display.contentHeight * 0.5, wallThickness, display.contentHeight ) local rightWall = display.newRect( display.contentWidth - (wallThickness * 0.5), display.contentHeight * 0.5, wallThickness, display.contentHeight )

Best answer ever! thanks

[Alan_PlantPot]

The video tutorials are probably old. When you create a display.newRect object, it’s X and Y position refer to the center of the rect by default. However the x and y position used to refer to the top left corner of the rect.  

 So for example:

local topWall = display.newRect( 0, 0, display.contentWidth, 10 )

The first 2 arguments are x and y. In your code, you are saying that you want the center of the rect to be at position 0, 0 which is the top left corner of the screen.

You have 2 ways of fixing this:

1. Change the anchor points for the rects so that they are back to the top left corner:

   local topWall = display.newRect( 0, 0, display.contentWidth, 10 ) topWall.anchorX = 0 topWall.anchorY = 0 local bottomWall = display.newRect( 0, display.contentHeight - 10, display.contentWidth, 10 ) bottomWall.anchorX = 0 bottomWall.anchorY = 0 …etc

2. Change the x/y positions of the walls so that the center of the rect is placed in the correct position:

   local wallThickness = 10 local topWall = display.newRect( display.contentWidth * 0.5, wallThickness * 0.5, display.contentWidth, wallThickness ) local bottomWall = display.newRect( display.contentWidth * 0.5, display.contentHeight - (wallThickness * 0.5), display.contentWidth, 10 ) local leftWall = display.newRect( wallThickness * 0.5, display.contentHeight * 0.5, wallThickness, display.contentHeight ) local rightWall = display.newRect( display.contentWidth - (wallThickness * 0.5), display.contentHeight * 0.5, wallThickness, display.contentHeight )

[rubenshcm]

@Alan\_PlantPot

The video tutorials are probably old. When you create a display.newRect object, it’s X and Y position refer to the center of the rect by default. However the x and y position used to refer to the top left corner of the rect.  

 So for example:

local topWall = display.newRect( 0, 0, display.contentWidth, 10 )

The first 2 arguments are x and y. In your code, you are saying that you want the center of the rect to be at position 0, 0 which is the top left corner of the screen.

You have 2 ways of fixing this:

1. Change the anchor points for the rects so that they are back to the top left corner:

   local topWall = display.newRect( 0, 0, display.contentWidth, 10 ) topWall.anchorX = 0 topWall.anchorY = 0 local bottomWall = display.newRect( 0, display.contentHeight - 10, display.contentWidth, 10 ) bottomWall.anchorX = 0 bottomWall.anchorY = 0 …etc

2. Change the x/y positions of the walls so that the center of the rect is placed in the correct position:

   local wallThickness = 10 local topWall = display.newRect( display.contentWidth * 0.5, wallThickness * 0.5, display.contentWidth, wallThickness ) local bottomWall = display.newRect( display.contentWidth * 0.5, display.contentHeight - (wallThickness * 0.5), display.contentWidth, 10 ) local leftWall = display.newRect( wallThickness * 0.5, display.contentHeight * 0.5, wallThickness, display.contentHeight ) local rightWall = display.newRect( display.contentWidth - (wallThickness * 0.5), display.contentHeight * 0.5, wallThickness, display.contentHeight )

Best answer ever! thanks