Time for action – adding the main menu screen

The main menu screen will be the first thing in our menu system that the player interacts with after the application is launched. It's a great way to introduce the title of the game and also give the player an idea of what type of gaming environment they should expect. We wouldn't want the player to jump abruptly into the app without any proper notification. It's important to allow the player to prepare for what is to come when they launch the app.

We're going to create a function called mainMenu() to introduce the title screen. So after function main() ends, add in the following lines:
```
function mainMenu()  

end
```

We'll be adding in a display group and two display objects to this function. One display object is the image that will represent the main menu screen, and the other will be a UI button called Play. Add them inside function mainMenu():

  menuScreenGroup = display.newGroup()

  mmScreen = display.newImage("mmScreen.png", 0, 0, true)
  mmScreen.x = _W
  mmScreen.y = _H
  
  playBtn = display.newImage("playbtn.png")
  playBtn.anchorX = 0.5; playBtn.anchorY = 0.5  
  playBtn.x = _W; playBtn.y = _H + 50
  playBtn.name = "playbutton"

  menuScreenGroup:insert(mmScreen)
  menuScreenGroup:insert(playBtn)

Remember the empty main() function set? We need to call mainMenu() inside it. The entire function should look like this:
```
function main()
  mainMenu()
end 
```
After the mainMenu() function, we're going to create another function called loadGame(). This function will initiate the event from playbtn to transition to the main game screen. The event will change the alpha of menuScreenGroup to 0, which makes it invisible on the screen. Complete the transition by calling the addGameScreen() function (addGameScreen() will be discussed later in the Time for action – adding game objects section of this chapter):
```
function loadGame(event)
  if event.target.name == "playbutton" then

    transition.to(menuScreenGroup,{time = 0, alpha=0, onComplete = addGameScreen})

    playBtn:removeEventListener("tap", loadGame)
  end
end
```
Next, we
need to add in an event listener to playBtn, so when it is tapped, it will call the loadGame() function. Add the following line in the mainMenu() function after the last method:
```
playBtn:addEventListener("tap", loadGame)
```
Run the project in the simulator. You should see the main menu screen display Breakout and the Play button.

What just happened?

Creating a main menu screen only requires a couple of blocks of code. For loadGame(event), we passed a parameter called event. When the if statement is called, it takes playbutton, which references to the display object playBtn, and checks to see whether it is true. Since it is, the menuScreenGroup will be removed from the stage and called in the addGameScreen() function. At the same time, the event listener for playBtn is removed from the scene.

Have a go hero – creating a help screen

Right now, the design of the menu system is set up so that from the main menu screen it transitions to the game play screen. You have the option to extend the menu screens without jumping into the game right away. Something additional that can be added is a help menu screen after the main menu screen, which explains to the players how to play the game.

Create a new image in your preferred image editing program and write out the steps for how to play the game. You can then create a new button called Next and add both art assets to your project folder. In your code, you'll have to create a new function and event listener for your Next button, which will transition to the game play screen.