im really new to coding and need help with creating a main menu that has buttons and take you to new scenes.
for right now I have one button that reads “go to material” and it sends me to another screen with another button with simply a “x” how do i make it where there is more then just one button that leads to the buttons specified scene so that I can have more then one button and each one leads to a different scene?
in a nutshell i want multiple scenes with multiple buttons
Are you using Composer for managing your scenes or are you making your own?
I believe im using composer to manage my scenes
You’re asking this a week or two too early. We are hoping to have a guide for making a simple menu up and going soon.
Any way, you basically need three classes of things to build your menu:
Your background image and any other static art work like your Title.
Your buttons which may require art work if you’re not using text only buttons.
Functions to handle each button, and in most cases it will likely just go to the scene for the button.
Basically copy the template from: https://docs.coronalabs.com/guide/system/composer/index.html#template and create a file called “menu.lua” and paste the code into that template.
The first thing we need to talk about are buttons. Corona SDK can do buttons many different ways. One way is to use the widget.newButton() API call. Another way is to just use a display.newImageRect() or a display.newText() object and put a touch or tap handler on it. I’m going to use a display.newText() object with a “tap” handler as this is perhaps the simplest path.
Since we are going to be using “tap” events to trigger the buttons you need to define your functions to handle them:
In the area just below the comments that reads:
-- ----------------------------------------------------------------------------------- -- Code outside of the scene event functions below will only be executed ONCE unless -- the scene is removed entirely (not recycled) via "composer.removeScene()" -- -----------------------------------------------------------------------------------
write functions to handle each of your buttons. For the purpose of this post, there will be two scenes: game.lua and gamesettings.lua.
local function gotoSettings() composer.gotoScene( "gamesettings" ) end local function playGame() composer.gotoScene( "game" ) end
Next go to the function: function scene:create( event ) and we will add some code there. Just below the line that reads “local sceneGroup = self.view” load your background, title, and create the buttons. Now I’m going to make stuff up. This will not work directly in your code because I don’t know your image names, image sizes, how you have your config.lua setup etc.
local background = display.newImageRect( sceneGroup, "background.png", 360, 570 ) background.x = display.contentCenterX background.y = display.contentCenterY local title = display.newImageRect( sceneGroup, "title.png", 250, 25 ) -- assumes the title is 250x25 title.x = display.contentCenterX title.y = 50 local playButton = display.newText( sceneGroup, "Play!", display.contentCenterX, 160, native.systemFontBold, 20 ) playButton:addEventListener( "tap", playGame ) local gameSettingsButton = display.newText( sceneGroup, "Settings", display.contentCenterX, 200, native.systemFontBold, 20 ) gameSettingsButton:addEventListener( "tap", gotoSettings )
In the simplest of setups, you now have a menu. But you may want to use graphics instead of text. You may like the convenience of the widget.newButton() API call. Taps have to be pretty precise duration and you may want to use touch events instead. You may want to use more buttons/other scenes. You may want a landscape app, the above assumes portrait. You have a lot of decisions to make before you jump straight into the code.
I intentionally did not explain all of the steps and what they are doing. You can look up the docs for each of the API calls to learn about this.
Rob
well yes this creates a scene and I already have a scene i’m trying to make it where there’s like 5 buttons on one scene and all those 5 buttons lead to their specified scene and then back to the main scene, no other buttons on the other scenes
so if scene 1 has 5 buttons i want 5 scenes, that i can go to, however scene 2 only has a button that leasds him back to scene 1 and scene 3,4,5 ect only have one button that leads to scene 1
That’s exactly what my code does. You have to add the other buttons, create the scenes that they go to and provide a button in each of those scenes to go back to “menu”.
Rob
Are you using Composer for managing your scenes or are you making your own?
I believe im using composer to manage my scenes
You’re asking this a week or two too early. We are hoping to have a guide for making a simple menu up and going soon.
Any way, you basically need three classes of things to build your menu:
Your background image and any other static art work like your Title.
Your buttons which may require art work if you’re not using text only buttons.
Functions to handle each button, and in most cases it will likely just go to the scene for the button.
Basically copy the template from: https://docs.coronalabs.com/guide/system/composer/index.html#template and create a file called “menu.lua” and paste the code into that template.
The first thing we need to talk about are buttons. Corona SDK can do buttons many different ways. One way is to use the widget.newButton() API call. Another way is to just use a display.newImageRect() or a display.newText() object and put a touch or tap handler on it. I’m going to use a display.newText() object with a “tap” handler as this is perhaps the simplest path.
Since we are going to be using “tap” events to trigger the buttons you need to define your functions to handle them:
In the area just below the comments that reads:
-- ----------------------------------------------------------------------------------- -- Code outside of the scene event functions below will only be executed ONCE unless -- the scene is removed entirely (not recycled) via "composer.removeScene()" -- -----------------------------------------------------------------------------------
write functions to handle each of your buttons. For the purpose of this post, there will be two scenes: game.lua and gamesettings.lua.
local function gotoSettings() composer.gotoScene( "gamesettings" ) end local function playGame() composer.gotoScene( "game" ) end
Next go to the function: function scene:create( event ) and we will add some code there. Just below the line that reads “local sceneGroup = self.view” load your background, title, and create the buttons. Now I’m going to make stuff up. This will not work directly in your code because I don’t know your image names, image sizes, how you have your config.lua setup etc.
local background = display.newImageRect( sceneGroup, "background.png", 360, 570 ) background.x = display.contentCenterX background.y = display.contentCenterY local title = display.newImageRect( sceneGroup, "title.png", 250, 25 ) -- assumes the title is 250x25 title.x = display.contentCenterX title.y = 50 local playButton = display.newText( sceneGroup, "Play!", display.contentCenterX, 160, native.systemFontBold, 20 ) playButton:addEventListener( "tap", playGame ) local gameSettingsButton = display.newText( sceneGroup, "Settings", display.contentCenterX, 200, native.systemFontBold, 20 ) gameSettingsButton:addEventListener( "tap", gotoSettings )
In the simplest of setups, you now have a menu. But you may want to use graphics instead of text. You may like the convenience of the widget.newButton() API call. Taps have to be pretty precise duration and you may want to use touch events instead. You may want to use more buttons/other scenes. You may want a landscape app, the above assumes portrait. You have a lot of decisions to make before you jump straight into the code.
I intentionally did not explain all of the steps and what they are doing. You can look up the docs for each of the API calls to learn about this.
Rob
well yes this creates a scene and I already have a scene i’m trying to make it where there’s like 5 buttons on one scene and all those 5 buttons lead to their specified scene and then back to the main scene, no other buttons on the other scenes
so if scene 1 has 5 buttons i want 5 scenes, that i can go to, however scene 2 only has a button that leasds him back to scene 1 and scene 3,4,5 ect only have one button that leads to scene 1
That’s exactly what my code does. You have to add the other buttons, create the scenes that they go to and provide a button in each of those scenes to go back to “menu”.
Rob