Corona SDK Storyboard – Rolly Bear World

In this post, we start (finally) with the first lines of codes. We set up the skeleton of the Rolly Bear World Game. With this I mean the navigation between the different screens (home or menu, level selector, options and the game credits). To get this fixed, we use something (very useful) called the storyboard API/Library of the Corona SDK, which pretty much does all the work for us.

Currently I’m still in Nepal. I just really enjoy Nepal. The people and food are amazing. Despite this we decided to fly next week to Indonesia to see some of the Islands. We booked a flight to the island Lombok. Today we visited the Peace Pagoda which is a temple on top of a hill in Pokhara. The peace pagoda is a buddhist stupa. This one was build by Japan to widespread the peace message after the horrible bombings in Japan by the end of the 2nd World War. Besides Japan there are Peace Pagodas all over the world eg in India, Japan, Australia, Africa and even in California!

As said, this post will just provide the skeleton of the game based on the Corona SDK storyboard API, so the end result will be very dull but we are at least getting into the right direction. I don’t use any visuals yet or nice fonts, but just placeholder text for us to understand the skeleton.

Now, create next to your main.lua, config.lua and build.settings, 3 more .lua files and call them gamecredits.lua, options.lua, levels.lua, and menu.lua.

In the main.lua we will do 2 things. First we create some variables for positioning stuff on the screen. This is very helpful throughout the development of the game. Note: these are lines 5 – 10 of main.lua. Second we load the Corona SDK Storyboard API by using line 12: local storyboard = require (“storyboard”).

The gotoScene function takes two arguments. The first argument is the destination, this is menu.lua (note we only need to code “menu” and the second argument is the transition type to go to the next scene (menu in this case). I used “fade” but check all available transitions in the Corona SDK documentation.

Your main.lua should look like this:

-- Rolly Bear World Project by Christian Peeters
-- See all tutorial @christian.peeters.com

-- easy to use variables for screen-positions
centerX = display.contentWidth / 2
centerY = display.contentHeight / 2
withScrn = display.contentWidth
heightScrn = display.contentHeight
topScrn = display.screenOriginY
leftScrn = display.screenOriginX 

local storyboard = require ("storyboard")
storyboard.purgeOnSceneChange = true

storyboard.gotoScene ( "menu", { effect = "fade"} )

Now open menu.lua. Again we have to make sure we require the storyboard API. We use the function btnTap to describe what happens when a user clicks on one of the screen options (play, options, gamecredits). What is does (with a fade transition) is to get the parameter destination which is for each option (or button) specified (see at the code where the buttons are build). The destinations needs to be exact the same as the corresponding lua file. So when your destination is “options”, your lua file for the options screen should also be called options. In the createScene we create a title and three buttons. A play button which takes the user to the level selection screen. An options button which takes the user to a screen to manage options like sound and music. Finally, a credits button which takes the user to all the credits of the game.

Each of the buttons have more or less the same code structure with positions and labels being different from eachother. Note that centerX was one of the variables we created in the main.lua file. Because we are using storyboard we need to insert each variable (or button) into a group. Because we want each button to react to a tap event we add an eventlistener to each button. The first parameter is “tap” which means that something happens when the user taps the button and the second parameter defines what will happen. As you can see here the function btnTap is called and the btnName.destination is passed to the function btnTap.

The file in size and the rest of the code might look overwhelming (it does to me:)) but this is standard storyboard stuff we will use the rest later throughout the project. In case you want to read more about it see the Corona SDK documentation.

menu.lua

-- Rolly Bear World Project by Christian Peeters
-- See all tutorial @christian.peeters.com

local storyboard = require( "storyboard" )
local scene = storyboard.newScene()

-- local forward references should go here --

local function btnTap(event)
	storyboard.gotoScene (  event.target.destination, {effect = "fade"} )
	return true
end

