T2D Tutorial Fading In and Out
by Matthew Langley · 04/20/2005 (9:40 am) · 10 comments
Creating fade in and fade out functions
Ok, so maybe since Torque 2D has come out you've been dreaming of fancy and impressive effects, maybe with T2D made GUIs, or maybe even in game effects... one of these might be fading in and out... this tutorial will show you how to create a script function off of fxSceneObject2D to fade in and out, since we attach it to fxSceneObject2D and because practically everything is built off of fxSceneObject2D nearly all game objects will inherit these functions, spiffy ;) (thanks to Melv's ingenious design)
Overview:
(this tutorial will go over)
- Extending the base object of T2D through Script
- Using the schedule command
- Manipulating the ".setBlendColour()" command effectively
- Should help with an understanding of what callbacks are as well (at the end)
ok lets start...
first create a new .cs file in the same folder as client.cs... call it "fading.cs"... now before we do anything we need to sure this file gets included when we run T2D... so
open up your client.cs and find the end of your exec statements... like exec("./mainScreenGui.gui"); after all the present ones add this
note if you went through my last set of tutorials (object selection and moveTo) you've already done this, no need to repeat... (just add the exec statements to the already present exec.cs)
now create a new .cs file in the same folder as your "client.cs" and put this in it
this will make it easy to add new exec statements :)
ok now lets hop in fading.cs and do something!
lets create the fade out function first (since we'll probably want to start with a visible object)...
the first line sets a new property to the object calling this "blend" and sets it to 255 ... this will represent the starting alpha,
the second line then calls
%this.schedule(50, fadeOut);
this will schedule fxSceneObject2D::fadeOut() to be called in 50 miliseconds...
now lets create fadeOut so something gets called!
ok first we set blend "-= 2" that way it decreases the blend variable by 2... this will control our speed of fading... the lower the number the slower, the higher the faster.
then we check if blend is less than 0... if the alpha is lower than 0 we don't want to keep fading anymore, we're done
if not we then change the blend color like this
%this.setBlendColour("255 255 255" SPC %this.blend);
note the first three represent R G B... Red Green Blue... 255 255 255... by keeping these at the maximum 255 we ensure we don't change the color tint...
the fourth value represents the alpha value... so we place the blend variable there (note since its "%this.blend" every object that calls this self function will not only have there own version of this function, but there own .blend variables, so fading shouldn't interfere with any other object fading)
Basically what we're doing is looping (with the schedule function) the fadeOut function until the object is completely faded and then it won't be scheduled again (because of the if statement) so the looping schedules will stop :)
ok... well lets test this out... first add this to the end of your fading.cs file
Ok lets create another .cs file in the same folder as your "client.cs" and call it "onStartUp.cs"... in there create a function called onStartUp() ... so this new file should contain
then add
to your exec.cs file...
now go back to your client.cs and look for
after this add this line
now save your client.cs and close it, this way we don't have to keep searching for that same spot to include exec statements and choose what we want it to do on start up :) Seperating files like this not only makes it easier to modify and add new things, it also helps in basic debugging, for two reasons... one is the obvious, that since files are seperated its easier to sift through them, the other is the fact that when a syntax error is found, that whole file isn't compiled and a previous version is used, this way its more seperated and if this happens it is more modular... also creating things modular like this increases re-usability... and that means saved time.
ok save and fire up T2D.exe... when T2D loads you should see something like this
now go to the console and type
$obj1.startFadeOut();
hit enter and close the console... you should see the box fade out like this
if yours doesnt work then compare your fading.cs to this
ok... so now we have a fade out function, we need to create a fade in function... well as you might have guessed that isn't much different than the fading out so copy your startFadeOut and your fadeOut functions and paste them... then make these changes
change
then in the fadeOut function... (after you rename it to fadeIn)... you'll need to change these
is changed to
then change
to
and finally change
to
so your whole .cs file should look like this
now fire up T2D and run the $obj1.startFadeOut(); function again from the console... you should see it fade like before
now when its done (be sure its completely faded) go back to the console and type this command
$obj1.startFadeIn();
hit enter and watch it fade back in!
wonderful! Well these are very basic fading in and out functions... time to spruce them up a bit ;) These next steps will also show you how you can add usability and re-usability to functions like these.
first we will change our startFadeOut() function to this
this way we pass it a %speed and %blend variable... speed will be the value to control how much alpha gets added or minused each fade step... and blend will be the starting blend value (that way we can start with a half faded object if we want
next we will add
this will check if %this.fadingOut is not equal to "true"... that way we can toggle this one so we can't trigger this while its already fading out... if it already isnt fading out then we toggle it to true...
ok this next step we start to add a bit of clever functionality ;)
first we check if %blend is empty
then we check if %blend is equal to the string (text) "current"
if its true we then check if its empty again
now t his may be confusing at first... we check for a string called "current"... if we happened to pass "current" as the %blend then it checks if its empty again, but doese nothing else... note if %blend is equal to "current" then %blend isn't set to anything... this gives us the option to pass "current" and then this function will take whatever we left the blend at previously (as you can imagine this can add a lot of functionality, that way we don't have to guess what our last fade ended at... extra check to see if its empty is just a fail safe, that way if we hadn't already set the objects ".blend" it will still work and assume we want to start at full alpha...
finally we get to this (if the previous options didn't return true)
this will set the .blend to the %blend we passed in...
ok a couple final lines to finish up this revised function
we need to schedule the fadeOut... (note we haven't done anything with %speed yet, we simple pass it... that will be handled in the next function)...
so your entire startFadeOu klik
ok now lets modify the fadeOut function... this time I'll give you the new fu nction and I'll go over each part after
here it is
first we check for the
then we have
this is where the %speed comes in handy.. instead of just having it decrease by "2"... we can pass it a number when we call the startFadeOut function, that way we can control the speed
the rest is the same besides two lines...
first if the blend is less than 0 (if its finished)
we call
this is a "callback"... this may help you understand what callbacks are... (except instead of being called from the C++ side its being called from script)...
this way we can have some sort of event handled when it finishes...
the other different line is
we added the %speed... that way it keeps passing the %speed we originally set in startFadeOut...
ok now theres a new function I'll have you add a very simple one
with this function we can call "$obj1.stopFadeOut();" and it will stop the fade on the spot :)
ok...
now you should have these three new functions that replace your old fading out ones
now you can either copy and paste them over your fading in functions and change the approprate names, but I'll give you the revised fadingIn functions (notice the simple changes to change from fadingOut to fadingIn)
ok now lets save things and fire up T2D
bring up the console and type
$obj1.startFadeOut(0.5);
now watch the box slowly fade away... now before it completely is faded run this command in the console
$obj1.stopFadeOut();
now the box should stop fading out and stay at the alpha stopped... heres where that "current" trick comes in handy, run this command in the console
$obj1.startFadeIn(0.5, "current");
now the box should start where you left off and slowly fade back in :)
if your doesn't work compare your fading.cs to this
these other variations will all work
$obj1.startFadeOut(3);
$obj1.startFadeOut(0.5, 155);
you don't have to specify a blend color to start at, just a speed to fade at...
well that concludes this tutorial...
hopefully you learned a few things, like extending fxSceneObject2D in script, using schedules, and understanding the use of "callbacks"... plus you now have a nifty little fade in and out function :)
-Matthew "King Tut(orial) BoB" Langley
Ok, so maybe since Torque 2D has come out you've been dreaming of fancy and impressive effects, maybe with T2D made GUIs, or maybe even in game effects... one of these might be fading in and out... this tutorial will show you how to create a script function off of fxSceneObject2D to fade in and out, since we attach it to fxSceneObject2D and because practically everything is built off of fxSceneObject2D nearly all game objects will inherit these functions, spiffy ;) (thanks to Melv's ingenious design)
Overview:
(this tutorial will go over)
- Extending the base object of T2D through Script
- Using the schedule command
- Manipulating the ".setBlendColour()" command effectively
- Should help with an understanding of what callbacks are as well (at the end)
ok lets start...
first create a new .cs file in the same folder as client.cs... call it "fading.cs"... now before we do anything we need to sure this file gets included when we run T2D... so
open up your client.cs and find the end of your exec statements... like exec("./mainScreenGui.gui"); after all the present ones add this
exec("./exec.cs");note if you went through my last set of tutorials (object selection and moveTo) you've already done this, no need to repeat... (just add the exec statements to the already present exec.cs)
now create a new .cs file in the same folder as your "client.cs" and put this in it
exe("./fading.cs");this will make it easy to add new exec statements :)
ok now lets hop in fading.cs and do something!
lets create the fade out function first (since we'll probably want to start with a visible object)...
function fxSceneObject2D::startFadeOut(%this)
{
%this.blend = 255;
%this.schedule(50, fadeOut);
}the first line sets a new property to the object calling this "blend" and sets it to 255 ... this will represent the starting alpha,
the second line then calls
%this.schedule(50, fadeOut);
this will schedule fxSceneObject2D::fadeOut() to be called in 50 miliseconds...
now lets create fadeOut so something gets called!
function fxSceneObject2D::fadeOut(%this)
{
%this.blend -= 2;
if(%this.blend < 0)
{
} else
{
%this.setBlendColour("255 255 255" SPC %this.blend);
%this.schedule(50,fadeOut);
}
}ok first we set blend "-= 2" that way it decreases the blend variable by 2... this will control our speed of fading... the lower the number the slower, the higher the faster.
then we check if blend is less than 0... if the alpha is lower than 0 we don't want to keep fading anymore, we're done
if not we then change the blend color like this
%this.setBlendColour("255 255 255" SPC %this.blend);
note the first three represent R G B... Red Green Blue... 255 255 255... by keeping these at the maximum 255 we ensure we don't change the color tint...
the fourth value represents the alpha value... so we place the blend variable there (note since its "%this.blend" every object that calls this self function will not only have there own version of this function, but there own .blend variables, so fading shouldn't interfere with any other object fading)
Basically what we're doing is looping (with the schedule function) the fadeOut function until the object is completely faded and then it won't be scheduled again (because of the if statement) so the looping schedules will stop :)
ok... well lets test this out... first add this to the end of your fading.cs file
function testFade()
{
$obj1 = new fxStaticSprite2d() {sceneGraph = t2dSceneGraph;};
$obj1.setImageMap(tileMapImageMap);
$obj1.setPosition("0 0");
$obj1.setSize("5 5");
}Ok lets create another .cs file in the same folder as your "client.cs" and call it "onStartUp.cs"... in there create a function called onStartUp() ... so this new file should contain
function onStartUp()
{
testFade();
}then add
exec("./onStartUp.cs");to your exec.cs file...
now go back to your client.cs and look for
// ************************************************************************ // // Add your custom code here...
after this add this line
onStartUp();
now save your client.cs and close it, this way we don't have to keep searching for that same spot to include exec statements and choose what we want it to do on start up :) Seperating files like this not only makes it easier to modify and add new things, it also helps in basic debugging, for two reasons... one is the obvious, that since files are seperated its easier to sift through them, the other is the fact that when a syntax error is found, that whole file isn't compiled and a previous version is used, this way its more seperated and if this happens it is more modular... also creating things modular like this increases re-usability... and that means saved time.
ok save and fire up T2D.exe... when T2D loads you should see something like this
now go to the console and type
$obj1.startFadeOut();
hit enter and close the console... you should see the box fade out like this
if yours doesnt work then compare your fading.cs to this
function fxSceneObject2D::startFadeOut(%this)
{
%this.blend = 255;
%this.schedule(50, fadeOut);
}
function fxSceneObject2D::fadeOut(%this)
{
%this.blend -= 2;
if(%this.blend < 0)
{
} else
{
%this.setBlendColour("255 255 255" SPC %this.blend);
%this.schedule(50,fadeOut);
}
}
function testFade()
{
$obj1 = new fxStaticSprite2d() {sceneGraph = t2dSceneGraph;};
$obj1.setImageMap(tileMapImageMap);
$obj1.setPosition("0 0");
$obj1.setSize("5 5");
}ok... so now we have a fade out function, we need to create a fade in function... well as you might have guessed that isn't much different than the fading out so copy your startFadeOut and your fadeOut functions and paste them... then make these changes
change
function fxSceneObject2D::startFadeOut(%this)
function fxSceneObject2D::startFadeIn(%this)
{
%this.blend = 0;
%this.schedule(50, fadeIn);
}then in the fadeOut function... (after you rename it to fadeIn)... you'll need to change these
%this.blend -= 2;
is changed to
%this.blend += 2;
then change
if(%this.blend < 0)
to
if(%this.blend > 255)
and finally change
%this.schedule(50,fadeOut);
to
%this.schedule(50,fadeIn);
so your whole .cs file should look like this
function fxSceneObject2D::startFadeOut(%this)
{
%this.blend = 255;
%this.schedule(50, fadeOut);
}
function fxSceneObject2D::fadeOut(%this)
{
%this.blend -= 2;
if(%this.blend < 0)
{
} else
{
%this.setBlendColour("255 255 255" SPC %this.blend);
%this.schedule(50,fadeOut, %speed);
}
}
function fxSceneObject2D::startFadeIn(%this)
{
%this.blend = 0;
%this.schedule(50, fadeIn);
}
function fxSceneObject2D::fadeIn(%this)
{
%this.blend += 2;
if(%this.blend > 255)
{
} else
{
%this.setBlendColour("255 255 255" SPC %this.blend);
%this.schedule(50,fadeIn);
}
}
function testFade()
{
$obj1 = new fxStaticSprite2d() {sceneGraph = t2dSceneGraph;};
$obj1.setImageMap(tileMapImageMap);
$obj1.setPosition("0 0");
$obj1.setSize("5 5");
}now fire up T2D and run the $obj1.startFadeOut(); function again from the console... you should see it fade like before
now when its done (be sure its completely faded) go back to the console and type this command
$obj1.startFadeIn();
hit enter and watch it fade back in!
wonderful! Well these are very basic fading in and out functions... time to spruce them up a bit ;) These next steps will also show you how you can add usability and re-usability to functions like these.
first we will change our startFadeOut() function to this
function fxSceneObject2D::startFadeOut(%this, %speed, %blend)
{this way we pass it a %speed and %blend variable... speed will be the value to control how much alpha gets added or minused each fade step... and blend will be the starting blend value (that way we can start with a half faded object if we want
next we will add
if(!%this.fadingOut)
{
%this.fadingOut = true;this will check if %this.fadingOut is not equal to "true"... that way we can toggle this one so we can't trigger this while its already fading out... if it already isnt fading out then we toggle it to true...
ok this next step we start to add a bit of clever functionality ;)
if(%blend $= "")
{
%this.blend = 255;
} else if (%blend $= "current")
{
if(%this.blend $= "")
{
%this.blend = 255;
}
} else
{
%this.blend = %blend;
}first we check if %blend is empty
if(%blend $= "")... and if it is we set it to 255... that way it adds a fail safe, so if we don't want to set a starting blend color it will just "assume" we want to start at a full alpha of 255
then we check if %blend is equal to the string (text) "current"
else if (%blend $= "current")(this one I didn't warn you about ;)
if its true we then check if its empty again
if(%this.blend $= "")
{
%this.blend = 255;
}now t his may be confusing at first... we check for a string called "current"... if we happened to pass "current" as the %blend then it checks if its empty again, but doese nothing else... note if %blend is equal to "current" then %blend isn't set to anything... this gives us the option to pass "current" and then this function will take whatever we left the blend at previously (as you can imagine this can add a lot of functionality, that way we don't have to guess what our last fade ended at... extra check to see if its empty is just a fail safe, that way if we hadn't already set the objects ".blend" it will still work and assume we want to start at full alpha...
finally we get to this (if the previous options didn't return true)
} else
{
%this.blend = %blend;
}this will set the .blend to the %blend we passed in...
ok a couple final lines to finish up this revised function
%this.schedule(50,fadeOut, %speed); }
we need to schedule the fadeOut... (note we haven't done anything with %speed yet, we simple pass it... that will be handled in the next function)...
so your entire startFadeOu klik
function fxSceneObject2D::startFadeOut(%this, %speed, %blend)
{
if(!%this.fadingOut)
{
%this.fadingOut = true;
if(%blend $= "")
{
%this.blend = 255;
} else if (%blend $= "current")
{
if(%this.blend $= "")
{
%this.blend = 255;
}
} else
{
%this.blend = %blend;
}
%this.schedule(50,fadeOut, %speed);
}
}ok now lets modify the fadeOut function... this time I'll give you the new fu nction and I'll go over each part after
here it is
function fxSceneObject2D::fadeOut(%this, %speed)
{
if(%this.fadingOut)
{
%this.blend -= %speed;
if(%this.blend < 0)
{
%this.fadingOut = false;
%this.onFadeOutEnd();
} else
{
%this.setBlendColour("255 255 255" SPC %this.blend);
%this.schedule(50,fadeOut, %speed);
}
}
}first we check for the
if(%this.fadingOut)that way the processing only gets done if its still fading out
then we have
%this.blend -= %speed;
this is where the %speed comes in handy.. instead of just having it decrease by "2"... we can pass it a number when we call the startFadeOut function, that way we can control the speed
the rest is the same besides two lines...
first if the blend is less than 0 (if its finished)
we call
%this.onFadeOutEnd();
this is a "callback"... this may help you understand what callbacks are... (except instead of being called from the C++ side its being called from script)...
this way we can have some sort of event handled when it finishes...
the other different line is
%this.schedule(50,fadeOut, %speed);
we added the %speed... that way it keeps passing the %speed we originally set in startFadeOut...
ok now theres a new function I'll have you add a very simple one
function fxSceneObject2D::stopFadeOut(%this)
{
%this.fadingOut = false;
}with this function we can call "$obj1.stopFadeOut();" and it will stop the fade on the spot :)
ok...
now you should have these three new functions that replace your old fading out ones
function fxSceneObject2D::startFadeOut(%this, %speed, %blend)
{
if(!%this.fadingOut)
{
%this.fadingOut = true;
if(%blend $= "")
{
%this.blend = 255;
} else if (%blend $= "current")
{
if(%this.blend $= "")
{
%this.blend = 255;
}
} else
{
%this.blend = %blend;
}
%this.schedule(50,fadeOut, %speed);
}
}
function fxSceneObject2D::fadeOut(%this, %speed)
{
if(%this.fadingOut)
{
%this.blend -= %speed;
if(%this.blend < 0)
{
%this.fadingOut = false;
%this.onFadeOutEnd();
} else
{
%this.setBlendColour("255 255 255" SPC %this.blend);
%this.schedule(50,fadeOut, %speed);
}
}
}
function fxSceneObject2D::stopFadeOut(%this)
{
%this.fadingOut = false;
}now you can either copy and paste them over your fading in functions and change the approprate names, but I'll give you the revised fadingIn functions (notice the simple changes to change from fadingOut to fadingIn)
function fxSceneObject2D::startFadeIn(%this, %speed, %blend)
{
if(!%this.fadingIn)
{
echo("start fade");
%this.fadingIn = true;
if(%blend $= "")
{
%this.blend = 0;
} else if (%blend $= "current")
{
if(%this.blend $= "")
{
%this.blend = 0;
}
} else
{
%this.blend = %blend;
}
%this.schedule(50,fadeIn, %speed);
}
}
function fxSceneObject2D::fadeIn(%this, %speed)
{
if(%this.fadingIn)
{
%this.blend += %speed;
if(%this.blend > 255)
{
%this.fadingIn = false;
%this.onFadeInEnd();
} else
{
%this.setBlendColour("255 255 255" SPC %this.blend);
%this.schedule(50,fadeIn, %speed);
}
}
}
function fxSceneObject2D::stopFadeIn(%this)
{
%this.fadingIn = false;
}ok now lets save things and fire up T2D
bring up the console and type
$obj1.startFadeOut(0.5);
now watch the box slowly fade away... now before it completely is faded run this command in the console
$obj1.stopFadeOut();
now the box should stop fading out and stay at the alpha stopped... heres where that "current" trick comes in handy, run this command in the console
$obj1.startFadeIn(0.5, "current");
now the box should start where you left off and slowly fade back in :)
if your doesn't work compare your fading.cs to this
function fxSceneObject2D::startFadeOut(%this, %speed, %blend)
{
if(!%this.fadingOut)
{
%this.fadingOut = true;
if(%blend $= "")
{
%this.blend = 255;
} else if (%blend $= "current")
{
if(%this.blend $= "")
{
%this.blend = 255;
}
} else
{
%this.blend = %blend;
}
%this.schedule(50,fadeOut, %speed);
}
}
function fxSceneObject2D::fadeOut(%this, %speed)
{
if(%this.fadingOut)
{
%this.blend -= %speed;
if(%this.blend < 0)
{
%this.fadingOut = false;
%this.onFadeOutEnd();
} else
{
%this.setBlendColour("255 255 255" SPC %this.blend);
%this.schedule(50,fadeOut, %speed);
}
}
}
function fxSceneObject2D::stopFadeOut(%this)
{
%this.fadingOut = false;
}
function fxSceneObject2D::startFadeIn(%this, %speed, %blend)
{
if(!%this.fadingIn)
{
echo("start fade");
%this.fadingIn = true;
if(%blend $= "")
{
%this.blend = 0;
} else if (%blend $= "current")
{
if(%this.blend $= "")
{
%this.blend = 0;
}
} else
{
%this.blend = %blend;
}
%this.schedule(50,fadeIn, %speed);
}
}
function fxSceneObject2D::fadeIn(%this, %speed)
{
if(%this.fadingIn)
{
%this.blend += %speed;
if(%this.blend > 255)
{
%this.fadingIn = false;
%this.onFadeInEnd();
} else
{
%this.setBlendColour("255 255 255" SPC %this.blend);
%this.schedule(50,fadeIn, %speed);
}
}
}
function fxSceneObject2D::stopFadeIn(%this)
{
%this.fadingIn = false;
}
function testFade()
{
$obj1 = new fxStaticSprite2d() {sceneGraph = t2dSceneGraph;};
$obj1.setImageMap(tileMapImageMap);
$obj1.setPosition("0 0");
$obj1.setSize("5 5");
}these other variations will all work
$obj1.startFadeOut(3);
$obj1.startFadeOut(0.5, 155);
you don't have to specify a blend color to start at, just a speed to fade at...
well that concludes this tutorial...
hopefully you learned a few things, like extending fxSceneObject2D in script, using schedules, and understanding the use of "callbacks"... plus you now have a nifty little fade in and out function :)
-Matthew "King Tut(orial) BoB" Langley
About the author
I Manage Tool Development for Torque at InstantAction
#2
04/20/2005 (6:45 am)
Thanks King Tut! I will implement this to fade out my Rank Window when the player clicks the "commit" button. I was wondering, what kind of stuff would you put in the onFadeOutEnd event?
#3
but it doesn't like that.
04/20/2005 (7:02 am)
Actually, an example of onFadeOutEnd would be useful since I can't get it to work. I'm trying to do this:function $RankWin::onFadeOutEnd()
{
ClearRanks();
$RankWin.safeDelete();
}but it doesn't like that.
#4
04/20/2005 (8:15 am)
function fxSceneObject2D::onFadeOutEnd(%this)
{
if(%this == $RankWin)
{
ClearRanks();
%this.safeDelete();
}
}
#5
04/20/2005 (8:16 am)
my original use for the onEnd was for using it to fade out a gui peice py peice ... so it would incriment a value and run the function again that fades out another peice of the gui :)
#6
For all the noobs like me out there, I cleaned up my logic and made it more streamlined and object oriented by doing this:
04/20/2005 (10:42 am)
Thanks again, King Tut!For all the noobs like me out there, I cleaned up my logic and made it more streamlined and object oriented by doing this:
function fxSceneObject2D::onFadeOutEnd(%this)
{
if(%this.KillOnFadeEnd)
{
%this.safeDelete();
}
}
#7
04/20/2005 (11:01 am)
very cool... in fact originally me and Chris were talking about adding passable parameters to the startFadeIn/Out functions, like kill, etc... so you already put in your own method like this :)
#8
(going to tag all my tutorials with this so its easier to find them :)
04/20/2005 (11:02 am)
For more tutorials and resources(going to tag all my tutorials with this so its easier to find them :)
#9
04/20/2005 (11:46 am)
Excellent
#10
09/09/2005 (9:28 am)
You can now get this tutorial along with 9 others in a T2D "Tutorial Pack"... in this pack each tutorial is an external html file so you can use them offline :)
Torque Owner Charlie Malbaurn