Set transition target position for composer.showOverlay() and composer.hideOverlay()

Getting Started Newbie Questions
#1

Hello

I am creating a left hand slide out menu in an app that I want to stick to the left and slide of the screen.

I used the composer.showOverlay(…

local options = { isModal = true, effect = "slideRight", time = 200, params = { sampleVar = "my sample variable" } } composer.showOverlay( "overlay1", options )

The problem is the overlay centres by default.  I got around this by removing the transitions effect and time, then in the scene:show I added this code to have the overlay bounce in and stick to the left.

function scene:show( event ) local phase = event.phase if "did" == phase then text1.text = "Overlay" sceneGroup:translate(-display.contentWidth , 0 ) transition.to( sceneGroup, { time=1000, x=(-(display.contentWidth) / 2) + (display.contentWidth) / 4, transition=easing.outBounce } ) end end

The the problem now is when I fade out the scene it jumps to the centre again???

composer.hideOverlay( "fade", 400 )

Is there a way to set the transition transition target position for composer.showOverlay() and composer.hideOverlay()

#2

Also if I translate the scene back to the left after starting the hideOverlay (fade) the fade is cancelled out?

sceneGroup:translate(-display.contentWidth , 0 )
#3

Also I had a tiled background ( but because it is rendering offscreen it is cleared (but the buffer) before it comes on screen

 -- Tiles Menu background local x, y = display.contentCenterX, display.contentCenterY local rect1 = display.newRect( x, y, 200, display.contentHeight) display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) rect1.fill = { type="image", filename="tile\_overlay1.jpg" } local scaleFactorX = 1 ; local scaleFactorY = 1 if ( rect1.width \> rect1.height ) then scaleFactorY = rect1.width / rect1.height else scaleFactorX = rect1.height / rect1.width end rect1.fill.scaleX = 0.02 \* scaleFactorX rect1.fill.scaleY = 0.02 \* scaleFactorY rect1.fill.rotation = 0 rect1.alpha = 0.7 sceneGroup:insert( rect1 ) rect1:toBack()

I can add the tiled background after the transition clears but that looks silly.

local listener1 = function( obj ) -- Tiles Menu background local x, y = display.contentCenterX, display.contentCenterY local rect1 = display.newRect( x, y, 200, display.contentHeight) display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) rect1.fill = { type="image", filename="tile\_overlay1.jpg" } local scaleFactorX = 1 ; local scaleFactorY = 1 if ( rect1.width \> rect1.height ) then scaleFactorY = rect1.width / rect1.height else scaleFactorX = rect1.height / rect1.width end rect1.fill.scaleX = 0.02 \* scaleFactorX rect1.fill.scaleY = 0.02 \* scaleFactorY rect1.fill.rotation = 0 rect1.alpha = 0.7 sceneGroup:insert( rect1 ) rect1:toBack() return true end function scene:show( event ) local phase = event.phase if "did" == phase then text1.text = "Overlay (2)" sceneGroup:translate(-display.contentWidth , 0 ) transition.to( sceneGroup, { time=1000, x=(-(display.contentWidth) / 2) + (display.contentWidth) / 4, transition=easing.outBounce, onComplete=listener1} ) end end
#4

I got the repeating tile background to work (the image was 256x257 not 256x256

But I can’t get the showOverlay to move to a desired position (other than centre).

#5

Scene’s including overlays are full screen.  They take up the full screen.  What you draw in that full screen is up to you.  If your content area is 320x480 and you want it only on say the left half the screen, you have to draw it in a way that your objects are between 0 and 160px.

Rob

#6

Also if I translate the scene back to the left after starting the hideOverlay (fade) the fade is cancelled out?

sceneGroup:translate(-display.contentWidth , 0 )
#7

Also I had a tiled background ( but because it is rendering offscreen it is cleared (but the buffer) before it comes on screen

 -- Tiles Menu background local x, y = display.contentCenterX, display.contentCenterY local rect1 = display.newRect( x, y, 200, display.contentHeight) display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) rect1.fill = { type="image", filename="tile\_overlay1.jpg" } local scaleFactorX = 1 ; local scaleFactorY = 1 if ( rect1.width \> rect1.height ) then scaleFactorY = rect1.width / rect1.height else scaleFactorX = rect1.height / rect1.width end rect1.fill.scaleX = 0.02 \* scaleFactorX rect1.fill.scaleY = 0.02 \* scaleFactorY rect1.fill.rotation = 0 rect1.alpha = 0.7 sceneGroup:insert( rect1 ) rect1:toBack()

I can add the tiled background after the transition clears but that looks silly.

local listener1 = function( obj ) -- Tiles Menu background local x, y = display.contentCenterX, display.contentCenterY local rect1 = display.newRect( x, y, 200, display.contentHeight) display.setDefault( "textureWrapX", "repeat" ) display.setDefault( "textureWrapY", "repeat" ) rect1.fill = { type="image", filename="tile\_overlay1.jpg" } local scaleFactorX = 1 ; local scaleFactorY = 1 if ( rect1.width \> rect1.height ) then scaleFactorY = rect1.width / rect1.height else scaleFactorX = rect1.height / rect1.width end rect1.fill.scaleX = 0.02 \* scaleFactorX rect1.fill.scaleY = 0.02 \* scaleFactorY rect1.fill.rotation = 0 rect1.alpha = 0.7 sceneGroup:insert( rect1 ) rect1:toBack() return true end function scene:show( event ) local phase = event.phase if "did" == phase then text1.text = "Overlay (2)" sceneGroup:translate(-display.contentWidth , 0 ) transition.to( sceneGroup, { time=1000, x=(-(display.contentWidth) / 2) + (display.contentWidth) / 4, transition=easing.outBounce, onComplete=listener1} ) end end
#8

I got the repeating tile background to work (the image was 256x257 not 256x256

But I can’t get the showOverlay to move to a desired position (other than centre).

#9

Scene’s including overlays are full screen.  They take up the full screen.  What you draw in that full screen is up to you.  If your content area is 320x480 and you want it only on say the left half the screen, you have to draw it in a way that your objects are between 0 and 160px.

Rob