- Joined
- Oct 14, 2019
- Messages
- 119
- Reaction score
- 97
- First Language
- English
- Primarily Uses
- RMVXA
Tutorial topic: How to show credits during gameplay.
Brief description: Have you ever watched a movie and seen how the credits pop up as the opening action scene plays out? People are talking, fighting, doing all the movie things, but the credits appear and vanish along the way without disturbing the flow of action. It's become such a common thing that movie critics actually criticize films that don't do their opening credits in this way. This method will allow you to have that in your game without scripts or even a lot of special skill!
Requirements: Obviously, you will need RPGMaker VX Ace (this should also work with everything but MZ as it only requires that you have access to the built in battle animations tab). Beyond that, you will need a simple photo editing software like Photoshop. I use GIMP because it's free and relatively simple to use. You can technically do this with paint, but if you do, you will need to use another service to make the background transparent. Before I discovered GIMP, I used lunapic as it's free and all online. This is inferior to GIMP in my opinion, but it has the advantage of not requiring the download of a frankly massive program.
TL;DR: You need an RPGMaker that has the animation tab (so any except for MZ) and you need a way to edit pictures while keeping them transparent.
Step 1; The Credit:
To begin, we need to take a random base from the animations folder of the RTP. We're not actually going to change it, but rather, we're going to use it as a template. I used Thunder4 because it's one of the larger bases with room for 25 animation panels. I advise making a copy and pasting it into another folder, then working on the copy so that you don't accidentally overwrite the base picture.
Once you have it loaded up in your editor, erase everything so that the only thing left is the transparent background, As shown here:
Choose a small corner of the template then, and insert the text you want! Don't worry about it being more than one animation panel. It probably will be larger than one, depending on how much you have to type. For my test case, I used a simple "A Game By Aslanemperor"
Save, export, or whatever you need to do. Take any extra steps you may need to make the image transparent. This is standard with GIMP, and I hear that Photoshop makes this pretty easy as well. Once this is done, simply import this into your game using the built in Resource manager in RPGMaker.
Step Two; The Animation:
This part can get a little time consuming, but is still VERY simple. My example took up two panels worth of room on the template (out of a max of 25). As such, I took those two panels, and set them side by side over where I wanted them to go. The animation system makes this very easy as everything is designed to lock neatly into place, so as long as you pay attention, it will be a simple matter to make everything look good. Now we figure how long you want your credit to show itself, and where you want it on the screen. For this example, I placed mine directly in the center.
When you're putting together your frames, keep timing in mind. 1 second is equal to roughly 30 animation frames. Because of this, I set up the fade in to last through the first 26 frames, then had it hold solid for another 45, followed by a more rapid 15 frame fade out.
I did this by right clicking each individual panel and adjusting the "Opacity" number. Because I wanted this to be close to a full second of fade in, I added 10 points to the value on every frame, making it go fully Opaque at frame 26, with a value of 255. This is why it can be a bit time consuming. Once you know what you're doing, however, it doesn't take long to put these together. It took me just over 5 minutes to put everything for this animation together.
You'll notice that there's a box for the animation beyond just the scope of the target. That box represents your screen. Depending on where you want this to show up on the screen, that's where you'll place your animation box. For instance, if you align it with the top left of that box, it will show up on the top left corner of the screen.
Step Three; Implementation:
So, you've made your "Credits" animation, and you're ready to place it. The way I did it, was to have an event along the path the player has to follow, and when they walk over that area, it triggers the credit animation. I set the animation to be centered on the player. This way, it keeps on showing in the area I want as he walks:
Don't forget when making your event that you want to set it to end after the player has walked past it. Also, DO NOT click for it to wait if you want your character to continue doing things while this shows.
Conclusion:
So, I found this entire process to be extremely easy, and can be done with things that anyone has access to (you can even manage this with just paint and a web browser). It's a unique way to put your credits into your game without a clunky opening video (which usually requires some sort of video editing software). If you have any questions, or you know an easier way to pull this off, I'm happy to hear it. I hope this helps someone!
Brief description: Have you ever watched a movie and seen how the credits pop up as the opening action scene plays out? People are talking, fighting, doing all the movie things, but the credits appear and vanish along the way without disturbing the flow of action. It's become such a common thing that movie critics actually criticize films that don't do their opening credits in this way. This method will allow you to have that in your game without scripts or even a lot of special skill!
Requirements: Obviously, you will need RPGMaker VX Ace (this should also work with everything but MZ as it only requires that you have access to the built in battle animations tab). Beyond that, you will need a simple photo editing software like Photoshop. I use GIMP because it's free and relatively simple to use. You can technically do this with paint, but if you do, you will need to use another service to make the background transparent. Before I discovered GIMP, I used lunapic as it's free and all online. This is inferior to GIMP in my opinion, but it has the advantage of not requiring the download of a frankly massive program.
TL;DR: You need an RPGMaker that has the animation tab (so any except for MZ) and you need a way to edit pictures while keeping them transparent.
Step 1; The Credit:
To begin, we need to take a random base from the animations folder of the RTP. We're not actually going to change it, but rather, we're going to use it as a template. I used Thunder4 because it's one of the larger bases with room for 25 animation panels. I advise making a copy and pasting it into another folder, then working on the copy so that you don't accidentally overwrite the base picture.
Once you have it loaded up in your editor, erase everything so that the only thing left is the transparent background, As shown here:
Choose a small corner of the template then, and insert the text you want! Don't worry about it being more than one animation panel. It probably will be larger than one, depending on how much you have to type. For my test case, I used a simple "A Game By Aslanemperor"
Save, export, or whatever you need to do. Take any extra steps you may need to make the image transparent. This is standard with GIMP, and I hear that Photoshop makes this pretty easy as well. Once this is done, simply import this into your game using the built in Resource manager in RPGMaker.
Step Two; The Animation:
This part can get a little time consuming, but is still VERY simple. My example took up two panels worth of room on the template (out of a max of 25). As such, I took those two panels, and set them side by side over where I wanted them to go. The animation system makes this very easy as everything is designed to lock neatly into place, so as long as you pay attention, it will be a simple matter to make everything look good. Now we figure how long you want your credit to show itself, and where you want it on the screen. For this example, I placed mine directly in the center.
When you're putting together your frames, keep timing in mind. 1 second is equal to roughly 30 animation frames. Because of this, I set up the fade in to last through the first 26 frames, then had it hold solid for another 45, followed by a more rapid 15 frame fade out.
I did this by right clicking each individual panel and adjusting the "Opacity" number. Because I wanted this to be close to a full second of fade in, I added 10 points to the value on every frame, making it go fully Opaque at frame 26, with a value of 255. This is why it can be a bit time consuming. Once you know what you're doing, however, it doesn't take long to put these together. It took me just over 5 minutes to put everything for this animation together.
You'll notice that there's a box for the animation beyond just the scope of the target. That box represents your screen. Depending on where you want this to show up on the screen, that's where you'll place your animation box. For instance, if you align it with the top left of that box, it will show up on the top left corner of the screen.
Step Three; Implementation:
So, you've made your "Credits" animation, and you're ready to place it. The way I did it, was to have an event along the path the player has to follow, and when they walk over that area, it triggers the credit animation. I set the animation to be centered on the player. This way, it keeps on showing in the area I want as he walks:
Don't forget when making your event that you want to set it to end after the player has walked past it. Also, DO NOT click for it to wait if you want your character to continue doing things while this shows.
Conclusion:
So, I found this entire process to be extremely easy, and can be done with things that anyone has access to (you can even manage this with just paint and a web browser). It's a unique way to put your credits into your game without a clunky opening video (which usually requires some sort of video editing software). If you have any questions, or you know an easier way to pull this off, I'm happy to hear it. I hope this helps someone!
Last edited:
