Director Class : How to fade splash to first screen?

dweezil · January 6, 2011, 7:07am

I want to fade the splash (default.png) to the first screen, i.e. the main menu.

The best way I can come up with doing this is to have a global variable, FIRST_TIME set to true and in the first screen if the FIRST_TIME is true then load the default.png first thing and set a transition.to with a fade and set FIRST_TIME to false to prevent it from happening post game etc.

Any better ideas? [import]uid: 9371 topic_id: 4863 reply_id: 304863[/import]

f2cx · January 6, 2011, 9:23am

In main.lua (you can play with different value of time and delay):

[lua]local splash = display.newImage (“default.png”)
local trans = transition.to (splash,{ time=2000}, delay=0, alpha=0 })[/lua] [import]uid: 8970 topic_id: 4863 reply_id: 15632[/import]

f2cx · January 6, 2011, 9:23am

In main.lua (you can play with different value of time and delay):

[lua]local splash = display.newImage (“default.png”)
local trans = transition.to (splash,{ time=2000}, delay=0, alpha=0 })[/lua] [import]uid: 8970 topic_id: 4863 reply_id: 15633[/import]

ignis075 · January 6, 2011, 9:35am

Can you please describe your desired transition in more detail? Do you want the splash screen to fade both in and out? Or does it fade to black, then the black “fades” into the title screen? Describe your exact intention and maybe I can think of a better solution… [import]uid: 9747 topic_id: 4863 reply_id: 15637[/import]

dweezil · January 7, 2011, 1:16am

I’ve create a demo project of what I’m trying to achieve.

Please download here

What I want is for the splash “screen” to fade out to the screen1 “screen”. Not fade to a colour then fade to the news screen like the existing fade transition but fade out from one screen straight to the new screen

Perhaps it would be better if some new functionality was added to thr Director class itself to do this.

Any idea welcome [import]uid: 9371 topic_id: 4863 reply_id: 15724[/import]

ignis075 · January 7, 2011, 9:38am

OK, I understand now. I actually wanted similar effects so I recently added them to my own copy of Director. I have two effects for fading an “overlay” in and out. I use this for fading in a pause screen, over the existing screen without changing or removing the original. I also added an effect to dual-fade between two screens… i.e. your starting screen starts at alpha 1 fading toward 0, while at the exact time your next screen is fading from alpha 0 to 1. This makes for a nice blending effect.

Here are the basic steps… some might notice that I already altered some code from the original copy of director, so you’ll have to piece this back together in your own version. I also changed every occurence of “nextView” to “nextScreen”, and “currentView” to “currentScreen”… this is only a naming preference which I found easier to follow, so change them back in the following code.

Add an alpha “reset” line to the function “fxEnded” in Director. This is used for the dual-fade function, to make sure that your new resulting group gets set to alpha 1 upon swap.

local function fxEnded ( event )  
 currentGroup.x = 0 ; currentGroup.y = 0  
 cleanGroups( currentGroup, 0 )  
 currentScreen = nextScreen  
 currentGroup.alpha = 1.0 -- add this!  
 currentGroup:insert(currentScreen)  
 nextGroup.x = 0 ; nextGroup.y = 0  
end

Add a new local function “cleanCurrent” which does a one-way cleaning. This is used for the “overlayOut” effect. It’s similar to “fxEnded” except that it doesn’t swap in a nextScreen group because there isn’t one! Remember, this effect is used for fading out an overlaying pause screen, stats screen, etc. without effecting the original screen underneath. This shortened function cleans up the overlay group after it’s faded away.

local function cleanCurrent ( event )  
 timer.cancel( event.source )  
 cleanGroups( currentGroup, 0 )  
end

And here are the 3 new effects, which you can experiment with (again, I took out some comment lines and probably reordered some lines, so piece it back together on your version).

elseif ( effect == "overlayIn" ) then  
 nextGroup.alpha = 0.0  
 loadScene (nextScene)  
 showFx = transition.to ( nextGroup, { alpha=1.0, time=fxTime } )  
 timer.performWithDelay( fxTime, fxEnded, 1 )  
  
elseif ( effect == "overlayOut" ) then  
 showFx = transition.to ( currentGroup, { alpha=0.0, time=fxTime } )  
 timer.performWithDelay( fxTime, cleanCurrent, 1 )  
  
