OSC3: Fade Animations, made easier
Fade in/out are most of the case a great tool to animate your projects. They provide smooth transition between scenes and objects. However, they can get repetitive to code again and again. In this tutorial, i will bring you another way to code Fade transitions, without those looong boring repeat times and set invisibility.
Understanding the concept
If you are interested in understanding my process to create this new way of fading object, read this section. It is not required (but is interesting) so if you wanna skip this, use the provided table of content to skip to the section Let’s get Hopscotchin’!
One main issue with the popular way to fade in/out is that its too long and boring to code, and makes your code very messy:
Repeat Times (10):
Set Invisibility to (Self) Invisibility as a % + 10
End
It takes a whole three lines in your code dedicated to this, which can be collapsed by my algorithm. You’ll see 
First things first. In order to improve a piece of code, you need to identify the variables and the constant to eventually tweak them into a whole new thing - without modifying the number one function of it, of course. There are:
→ the number of iterations (k) for the animation, or in some sense, the speed of the animation
→ the current iteration index (n), with n=0 for the first iteration of the animation
→ the targeted invisibility (t) of the object
Those are the three parameters we will need to consider in order to create our awesome new simple fading custom ability. In fact, it’s not even three, n is automatically counted by the algorithm, not an input value! And you might be asking, “hey, we haven’t considered the incremental value each frame!” For the sake for simplicity, the increment will be automatically calculated, saving you a little precious time:
→ The increment per frame determined by the equation (t-i_i) \div k, where i_i is the initial invisibility of the object.
Wait, wait! We don’t have a variable to consider/save the initial invisibility of the object! Plus, for the sake of keeping the algorithm clean and fast, we would not like to offload a frame just for saving in a variable the initial invisibility. And for the sake of simplicity, we obviously don’t want to create a custom ability parameter telling the user to put "Invisibility as a % " each time they use our algorithm! So, math in the rescue!
where i_c is the current invisibility of the object.
The above equation calculates the increment per frame! It’s important to point out that that formula is a constant; it always output the same increment per frame. “But why?” you would ask. For the sake of automatization and saving one precious frame, i remind you - see above!
Note: for clarification of what I mean by automatization, just imagine your object is having an unknown initial invisibility and you would like to fade it to a number as random as 60%. You would struggle for one entire minute or more on how to code that, while I’m providing you a fast and clean way to only input the target invisibility without caring about anything else! How quick, efficient, and easy is that?
Therefore, it means that in the code, we will increase the invisibility of the object by that automatically calculated constant, and boom we have successfully invented a new way to fade object. As a reminder, you only need to input the target invisibility and the number of iterations (aka Repeat Times) - nothing else because everything is automatic. Not impressed? See Pros and Cons section.
Enough talking. Now that you understand the math and logic hidden behind my super coder-friendly code snippet, let’s get hopscotchin’!
Let’s get Hopscotchin’!
This is a step by step tutorial on how to get your own automatic fade animation. If you prefer looking inside the code without my written voiceover and explanation, feel free to look at the code in the following project.
Step 1: Setting up the custom ability
First thing first. Create a new custom ability and give it an unique name. Create the Repeat Times and Target parameters variables. Those are the only two things you will care when using this clean algorithm, like i mentioned earlier in Understanding the concept. Give them default values the ones you usually use, for the sake of convenience.
When you’re done, save your brand new custom ability.
Step 2: Placing down 3 blocks of code
Place down a repeat times container with the variable Repeat Times as input. Inside, put down an set invisibility percent block and an increase n by block. In the first block, put an addition operator (+) with inside the second input a (Self) Invisibility as a % orange variable. We will fill the first input in the next and final step. Don’t forget to put 1 inside input of the variable increment block!
You might be wondering why I haven’t declared the local variable n outside the repeat times container. This is because of how Hopscotch works - fortunately, by simply creating a local variable in your code, you have declared the local variable in that scope. Therefore, unlike most coding languages, you do not need to declare the local variable again with a Set Variable to 0, saving you one precious frame. How fun is that? Thank you THT for this awesomeness - and I mean it!
When you’re done, let’s end this with our final step!
Step 3: Adding the magic math equation
As explained earlier in the Understanding the concept section, the slightly complex but magic equation (t-i_c)\div(k-n) will be used to automatically calculate the increment per frame. No more pain bugging your calculator!
Put down a division operator in the remaining and empty spot. In the first input, put Target - (Self) Invisibility as a %, Target as our local variable (parameter of the custom ability) and (Self) Invisibility as a % as the default Hopscotch orange variable. This is equivalent to the (t-i_c) part of our equation. In the second part of it, put Repeat Times - n. Both Repeat Times and n are local variables. It is equivalent to the (k-n) part of our equation.
Congratulations! You have successfully imported in your code a new fade algorithm! If you’d like to learn more about its Pros and Cons, continue reading. If you have trouble setting up the custom ability, let’s debug together over here!
Pros and Cons
note: the notation “usual code” is the classical fade algorithm everybody uses:
Repeat Times (10):
Set Invisibility to (Self) Invisibility as a % + 10
End
| Usual code | My new method | |
|---|---|---|
| Code is universal | No [1] | Yes |
| Code is automatic | No [2] | Yes |
| Code is clean | Kinda | Yes |
| Code can fade both ways | Yes (but imo inconvenient) | Yes |
| Code is fast [3] | Yes | Yes |
Example Project
Voilà ! As you can see, a concept as simple as that can easily be remastered into a brand new one. As always, the code is free to use without credit, although it’s very appreciated - a simple comment block does the job perfectly! Super hyped to see what y’all will craft!!
- Your friendly local train company 