Controlled Screen Fading In/Out (for pin-point cutscene control)

じ☆ve冰风

Controlled Screen Fading In/Out

by Anyone​

What's this about?
You learn how to do advanced fading in and fading out effects that are absolutely under your control for the perfect cutscene / event design.
This can be done very quickly and effectively.

Description:
Sometimes, when you design cutscenes or event effects, you might find it a bit of a problem to fade out / in the screen in the way you desire. By default, the fading effect takes 24 frames and forces the rest of the event to wait for that duration. That's a bit of a problem if you want a slowly fading screen - or want actions to play as the screen is fading in or out.

Since there's no way to alter them easily, most people instead choose to use screentones - which brings its own set of problems with it. (If you already have used something to change the screentone, reverting to the correct color format can be a bit of a bother.)

This is an example of how to use common events and some easy javascript in script commands to gain professional control over the fade command.

Requirements:
You must have Yanfly's Plugin Commands - Switches & Variables Access installed AND active:
Plugin Commands - Switches & Variables Access (YEP) - Yanfly.moe Wiki



                                        www.yanfly.moe                               




While this uses javascript, you do not require any actual javascript knowledge.

Concept:
The idea is to have two common events that you can use like the original fade in / fade out command, except that they give you absolute control over the fading effect and the wait time by allowing you to manipulate how the fading effect should diverge from the default on the fly!

For this purpose we'll create:

• 2 Common Events we can use like the Fade In and Fade Out commands
  
• 1 Variable that gives us control over the Fadetime
  
• Switch that allows us to control whether the event is paused or not.
  

Tutorial:
Spoiler: Tutorial with Pictures

Step 0: (Yanfly's plugin)
Get the plugin above from Yanfly, put it into the js\plugins folder of your RPG maker game and go into the RPG Maker Plugin Manager where you add the plugin and set it to ON.

Step 1: (Setting up the variable)
Pick a variable slot, give it a name (I suggest "FadeTime"), and write down the number of the slot. (For example 1 for the first slot)

Step 2: (Setting up the switch)
Pick a switch slot, give it a name (I used "[Reverse Fade Wait]" but anything that helps orient you works).

Step 3: (Setting up the 2 Common events)
Go to the Database -> Common events tab and pick two empty Common Event Slot, the higher up in the list the better. (Easier to navigate to) I picked "===Fade In===" and "===Fade Out==="

Step 4: (Fading In)
In the Fade in common event, do the following:
[/url]
First we check if the variable FadeTime is smaller or equal 0 (and thus does not work).
If it is non-functional (which is the default) it will instead set the FadeTime to 90 (you can change this).
This is the default number of frames the fading effect will take.
This also means that if the FadeTime variable is greater than 0, this functional number of frames will be used instead of the default version.

The next one is a conditional if check for the switch. This checks whether the fading should use the default wait flag (fading in does not force the event to wait for it, fading out does) or if the reverse should apply.

Within this if-condition check, we have two pieces of script code, one for the instance in which [Reverse Fade Wait] is on, and one for the else condition - which is the default.

The first entry is this: (When [Reverse Fade Wait] is true)
                JavaScript:       
if (!$gameMessage.isBusy()) {        $gameScreen.startFadeIn($gameVariables.value(1));        this.wait($gameVariables.value(1));        this._index++;    }

This is basically the same code as the one that gets called every time you use the basic "Fade In" effect in the rpg maker event menu.
There's one difference though: instead of the actual fade time being present, this is replaced with $gameVariables.value(1).
This means that instead of the default 24 frames, it will use the number of frames in variable 1.
Change the 1 in $gameVariables.value(1) in every instance to the ID of the variable you picked earlier.
There are two instances here, both need to be changed.

Now copy the above code that you already changed and duplicate it into the "else" part.
Delete the "this.wait($gameVariables.value(1));" line entirely. (This ensures that, by default, the fading won't force a wait)

Almost done!

To finish off, set the FadeTime variable to zero, and turn the [Reverse Fade Time] switch off. This ensures that they will be reset after use, and will no longer change the default wait time.

Step 5: (Fading Out)
To make this fast:
Copy everything from the Fade In common event and put it into the fade out common event.

Next, simply put: exchange the position of the two script code pieces with each other.
Cut out the first javascript part in the Fade Out common event of the true condition, paste it in the else case, and cut out the part of the javascript that was in the else case out and put it into the case of when [Reverse Fade Wait] is true.

What you get is this:
[url=https://forums.rpgmakerweb.com/attachments/fadingout-png.133816/]
As you can see, identical, except that the two script pieces are exchanged with each other.

Final step: (Edit the code in both windows of the Fade Out common event.)
Since we used the code from the Fade In event, the command is not entirely correct.
Each of the two javascript commands as you can see in the picture above doesn't use
$gameScreen.startFadeIn($gameVariables.value(1));
but instead
$gameScreen.startFadeOut($gameVariables.value(1));

In both scripts, you'll need to replace the "In" in "FadeIn" with "Out". Capitalization matters.
That's all to make the fade in event work as fade out event.

You can use the pictures as orientation for how to script the common events, or copy the entire common event from the test project linked down below.

Now everything is finished!

To use it in an event, use the Common event as if it were a "default fade" in or "fade out" command.

The useage is identical, but the common event one will give you 90 (or what you set it to) frames duration instead of a fixed 24.
[/url][url=https://forums.rpgmakerweb.com/attachments/vanilla-fading-png.133820/]

If you want to manually control the fade time or whether the event waits, simply set the FadeTime variable to the desired duration before calling the common event or setting the [Reverse Fade Time] switch to on. (Both reset to default after the common event is called automatically)

Example of using both:
[/url]

And that's how easy it is.

Finally, if you want to see what it looks like in action or need some help figuring things out, check out the example project.

Example Project:
[url=https://workupload.com/file/7R38Mq6s]workupload - Are you a human?



本贴来自国际rpgmaker官方论坛作者:Anyone处,因国际论坛即将永久关站,为了存档多年珍贵资料,署名转载到本论坛存档,由于官方帖子为英文原帖，需要中文翻译请点击论坛顶部切换语言为中文就可以将帖子翻译成中文浏览,方便大家随时查看,原文地址：https://forums.rpgmakerweb.com/threads/controlled-screen-fading-in-out-for-pin-point-cutscene-control.118116/