As part of my current game project, we wanted to capture that retro aesthetic when setting up the game world. To do that, we created a simple text-based cutscene system with a skip function. Here’s an example of it working in-game.
As you can see it goes back to the old days when games would start out with a simple text to start the story. Now that’s cool and all, but how do you do it yourself? I’ll show you; let’s get started.
Setting Up The State
The first step is to create the state. In Flixel each scene in your game could be considered a FlxState. Now, by creating a state we have to set up the class properties. The first thing we’ll need is a skip threshold property. The next thing we need is to create a FlxTypedText. The skip threshold(Float number) allows us to create a time before skipping the cutscene. The FlxTypedText allows us to create that old school text effect where the text streams in one character at a time. These are the two main ones to be considered, but there are other roles as well. Here’s the code we’re going to use below.
As you can see this is the initial setup for the state, which will initialize some of the important elements for us. As mentioned above, Flixel provides some out of the box elements to help us create the effect with the FlxTypedText. But, do note that the FlxTypedText requires you have Flixel-addons unchecked in your project.xml. The next thing we have to do is start creating the on-screen elements.
Creating The Properties
Here in the create function we assign the properties with new instances of their respective class. Now, you would put all these in their own create function personally. You can see the implementation below.
The above sets up the major on-screen elements in relation to one another on-screen. See how the skip bar is placed in the top right corner of the screen. The text you saw in the video is position over the bar using the above. Also, notice that we add the text after the bar in order to make sure the skip text is displayed on top of the bar in-game. Now, we need to setup the logic for the state.
Setting Up The Update Logic
Now, we need to focus on the logic. The logic here is that we need to advance the text after a certain amount of delay. For example, we need to check for when the time of the delay has finally hit the time set in the current text shown on screen in that array we declared earlier. Once the delay is hit, we get the next as shown in the transition text function. Now, here’s what that update code looks like.
This code allows the cutscene to advance on its own. This is the important logic necessary to get everything working. Once all of this is set up, the only thing you need to do is pass in SceneText and the state you want to move to when you use the Cutscene state.
With that said, that’s how you setup the cutscene. In that regard, I hope it helps you. Good luck game making!