How To Easily Remove All Displays From A Scene When We Switch Using Storyboard?

[BnB202]

hi guys, i think the title says it all. i use storyboard to switch scene from main.lua to scene1.lua and to scene2.lua. I also inserted tab bar widget in the app and when I click the left button (on the tab bar) it should bring me to scene1 and when i click the middle button it should bring me to scene2.

problem is, when i test the app in the simulator (clicking the left button on tab bar then click the middle one then the left button again and so on), it seems not all displays are “removed” properly. for example i have this text in scene2 and when i switch to scene1 the text in scene2 is still there. I usually use

display.remove (functionnamehere)

to remove the functions like the text, the scrollview, etc. but apparently not all displays from scene2 are “removed” properly when i switch back to scene1. Is there any simple way to remove basically everything from scene2 so what I see on scene1 is all the codes ONLY from scene1? Is there any tutorial for this? Thanks.

[jan0]

"Is there any simple way to remove basically everything from scene2"

In the storyboard section ‘enterScene’ we use storyboard.removeScene( “scene_name”).

In the new scene we remove the old scene using this code…

---

function scene:enterScene( event )
    local group = self.view
    storyboard.removeScene( “scene_name”)

---

The downside is if you use the scene again, you will have to reload it.  That is not a problem for faster devices which we design for.  You can also use this in the didExitScene() event (though I have actually not tried this from experience).  Also stay away from Global Vaiables in functions.  They can be a bugger between scenes…

Reference:  http://coronalabs.com/blog/2012/07/31/storyboard-scene-purging-vs-removal

[BnB202]

@jan0

"Is there any simple way to remove basically everything from scene2"

In the storyboard section ‘enterScene’ we use storyboard.removeScene( “scene_name”).

In the new scene we remove the old scene using this code…

function scene:enterScene( event )
local group = self.view
storyboard.removeScene( “scene_name”)

The downside is if you use the scene again, you will have to reload it. That is not a problem for faster devices which we design for. You can also use this in the didExitScene() event (though I have actually not tried this from experience). Also stay away from Global Vaiables in functions. They can be a bugger between scenes…

Reference: http://coronalabs.com/blog/2012/07/31/storyboard-scene-purging-vs-removal

hello sir, thanks for letting me know about this. I still don’t think it solves my issue though, not sure why, i have tried to follow the instruction in the video tutorial. not sure what im missing.

here how my scene1 looks like:

then inside scene1, i create the function storyboard.gotoScene( “scene1Toscene2”) on the tab bar, basically a redirection lua file where inside i have this code:

local storyboard = require("storyboard") local scene = storyboard.newScene() local function dariScene1keScene2 ( target )     storyboard.removeScene ("scene1")     storyboard.reloadScene ("scene2")     storyboard.gotoScene( "scene2", "fade", 400 )     print "SUKSES BRO AKHIRNYA" end function scene:createScene (event)     local screenGroup = self.view     dariScene1keScene2 () end scene:addEventListener( "createScene", scene ) return scene

while it does successfully transfer my scene to scene 2 (like below pic),

but here i simply can’t go back to scene 1 without “destroying” scene 2. I created a similar redirection file (scene2ToScene1.lua), from scene 2 to scene 1, but when i click the button back to scene 1, it looks like this:

basically scene 2 is never destroyed and scene 1 is on top of it. How do I solve this? It’s just the same issue with manually removing display one by one. The removeScene doesn’t want to do its job when I click the tab bar again from scene 2 to scene 1. Why? I dont understand why I simply can’t destroy scene2 while i have already used storyboard.removeScene ( “scene 2” ) and also reload scene 1 in the redirection lua file I was talking about…please help me sir

[rob]

Looks to me like you are not inserting your display objects into the scene’s group.  If you do that, they will be properly managed.  If not they sit on top of the screen.

Rob

[BnB202]

hi, i actually have inserted everything into the function scene:createScene.

here’s the code:

