Renpy Tutorial 02 - Pause, Transitions, Movement

INTRODUCTION

Hello thar, Meinos Kaen here… And welcome back to my tutorial video series for making games in Ren’py.

I'm really glad that so many of you enjoyed the first video and found it useful. And I'm also grateful for the feedback about things I can do better or different. For example, I hadn't thought about making the text bigger in the Code Editor while recording footage. That is now fixed.

Also, shout-out to my Video Editor, RangerSote. He's not on any socials so this is the only way I can properly thank him for his efforts... And a big shout-out to the JPDE Community, who's been supporting my game making efforts for years.

Before we begin, I want to remind people that this video series is structured as a progressive incremental journey, where each video builds on knowledge you've already gotten from previous ones, with minimal backtracking. So, if you haven't watched the first video, I invite you to do so since that covers everything you're going to need to understand the content of this second one.

The first video, the Basics, teaches you how to install and set up Ren'py and a Code Editor. How to add images and speaking characters, how to use them in the engine, the basics of transforms and how to use the Scene command.

In this second video, we're going to add to those fundamentals the tools I think every Ren'py dev needs to make a game that is not just functional... But serviceable. The bare minimum, I'd say, that anyone playing a basic Visual Novel expects to see.

We'll be learning about the pause command. We're going to be learning visual Transitions. And we'll be learning about Movement using transforms. Let's go!

PAUSE COMMAND

In the previous tutorial, we've learned how to add and use images. We've seen a few methods of creating the required code. I'm now going to add the remaining character expressions that, while present physically in the game directory, haven't been coded in yet. If we don't code them in, the Engine won't know that they're there and we won't be able to use them.

Also, I'm going to add the sprite of another character: always from RWBY, always from the Pack you can find on our page at jpde.itch.io, it's Blake Belladonna. You'll find the pre-edited images in the Lessons Material link in the description. We'll speed up the footage of the process, as we've already gone over this plenty in the first video.

Next, in the script.rpy file, I'm going to add Blake's speaking character object...

And now we're ready to get to work. First of all, there's a couple things you need to know about the way a Ren'py game flows and how it reads its code. This is important for many reasons, like understanding what Transitions are.

Whenever you start a new playthrough of any game, no matter what, it will always begin from this line of code: Label start. We will go over what Labels are in a future video, all you need to know right now is that, when you click New Game, the engine will jump here and then go through the code underneath, from top to bottom. Always.

Right now, from the start label what then happens is that first, the scene background gets changed to Vale City Day. Then we display Penny's sprite and she starts talking. These are lines of code that go one after another, but in real time this process is almost instantaneous. Hence, with the script written like this, we will always start with the Vale City Day background, and the Penny Sprite, immediately being popping to life on the screen before going into displaying dialogue.

What if we want to delay these actions? What if we want to tell the engine to pause what it's doing for a period of time, before continuing down the sheet of code? There's, fortunately, a build-in command to tell Ren'py to do just that. Pause.

The way it works is simply by writing, on a new empty line of code, pause –all lower case, this is important, all the commands in Ren'py are case-sensitive- followed by a float which will tell the engine for how many seconds we want the engine to pause for.

If you remember Floats from the previous video, you remember that they're a way of displaying arithmetic numbers by writing down a decimal followed by a comma and then a subdecimal. This is opposite to integer numbers, which do not have the comma and subdecimals, and as such can only display numbers as a whole.

In the case of the Pause command, using Float numbers gives us a lot more control over how long we want the game to stop for. Let's say we want to pause the game's sheet progression for... Two seconds. In that case, we'd write pause –all lowercase, pay attention- followed by a comma and then 0 as a subdecimal. One second is 1.0, so two seconds is 2.0.

Let's save... And let me show you how it looks now. I'm gonna let it progress at normal speed.

See what happened? When we clicked on New Game, since we put the pause command right below the Start Label, the very first thing the engine did was stop and wait for the time we told it to wait to elapse before continuing. So the scene background was not changed until the correct amount of time elapsed. And while no other scene background has been defined, Ren'py will default to a stark black screen which is why there was only darkness while we waited.

Now, let's add another pause. This time, we want it to be a pause between the scene background command, and the show Penny command. But we also want it to be much smaller. Let's say... Half a second. How do we write that?

It's once again, pause –all lower case- then 0.5. This is how you write half a decimal in float: we are below a full decimal of 1, and since each 1 is made up of 10 subdecimal points, half a 1 is 5 subdecimal points. 0.5.

And you could go even more specific, if you want to, because each of those subdecimal points is itself made up of 10 subpoints of its own.

If I wanted to pause for a quarter of a second? I'd write pause 0.25. If I wanted to pause for almost a second but not quite? I'd write pause 0.9. If I wanted to pause for roughly a third of a second? I'd write 0.333... And so on. If you've never used floats before outside of an academic setting –or at all- this can get a bit confusing, I get it.

The simplest way to look at it is to remember that, in Floats, everything is made out of tens. 1 is made out of 10, and each of those 10 subdecimal points is made out of another 10, which in turn are made out of another 10... And so on. Also, and this is VERY important: floats allow you to control many values with much more precision, but they're also more work-intensive for the engine.

