Make fullscreen container?

Getting Started Newbie Questions
#1

Hello. I am trying to make a fullscreen container which should contain a popup. But I’m having troubles with sizes. I have this code:

local g = display.newGroup() local c = display.newContainer( display.contentWidth, display.contentHeight ) local bg = display.newRect( g, centerX, centerY, display.contentWidth, display.contentHeight ) bg:setFillColor( 0,0,0,0.5 ) c:insert( bg ) local popupBg = display.newRect( g, centerX, centerY, popupWidth, popupHeight ) c:insert( popupBg ) local title = display.newText( g, params.title, centerX, popupBg.y / 1.5 + 10, app.fonts.exo2ExtraBold, 18 ) title:setFillColor( 0,0,0,1 ) c:insert( title )

So I’m expecting that container will be fullscreen, popup background will be fullscreen as well. But now as you can see on the screenshot the result is not what I expect it to be. I guess that probably I don’t understand something about sizing or positioning containers :mellow:

#2

Try display.actualContentWidth and display.actualContentHeight instead of popupWidth and popupHeight

#3

Also, are centerX, centerY, popupWidth, and popupHeight already defined?

#4

You’ve got some redundant code and are forgetting that the center of containers is <0,0>

So, you need to keep that in mind:

  • Place content in the center of a container == < 0, 0>

  • To move all the content, move the container.

Also, as was pointed out above, you’re using contentWidth instead of actualContentWidth which is wrong for the use you outlined.

(All info documented here: https://docs.coronalabs.com/api/ )

local fullw = display.actualContentWidth local fullh = display.actualContentHeight local cx = display.contentCenterX local cy = display.contentCenterY local popupWidth = 100 local popupHeight = 300 local c = display.newContainer( fullw, fullh ) c.x = cx c.y = cy local bg = display.newRect( c, 0, 0, fullw, fullh ) bg:setFillColor( 0,0,0,0.5 ) local popupBg = display.newRect( c, 0, 0, popupWidth, popupHeight ) local title = display.newText( c, params.title, 0, 0, app.fonts.exo2ExtraBold, 18 ) title:setFillColor( 0,0,0,1 ) -- Aligns title to top of popupBg with 10 pixel offset downward title.anchorY = 0 title.y = popupBg.y - popupHeight/2 + 10
#5

Also, your initial container was positioned at the default of <0,0> which is approximately the upper left corner, depending on device and your config.lua setup.

#6

Thanks a lot! now I understand what was wrong with my code

#7

Try display.actualContentWidth and display.actualContentHeight instead of popupWidth and popupHeight

#8

Also, are centerX, centerY, popupWidth, and popupHeight already defined?

#9

You’ve got some redundant code and are forgetting that the center of containers is <0,0>

So, you need to keep that in mind:

  • Place content in the center of a container == < 0, 0>

  • To move all the content, move the container.

Also, as was pointed out above, you’re using contentWidth instead of actualContentWidth which is wrong for the use you outlined.

(All info documented here: https://docs.coronalabs.com/api/ )

local fullw = display.actualContentWidth local fullh = display.actualContentHeight local cx = display.contentCenterX local cy = display.contentCenterY local popupWidth = 100 local popupHeight = 300 local c = display.newContainer( fullw, fullh ) c.x = cx c.y = cy local bg = display.newRect( c, 0, 0, fullw, fullh ) bg:setFillColor( 0,0,0,0.5 ) local popupBg = display.newRect( c, 0, 0, popupWidth, popupHeight ) local title = display.newText( c, params.title, 0, 0, app.fonts.exo2ExtraBold, 18 ) title:setFillColor( 0,0,0,1 ) -- Aligns title to top of popupBg with 10 pixel offset downward title.anchorY = 0 title.y = popupBg.y - popupHeight/2 + 10
#10

Also, your initial container was positioned at the default of <0,0> which is approximately the upper left corner, depending on device and your config.lua setup.

#11

Thanks a lot! now I understand what was wrong with my code