local storyboard = require "storyboard" local scene = storyboard.newScene() local widget = require( "widget" ) function scene:createScene (event) local screenGroup = self.view local function scrollListener( event ) local phase = event.phase local direction = event.direction if "began" == phase then --print( "Began" ) elseif "moved" == phase then --print( "Moved" ) elseif "ended" == phase then --print( "Ended" ) end -- If the scrollView has reached it's scroll limit if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end -- Create a ScrollView local scrollView = widget.newScrollView { left = 0, top = 0, width = display.contentWidth, height = display.contentHeight, bottomPadding = 50, id = "onBottom", horizontalScrollDisabled = true, verticalScrollDisabled = false, listener = scrollListener, } local background = display.newImageRect( "world.jpg", 500, 500) background.x = display.contentCenterX background.y = display.contentCenterY scrollView:insert ( background ) local imageMegaman = display.newImageRect ( "megaman.jpg", 250, 200) imageMegaman.x = display.contentCenterX imageMegaman.y = 400 -- insert scrollView to imageMegaman scrollView:insert ( imageMegaman ) local textObject2 = display.newText ( "Hello Scene 2!", display.contentCenterX, 30, native.systemFont, 18) textObject2:setFillColor ( 255, 0, 0) --Create a text object for the scrollViews title local titleText = display.newText("Move Up to Scroll", display.contentCenterX, 48, native.systemFontBold, 16) titleText:setFillColor( 0 ) -- insert the text object into the created display group scrollView:insert( titleText ) local lotsOfText = "bla bla ijgijroigjre goirejgregregre. ijroi vhreiubvhre biurehbiure goiu regre., Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris. " local textObject = display.newText( lotsOfText, display.contentCenterX, 0, 300, 0, "Helvetica", 18) textObject:setFillColor ( 255, 0, 0) textObject.anchorY = 0.0 -- buat bikin text nya ini jadi ke tengah2 atas bawahnya textObject.y = titleText.y + titleText.contentHeight + 10 scrollView:insert( textObject ) local function myTouchListener( event ) if ( event.phase == "began" ) then --code executed when the button is touched print( "kepencet si objectnya di scene 2" ) storyboard.gotoScene( "scene2kescene1") return true end end textObject:addEventListener( "touch" , myTouchListener ) local function fromScene2ToScene2 () storyboard.gotoScene( "scene2" ) end local function fromScene2ToScene1 () print "pindah scene sukses ke loading tea dari 2" storyboard.gotoScene("scene2kescene1") return true end local tabButtons = { { width = 32, height = 32, defaultFile = "assets/tabIcon.png", overFile = "assets/tabIcon-down.png", label = "Screen 1", onPress = fromScene2ToScene1, selected = true }, { width = 32, height = 32, defaultFile = "assets/tabIcon.png", overFile = "assets/tabIcon-down.png", label = "Screen 2", onPress = fromScene2ToScene2, selected = true }, { width = 32, height = 32, defaultFile = "assets/tabIcon.png", overFile = "assets/tabIcon-down.png", label = "Screen 3", onPress = fromScene2ToScene2, selected = true } } -- Create the widget local demoTabs = widget.newTabBar { top = display.contentHeight - 7, width = display.contentWidth, backgroundFile = "assets/tabbar.png", tabSelectedLeftFile = "assets/tabBar\_tabSelectedLeft.png", tabSelectedMiddleFile = "assets/tabBar\_tabSelectedMiddle.png", tabSelectedRightFile = "assets/tabBar\_tabSelectedRight.png", tabSelectedFrameWidth = 20, tabSelectedFrameHeight = 52, buttons = tabButtons } print "createScene sukses" end function scene:enterScene( event ) local group = self.view print "enterScene event berhasil" end function scene:exitScene( event ) local group = self.view end function scene:destroyScene( event ) local group = self.view print( "destroying scene 2" ) end scene:addEventListener( "createScene", scene ) scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) return scene

basically i already posted everything inside the createScene function. not sure if i should have moved the “listeners” to outside the createScene but i didn’t encounter any problem from scene1 to scene2 with everything inside the createScene, why in scene2 to scene 1, there’s problem? (and btw after the scene 2 to scene 1 problem, if i click the button to go back to scene 2 again, it’s still like that, everything on top of each other)
 

[BnB202]

I have created another scene for comparison, scene.3 lua which is just compilation of text object and background image and tab bar and that’s it. Same problem. if i go from scene 1 -> scene 3, it’s OK, but when i click back from scene 3 -> scene 1, it looks as if they are mixed. And yeah, i put all the displays in createScene function.

[rob]

I don’t see where you ever insert the scrollView into the screenGroup.

On a side note, in enterScene and such you refer to the view’s group as “group”.  In createScene you refer to it as “screenGroup”. You probably should be consistent,

Rob

[jan0]

"Is there any simple way to remove basically everything from scene2"

In the storyboard section ‘enterScene’ we use storyboard.removeScene( “scene_name”).

In the new scene we remove the old scene using this code…

---

function scene:enterScene( event )
    local group = self.view
    storyboard.removeScene( “scene_name”)

---

