How to remove button

[vserrato129]

composer = require('composer') local color = require('convertcolor') local widget = require('widget') scene = composer.newScene() centerX = display.contentCenterX centerY = display.contentCenterY \_W = display.contentWidth \_H = display.contentHeight function scene:create() local background = display.newImageRect('Images/background.png',590,400) background.x = centerX background.y = centerY end function scene:show() bttnGroup = display.newGroup() local homeTxt = display.newText('Arcade',100,10) homeTxt.x = centerX homeTxt.y = centerY - 100 homeTxt:setFillColor(0,0,0) local storeTxt = display.newText('Store',100,10) storeTxt.x = centerX storeTxt.y = centerY storeTxt:setFillColor(0,0,0) local optionsTxt = display.newText('Options',100,10) optionsTxt.x = centerX optionsTxt.y = centerY + 100 optionsTxt:setFillColor(0,0,0) local function changeScene(event) local target = event.target if event.phase == 'ended' and event.target.id == 1 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') end if event.phase == 'ended' and event.target.id == 2 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') end if event.phase == 'ended' and event.target.id == 3 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') end end local homeBttn = widget.newButton( { width = 200, height = 25 , id = 1, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) homeBttn.x = centerX homeBttn.y = centerY - 100 bttnGroup:insert(homeBttn) local storeBttn = widget.newButton( { width =200, height = 25, id = 2, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) storeBttn.x = centerX storeBttn.y = centerY bttnGroup:insert(storeBttn) local optionsBttn = widget.newButton( { width = 200, height = 25, id = 3, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) optionsBttn.x = centerX optionsBttn.y = centerY + 100 bttnGroup:insert(optionsBttn) end scene:addEventListener('create',scene) scene:addEventListener('show',scene) return scene 

So I was wondering how I would be able to remove the button that I created to take me to the next scene. I have tried .isVisbile and .selfremove() but nothing seems to work for me .

[cyberparkstudios]

I do not see a self.view (aka sceneGroup) in your code example.  You need one for each composer scene.  In your case, your bttnGroup needs to be inserted into the sceneGroup, as well as the background and text objects. All display objects need to be in the scene group(scene view) so composer can manage them for you.

However, there are other issues here. First, the function changeScene() is declared local ‘above’ the 3 button declarations, so that scene is calling a display.remove for buttons the code does not recognize.  Those 3 buttons need to be declared above that function so that function knows they exist.(this is a scope issue). Secondly, in the changeScene() you will need a composer.gotoScene() …but I am guessing you are just in the initial testing of your code and plan to put that in there.

You can see when you touch a button that the ‘text objects’ do clear, and that is because each of them are declared in scope above that changeScene function.

I would move the code for making the buttons to the scene:create.  You can put all your ‘constructing’ code in the scene:create, but I like to break things down and move a lot of the code outside of the scene:create by calling functions to handle creating of objects. it makes it cleaner and easier to debug later.  

It is common to declare most of the variables near the top of the module.  Of course there are often times you can, should or want to create local variables within each function; but not really relevant to this particular code you have. There is an ‘Composer’ example in the Corona-Tools folder on your computer… where you will see most of the variables declared at the module scope.

I have attached some sample I typed up fairly quickly (so there could be some typos) and I tried to keep your code in place as much as possible.

Keep in mind, there is always another 3 or 4 ways at least to do most things; but this example does work and can likely be improved on. But I think it will get your code doing what you want.

Note:  I just set it for all the buttons to goto the same scene. You will obviously have to create more scenes and set those buttons to each goto a specific scene.

local composer = require( "composer" ) local scene = composer.newScene() display.setStatusBar( display.HiddenStatusBar ) composer.gotoScene("Scenes.scene1", {time=550, effect="crossFade"})

scene 1:

