Tutorial 4: Old-School Cinematics
Originally published at How I Roll. Please leave any comments there.
In this tutorial, I will present how to create a simple, old-school cinematic setup like in classic Final Fantasy games. This will lead into the next tutorial on combat.
Tutorial Time: 20 minutes.
Experience Level: Beginner
Scripting Experience: Not applicable
Source files: Included with RPG Maker XP
Now that we have our player on an empty map, we can fill it in and give them a locale to start their adventure! First of all, we will create the docks area. Then we will create a couple of thugs and provide simple old-school cinematics to give the beginning of our adventure a bit of flavor. This flavor, of course, will end in a brawl on the docks. Wharf rats are hostile, you know.
Let’s begin by setting up the map. Like before, I will show you the entire map in its three layers. This time, however, I will not walk you through the creation of it. Below are the three layers. Try to recreate the map. I have also included the map file in case you really need it, but you should be familiar enough with the tools to create a map from the reference pictures.
Layer 1
Layer 2
Layer 3
Completed Map
Now that we have a map, let’s change where the player is transported to (otherwise they will be in the water!). Click on the Oracle map and double-click the Oracle event. At the bottom where we transported the player, right-click the Transfer Player event and select edit. Click on the drop-down box and click on the left-hand dock by the pier tie-down.
Go back to the Docks map. Now we are going to create two wharf-rat pirate characters who are going to taunt the player and (in the next tutorial) attack. Go to the Events layer. Double-click on the left-most square below the steps at the top of the map. Change the Event Name to “Wharf Rat 1?. Change the graphic to “145-Prisoner01?. Now create another event just below him and name it “Wharf Rat 2?. Change the graphic to 103-Civilian03. Select the picture that has it facing up.
Now that we have our two non-player characters talking to each other, let’s make them do something when the player gets near them. Create an Event at 017, 005 and call it “Cinema Trigger”. The basic flow of this event will go as follows:
The player will move up and trigger the event. Then the Wharf Rats will call the player over to them. Then they will circle the player, berating them before attacking. The different arrows show the basic movements of the player and the Wharf Rats.
First, we will create three text events to show off their dialogue skills.
Roger: I’m so hungry, I could eat a horse!
Steve: I’m so hungry I could eat a rat!
Roger & Steve: Too bad we don’t have any money!
Now that we have the basis of conversation, let’s make them notice the player. It took some time to get the timing to where I wanted it. Once you have finished the tutorial, play with the various values (especially the waits). When doing it yourself, you will need to sit down and run through the event several times just to make sure that it flows the way you want it to.
1. Noticing the Player
During this step, the wharf-rats will turn to the player, get excited, and jump up and down in excitement. They will then call out to the player, telling them to come over to them.
On Page 2 of the event list, select “Show Animation…” Change the Character drop-down to “Wharf-Rat 1?. Now select “098: EX Exclamation”.
This will cause an exclamation point to pop up above his head.
Next, we will have the Wharf Rat turn to the player and jump in place. On Page 2, select “Set Move Route…” A screen with a large number of options will come up. We will use this to set the Wharf Rat’s actions in this section.
Click the “Turn Right” button, then click the “Wait…” button. Change the wait time to 4 frames. Next, click the “Jump” button. Keep the values for X and Y at 0 (other wise the character will jump around the map the number of spaces along the X and Y axis). Click OK. Now, if you’ve noticed, a lot of old-school RPG’s will repeat an action to make it seem more exciting. We are going to do the same thing here. Right-click the “Show Animation: [Wharf Rat 1], [EM Exclamation]” and copy it. Paste it below the Set Move Route event you just created. Now, right-click the Set Move Route event and copy it. Paste it below the last exclamation event. Right-click the event we just pasted and select edit.
We are going to change the event a bit so that it does not seem to be the exact same as it was previously. Click on the Turn Right event and click the Jump button. Keep the values at 0 again. Now, delete the Turn Right event (they are already facing right!). Right-click the Wait event and change it to 2 frames. Click OK.
Now it is time to work on Wharf Rat 2. Luckily, most of our work is done for us. Right-click Wharf Rat 1’s first “Set Move Route…” event and copy it. Paste it at the end of the list. Right-click on it and select edit. Under the drop-down with Wharf Rat 1’s name, select Wharf Rat 2. Change the “Wait…” event from 4 frames to 2 and delete the “Jump” event. Click OK. Right-click and copy Wharf Rat 1’s Exclamation animation and copy it at the end. Edit it and change the Character drop-down to Wharf Rat 2. Copy Wharf Rat 1’s second “Set Move Route…” event and paste it at the end. Edit it and change it from Wharf Rat 1 to Wharf Rat 2. Next, change the “Wait” time to 4 frames. Click OK. Add a text event which reads:
Roger: HEY YOU!
The full script for this step:
2. Moving the Player
During this step, we will move the confused player over to the wharf-rats. Now that you are familiar with the interface, it should be a lot simpler to get around. First, we will have the player notice the Wharf Rats yelling at them. Then, we will have the player automatically move towards them, but be puzzled.
First, copy the Wharf Rat exclamation animation and change it to the Player by editing it. Next, click “Set Move Route…” and have the player wait 4 frames, then move up and turn left. Click OK. Add two text elements so that the Wharf Rats can tell the player to come on over!
Steve: What are you doin’ on our docks?
Roger: Yeah! Come here!
Create a “Show Animation…” event and change it to “097: EM Question” to display a question mark above the player’s head. Next, “Wait…” the default 20 frames and create a new “Set Move Route…” event. Move left 8 times (this should put you right next to the Wharf Rats).
3. Berating the Player
During this step, we will have the wharf-rats revolve around the player, berating their character. I will break it down into simple steps to show what I am accomplishing with each piece of this event script since it is longer than the others ones we have worked with previously.
First of all, we will have to wait a couple of frames for the player to get into position (otherwise the Wharf Rat will be there before the player, which just looks odd). Add a “Set Move Route…” event for Wharf Rat 1 and have him wait 32 frames. Next, have him Move Right, Wait 4 frames, and then Turn Down. Click OK. Add a Text event.
Roger: You’ve gotta lotta nerve, coming here without being asked!
Create a “Set Move Route…” event for Wharf Rat 2. Have him Turn Down, Move Down, Turn Right, Move Right, Wait 4 frames, and then Turn Up. Click OK and add a new text event.
Steve: Yeah! What do you think we should do with him, Roger?
Now, we will have the player realize that they are in a hostile situation. We will have the player look back and forth between the thugs. Start a new “Set Move Route…” event for the Player. Have them Turn Up, Wait 8 frames, Turn 180, Wait 8 frames, then Turn 180. This will get them turning back and forth between the Wharf Rats.
Now we are going to have the Wharf Rats move counter-clockwise around the player to size them up. Create a new “Set Move Route…” for Wharf Rat 1. Have him Turn Left, Move Left, Turn Down, Move Down, Move Down, Turn Right, Move Right, and Turn Up. Click OK. Create a new “Set Move Route…” for Wharf Rat 2 and have him Turn Right, Move Right, Turn Up, Move Up, Move Up, Turn Left, Move Left, and Turn Down. Basically, they will be circling the main character. Click OK.
The complete script for this step is listed below.
4. Attacking the Player
We will use an animation to signal their attack during this step. It is a short and simple step since we will be creating the battle sequence in the next tutorial. First, let’s wait a couple of frames. Select Wait from the main event list on page 1 and accept the default of 20 frames. Next add some text from the Oracle.
Oracle: Uh-Oh! I was hoping that nothing like this
would happen so soon! Get ready! I think they’re
going to jump you!
Finally, on Page 2 of the event list, select “Show Animation…” and make sure that Player is selected under Character. Select “053: Venom” from the drop-down box of animations.
The complete script for this step is listed below.
That’s nearly the end of this tutorial, though we are going to assume that the player wins this simple battle. So we’ll add a way for them to leave the area. But first, here’s the finished event list.
5. Complete Event Command List
This is the complete Event Command list for all of the steps above.
Planning for “After the Battle”
Now we will create a new transport event to take the player to the next map. Create a new map called “Port Town” with the Port Town tileset. Double-click one of the squares on the stairs at the top of the map and create a new event. Call this event “to Port from Docks”. Transfer the player somewhere on the new, blank, map. It doesn’t matter where for now. You can flesh that out when you make a new map. Right-click the event and select Copy. Now click the stairs next to it and right-click to paste the event. Do the same until all three of the top-stairs have this event.
This concludes the cinematic tutorial and has set up the necessary elements for the next tutorial: Combat!