The downside is if you use the scene again, you will have to reload it.  That is not a problem for faster devices which we design for.  You can also use this in the didExitScene() event (though I have actually not tried this from experience).  Also stay away from Global Vaiables in functions.  They can be a bugger between scenes…

Reference:  http://coronalabs.com/blog/2012/07/31/storyboard-scene-purging-vs-removal

[BnB202]

@jan0

"Is there any simple way to remove basically everything from scene2"

In the storyboard section ‘enterScene’ we use storyboard.removeScene( “scene_name”).

In the new scene we remove the old scene using this code…

function scene:enterScene( event )
local group = self.view
storyboard.removeScene( “scene_name”)

The downside is if you use the scene again, you will have to reload it. That is not a problem for faster devices which we design for. You can also use this in the didExitScene() event (though I have actually not tried this from experience). Also stay away from Global Vaiables in functions. They can be a bugger between scenes…

Reference: http://coronalabs.com/blog/2012/07/31/storyboard-scene-purging-vs-removal

hello sir, thanks for letting me know about this. I still don’t think it solves my issue though, not sure why, i have tried to follow the instruction in the video tutorial. not sure what im missing.

here how my scene1 looks like:

then inside scene1, i create the function storyboard.gotoScene( “scene1Toscene2”) on the tab bar, basically a redirection lua file where inside i have this code:

local storyboard = require("storyboard") local scene = storyboard.newScene() local function dariScene1keScene2 ( target )     storyboard.removeScene ("scene1")     storyboard.reloadScene ("scene2")     storyboard.gotoScene( "scene2", "fade", 400 )     print "SUKSES BRO AKHIRNYA" end function scene:createScene (event)     local screenGroup = self.view     dariScene1keScene2 () end scene:addEventListener( "createScene", scene ) return scene

while it does successfully transfer my scene to scene 2 (like below pic),

but here i simply can’t go back to scene 1 without “destroying” scene 2. I created a similar redirection file (scene2ToScene1.lua), from scene 2 to scene 1, but when i click the button back to scene 1, it looks like this:

basically scene 2 is never destroyed and scene 1 is on top of it. How do I solve this? It’s just the same issue with manually removing display one by one. The removeScene doesn’t want to do its job when I click the tab bar again from scene 2 to scene 1. Why? I dont understand why I simply can’t destroy scene2 while i have already used storyboard.removeScene ( “scene 2” ) and also reload scene 1 in the redirection lua file I was talking about…please help me sir

[rob]

Looks to me like you are not inserting your display objects into the scene’s group.  If you do that, they will be properly managed.  If not they sit on top of the screen.

Rob

[BnB202]

hi, i actually have inserted everything into the function scene:createScene.

here’s the code:

