Walls are not correctly positioned

Physics
#1

Hello, 

I’m new to Corona and just started implementing scene transitions in a sample game using composite, but have problems with positioning of border walls on screen (need them to add boundaries for objects movements). 

I tried something like this: 

function scene:create( event ) local sceneGroup = self.view local borderGroup = display.newGroup() physics.start() -- create background image background = display.newImageRect( sceneGroup, "sc1.jpg", 1024, 768 ) background.anchorX = 0 background.anchorY = 0 background.x, background.y = 0, 0 -- create wall objects topWall = display.newRect( 0, 0, display.contentWidth, 10 ) bottomWall = display.newRect( 0, display.contentHeight - 10, display.contentWidth, 10 ) leftWall = display.newRect( 0, 0, 10, display.contentHeight ) 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}) physics.addBody(bottomWall, "static", {density = 1.0, friction = 0, bounce = 1}) physics.addBody(leftWall, "static", {density = 1.0, friction = 0, bounce = 1}) physics.addBody(rightWall, "static", {density = 1.0, friction = 0, bounce = 1}) butterfly = display.newImageRect(sceneGroup,"butterfly.png",110,102) butterfly.x = 5 butterfly.y = 0.33 \* display.contentHeight snail = display.newImageRect(sceneGroup,"snail.png",110,91) snail.x = display.contentWidth - 40 snail.y = 0.75 \* display.contentHeight physics.addBody(butterfly,"kinematic", {isBullet = true}) physics.addBody(snail,"kinematic", {isBullet = true}) borderGroup:insert(leftWall) borderGroup:insert(rightWall) borderGroup:insert(topWall) borderGroup:insert(bottomWall) borderGroup:insert(snail) borderGroup:insert(butterfly) snail:addEventListener("collision", onCollision) butterfly:addEventListener("collision", onCollision) physics.pause() end function scene:show( event ) local sceneGroup = self.view local phase = event.phase if phase == "did" then physics.start() background.touch = onPageSwipe background:addEventListener( "touch", background ) snail:setLinearVelocity(-14,0) timer.performWithDelay(500, moveButterflyRandomly, 13); end end function moveButterflyRandomly() butterfly:setLinearVelocity(math.random( 40,40 ), math.random( 20,60 ) ); end local function onCollision(event) print(event.phase, snail:getLinearVelocity()) print(event.phase, butterfly:getLinearVelocity()) end

however the walls are not correctly positioned as seen on the screenshot:

http://www.dropbox.com/s/nfjtpx47fp4hbde/scene1.png?dl=0

and there is no interaction between moving objects (butterfly, snail) and walls - objects are above them and are moving out of scene boundaries.

I tried also code without explicitly inserting objects into borderGroup , but with no effect.

Thank you for your help.

#2

Hi @lithne,

This looks like it’s because your positioning of the walls… I would suggest trying this instead:

[lua]

topWall = display.newRect( display.contentCenterX, -5, display.actualContentWidth, 10 )

bottomWall = display.newRect( display.contentCenterX, display.actualContentHeight+5, display.actualContentWidth, 10 )

leftWall = display.newRect( -5, display.contentCenterY, 10, display.actualContentHeight )

rightWall = display.newRect( display.actualContentWidth+5, display.contentCenterY, 10, display.actualContentHeight )

[/lua]

Brent

#3

Thank you for your response, however with the code above I got the following effect:

https://www.dropbox.com/s/547xxuwpfvhyao0/scene1-a.png?dl=0

After some modifications this made the expected visual result (for the assertion of proper wall placement):

-- create wall objects topWall = display.newRect( display.contentCenterX, 0, display.contentWidth, 10 ) leftWall = display.newRect( -5, display.contentCenterY, 10, display.actualContentHeight ) bottomWall = display.newRect( display.contentCenterX, display.actualContentHeight-5, display.contentWidth, 10 ) rightWall = display.newRect( display.contentWidth - 5, display.contentCenterY, 10, display.actualContentHeight )

https://www.dropbox.com/s/xy2vrm88x1lg66s/scene1-b.png?dl=0

but:

  1. still there is no interaction between moving objects and the walls. 

  2. I don’t quite understand why mixing contentWidth with actualContentWidth fixed that?

thank you,

#4

  1. kinematic bodies don’t collide with static.  try your snail/butterfly as dynamic bodies

  2. letterbox scaling, when content aspect ratio doesn’t match device aspect ratio, use actualContentWidth/Height for extended (letterboxed) dimensions “beyond” content

(you may also want to replace any explicit (“0”) or implicit ("-5", which should probably be +5 btw)  zeros with screenOriginX/Y for same letterbox reason)

#5

Hi @lithne,

It’s really valuable, when you’re starting, to learn about and understand the Corona “content area” and how it can be used. This guide is one of the most essential you should read as a new Corona developer:

https://docs.coronalabs.com/guide/basics/configSettings/index.html

(well, the last few sections aren’t quite as critical, but the first 4 sections or so are… up through the “Content Properties” part at least)

Brent

#6

Hi @lithne,

This looks like it’s because your positioning of the walls… I would suggest trying this instead:

[lua]

topWall = display.newRect( display.contentCenterX, -5, display.actualContentWidth, 10 )

bottomWall = display.newRect( display.contentCenterX, display.actualContentHeight+5, display.actualContentWidth, 10 )

leftWall = display.newRect( -5, display.contentCenterY, 10, display.actualContentHeight )

rightWall = display.newRect( display.actualContentWidth+5, display.contentCenterY, 10, display.actualContentHeight )

[/lua]

Brent

#7

Thank you for your response, however with the code above I got the following effect:

https://www.dropbox.com/s/547xxuwpfvhyao0/scene1-a.png?dl=0

After some modifications this made the expected visual result (for the assertion of proper wall placement):

-- create wall objects topWall = display.newRect( display.contentCenterX, 0, display.contentWidth, 10 ) leftWall = display.newRect( -5, display.contentCenterY, 10, display.actualContentHeight ) bottomWall = display.newRect( display.contentCenterX, display.actualContentHeight-5, display.contentWidth, 10 ) rightWall = display.newRect( display.contentWidth - 5, display.contentCenterY, 10, display.actualContentHeight )

https://www.dropbox.com/s/xy2vrm88x1lg66s/scene1-b.png?dl=0

but:

  1. still there is no interaction between moving objects and the walls. 

  2. I don’t quite understand why mixing contentWidth with actualContentWidth fixed that?

thank you,

#8

  1. kinematic bodies don’t collide with static.  try your snail/butterfly as dynamic bodies

  2. letterbox scaling, when content aspect ratio doesn’t match device aspect ratio, use actualContentWidth/Height for extended (letterboxed) dimensions “beyond” content

(you may also want to replace any explicit (“0”) or implicit ("-5", which should probably be +5 btw)  zeros with screenOriginX/Y for same letterbox reason)

#9

Hi @lithne,

It’s really valuable, when you’re starting, to learn about and understand the Corona “content area” and how it can be used. This guide is one of the most essential you should read as a new Corona developer:

https://docs.coronalabs.com/guide/basics/configSettings/index.html

(well, the last few sections aren’t quite as critical, but the first 4 sections or so are… up through the “Content Properties” part at least)

Brent