-- Called when the scene's view does not exist:
function scene:createScene( event )
	local group = self.view

	-- CREATE display objects and add them to 'group' here.
	-- Example use-case: Restore 'group' from previously saved state.


	local title = display.newText( "Rolly Bear World", 0, 0, "Helvetica", 38 )
	title.x = centerX
	title.y = display.screenOriginY + 40
	group:insert(title)
	
	local playBtn = display.newText(  "Start game", 0, 0, "Helvetica", 25 )
	playBtn.x = centerX
	playBtn.y = centerY
	playBtn.destination = "levels" 
	playBtn:addEventListener("tap", btnTap)
	group:insert(playBtn)
	
	local optionsBtn = display.newText(  "Options", 0, 0, "Helvetica", 25 )
	optionsBtn.x = centerX
	optionsBtn.y = centerY + 80 
	optionsBtn.destination = "options" 
	optionsBtn:addEventListener("tap", btnTap)
	group:insert (optionsBtn)
	
	local creditsBtn = display.newText(  "Credits", 0, 0, "Helvetica", 25 )
	creditsBtn.x = centerX
	creditsBtn.y = centerY + 160
	creditsBtn.destination = "gamecredits" 
	creditsBtn:addEventListener("tap", btnTap)
	group:insert (creditsBtn)
	
end


-- Called immediately after scene has moved onscreen:
function scene:enterScene( event )
	local group = self.view

	-- INSERT code here (e.g. start timers, load audio, start listeners, etc.)

end


-- Called when scene is about to move offscreen:
function scene:exitScene( event )
	local group = self.view

	-- INSERT code here (e.g. stop timers, remove listeners, unload sounds, etc.)
	-- Remove listeners attached to the Runtime, timers, transitions, audio tracks

end


-- Called prior to the removal of scene's "view" (display group)
function scene:destroyScene( event )
	local group = self.view

	-- INSERT code here (e.g. remove listeners, widgets, save state, etc.)
	-- Remove listeners attached to the Runtime, timers, transitions, audio tracks

end


---------------------------------------------------------------------------------
-- END OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------

-- "createScene" event is dispatched if scene's view does not exist
scene:addEventListener( "createScene", scene )

-- "enterScene" event is dispatched whenever scene transition has finished
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

We need to create similar files for options, levels and gamecredits. The only difference is the addition of a back button. The backbutton is programmed the same way. Maybe worth mentioning is how I got to the positioning of the back button (bottom left corner). First I got the height of the screen (see main.lua) this was stored in the variable heightScrn then I substracted the height of the backBtn itself (backBtn.height). Why? If you only use the heigh of the screen you will notice that the backbtn label will not be completely on the screen, this has the do with the fact that CoronaSDK take the middle point of a displayobject. So substracting the height of the label will fix this (little) problem.

levels.lua

-- Rolly Bear World Project by Christian Peeters
-- See all tutorial @christian.peeters.com

local storyboard = require( "storyboard" )
local scene = storyboard.newScene()

-- local forward references should go here --

local function btnTap(event)
	storyboard.gotoScene (  event.target.destination, {effect = "fade"} )
	return true
end

-- Called when the scene's view does not exist:
function scene:createScene( event )
	local group = self.view

	-- CREATE display objects and add them to 'group' here.
	-- Example use-case: Restore 'group' from previously saved state.

	local title = display.newText( "Level Selection", 0, 0, "Helvetica", 38 )
	title.x = centerX
	title.y = display.screenOriginY + 40
	group:insert(title)
	
	local backbtn = display.newText(  "Back", 0, 0, "Helvetica", 25 )
	backbtn.y = heightScrn - backbtn.height 
	backbtn.destination = "menu" 
	backbtn:addEventListener("tap", btnTap)
	group:insert(backbtn)
	
end


-- Called immediately after scene has moved onscreen:
function scene:enterScene( event )
	local group = self.view

	-- INSERT code here (e.g. start timers, load audio, start listeners, etc.)

end


-- Called when scene is about to move offscreen:
function scene:exitScene( event )
	local group = self.view

	-- INSERT code here (e.g. stop timers, remove listeners, unload sounds, etc.)
	-- Remove listeners attached to the Runtime, timers, transitions, audio tracks

end


-- Called prior to the removal of scene's "view" (display group)
function scene:destroyScene( event )
	local group = self.view

	-- INSERT code here (e.g. remove listeners, widgets, save state, etc.)
	-- Remove listeners attached to the Runtime, timers, transitions, audio tracks

end