composer = require('composer') local widget = require('widget') scene = composer.newScene() centerX = display.contentCenterX centerY = display.contentCenterY \_W = display.contentWidth \_H = display.contentHeight local homeBttn, storeBtn, optionsBtn local homeTxt, storeTxt, optionsTxt local sceneNameTxt local function changeScene(event) local target = event.target if event.phase == 'ended' and event.target.id == 1 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene2", {time=550, effect="crossFade"}) end if event.phase == 'ended' and event.target.id == 2 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene2", {time=550, effect="crossFade"}) end if event.phase == 'ended' and event.target.id == 3 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene2", {time=550, effect="crossFade"}) end end local function createText() homeTxt = display.newText('Arcade',100,10) homeTxt.x = centerX homeTxt.y = centerY - 100 homeTxt:setFillColor(0,0,0) storeTxt = display.newText('Store',100,10) storeTxt.x = centerX storeTxt.y = centerY storeTxt:setFillColor(0,0,0) optionsTxt = display.newText('Options',100,10) optionsTxt.x = centerX optionsTxt.y = centerY + 100 optionsTxt:setFillColor(0,0,0) end local function createButtons() homeBttn = widget.newButton( { width = 200, height = 25 , id = 1, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) homeBttn.x = centerX homeBttn.y = centerY - 100 bttnGroup:insert(homeBttn) storeBttn = widget.newButton( { width =200, height = 25, id = 2, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) storeBttn.x = centerX storeBttn.y = centerY bttnGroup:insert(storeBttn) optionsBttn = widget.newButton( { width = 200, height = 25, id = 3, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) optionsBttn.x = centerX optionsBttn.y = centerY + 100 bttnGroup:insert(optionsBttn) createText() end function scene:create(e) local sceneGroup = self.view local background = display.newRect(centerX,centerY, \_W,\_H) background:setFillColor(.1, .7, .1) background.x = centerX background.y = centerY sceneNameTxt = display.newText("SCENE ONE", centerX, 100) bttnGroup = display.newGroup() -- Critical: insert into the scene group sceneGroup:insert(background) sceneGroup:insert(sceneNameTxt) sceneGroup:insert(bttnGroup) createButtons() end function scene:show(e) local phase = e.phase if "did" == phase then composer.removeScene( "Scenes.scene2" ) end end scene:addEventListener('create',scene) scene:addEventListener('show',scene) return scene 

scene2:

composer = require('composer') local widget = require('widget') scene = composer.newScene() centerX = display.contentCenterX centerY = display.contentCenterY \_W = display.contentWidth \_H = display.contentHeight local homeBttn, storeBtn, optionsBtn local homeTxt, storeTxt, optionsTxt local sceneNameTxt local function changeScene(event) local target = event.target if event.phase == 'ended' and event.target.id == 1 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene1", {time=550, effect="crossFade"}) end if event.phase == 'ended' and event.target.id == 2 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene1", {time=550, effect="crossFade"}) end if event.phase == 'ended' and event.target.id == 3 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene1", {time=550, effect="crossFade"}) end end local function createText() homeTxt = display.newText('Arcade - scene 2',100,10) homeTxt.x = centerX homeTxt.y = centerY - 100 homeTxt:setFillColor(0,0,0) storeTxt = display.newText('Store - scene 2',100,10) storeTxt.x = centerX storeTxt.y = centerY storeTxt:setFillColor(0,0,0) optionsTxt = display.newText('Options - scene 2',100,10) optionsTxt.x = centerX optionsTxt.y = centerY + 100 optionsTxt:setFillColor(0,0,0) end local function createButtons() homeBttn = widget.newButton( { width = 200, height = 25 , id = 1, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) homeBttn.x = centerX homeBttn.y = centerY - 100 bttnGroup:insert(homeBttn) storeBttn = widget.newButton( { width =200, height = 25, id = 2, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) storeBttn.x = centerX storeBttn.y = centerY bttnGroup:insert(storeBttn) optionsBttn = widget.newButton( { width = 200, height = 25, id = 3, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) optionsBttn.x = centerX optionsBttn.y = centerY + 100 bttnGroup:insert(optionsBttn) createText() end function scene:create(e) local sceneGroup = self.view local background = display.newRect(centerX,centerY, \_W,\_H) background:setFillColor(.1, .1, .7) background.x = centerX background.y = centerY sceneNameTxt = display.newText("SCENE TWO", centerX, 100) bttnGroup = display.newGroup() -- Critical: insert into the scene group sceneGroup:insert(background) sceneGroup:insert(sceneNameTxt) sceneGroup:insert(bttnGroup) createButtons() end function scene:show(e) local phase = e.phase if "did" == phase then composer.removeScene( "Scenes.scene1" ) end end scene:addEventListener('create',scene) scene:addEventListener('show',scene) return scene 

