Implementation of composer -Need help

Solar2D Composer
#1

Hello,

I am new to lua language. I have recently created a game in lua. When I began with coding, I did not know the concept of composers and storyboards (my bad).

I read the tutorial of composer, and understood what it is and how it works. But, now i’m confused how to apply it to my code.

Please have a look at small piece of code below.

function welcomeScreen()

local img= display.newImage(“logopng.png”)

img.x=centerX

img.y=centerY

img:scale(1.7,1.7)

img.alpha=1

local text1 = display.newText("© 2014 ", 0, 0, “Helvetica”, 35)

text1.x=centerX

text1.y=centerY + 350

function remove_welcomeimg()

img:removeSelf()

text1:removeSelf()

text1=nil

img=nil

end

transition.fadeOut(text1, {time=1500, delay=2000, onComplete = remove_welcomeimg})

transition.fadeOut(img, {time=1500, delay=2000, onComplete=mainScreen,})

end

welcomeScreen() --This fubction is called initially to start the program (game)

The game begins with this welcome screen… firther followed by mainscreen(). Now how to sort this code to work with composer?

What exactly happens is :

Tap game icon --> welcome screen appears (this gets removed with transition) --> mainScreen() is called from where game starts.

Please provide me the following code with composer?This would help me apply composer to rest of my code and help me understanding composers more clearly.

(I have never used storyboards either)

#2

I would do something like this for your welcome screen:

[lua]

– LIBRARIES

local composer = require"composer" – import composer library

– DISPLAY GROUPS

local grp = {}  – setup table to hold all our display groups

grp.main = display.newGroup()       – main display group (all objs and grps must be inserted into this)

grp.welcome = display.newGroup()    – display group to hold welcome graphics

– LOCAL VARIABLES           

local scene = composer.newScene()

local v = {}            – setup a table to hold local variables

v.wd = display.actualContentWidth        

v.ht = display.actualContentHeight

v.centerX = wd/2

v.centerY = ht/2

– OBJECT DECLARATIONS

local gfx = {}          – table to hold refs to gfx objects we might need to manipulate after creation

– GAME FUNCTIONS

local gotoMainScene = function ()

      – now if we wanted, we could do something with the logo image or text here

      – because we added them to the gfx table in scene:create below

      – gfx.logo.alpha = 1

      – gfx.text.rotation = 90

      composer.gotoScene(“mainScreen”)

end

– COMPOSER FUNCTIONS

function scene:create(event)

    grp.main = self.view

      local i     = display.newImageRect(grp.welcome, “logopng.png”,100,100)  – specify exact size (avoids having to scale everything)

      i.x = v.centerX               – I used newImageRect because it allows for dynamic scaling across different devices

      i.y = v.centerY

      i.alpha = 1

      gfx.logo = i      – store it in gfx table in case we need to access later (in this case we don’t, but just for example’s sake)

      local t = display.newText(grp.welcome, "© 2014 ", 0, 0, “Helvetica”, 35)

      t.x = v.centerX

      t.y = v.centerY + 350

      gfx.copyright = t

      grp.main:insert(grp.welcome) – important step, welcome group is inserted into main group

 – composer will now clean up after us so we don’t need the removeSelf code

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

       transition.fadeOut(grp.welcome, {time=1500, delay=2000, onComplete = gotoMainScene})

    end

end

function scene:hide(event)

    grp.main = self.view

    local phase = event.phase

    if phase == “did” then

    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]

#3

Assuming you saved this file as welcome.lua, in main.lua you would need to put composer.gotoScene(“welcome”).

#4

Thank you soo much for this code. I think now I can help myself adding composer to rest of my code.
I have a doubt in here but … please tell me what does self.view mean? What is the significance of self.view?
Also, what is the use of “hide” scene in here? I mean, after "if phase ==‘did’ then end end "
What does this part of code does exactly? I’m asking cause after ‘then’ the scene ends. What does this mean exactly?

#5

self.view is the scene view that will hold all display objects belonging to the scene. In this example I assigned it to grp.main, so that we can do things to the view outside of the Composer functions, as self.view would mean nothing to a function that isn’t a child of scene -  ‘scene:create’ or’ scene:hide’ are children of scene, whereas ‘gotoMainScene’ is standalone.

We could hide the entire scene with grp.main.alpha = 0, or flip it with grp.main.xScale = - 1. Composer looks after all the objects in self.view for you so you don’t have to remove them manually once you leave the scene.