elseif ( effect == "dualFade" ) then  
 nextGroup.alpha = 0.0  
 loadScene (nextScene)  
 showFx = transition.to ( currentGroup, { alpha=0.0, time=fxTime } )  
 showFx = transition.to ( nextGroup, { alpha=1.0, time=fxTime } )  
 timer.performWithDelay( fxTime, fxEnded, 1 )

Hopefully this gets you started on a solution. There is probably room for improvement or perhaps some coding efficiency; if you notice anything, let me know!

Brent
[import]uid: 9747 topic_id: 4863 reply_id: 15763[/import]

dweezil · January 10, 2011, 8:22am

Thanks!

I’ve tried it but I just get a black screen when trying the dualFade. Also there is a warning message in the debugger…

WARNING: Attempt to set object.alpha to 1.104 which is outside valid range. It will be clamped to the range [0,1]
WARNING: Attempt to set object.alpha to -0.106 which is outside valid range. It will be clamped to the range [0,1]

I’ve implemented your changes and have this for my splash screen

[blockcode]
module(…, package.seeall)

function new()

local localGroup = display.newGroup()

local theTimer
local loadingImage

loadingImage = display.newImage( “Default.png”, true)
localGroup:insert(loadingImage)

theTimer = timer.performWithDelay( 500, goToLevel, 1 )

return localGroup

end
function goToLevel()

director:changeScene(“screen1”, “dualFade”)

end

function clean()

if(theTimer) then
timer.cancel( theTimer )
end

end
[/blockcode]

Can anyone see anything wrong with that code? Weirdly if I do…

director:changeScene(“screen1”, “moveFromLeft”)

then it does the transition then the screen goes black!

Any ideas? [import]uid: 9371 topic_id: 4863 reply_id: 15984[/import]

ignis075 · January 10, 2011, 7:31pm

Hmm, the following works for me. At one point in another program I was receiving those strange warnings about “alpha outside the valid range”, and I don’t think I ever figured out why. In the following, however, I am getting no errors, and the dualFade works properly. Give it a try… it seems my dualFade transition needs a bit more work if those warnings keep coming up, but for now, this simple example works for me.

Here’s the first “scene”. You can load this however you want from main.lua, via a Director transition or whatever.

p01.lua [code]
module(…, package.seeall)

function new()
local localGroup = display.newGroup()

local function goNext()
director:changeScene( “p02”, “dualFade” )
end

local rect = display.newRect(150, 250, 200, 200)
rect:setFillColor(255,0,0)
localGroup:insert(rect)
rect:addEventListener( “tap”, goNext )

return localGroup
end
[/code]

And here’s the second scene. It gets loaded from “p01.lua” above, which fades out at the same time “p02.lua” fades in.

p02.lua [code]
module(…, package.seeall)

function new()
local localGroup = display.newGroup()

local function goNext()
director:changeScene( “p01”, “dualFade” )
end

local rect = display.newRect(200, 300, 300, 300)
rect:setFillColor(55,155,100)
localGroup:insert(rect)
rect:addEventListener( “tap”, goNext )

return localGroup
end
[/code]

Both of these scenes are hacked together quickly and would require cleaner code, for example removing the Listeners upon click. Let me know if you have any better luck.
[import]uid: 9747 topic_id: 4863 reply_id: 16052[/import]

dweezil · January 11, 2011, 12:48am

Thanks AGAIN! I’ve tried your code and get the same result. Could I send you a stripped down example to see if you can work out what’s happening? I think the problem is in the director class itself.

It’s like I’m missing some other alpha reset in the director class. If I set the alpha to 0.1 in the first transition.to call then I can see the first screen fading out and at the end of the fade the faded to screen appears but as alpha 0.1.

If I leave it as alpha=0 then the faded to screen just doesn’t appear, it’s black! Could you send me your director class?

I have…

[blockcode]
elseif ( effect == “dualFade” ) then
nextView.alpha = 0
loadScene (nextScene)
showFx1 = transition.to ( currentView, { alpha=0.1, time=fxTime } )
showFx2 = transition.to ( nextView, { alpha=1, time=fxTime } )
timer.performWithDelay( fxTime, fxEnded, 1 )
[/blockcode]
Now if I do this

