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!

(t-i_c)\div(k-n)

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

@polygons

1. when you donâ€™t know the initial invisibility of the object, you cannot use that algorithm â†©ď¸Ž

2. how do you fade an object from a random invisibility to invisibility 86% with 12 iterations? â†©ď¸Ž

3. if I ask for 50 iterations, does it take 50 iterations to execute? â†©ď¸Ž

12 Likes
rate this tutorial!
• 1
• 2
• 3
• 4
• 5

0 voters

9 Likes

Amazing tutorial! Very detailed, and well-structured. Iâ€™ll definitely rethink the way that I code my fade animations because Iâ€™m one of those that currently use the â€śpopular methodâ€ť.

4 Likes