Good Luck!

Bob

[rob]

It’s very important to understand that the whole purpose of Composer is to manage the scene for you. If you put the display objects inside the composer’s view group it will properly hide the objects when you change scenes and destroy them when you remove the scenes.

Now you can put things into your own group as long as you insert that group into the scene’s view.

You can always do:   scene.view:insert( object_or_group ) but as a convenience inside of scene:create() or scene:show() function, there is a line:

local sceneGroup = self.view

self.view is the same as scene.view and it’s easy to remember to 

sceneGroup:insert( object )

So that Composer can manage your objects for you.

Rob

[cyberparkstudios]

I do not see a self.view (aka sceneGroup) in your code example.  You need one for each composer scene.  In your case, your bttnGroup needs to be inserted into the sceneGroup, as well as the background and text objects. All display objects need to be in the scene group(scene view) so composer can manage them for you.

However, there are other issues here. First, the function changeScene() is declared local ‘above’ the 3 button declarations, so that scene is calling a display.remove for buttons the code does not recognize.  Those 3 buttons need to be declared above that function so that function knows they exist.(this is a scope issue). Secondly, in the changeScene() you will need a composer.gotoScene() …but I am guessing you are just in the initial testing of your code and plan to put that in there.

You can see when you touch a button that the ‘text objects’ do clear, and that is because each of them are declared in scope above that changeScene function.

I would move the code for making the buttons to the scene:create.  You can put all your ‘constructing’ code in the scene:create, but I like to break things down and move a lot of the code outside of the scene:create by calling functions to handle creating of objects. it makes it cleaner and easier to debug later.  

It is common to declare most of the variables near the top of the module.  Of course there are often times you can, should or want to create local variables within each function; but not really relevant to this particular code you have. There is an ‘Composer’ example in the Corona-Tools folder on your computer… where you will see most of the variables declared at the module scope.

I have attached some sample I typed up fairly quickly (so there could be some typos) and I tried to keep your code in place as much as possible.

Keep in mind, there is always another 3 or 4 ways at least to do most things; but this example does work and can likely be improved on. But I think it will get your code doing what you want.

Note:  I just set it for all the buttons to goto the same scene. You will obviously have to create more scenes and set those buttons to each goto a specific scene.

local composer = require( "composer" ) local scene = composer.newScene() display.setStatusBar( display.HiddenStatusBar ) composer.gotoScene("Scenes.scene1", {time=550, effect="crossFade"})

scene 1:

composer = require('composer') local widget = require('widget') scene = composer.newScene() centerX = display.contentCenterX centerY = display.contentCenterY \_W = display.contentWidth \_H = display.contentHeight local homeBttn, storeBtn, optionsBtn local homeTxt, storeTxt, optionsTxt local sceneNameTxt local function changeScene(event) local target = event.target if event.phase == 'ended' and event.target.id == 1 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene2", {time=550, effect="crossFade"}) end if event.phase == 'ended' and event.target.id == 2 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene2", {time=550, effect="crossFade"}) end if event.phase == 'ended' and event.target.id == 3 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene2", {time=550, effect="crossFade"}) end end local function createText() homeTxt = display.newText('Arcade',100,10) homeTxt.x = centerX homeTxt.y = centerY - 100 homeTxt:setFillColor(0,0,0) storeTxt = display.newText('Store',100,10) storeTxt.x = centerX storeTxt.y = centerY storeTxt:setFillColor(0,0,0) optionsTxt = display.newText('Options',100,10) optionsTxt.x = centerX optionsTxt.y = centerY + 100 optionsTxt:setFillColor(0,0,0) end local function createButtons() homeBttn = widget.newButton( { width = 200, height = 25 , id = 1, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) homeBttn.x = centerX homeBttn.y = centerY - 100 bttnGroup:insert(homeBttn) storeBttn = widget.newButton( { width =200, height = 25, id = 2, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) storeBttn.x = centerX storeBttn.y = centerY bttnGroup:insert(storeBttn) optionsBttn = widget.newButton( { width = 200, height = 25, id = 3, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) optionsBttn.x = centerX optionsBttn.y = centerY + 100 bttnGroup:insert(optionsBttn) createText() end function scene:create(e) local sceneGroup = self.view local background = display.newRect(centerX,centerY, \_W,\_H) background:setFillColor(.1, .7, .1) background.x = centerX background.y = centerY sceneNameTxt = display.newText("SCENE ONE", centerX, 100) bttnGroup = display.newGroup() -- Critical: insert into the scene group sceneGroup:insert(background) sceneGroup:insert(sceneNameTxt) sceneGroup:insert(bttnGroup) createButtons() end function scene:show(e) local phase = e.phase if "did" == phase then composer.removeScene( "Scenes.scene2" ) end end scene:addEventListener('create',scene) scene:addEventListener('show',scene) return scene 