local storyboard = require "storyboard" local scene = storyboard.newScene() local widget = require( "widget" ) function scene:createScene (event) local screenGroup = self.view local function scrollListener( event ) local phase = event.phase local direction = event.direction if "began" == phase then --print( "Began" ) elseif "moved" == phase then --print( "Moved" ) elseif "ended" == phase then --print( "Ended" ) end -- If the scrollView has reached it's scroll limit if event.limitReached then if "up" == direction then print( "Reached Top Limit" ) elseif "down" == direction then print( "Reached Bottom Limit" ) elseif "left" == direction then print( "Reached Left Limit" ) elseif "right" == direction then print( "Reached Right Limit" ) end end return true end -- Create a ScrollView local scrollView = widget.newScrollView { left = 0, top = 0, width = display.contentWidth, height = display.contentHeight, bottomPadding = 50, id = "onBottom", horizontalScrollDisabled = true, verticalScrollDisabled = false, listener = scrollListener, } local background = display.newImageRect( "world.jpg", 500, 500) background.x = display.contentCenterX background.y = display.contentCenterY scrollView:insert ( background ) local imageMegaman = display.newImageRect ( "megaman.jpg", 250, 200) imageMegaman.x = display.contentCenterX imageMegaman.y = 400 -- insert scrollView to imageMegaman scrollView:insert ( imageMegaman ) local textObject2 = display.newText ( "Hello Scene 2!", display.contentCenterX, 30, native.systemFont, 18) textObject2:setFillColor ( 255, 0, 0) --Create a text object for the scrollViews title local titleText = display.newText("Move Up to Scroll", display.contentCenterX, 48, native.systemFontBold, 16) titleText:setFillColor( 0 ) -- insert the text object into the created display group scrollView:insert( titleText ) local lotsOfText = "bla bla ijgijroigjre goirejgregregre. ijroi vhreiubvhre biurehbiure goiu regre., Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris.\n\nLorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur imperdiet consectetur euismod. Phasellus non ipsum vel eros vestibulum consequat. Integer convallis quam id urna tristique eu viverra risus eleifend.\n\nAenean suscipit placerat venenatis. Pellentesque faucibus venenatis eleifend. Nam lorem felis, rhoncus vel rutrum quis, tincidunt in sapien. Proin eu elit tortor. Nam ut mauris pellentesque justo vulputate convallis eu vitae metus. Praesent mauris eros, hendrerit ac convallis vel, cursus quis sem. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque fermentum, dui in vehicula dapibus, lorem nisi placerat turpis, quis gravida elit lectus eget nibh. Mauris molestie auctor facilisis.\n\nCurabitur lorem mi, molestie eget tincidunt quis, blandit a libero. Cras a lorem sed purus gravida rhoncus. Cras vel risus dolor, at accumsan nisi. Morbi sit amet sem purus, ut tempor mauris. " local textObject = display.newText( lotsOfText, display.contentCenterX, 0, 300, 0, "Helvetica", 18) textObject:setFillColor ( 255, 0, 0) textObject.anchorY = 0.0 -- buat bikin text nya ini jadi ke tengah2 atas bawahnya textObject.y = titleText.y + titleText.contentHeight + 10 scrollView:insert( textObject ) local function myTouchListener( event ) if ( event.phase == "began" ) then --code executed when the button is touched print( "kepencet si objectnya di scene 2" ) storyboard.gotoScene( "scene2kescene1") return true end end textObject:addEventListener( "touch" , myTouchListener ) local function fromScene2ToScene2 () storyboard.gotoScene( "scene2" ) end local function fromScene2ToScene1 () print "pindah scene sukses ke loading tea dari 2" storyboard.gotoScene("scene2kescene1") return true end local tabButtons = { { width = 32, height = 32, defaultFile = "assets/tabIcon.png", overFile = "assets/tabIcon-down.png", label = "Screen 1", onPress = fromScene2ToScene1, selected = true }, { width = 32, height = 32, defaultFile = "assets/tabIcon.png", overFile = "assets/tabIcon-down.png", label = "Screen 2", onPress = fromScene2ToScene2, selected = true }, { width = 32, height = 32, defaultFile = "assets/tabIcon.png", overFile = "assets/tabIcon-down.png", label = "Screen 3", onPress = fromScene2ToScene2, selected = true } } -- Create the widget local demoTabs = widget.newTabBar { top = display.contentHeight - 7, width = display.contentWidth, backgroundFile = "assets/tabbar.png", tabSelectedLeftFile = "assets/tabBar\_tabSelectedLeft.png", tabSelectedMiddleFile = "assets/tabBar\_tabSelectedMiddle.png", tabSelectedRightFile = "assets/tabBar\_tabSelectedRight.png", tabSelectedFrameWidth = 20, tabSelectedFrameHeight = 52, buttons = tabButtons } print "createScene sukses" end function scene:enterScene( event ) local group = self.view print "enterScene event berhasil" end function scene:exitScene( event ) local group = self.view end function scene:destroyScene( event ) local group = self.view print( "destroying scene 2" ) end scene:addEventListener( "createScene", scene ) scene:addEventListener( "enterScene", scene ) -- "exitScene" event is dispatched before next scene's transition begins scene:addEventListener( "exitScene", scene ) -- "destroyScene" event is dispatched before view is unloaded, which can be -- automatically unloaded in low memory situations, or explicitly via a call to -- storyboard.purgeScene() or storyboard.removeScene(). scene:addEventListener( "destroyScene", scene ) return scene

basically i already posted everything inside the createScene function. not sure if i should have moved the “listeners” to outside the createScene but i didn’t encounter any problem from scene1 to scene2 with everything inside the createScene, why in scene2 to scene 1, there’s problem? (and btw after the scene 2 to scene 1 problem, if i click the button to go back to scene 2 again, it’s still like that, everything on top of each other)
 

[BnB202]

I have created another scene for comparison, scene.3 lua which is just compilation of text object and background image and tab bar and that’s it. Same problem. if i go from scene 1 -> scene 3, it’s OK, but when i click back from scene 3 -> scene 1, it looks as if they are mixed. And yeah, i put all the displays in createScene function.

[rob]

I don’t see where you ever insert the scrollView into the screenGroup.

On a side note, in enterScene and such you refer to the view’s group as “group”.  In createScene you refer to it as “screenGroup”. You probably should be consistent,

Rob