The hide function can be used to perform operations that you want to happen just before the next scene is loaded. For example, you might have set off a number of timers or transitions that you want to cancel before the next scene loads to avoid errors where a timer tries to fire a function that no longer exists, or a transition tries to move an object that no longer exists.

The function (and scene:show also) has two phases, ‘will’ and ‘did’. So you could perform an operation before the scene is shown/hidden, or after, or both. If you don’t specify which phase the code applies to, it will run the code twice.

Even though in this case we have nothing specific to do in scene:hide, this function must be in place for Composer to function correctly. I just set up the ‘did’ phase ready to insert any code that becomes necessary as I build the scene.

#6

Thank you so much @nick.
I think now I can work with composers with more ease.

Thanks a ton.
Cheers!

#7

I would do something like this for your welcome screen:

[lua]

– LIBRARIES

local composer = require"composer" – import composer library

– DISPLAY GROUPS

local grp = {}  – setup table to hold all our display groups

grp.main = display.newGroup()       – main display group (all objs and grps must be inserted into this)

grp.welcome = display.newGroup()    – display group to hold welcome graphics

– LOCAL VARIABLES           

local scene = composer.newScene()

local v = {}            – setup a table to hold local variables

v.wd = display.actualContentWidth        

v.ht = display.actualContentHeight

v.centerX = wd/2

v.centerY = ht/2

– OBJECT DECLARATIONS

local gfx = {}          – table to hold refs to gfx objects we might need to manipulate after creation

– GAME FUNCTIONS

local gotoMainScene = function ()

      – now if we wanted, we could do something with the logo image or text here

      – because we added them to the gfx table in scene:create below

      – gfx.logo.alpha = 1

      – gfx.text.rotation = 90

      composer.gotoScene(“mainScreen”)

end

– COMPOSER FUNCTIONS

function scene:create(event)

    grp.main = self.view

      local i     = display.newImageRect(grp.welcome, “logopng.png”,100,100)  – specify exact size (avoids having to scale everything)

      i.x = v.centerX               – I used newImageRect because it allows for dynamic scaling across different devices

      i.y = v.centerY

      i.alpha = 1

      gfx.logo = i      – store it in gfx table in case we need to access later (in this case we don’t, but just for example’s sake)

      local t = display.newText(grp.welcome, "© 2014 ", 0, 0, “Helvetica”, 35)

      t.x = v.centerX

      t.y = v.centerY + 350

      gfx.copyright = t

      grp.main:insert(grp.welcome) – important step, welcome group is inserted into main group

 – composer will now clean up after us so we don’t need the removeSelf code

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

       transition.fadeOut(grp.welcome, {time=1500, delay=2000, onComplete = gotoMainScene})

    end

end

function scene:hide(event)

    grp.main = self.view

    local phase = event.phase

    if phase == “did” then

    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]

#8

Assuming you saved this file as welcome.lua, in main.lua you would need to put composer.gotoScene(“welcome”).

#9

Thank you soo much for this code. I think now I can help myself adding composer to rest of my code.
I have a doubt in here but … please tell me what does self.view mean? What is the significance of self.view?
Also, what is the use of “hide” scene in here? I mean, after "if phase ==‘did’ then end end "
What does this part of code does exactly? I’m asking cause after ‘then’ the scene ends. What does this mean exactly?

#10

self.view is the scene view that will hold all display objects belonging to the scene. In this example I assigned it to grp.main, so that we can do things to the view outside of the Composer functions, as self.view would mean nothing to a function that isn’t a child of scene -  ‘scene:create’ or’ scene:hide’ are children of scene, whereas ‘gotoMainScene’ is standalone.

We could hide the entire scene with grp.main.alpha = 0, or flip it with grp.main.xScale = - 1. Composer looks after all the objects in self.view for you so you don’t have to remove them manually once you leave the scene.

The hide function can be used to perform operations that you want to happen just before the next scene is loaded. For example, you might have set off a number of timers or transitions that you want to cancel before the next scene loads to avoid errors where a timer tries to fire a function that no longer exists, or a transition tries to move an object that no longer exists.

The function (and scene:show also) has two phases, ‘will’ and ‘did’. So you could perform an operation before the scene is shown/hidden, or after, or both. If you don’t specify which phase the code applies to, it will run the code twice.

Even though in this case we have nothing specific to do in scene:hide, this function must be in place for Composer to function correctly. I just set up the ‘did’ phase ready to insert any code that becomes necessary as I build the scene.

#11

Thank you so much @nick.
I think now I can work with composers with more ease.

Thanks a ton.
Cheers!