I am displaying an overlay when the user taps on a button. This overlay has a white backgroung image with alpha 0.5 which makes the background look disabled. This background rectangle covers the full screen size.
Then I have several elements displayed in a yellow rectangle which has smaller dimensions. When the user clicks outside the yellow rectangle, the overlay is supposed to hide and return to game. That works fine: the white background rectangle disappears but the yellow one (and all its children) stays on the screen.
What am I missing?
local composer = require( "composer" ) local scene = composer.newScene() local globalData = require( "scripts.globalData" ) -- Load pseudo global variable to make them accessible from a module to another local widget = require("widget") local function exitOverlayMode( event ) composer.hideOverlay() -- Hides the overlay (re-enable underneath content) if( globalData.backgroundRectangleOverlay ~= nil ) then globalData.backgroundRectangleOverlay:removeSelf() globalData.backgroundRectangleOverlay = nil end -- if myRectangle ~= nil if( globalData.preUpgradeElements ~= nil ) then globalData.preUpgradeElements:removeSelf() globalData.preUpgradeElements = nil end -- if tableView ~= nil return true -- Prevents propagating the event to other objects end -- exitOverlayMode -- "scene:create()" function scene:create( event ) local sceneGroup = self.view local backgroundDisplayGroup = display.newGroup() backgroundDisplayGroup.x = 0 backgroundDisplayGroup.y = 0 globalData.backgroundRectangleOverlay = display.newRect(backgroundDisplayGroup, display.contentWidth/2, display.contentHeight/ 2 + 50, display.contentWidth, display.contentHeight ) globalData.backgroundRectangleOverlay:setFillColor( 1, 1, 1, 0.5 ) local buildingInfoOverlayMargin = 75 globalData.preUpgradeElements = display.newGroup() globalData.preUpgradeElements.x = 75 globalData.preUpgradeElements.y = 175 local buildingNameTextOptions = { parent = globalData.preUpgradeElements, text = 'NAME HERE', x = 150, y = 75, fontSize = 60 } local buildingNameText = display.newText( buildingNameTextOptions ) buildingNameText.anchorX = 0 buildingNameText.anchorY = 0.5 buildingNameText:setFillColor( 0, 0, 0 ) local yellow = display.newRect( globalData.preUpgradeElements, 0, 0, display.contentWidth - 150, display.contentHeight - 250 ) yellow.anchorX = 0 yellow.anchorY = 0 yellow:setFillColor( 1, 1, 0 )yellow.alpha = 0.5 yellow:addEventListener("tap", function() return true end) globalData.preUpgradeElements:insert( buildingNameText ) globalData.backgroundRectangleOverlay:addEventListener("tap", exitOverlayMode) end -- "scene:create()" -- "scene:show()" function scene:show( event ) local sceneGroup = self.view local phase = event.phase if ( phase == "will" ) then -- Called when the scene is still off screen (but is about to come on screen). elseif ( phase == "did" ) then -- Called when the scene is now on screen. -- Insert code here to make the scene come alive. -- Example: start timers, begin animation, play audio, etc. end -- if phase == "did" end -- scene:show -- "scene:hide()" function scene:hide( event ) local sceneGroup = self.view local phase = event.phase local parent = event.parent -- Reference to the parent scene object if ( phase == "will" ) then parent:resumeGame() end end -- "scene:destroy()" function scene:destroy( event ) local sceneGroup = self.view -- Called prior to the removal of scene's view ("sceneGroup"). -- Insert code here to clean up the scene. -- Example: remove display objects, save state, etc. end --------------------------------------------------------------------------------- -- Listener setup scene:addEventListener( "create", scene ) scene:addEventListener( "show", scene ) scene:addEventListener( "hide", scene ) scene:addEventListener( "destroy", scene ) --------------------------------------------------------------------------------- return scene
THis is how it looks before tapping outside the yellow rectangle:
ANd after:
UPDATE: I just noticed that my scene is created twice, that’s why the background image gets a bit more transparent after a click, but not completely disapperas.