Just like you can't always just use Integers, you also shouldn't use Floats all the time. With experience, and further tutorials, you'll start getting an instinct for where to use which, so it's not something you should worry about for now but it is something you should know for the future.

Returning to Penny, let's add a 0.5 pause before she appears... Then, to break the flow, I'm going to move her first line of dialogue to below the scene change. Let's see how that plays out.

As you can see, the screen starts black, then waits two seconds... Then the scene background changes and Penny's first line of dialogue gets displayed without her being on the screen yet. Then, after a half second pause, Penny appears. This is how you use the pause command to dictate the flow of a scene.

VISUAL TRANSITIONS

Now, why did I need to teach you the Pause command before we start talking about Transitions? Because otherwise, I wouldn't be able to show you what difference transitions make. Transitions are, in a few words, effects that we tell the Ren'py engine to apply to certain commands. Visual Transition are transitions that we apply to displayable objects with a visual presence on the screen.

Let's rewatch the footage of the scene we just worked on. When we change the scene background and when we then add Penny's sprite, you will notice that the change happens instantaneously. The background goes from black void to city in a snap, and Penny's sprite just pops into existence out of the aether. And this is fine, it's functional, it even has many uses... But maybe you want it to look different. Feel different.

Maybe you want the images to appear more slowly. Maybe you want the transition to be softer... Nicer. Cooler. Something other than just 'POP'. Then, what you need are visual transitions, and Ren'py comes with many already built in, ready to use.

If you want more details about all the built-in transitions, you can boot up the Tutorial project that comes pre-packaged with Ren'py. It contains a Tutorial Gallery, which will showcase what the various Transitions look like in action. For the purposes of this video, I'm going to show you just two examples: the Dissolve transition and the Pixellate transition.

So, how do we add transitions to images? By using the command 'with', followed by the name of the transition we want to use. Returning to our code, after a 2.0 seconds pause we change the black background to Vale City during the Day. So we are going to add with, after [scene vale_city_day], and then dissolve. All lower case: again, everything in Ren'py is case sensitive so pay close attention.

And that's that. Let's save... And see how it looks like.

And voila! As you can see, the default dissolve transition is a visual effect that replaces whatever image was in the same layer –or any expression being used by the same sprite- with a new one. It does so by changing the alpha –which means the transparency- of the old image to 0 while ramping up the alpha of the new one to 1 –which means fully visible-, at the same time.

Instead of just changing instantaneously, the appearance of the new background image was much softer, and a little bit more scenic... The default dissolve built-in transitions takes half a second to finish and, in a future video, we will be going over how to make our own custom transitions, so that you can have even more control.

Now, for Penny! For her, we are going to use the Pixellate transition... As you remember from the previous lesson, when we touched on Transforms, to make her NOT be a giant woman we added some transforms that aligned her on the x axis, the y axis, and reduced the level of zoom to half.

This, though, leaves us with a conundrum: since we have a colon at the end of the line, to then add our Transforms information right below, we cannot add the transition information there. It would give us an error.

So, where do we put it? The answer is: below. Go to a new line, be sure that the Tab indentation is the same as the show command of the image –not one tab right like the Transforms information- and write down with and then the name of the transition, in this case: pixellate. That's it. Let's see what it looks like.

And there she goes! Our ginger android angel graces us with her presence out of the digital world, and it is that easy. Only thing you need to pay attention to is the indentation. Now that we've learned how to do it, what about we add Blake as well? Penny needs a friend!

Let's delete the code underneath here, so that we have a clean slate going forward... Okay, first, I want to align Penny a little bit more to the left, so Blake has more space to herself. Penny's x-align will go from 0.5, which is dead center, to 0.33, which is around a third of the way from the left.

Then, we add Blake! We go with show Blake Neutral... Colon, so that we can add transform information... New line, we indent by tabbing... zoom 0.5, to reduce her size... yalign 1.0, so that the bottom of her sprite is aligned with the bottom of the screen... And xalign will be 0.66, around a third of the way from the right.

Below all that, on the same level of indentation as the show Blake command... with pixellate. And finally, let's add a little pause and a sentence of introduction for Blake, so that the game doesn't go back to the main menu after reaching the end of the sheet. Done! Let's see how it looks like!

Ta-daaa! Now Penny has a friend! Everything works properly! The scene shows with dissolve, Penny shows with pixellate and Blake also shows with pixellate... Although, hmmm... I mean... They do show correctly, but... You know what? I don't think I like the timing here.

I don't like that Penny shows up, the transition finishes, and then Blake shows up. I would like both of them to show up at the same time, using the same transition. Is there a way to tell Ren'py to do that? There is. And it's actually SO easy. We just go back to the code... And we delete the line of code with the first 'with pixellate', which affects only Penny! And that's it! Don't believe me? Check this out!

See how it is? Now Penny and Blake appear simultaneously! This is because, if we gave one with pixellate for each show command, the Engine will wait for the first image to appear before continuing down the sheet and then show the second image with the second instance of the pixellate transition.

