If you want to get the most out of RPG Maker, learn Ruby. In the meantime, lots of talented scripters have done the work for you. Every Friday, The Iron Shoe features a fun script and goes into detail about how to use it. It also covers a little bit of Ruby each time so you can make even more out of the script.
Heyo! Today we’re going to talk about modifying Mog’s Animated Title Screen* script to allow us to play something approaching a video in the background of our title screen! I did this for Vidar, and am pretty happy with the results!
The first, biggest step is to actually make your animation and export it as individual .png’s for each frame. Yeah, this can be a lot of images, so it’s recommended that you make something short and loopable. The more elaborate your video, the more files you’re going to have to package with your game (although the process for adding all of the images to the title script won’t take you longer).
Your images need to be in the “Graphics/Titles1” folder of your game. Make sure they’re all there, and easily numbered for you so this doesn’t become a hellish ordeal.
Adobe After Effects
I use Adobe After Effects to generate my animations. This blog is not a tutorial on how to use AAE – there are people who know this software WAY better than I do. I’ll only note that Adobe has a tutorial on how to export your animation to a series of .pngs.
Rotate Through The Images
Mog’s script is in Portuguese, but no worries, Ruby is Ruby and we can figure out our way through it. The first thing we want to do is load all of our pictures. Look for something that says RANDOM_PICTURES = [. It’ll look like this:
RANDOM_PICTURES is an array (indicated by the fact that everything is in ) and right now contains only one file, “Title0.” We need to delete that example (along with the commented out ones), and add our own files, in order. If you’ve got a 4 second animation to play, this can already be over 100 frames, so let’s not type them one by one. Instead, let’s do a few for-loops. Using “RANDOM_PICTURES.push()”, we can add things in order to our array. So…
for i in (0..9) RANDOM_PICTURES.push("Title_Screen_0000" + i.to_s) end
Would add “Title_Screen_00000” through “Title_Screen_00009” to your list. After that, if you called
for i in (10..99) RANDOM_PICTURES.push("Title_Screen_000" + i.to_s) end
You’d get 10 through 99. We did it in two separate loops so we could get rid of one of the auto-generated leading 0s. Are there better ways to do this? Sure, but this way is fast, hacky, and gets you up and running quickly.
Once you’ve established all the loops you need, put them right after your “RANDOM_PICTURES” array is closed. Something like this:
If you try it out now, you’ll notice that there is a long delay between each frame, and that there’s a fade between each transition. We need to disable each in turn.
First, let’s get rid of the delay. Under our for loops, you’ll see a variable called “RANDOM_PICTURES_DURATION” but note that you can only set the seconds. Even 1 second is too long between pictures! We want something like four frames. To override this “seconds” restriction, scroll all the way down until you see the section captioned “Execute Random Picture.” It’ll look like this:
What we’re particularly concerned about is the line @rand_title_duration. What all of the garbage after that does is say (in part), if our random pictures duration is less than 60 (frames), use 60 frames. This means that we’re trapped at a minimum of 1 second. So we’re going to replace that whole math stuff after the equals with just “RANDOM_PICTURES_DURATION”
Now if we go back up to our variable right after our for loops, the number we set there will be the number of frames between pictures, not seconds. Awesome! Let’s set it to 5 for right now.
The second problem we have is this fade between everything. It makes sense when you’re slowly scrolling through scenes from a long JRPG, using the title screen to preview what’s to come. It doesn’t make any sense in our context. Scroll up just a little from the section we were editing, and look for “Update Background.” In that function you’ll see a line that reads:
else @sprite1.opacity += 5
This is the part where it fades in our image; the idea is that every frame, it increases the opacity of the image by 5. But we want that to just be instantaneous and fully opaque. So change that second line to :
@sprite1.opacity = 255
Note that not only did I change it from 5 to 255, I took out the +.
And we’re done! Just remember, if you ultimately decide you want to change your animation:
- You won’t need to eliminate the delay and fade again
- You will need to re-export the animation frame-by-frame
- You will probably need to adjust your for loops at the top, assuming the animation length has changed even a tiny bit