Cannot get composer Transition effect to work

Hi,

No matter what I do I cannot get the transition effect between scenes to work.  Maybe I misunderstand something here.

I have this simple code:

    local options =
    {
        effect = “fade”,
        time = 850
    }
    composer.gotoScene(‘SceneNewGame’,options)

But no matter what I do, I never seem to get the transition effect to work.  Any ideas?

Thanks!

Hi @steven.pannell,

Is only the transition effect not working, or is the entire scene change broken somehow?

Brent

Only the transition.  The scene’s are working just fine.

Are you creating your display objects in the scene:create() or the scene:show()?  Are you adding everything to the scene’s view group?

Rob

Here is the scene:

local composer = require( “composer” )
local scene = composer.newScene()

– Local Vars
local initDisplayGroup

function scene:create( event )
    local group = self.view
end

function scene:show( event )
        
    local group = self.view
    local phase = event.phase

    if ( phase == “will” ) then
        – Called when the scene is still off screen (but is about to come on screen).
        initDisplayGroup = display.newGroup()
        

        local initTitleText = display.newText( { text=“Hello World”, x=40, y=40, align=left, width=200, font=native.systemFont, fontSize=28} )
        initTitleText:setFillColor( 1, 1, 0 )
        initTitleText.anchorX = 0
        initTitleText.anchorY = 0
        initDisplayGroup:insert(initTitleText)
        
    elseif ( phase == “did” ) then
        
    end

end

function scene:hide( event )
    local group = self.view
    local phase = event.phase

    if ( phase == “will” ) then

    elseif ( phase == “did” ) then
        – Called immediately after scene goes off screen.
    end

end

function scene:destroy( event )
    local group = self.view

end

scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )

return scene
 

When you create all your display objects where you are starting to create them right as the transition starts.  You should be doing the creating in the scene:create()  Try that and see if your transitions start working.

Rob

SOLVED!

Thanks, the problem turns out that I was not making correct use of the displayGroup.

Here is the working solution;

function scene:create( event )
    local group = self.view
    
    local myNewGroup = display.newGroup()
    group:insert(myNewGroup)

    local initTitleText = display.newText( { text=“Hello World Modified”, x=40, y=40, align=left, width=200, font=native.systemFont, fontSize=28} )
    initTitleText:setFillColor( 1, 1, 0 )
    initTitleText.anchorX = 0
    initTitleText.anchorY = 0

    myNewGroup:insert(initTitleText)    
end

Note: In my previous example, I create a new displayGroup but never assign this to the main view.  It is just floating around.

Once I stored my new group as follows:

    local group = self.view
    
    local myNewGroup = display.newGroup()
    group:insert(myNewGroup)

The transition effect works just great.

Thanks a lot!

Hi @steven.pannell,

Is only the transition effect not working, or is the entire scene change broken somehow?

Brent

Only the transition.  The scene’s are working just fine.

Are you creating your display objects in the scene:create() or the scene:show()?  Are you adding everything to the scene’s view group?

Rob

Here is the scene:

local composer = require( “composer” )
local scene = composer.newScene()

– Local Vars
local initDisplayGroup

function scene:create( event )
    local group = self.view
end

function scene:show( event )
        
    local group = self.view
    local phase = event.phase

    if ( phase == “will” ) then
        – Called when the scene is still off screen (but is about to come on screen).
        initDisplayGroup = display.newGroup()
        

        local initTitleText = display.newText( { text=“Hello World”, x=40, y=40, align=left, width=200, font=native.systemFont, fontSize=28} )
        initTitleText:setFillColor( 1, 1, 0 )
        initTitleText.anchorX = 0
        initTitleText.anchorY = 0
        initDisplayGroup:insert(initTitleText)
        
    elseif ( phase == “did” ) then
        
    end

end

function scene:hide( event )
    local group = self.view
    local phase = event.phase

    if ( phase == “will” ) then

    elseif ( phase == “did” ) then
        – Called immediately after scene goes off screen.
    end

end

function scene:destroy( event )
    local group = self.view

end

scene:addEventListener( “create”, scene )
scene:addEventListener( “show”, scene )
scene:addEventListener( “hide”, scene )
scene:addEventListener( “destroy”, scene )

return scene
 

When you create all your display objects where you are starting to create them right as the transition starts.  You should be doing the creating in the scene:create()  Try that and see if your transitions start working.

Rob

SOLVED!

Thanks, the problem turns out that I was not making correct use of the displayGroup.

Here is the working solution;

function scene:create( event )
    local group = self.view
    
    local myNewGroup = display.newGroup()
    group:insert(myNewGroup)

    local initTitleText = display.newText( { text=“Hello World Modified”, x=40, y=40, align=left, width=200, font=native.systemFont, fontSize=28} )
    initTitleText:setFillColor( 1, 1, 0 )
    initTitleText.anchorX = 0
    initTitleText.anchorY = 0

    myNewGroup:insert(initTitleText)    
end

Note: In my previous example, I create a new displayGroup but never assign this to the main view.  It is just floating around.

Once I stored my new group as follows:

    local group = self.view
    
    local myNewGroup = display.newGroup()
    group:insert(myNewGroup)

The transition effect works just great.

Thanks a lot!