By only giving it one 'with pixellate' command, instead, the code will go down, see that it needs to show both of these images... And then, when it reaches the transition line, it will understand that he needs to apply the transition to all the show commands above until he finds another line of code that interrupts that retro-active reading.

There are of course other ways of using transitions, we can make the process more complex and detailed, show up different images at the same time with different transitions, but that's for a future video. Right now, this is all you need to keep in mind when using transitions.

MOVEMENT

Next up, we're going to learn how to MOVE images across the screen. This may sound a bit more advanced, but it's actually VERY simple. And understanding movement will make you understand the logic behind a lot of other things, and not just in Ren'py!

Let's say that now that both Penny and Blake are on the screen, I want them to then switch places. I want Penny to move to Blake's position, and I want Blake to move to Penny's position. How do we do that? Well, remember how we asked Ren'py to move them to a new position in the first place, the moment they appear?

With xalign and yalign, of course. For the purposes of this example, we're only going to use xalign to move them left or right, but the point remains: we told Ren'py that Blake and Penny needed to appear where they did by giving them an xalign value that replaced their default one... So, all we need to do is replace that value with a new one in a new command.

Right now, Penny is at xalign 0.33 and Blake is at xalign 0.66. We want them to switch, so we're going to write down show Penny and, since we're not changing the expression, we go directly into a colon. Then new line, tab one to the right and we write xalign 0.66.

The same and opposite for Blake. show blake... Colon... new line... tab... xalign 0.33. Then we add a pause and a new line of dialogue so that the game doesn't end. Let's test it!

As you can see, it works! The girls appear and then, after getting new xalign values through our new transform commands, they switch places! Instantly... Which is not exactly 'movement', is it? Yes, they have acquired new positions but it's like they just teleported. No different than if we had just popped them in with no transitions after changing a scene.

So what if, instead, we want to tell the engine to take it slow? Ren'py, I feel your energy, but we want the girls to move a little bit more gently... How do we tell the engine that? And here, I'm going to first give you the answer and THEN I'm going to explain what is happening and how it works. Trust me, and pay close attention here. It's important.

The answer, aka the command we need, is to be added on the same line where we give the new xalign transform value. We write down linear followed by a float which corresponds to the time in seconds we want the movement to take. In this case, we want the movement to be nice and slow, so we're going to write down 3.0. The movement will now take three seconds. Let's test it out... And then, I'll explain.

There you go. As you can see, now the two sprites are moving but, because we told Ren'py that we wanted the movement to take three seconds from start to finish, it's much slower. It's actually a movement, instead of teleportation. Now, the question remains: what the heck is LINEAR? What exactly did we ask Ren'py to do?

Linear is what Ren'py refers to as a 'Warper'. Warpers are special function keywords, which influence the pace of a command we give to the engine, to use layman's terms. With 3.0, we told Ren'py that no matter what we want this change in value to be finished in three real time seconds, but with linear we also told it that the image must move at the same speed for the entirety of the movement.

If we watch the footage of Penny and Blake again now that I've told you, it will be easy to notice: no matter how many times we go back and forth over that line of code, Blake and Penny are always going to move from their original position to the new one in three second, and their speed remains constant throughout the entire thing. This is what a linear warper does: it makes it so that the object always moves at a constant speed.

Ren'py has a lot of built-in warpers, and I put in the description a link to the page that describes them alongside a website that showcases those functions with graphs. For now, the ones I want you to keep in mind is the three which I personally use the most. All the time.

We've already talked about Linear, which keeps the speed of an object constant throughout the entire movement. The remaining two are easein and easeout. Easein means that the movement of the object will start fast but slow down approaching its new destination; Easeout is the opposite, the movement of the object will start slow but speed up as it approaches its new destination.

Let's apply them to Penny and Blake, replacing linear but leaving 3.0 intact. This way, they will both arrive at their new destination at the exact same time but they will get there by moving in different ways. For Penny, we're going to go with easein 3.0; Blake, instead, will receive easeout 3.0. Save –always save, or the changes you make won't show up in the game once you reload it- and let's see how it looks like.

See there? Both sprites have been given a movement that must last three seconds, andat the three seconds mark, both of them are where they're now supposed to be... But they're no longer moving in unison, nor are they moving at a constant speed from start to finish. Penny starts fast and arrives slow: easein; Blake starts slow and arrives fast: easeout.

Linear, Easein, Easeout. These are the three warpers that I think all Ren'py devs should keep in mind when developing. Use them followed by a float, and you will dictate the pace of transformation at your leisure.

CONCLUSION

And that is it for this video! Congratulations, game developers! You now everything basic you need to make your Visual Novel... Serviceable. There are two more videos you're going to need to make it become... Fine... And then, good! I'll have them out as soon as possible.

In the meantime, thank you so much for watching! Please like, comment and subscribe, as it influences the Youtube algorithm and makes more people more likely to discover this video. Also, share it with anyone you might think may find it useful!

If you'd like to support me, the production of the videos and our team further, think about subscribing to our Patreon or KoFi! You'll find the script of these lessons, will be able to take a look at our prototypes, and even access the team's game for free and before the public!

I wish you luck in your game-devving endeavors and I'll see you... On the next video. Ciao!