scene2:

composer = require('composer') local widget = require('widget') scene = composer.newScene() centerX = display.contentCenterX centerY = display.contentCenterY \_W = display.contentWidth \_H = display.contentHeight local homeBttn, storeBtn, optionsBtn local homeTxt, storeTxt, optionsTxt local sceneNameTxt local function changeScene(event) local target = event.target if event.phase == 'ended' and event.target.id == 1 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene1", {time=550, effect="crossFade"}) end if event.phase == 'ended' and event.target.id == 2 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene1", {time=550, effect="crossFade"}) end if event.phase == 'ended' and event.target.id == 3 then display.remove(homeBttn) display.remove(storeBttn) display.remove(optionsBttn) display.remove(background) display.remove(storeTxt) display.remove(homeTxt) display.remove(optionsTxt) print('deleted') composer.gotoScene("Scenes.scene1", {time=550, effect="crossFade"}) end end local function createText() homeTxt = display.newText('Arcade - scene 2',100,10) homeTxt.x = centerX homeTxt.y = centerY - 100 homeTxt:setFillColor(0,0,0) storeTxt = display.newText('Store - scene 2',100,10) storeTxt.x = centerX storeTxt.y = centerY storeTxt:setFillColor(0,0,0) optionsTxt = display.newText('Options - scene 2',100,10) optionsTxt.x = centerX optionsTxt.y = centerY + 100 optionsTxt:setFillColor(0,0,0) end local function createButtons() homeBttn = widget.newButton( { width = 200, height = 25 , id = 1, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) homeBttn.x = centerX homeBttn.y = centerY - 100 bttnGroup:insert(homeBttn) storeBttn = widget.newButton( { width =200, height = 25, id = 2, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) storeBttn.x = centerX storeBttn.y = centerY bttnGroup:insert(storeBttn) optionsBttn = widget.newButton( { width = 200, height = 25, id = 3, defaultFile = 'Images/box.png', overFile = 'Images/box.png', onEvent = changeScene } ) optionsBttn.x = centerX optionsBttn.y = centerY + 100 bttnGroup:insert(optionsBttn) createText() end function scene:create(e) local sceneGroup = self.view local background = display.newRect(centerX,centerY, \_W,\_H) background:setFillColor(.1, .1, .7) background.x = centerX background.y = centerY sceneNameTxt = display.newText("SCENE TWO", centerX, 100) bttnGroup = display.newGroup() -- Critical: insert into the scene group sceneGroup:insert(background) sceneGroup:insert(sceneNameTxt) sceneGroup:insert(bttnGroup) createButtons() end function scene:show(e) local phase = e.phase if "did" == phase then composer.removeScene( "Scenes.scene1" ) end end scene:addEventListener('create',scene) scene:addEventListener('show',scene) return scene 

Good Luck!

Bob

[rob]

It’s very important to understand that the whole purpose of Composer is to manage the scene for you. If you put the display objects inside the composer’s view group it will properly hide the objects when you change scenes and destroy them when you remove the scenes.

Now you can put things into your own group as long as you insert that group into the scene’s view.

You can always do:   scene.view:insert( object_or_group ) but as a convenience inside of scene:create() or scene:show() function, there is a line:

local sceneGroup = self.view

self.view is the same as scene.view and it’s easy to remember to 

sceneGroup:insert( object )

So that Composer can manage your objects for you.

Rob