NOTE: This tutorial is not copied from the original at OutlawGameTools.com. It is similar but reworked to use the new-ish storyboard api
Difficulty: Beginner
Duration: 30 minutes
Description:
This tutorial will add a start screen, a pause button to tutorial-11. We will be using the storyboard api introduced in late 2011.
The map can be found here. It is the same map used in tutorial-11. This was the one that added animation to a moving character.
The primary unit of the storyboard API is the scene. The scene is a container for each scene in your application. Each scene has a view property that will be on screen when the scene is shown. The storyboard API provides functions for switching between scenes. Scenes are referenced by the sceneName. The name can either be the name of the lua module you've created, or the name you passed to storyboard.newscene.
So let's make our first scene. The Corona API docs for the storyboard API includes a template to help with implementing a scene. There is also a copy of scenetemplate.lua in this project. We'll rename that to startscreen.lua. On this line we add a simple displayObject that will be our background. At this point we have a simple blue background. That's boring.
Transitioning from one scene to the next is straight forward: use storyboard.gotoScene. The optional options parameter is allows you to pass information from one scene to the next via the params member. You can also specify transition effects like we do on this line.
The important thing to remember here is that you need to add the map visuals to the scene's group like we do here. We've renamed the main.lua from tutorial-11 to platform.lua and tweaked it to provide a module with a public funtion to load the map, visuals, and physics as we did in tutorial 11.
We will now add a pause button to the game scene. We want this button to display a modal message over our existing scene. As you may have guessed the storyboard API supports this usage. The storyboard.showOverlay function is similar to the gotoScene, but instead of replacing the existing scene it is overlayed on top of it. To do this we'll create a new and very simple scene.
Do this in the createScene function:
local pause = display.newImage(group, "Play_Button.png")
pause:addEventListener("tap", function(event)
storyboard.showOverlay("pause", { isModal = true })
end)When the paused overlay is started we will unregister the enterFrame listener added when the map was loaded. When it is dismissed we'll re-register the listener. These operations are exposed from the platform module as public fuctions resumeGame and pauseGame respectively. So finally do this in the overlayBegan and overlayEnded listeners:
function scene:overlayBegan( event )
platform.pauseGame()
end
function scene:overlayEnded( event )
platform.resumeGame()
end
That's the basics of using the storyboard API with lime.
Resources:
Completed Project: git clone https://github.com/anthonymoralez/lime-tutorials