Custom Transitions/Screen Wipe

Neon Black

The Classy Prostitute
Member
Joined
Mar 17, 2012
Messages
1,149
Reaction score
369
First Language
Sarcasm
Primarily Uses
Makers: XP, VX, Ace

Difficulty: Normal (2 / 5)

Required Resources: (none)

Foreward:

If you've ever used RPG Maker 2000 or 2003, you should remember a useful little feature, the map transitions.  Events had commands that allow you to easily modify or use these to make your events and transitions more dynamic.  You could quickly wipe the screen with a transition then continue your event.  It was in general, a very useful tool.



If you're using RPG Maker XP, VX, or Ace, you've already noticed that this feature no longer exists.  However, there is a fairly easy way to mimic this effect using a few different commands and script calls.  This tutorial will teach you how to use these during a cutscene and then how to set them up for a map transfer.

Difficulty:

This tutorial requires a rudimentary knowledge of how events function and flow.  Other than this, the methods shown here are relatively simple.  For this reason I feel this tutorial is somewhere around Normal level.  Notice that while the events shown in this tutorial are from Ace, the same basic skills may apply to other makers, just with slightly different names.

Preparing:

First of all, we need to prepare our custom transition.  This means getting the required files for the event.  Transitions use a black and white image to determine how the images are wiped.  XP had 20 of these, but VX and Ace only have one.  You can occasionally find some of these graphics listed as Battle Transitions on different websites.  Alternatively, you can make your own.  If you do, remember that the image wipes from the black sections first to the white sections last.

Once you have your image, import it to the Graphics/System folder (or Graphics/Transitions in XP).  Go to the resource manager (or press F10), click the "Graphics/System" option on the left, and press import.  If the dialogue pops up asking you to select transparent and translucent colours, just press the "clear" button since we don't need those for this type of graphic.



Performing a Basic Screen Wipe

The first thing we'll learn to do is perform a screen wipe during a cutscene.  This method will allow you to fade the screen to black using a special transition, but still allow events to continue.  So let's set up the cutscene.

Set up your cutscene however you like.  Maybe it's someone telling a story, maybe it's someone remembering something.  It doesn't really matter.  Create the cutscene up to where you want the screen wipe to occur.  We now have 4 steps to produce the screen wipe:

  1. Set up a script call to freeze the screen with the following function:

    Graphics.freeze
    This command stops graphics from being updated and allows us to do almost whatever we want in the following bits of event without the screen being updated.  This leads us to our next command.

    Note: Since this script call will occur with any leftovers currently on screen, such as text boxes, it may be worth adding a wait command right before it.  10 frames should do the trick if you're waiting for a text box.
     
  2. Set up a screen tint and tint the screen to black.  This is pretty basic and you may have already been using it for a simple fade transition.  There is one slight difference in this case.  Since we froze the screen, the screen will not actually fade.  In fact, if you run the event as is, the game will seem to have frozen or crashed.  We want this to occur so far.  Since we're not able to see the actual fade, set the duration to 1 frame, so it performs the next step almost instantly.
     
  3. Set up a script call for the transition image.  Due to the limit of size in the script call box in Ace, we're going to do this in two lines, both of which I will explain here.

    This first line is used to find the graphic.  For this demonstration, I will use the BattleStart graphic in Ace and VX as well as a basic transition from XP.  The first line of the script call should look like one of the following:

    Code:
    image = "Graphics/System/BattleStart"
    Code:
    image = "Graphics/Transitions/020-Flat01"
    The first script call is for VX and Ace, the second is for XP.  You can replace "BattleStart" or "020-Flat01" with the name of your transition image.  All this step does is save the name of the transition image into a variable for later use.
     
  4. Perform the actual transition.  This is done with another line of code which can be place in the same script box under the last one.  The line is as follows:

    Code:
    Graphics.transition(30, image)
    This script call tells the game to perform a transition from a frozen screen to the current screen.  Since our screen is still frozen on a normal screen, the transition will occur and fade the screen to black using the selected image.  We can then continue our cutscene like normal, and when we're ready we can tint the screen back to a normal colour.  Also worth mentioning, the "30" in this script call is the number of frames the transition takes.  To cause it to take longer we can increase the number, or to cause it to take a shorter amount of time we can decrease the number.
If you followed the directions, your event should look something like this one:



Performing a Custom Map Transfer

This method is similar to the one we just did a moment ago, but has a few additional steps.  To set it up, create a new event you want to use for the transfer.  We then have just a few steps to go.

  1. Repeat steps 1-4 from above.  There's nothing else to this part.
     
  2. Set up the map transfer with no default fade.  In the bottom right of the transfer player dialogue box, there is an option that says "Fade" or "Fading".  In XP set this to "no", and in VX/Ace set this to "none".  This ensures we don't waste any time with the transfer which actually takes 1.25 seconds to perform.  In this case it will just do the transfer and skip right to our next step.
     
  3. Add in a wait command (optional).  As I just mentioned, an actual transition in Ace takes 1.25 seconds, or 75 frames to perform.  This is broken down as 30 frames for the fading out, 15 frames of waiting, and 30 frames of fading in.  This step is completely optional and you can have the transition occur instantly, but it will look a little awkward.  Alternatively, you can perform just about anything else during this step such as changing variables or switches.
     
  4. Repeat the Graphics.freeze step from above.  See step 1 from "Performing a Basic Screen Wipe".
     
  5. Set up a screen tint to the desired colours.  In this case we are fading in rather than fading out, so select the desired tint for the new map.
     
  6. Set up the transition image and perform the transition.  See steps 3 and 4 from "Performing a Basic Screen Wipe".
And that's pretty much all there is to it.  If done properly, your event should look like this one:



Author's disclaimer:

So, it's not the quickest method, but it is a pretty decent method for erasing and redrawing the screen with transitions.  You could also skip a few of the middle steps to perform a transition from one map to another with just a transition and no screen fade.  Really there are quite a few different options.  This also shows how minimal scripting effort is required for certain things.  I'm sure people will think of ways to use this that I never could have imagined, that's why I wanted to share this trick.  As always, enjoy!
 

Archeia

Level 99 Demi-fiend
Developer
Joined
Mar 1, 2012
Messages
14,705
Reaction score
14,529
First Language
Filipino
Primarily Uses
VNM
You have no idea how much I love you for this tutorial. I've been DYING to see this again.
 

Mizuotaku

Villager
Member
Joined
Jan 10, 2013
Messages
93
Reaction score
5
First Language
English
Primarily Uses
Thank you for this Tut I might incorporate this in my game.
 

Users Who Are Viewing This Thread (Users: 0, Guests: 1)

Latest Threads

Latest Profile Posts

Behold! The Sea Doggo.
I am dead tired but at the same time I really wanna write a tutorial x_x
Looked out side and couldn't see the neighbor's house through the snow. That age old Christmas song started going through my head. "It's a lovely day to say the heck at home."
Last year, I planted a bunch of spinach, and one plant wasn't doing well, so I transferred it to a separate pot. All its kin died while it hibernated over winter. Now it thrives. I've named it Prince Spinach.
Scooby Doo on Zombie Island is anime and you cant change my mind.

Forum statistics

Threads
93,371
Messages
911,737
Members
122,864
Latest member
sxkira
Top