[blockcode]
elseif ( effect == “dualFade” ) then
nextView.alpha = 0
loadScene (nextScene)
currentView.alpha = 0
– showFx1 = transition.to ( currentView, { alpha=0, time=fxTime } )
showFx2 = transition.to ( nextView, { alpha=1, time=fxTime } )
timer.performWithDelay( fxTime, fxEnded, 1 )

[/blockcode]

As expeced the current screen disappears instantly, then there’s a pause then the next screen appears, i.e. it doesn’t fade in. That seems to be the problem, the 2nd screen never fades in! HELP! [import]uid: 9371 topic_id: 4863 reply_id: 16100[/import]

ignis075 · January 11, 2011, 1:54am

This might be a stupid question, but you did add currentView.alpha = 1.0 into your Director’s “fxEnded” function, yes? I remember a similar problem when I was writing this transition, and it gave me fits. Turns out that it was the “reset” that you mention.

Remember the basis of how Director works:

it creates a new group “nextView”
it does something to the previous group “currentView” (and also to “nextView”)
nextView becomes currentView… and it inherits everything about that display group! This is where I was going nuts for awhile. During the first transition, the current group was fading out to 0. The next group was fading in to 1. When “fxEnded” was triggered, nextView was inserted into currentView, and since I had not reset that group’s alpha to 1, the new screen just snapped to invisible.

If you have the above “reset” line in place, and it’s still not working, drop an e-mail in here and I’ll send you the files for my transition code… this is clearly just one or two lines missing somewhere.
[import]uid: 9747 topic_id: 4863 reply_id: 16110[/import]

dweezil · January 11, 2011, 1:59am

Yup I have the reset line. Email is

rupert AT boiledsweets.com

TIA! [import]uid: 9371 topic_id: 4863 reply_id: 16111[/import]

ricardorauber · January 25, 2011, 2:38pm

Guys, please write your questions at Director’s sub-forum. I don’t have too much time to answer and I really didn’t see most of the topics created for Director. I’m sorry for that and I will appreciate if you all could go to this link:

http://developer.anscamobile.com/forums/director-class [import]uid: 8556 topic_id: 4863 reply_id: 18680[/import]

mroberti · February 26, 2011, 1:05pm

Just a heads up, Carlos says this output is fine, and no, there’s no way to turn it off. Just ignore it.

http://developer.anscamobile.com/forum/2011/01/03/transitionto-generating-warning-alpha-value-outside-valid-range

Dunno if that helps, but yeah I was getting the same error when using the “fade” transition! [import]uid: 11636 topic_id: 4863 reply_id: 25297[/import]

mroberti · February 26, 2011, 1:05pm

[import]uid: 11636 topic_id: 4863 reply_id: 25298[/import]

Arsalan · September 17, 2012, 9:44am

this works for me. (fade in)
[lua]splash = display.newImage(“splash_screen.png”)
transition.from( splash, { time=1500, delay=0, alpha=0 })
transition.to( splash, { time=1500, delay=, alpha=1.0})[/lua] [import]uid: 176812 topic_id: 4863 reply_id: 124189[/import]

Arsalan · September 17, 2012, 9:44am

this works for me. (fade in)
[lua]splash = display.newImage(“splash_screen.png”)
transition.from( splash, { time=1500, delay=0, alpha=0 })
transition.to( splash, { time=1500, delay=, alpha=1.0})[/lua] [import]uid: 176812 topic_id: 4863 reply_id: 124189[/import]

Arsalan · November 30, 2012, 10:51am

FadeIn and then FadeOut

local splashScreen

local transitionIn = function()

splashScreen = display.newImageRect( “splash-screen.png”, 480, 320 )
splashScreen.x = 240; splashScreen.y = 160
transition.from( splashScreen, { time=3500, alpha=0.0, delay=0, transition=easing.inOutExpo } )
transition.to( splashScreen, { time=3500, alpha=1.0, delay=0, transition=easing.inOutExpo } )

end

timer.performWithDelay( 0, transitionIn, 1 )

local transitionOut = function()

transition.from( splashScreen, { time=3500, alpha=1.0, delay=0, transition=easing.inOutExpo } )
transition.to( splashScreen, { time=3500, alpha=0.0, delay=0, transition=easing.inOutExpo } )

end

timer.performWithDelay( 2500, transitionOut, 1) [import]uid: 176812 topic_id: 4863 reply_id: 133092[/import]

Arsalan · November 30, 2012, 10:51am