Composer Beginner Help!

Can someone explain composer or storyboard in an easy understanding way, that a beginner could understand? I can’t grasp it and it seems so important.

Firstly, focus on ‘composer’ as the other is outdated.

Composer is just a method to divide up the screen process. You can see there is ‘create’, ‘show’, ‘hide’, and ‘destroy’ which are quite self-explanatory. You need to use it, or you can loop director class for another type of implementation.

In simple terms, Composer is a method of moving between scenes easily. Below is a blank template ‘scene’ that I use. Whatever you call the .lua file will be the name of the scene that you load using composer.gotoScene.

Say you wanted to use a Corona widget in your app, then you would add local widget = require “widget” to the libraries section. Likewise for Physics or any third-party libraries you might want to use.

If you wanted to keep track of a player’s score, you could add v.score = 0 to the  local variables section. Then anywhere in this scene, you can access and edit this value using v.score.

In forward declarations I set up a ‘gfx’ table, that will hold most of the display objects I create, which will be mostly done in scene:create. The exceptions will be things that are continually spawned and then destroyed, such as an alien in a scrolling shoot-em-up.

Next are my scene functions. Examples might be a touch listener for a button or group of buttons, a function to spawn aliens or a collision listener that detects when a bullet hit an alien. I always have a ‘gameLoop’ function in my template, which will run every frame and might do such tasks as keeping track of game over conditions or updating the score text display.

Finally come the composer functions that must be present for the scene to work. In create you might draw the background, add score, high score and time text objects, a pause button, and the player object.

[lua]


– LIBRARIES


local composer = require"composer" – import composer library


– DISPLAY GROUPS


local grp = {}

grp.main = display.newGroup()


– LOCAL VARIABLES  


local scene = composer.newScene()

local v = {}


– FORWARD DECLARATIONS


local gfx = {}


– SCENE FUNCTIONS


local gameLoop = function (event)

end


– COMPOSER FUNCTIONS


function scene:create(event)

    grp.main = self.view

     – create initial display objects here

     – make sure they, or the group they are inserted into

     – are inserted into grp.main

end

function scene:show(event)

    grp.main = self.view

    local phase = event.phase

    if phase == “did” then

      local previous =  composer.getSceneName( “previous” )

      if previous ~= “main” and previous then

          composer.removeScene(previous, false)

      end

      Runtime:addEventListener(“enterFrame”, gameLoop)

    end

end

function scene:hide(event)

    grp.main = self.view

    local phase = event.phase

    if phase == “did” then

      Runtime:removeEventListener(“enterFrame”, gameLoop)

     – cancel any timers or on-going transitions here

    end

end

function scene:destroy(event)

    grp.main = self.view

end


scene:addEventListener(“create”, scene)

scene:addEventListener(“show”, scene)

scene:addEventListener(“hide”, scene)

scene:addEventListener(“destroy”, scene)

return scene

[/lua]

The idea behind a “scene” manager is to allow your app to have multiple screens as separate modules to keep your code organized and allow you to easily move between these screens.   Consider a typical game app where you have a main menu screen, a help screen, an about us screen, a settings screen, a level select screen, a screen to play the level.  If the player looses the game, a game over screen.  If they beat the level, a screen to show them their results and move to the next level.

Using Composer (or formally Storyboard), each of these screens is consider a scene and is a separate .lua file.  Composer provides code to let you easily change from one scene to another, manage when they are to be deleted to free memory etc.

Each scene has multiple states to allow you to do things at the right time.  For instance you need to create the scene before you try and show it.  You may need to do things after the scene is created but before the scene shows, do things after the scene shows, hide the scene, do things before and after it hides.  So each scene supports events that can run your code during these various states.

Rob

Firstly, focus on ‘composer’ as the other is outdated.

Composer is just a method to divide up the screen process. You can see there is ‘create’, ‘show’, ‘hide’, and ‘destroy’ which are quite self-explanatory. You need to use it, or you can loop director class for another type of implementation.

In simple terms, Composer is a method of moving between scenes easily. Below is a blank template ‘scene’ that I use. Whatever you call the .lua file will be the name of the scene that you load using composer.gotoScene.

Say you wanted to use a Corona widget in your app, then you would add local widget = require “widget” to the libraries section. Likewise for Physics or any third-party libraries you might want to use.

If you wanted to keep track of a player’s score, you could add v.score = 0 to the  local variables section. Then anywhere in this scene, you can access and edit this value using v.score.

In forward declarations I set up a ‘gfx’ table, that will hold most of the display objects I create, which will be mostly done in scene:create. The exceptions will be things that are continually spawned and then destroyed, such as an alien in a scrolling shoot-em-up.

Next are my scene functions. Examples might be a touch listener for a button or group of buttons, a function to spawn aliens or a collision listener that detects when a bullet hit an alien. I always have a ‘gameLoop’ function in my template, which will run every frame and might do such tasks as keeping track of game over conditions or updating the score text display.

Finally come the composer functions that must be present for the scene to work. In create you might draw the background, add score, high score and time text objects, a pause button, and the player object.

[lua]


– LIBRARIES


local composer = require"composer" – import composer library


– DISPLAY GROUPS


local grp = {}

grp.main = display.newGroup()


– LOCAL VARIABLES  


local scene = composer.newScene()

local v = {}


– FORWARD DECLARATIONS


local gfx = {}


– SCENE FUNCTIONS


local gameLoop = function (event)

end


– COMPOSER FUNCTIONS


function scene:create(event)

    grp.main = self.view

     – create initial display objects here

     – make sure they, or the group they are inserted into

     – are inserted into grp.main

end

function scene:show(event)

    grp.main = self.view

    local phase = event.phase

    if phase == “did” then

      local previous =  composer.getSceneName( “previous” )

      if previous ~= “main” and previous then

          composer.removeScene(previous, false)

      end

      Runtime:addEventListener(“enterFrame”, gameLoop)

    end

end

function scene:hide(event)

    grp.main = self.view

    local phase = event.phase

    if phase == “did” then

      Runtime:removeEventListener(“enterFrame”, gameLoop)

     – cancel any timers or on-going transitions here

    end

end

function scene:destroy(event)

    grp.main = self.view

end


scene:addEventListener(“create”, scene)

scene:addEventListener(“show”, scene)

scene:addEventListener(“hide”, scene)

scene:addEventListener(“destroy”, scene)

return scene

[/lua]

The idea behind a “scene” manager is to allow your app to have multiple screens as separate modules to keep your code organized and allow you to easily move between these screens.   Consider a typical game app where you have a main menu screen, a help screen, an about us screen, a settings screen, a level select screen, a screen to play the level.  If the player looses the game, a game over screen.  If they beat the level, a screen to show them their results and move to the next level.

Using Composer (or formally Storyboard), each of these screens is consider a scene and is a separate .lua file.  Composer provides code to let you easily change from one scene to another, manage when they are to be deleted to free memory etc.

Each scene has multiple states to allow you to do things at the right time.  For instance you need to create the scene before you try and show it.  You may need to do things after the scene is created but before the scene shows, do things after the scene shows, hide the scene, do things before and after it hides.  So each scene supports events that can run your code during these various states.

Rob