---------------------------------------------------------------------------------
-- END OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------

-- "createScene" event is dispatched if scene's view does not exist
scene:addEventListener( "createScene", scene )

-- "enterScene" event is dispatched whenever scene transition has finished
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

options.lua

-- Rolly Bear World Project by Christian Peeters
-- See all tutorial @christian.peeters.com

local storyboard = require( "storyboard" )
local scene = storyboard.newScene()

-- local forward references should go here --

local function btnTap(event)
	storyboard.gotoScene (  event.target.destination, {effect = "fade"} )
	return true
end

-- Called when the scene's view does not exist:
function scene:createScene( event )
	local group = self.view

	-- CREATE display objects and add them to 'group' here.
	-- Example use-case: Restore 'group' from previously saved state.

	local title = display.newText( "Options", 0, 0, "Helvetica", 38 )
	title.x = centerX
	title.y = display.screenOriginY + 40
	group:insert(title)
	
	local backbtn = display.newText(  "Back", 0, 0, "Helvetica", 25 )
	backbtn.y = heightScrn - backbtn.height 
	backbtn.destination = "menu" 
	backbtn:addEventListener("tap", btnTap)
	group:insert(backbtn)
	
end


-- Called immediately after scene has moved onscreen:
function scene:enterScene( event )
	local group = self.view

	-- INSERT code here (e.g. start timers, load audio, start listeners, etc.)

end


-- Called when scene is about to move offscreen:
function scene:exitScene( event )
	local group = self.view

	-- INSERT code here (e.g. stop timers, remove listeners, unload sounds, etc.)
	-- Remove listeners attached to the Runtime, timers, transitions, audio tracks

end


-- Called prior to the removal of scene's "view" (display group)
function scene:destroyScene( event )
	local group = self.view

	-- INSERT code here (e.g. remove listeners, widgets, save state, etc.)
	-- Remove listeners attached to the Runtime, timers, transitions, audio tracks

end


---------------------------------------------------------------------------------
-- END OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------

-- "createScene" event is dispatched if scene's view does not exist
scene:addEventListener( "createScene", scene )

-- "enterScene" event is dispatched whenever scene transition has finished
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

gamecredits.lua

-- Rolly Bear World Project by Christian Peeters
-- See all tutorial @christian.peeters.com

local storyboard = require( "storyboard" )
local scene = storyboard.newScene()

-- local forward references should go here --

local function btnTap(event)
	storyboard.gotoScene (  event.target.destination, {effect = "fade"} )
	return true
end

-- Called when the scene's view does not exist:
function scene:createScene( event )
	local group = self.view

	-- CREATE display objects and add them to 'group' here.
	-- Example use-case: Restore 'group' from previously saved state.

	local title = display.newText( "Credits", 0, 0, "Helvetica", 38 )
	title.x = centerX
	title.y = display.screenOriginY + 40
	group:insert(title)
	
	local backbtn = display.newText(  "Back", 0, 0, "Helvetica", 25 )
	backbtn.y = heightScrn - backbtn.height 
	backbtn.destination = "menu" 
	backbtn:addEventListener("tap", btnTap)
	group:insert(backbtn)
	
end


-- Called immediately after scene has moved onscreen:
function scene:enterScene( event )
	local group = self.view

	-- INSERT code here (e.g. start timers, load audio, start listeners, etc.)

end


-- Called when scene is about to move offscreen:
function scene:exitScene( event )
	local group = self.view

	-- INSERT code here (e.g. stop timers, remove listeners, unload sounds, etc.)
	-- Remove listeners attached to the Runtime, timers, transitions, audio tracks

end


-- Called prior to the removal of scene's "view" (display group)
function scene:destroyScene( event )
	local group = self.view

	-- INSERT code here (e.g. remove listeners, widgets, save state, etc.)
	-- Remove listeners attached to the Runtime, timers, transitions, audio tracks

end


---------------------------------------------------------------------------------
-- END OF YOUR IMPLEMENTATION
---------------------------------------------------------------------------------

-- "createScene" event is dispatched if scene's view does not exist
scene:addEventListener( "createScene", scene )

-- "enterScene" event is dispatched whenever scene transition has finished
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

You can find all the files on GitHub.