destroying display group doesn't destroy children

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.

Just briefly looked art the code… but it looks like a very common mistake.  

your created  a displayGroup  ‘backgroundDisplayGroup’, which I am guessing you intended to put that yellow rectangle and other stuff into; but looks like you forgot to insert them into that group.  Although you did put that backgroundDisplayGroup into  ‘backgroundRectangleOverlay’, it is basically an empty display group.

Of course if you make sure to insert all those images and the display groups into ‘sceneGroup’, provided by Composer… it will handle cleaning all that stuff up when you leave the overlay.  That is at least the recommend process.

So, either be sure to insert each of those items that are staying not he screen into your … backgroundDisplayGroup, or  put all of it into the sceneGroup.  and again I just briefly looked at the code… but if you make the change I noted, you most likely do not even need that call to ‘exitOverlayMode’

Hope that helps.

Thanks, that helped.

I also figured out that my Overlay was called twice due to my Listener being created twice under specific conditions. I fixed that and everything is working fien now.

Just briefly looked art the code… but it looks like a very common mistake.  

your created  a displayGroup  ‘backgroundDisplayGroup’, which I am guessing you intended to put that yellow rectangle and other stuff into; but looks like you forgot to insert them into that group.  Although you did put that backgroundDisplayGroup into  ‘backgroundRectangleOverlay’, it is basically an empty display group.

Of course if you make sure to insert all those images and the display groups into ‘sceneGroup’, provided by Composer… it will handle cleaning all that stuff up when you leave the overlay.  That is at least the recommend process.

So, either be sure to insert each of those items that are staying not he screen into your … backgroundDisplayGroup, or  put all of it into the sceneGroup.  and again I just briefly looked at the code… but if you make the change I noted, you most likely do not even need that call to ‘exitOverlayMode’

Hope that helps.

Thanks, that helped.

I also figured out that my Overlay was called twice due to my Listener being created twice under specific conditions. I fixed that and everything is working fien now.