rinmaru

Visual Novel Renp'y Tutorial: Part 1

Added 2018-08-29 19:12:40 +0000 UTC

Hey everyone!

I finally have a bit of a free time, so let's start this tutorial series for real this time!

This will be a long part, and it may be a bit boring because I will try my best to explain even the silliest things.

Don't you hate it when in a tutorial they skip a VERY basic part of a program and you get stuck for hours because you don't know something as simple as a shortcut key or something? Better safe than sorry.

We will be learning about options and making the main menu in this part, so buckle up. Long post incoming!

- Options -

Now that we have an active project, let's open up our options.rpy file and see what's making our game tick.

Make sure your game is selected in the Projects section, and click options.rpy on the launcher.

If it asks you which program to read/write the code, choose editra. If it's not downloaded to your computer, Ren'py will automatically download it for you.

If it doesn't start the download, you can manually get it from Editra homepage.

Once your options code opened up in Editra, you'll see a screen similar to this.

There is no need to explain what each of these codes do, because everything is written and documented already in both the script and the Renp'y documentation, and it would take us so much time I'd have to split Part 1 into multiple parts. So, off to practical matters.

Scroll down until you see the Transition lines;

(The red lines indicate comments that don't affect the game or the gameplay in anyway. We use these comments to pass information to other programmers, to ourselves or to deactivate unwanted code batches etc. You can start writing comments to your rpy files by starting the line with a #)

Transitions:

There are two main ways to control the transitions between your scenes on Ren'py. One of them is using pre-made transitions (which is a completely viable and quick/practical method to get the best and easiest outcome) , or by using animation and transformation language (aka. ALT)

We will be writing ALT language on our screens on this part.

But for now, let's talk about Ren'py transitions.

This code here;

define config.enter_transition = dissolve

will give you a smooth transition from your current screen (for example your splashscreen, intro etc) to a game menu.

And this code, vice versa.

define config.exit_transition = dissolve

Here is a list of available transitions.

You can also use transitions between scenes, but the ones you see here are menu exclusive.

Now change these lines;

define config.after_load_transition = None

define config.end_game_transition = None

into these;

define config.after_load_transition = dissolve

define config.end_game_transition = dissolve

This will give you a nice smooth transition effect between your main menu and game scenes for now. We need this until we make fancy animation for our ingame menus.

Now scroll all the way down to an empty space, and paste this code somewhere.

define config.default_text_cps = 70.0

This sets your default text speed to about 70, so that you'll have a typing effect on the dialogues of your game.

A player can set the text speed on the settings menu, but for a player that's going to be starting a new game without looking into the settings, this is a nice default effect. Better than instantly appearing whole lines of text in my opinion.

While you are pasting any codes starting with a "define", make sure your code has no empty spaces or tabs in front of it, because it may clash with a python code without you realizing and your game won't work. Define functions should never have spaces in front of them.

Next, add this;

define config.gl_resize= False

What this does is, deactivate the feature to resize the game window.

I always add it because when the game is resized manually by the user, the image quality drops down greatly and the whole scene looks sort of blurry.

Not only that but it also keeps the same decreased size even when you relaunch the game, so you will have to delete your persistent data to get back to the default size of the game. It's a bother. It's better to have no manual resizing option.

Now, save and close the file, go to the launcher and click on delete persistent, so that the codes we added work properly in the game.

(You can save your code by pressing CTRL + S keys on your keyboard.)

Get used to pressing Ctrl + S on a regular basis. Ctrl + S is your bff.

Also backups. Lots and lots of backups.

Now launch your project and click new game.

See how the text is appearing with a smooth typing effect by default. Prettiness.

For now, let's leave the options and start editing the screens.

We will come back to options to add a few extra features later on like custom cursor etc, but let's leave it for now.

- Screens -

Screen language is super important for many reasons. Not just for the GUI customization, but also for the mini games and the character customization screen we will do in our tutorial. So, if you have any questions regarding the screen language after reading the tutorial, please feel free to ask.

It's really important you %100 understand everything.

Now launch your project and press SHIFT + R keys on your keyboard.

You just activated the autoreload function of the developer mode, so that whenever we save our codes, the game autoreloads and saves us from quitting and restarting the game over and over again.

(We will turn off developer mode once we are ready to publish our game. For now, we need it to test our game.)

Once your launcher is set, open up screens.rpy.

(Make sure the game is opened and there is autoreload written next to the game title on your game window.)

Now, Renpy's default menu templates are nice and practical, but we want something different. We want more control over our menu items, not just changing their colors. Maybe we want an animated logo with animated buttons, falling leaves, a centered menu etc.

There are two ways to go about screens.

One is by imagemapping, and one is by programming each item individually.

I find programming each individual item better than imagemapping in most cases, because it's more flexible(Garrus fans wink wink) and easier to change later on.

In this tutorial series, we will do both. But I'll leave imagemapping to another tutorial part, as it is a whole different method by its own.

Now, let's start editing our screens. We will start with the main menu.

Scroll down all the way to;

screen main_menu():

in your screens.rpy file.

And delete the parts selected in the image;

Warning: Don't delete anything else!

Once you've deleted the part, save.

You no longer have a main menu.

Check your game which must have autoreloaded, and you'll see a pitch black screen.

It's all gone!

By default, Renp'y uses the navigation screen inside of the main menu.

The navigation screen is a sub-screen your menus(load/save/settings etc) have, so you can navigate between them without having to go all the way back to the main menu.

Let's make a fancy main menu with animating logo and jumpy bubbly buttons now.

Download and unzip the "resources" attachment below, and drag the "mainmenu" folder into your game's /images folder and the "fonts" folder directly into your game's directory.

You can access your game's images by clicking the images button here in the launcher;

And the game's directory by clicking "game" in the same section.

Once you are set, go back to your screens.rpy codes and write this after the code "tag Menu";

window:

xalign 0.0

yalign 0.0

background "images/mainmenu/background.jpg"

Xalign and Yalign will set the vertical and horizontal position of your background. By setting them to 0.0, we make sure your background is placed exactly at the default position.

Make sure your code looks like this, save and check your game.

Now the main menu has a background!

Now that we have a background, let's add the logo.

Before we add the logo, let's prepare its animation.

I always keep all of my animations in one place. So if I want to change an animation, I'll know where to find it.

Now in the Editra window, click File and open a new tab.

Once you have your blank page opened, save it as a Renp'y file from the dropdown menu.

Name it "transforms", so you'll know where your transform animations are.

Now, let's create our first animation.

In the blank transforms window, add this code;

transform logo_transform:

xalign 0.5 ypos -2000

linear 0.5 ypos 100

linear 0.1 ypos 50

linear 0.1 ypos 100

What we did here is this;

We created a transform animation called "logo_transform".

We set the horizontal position to the center of the screen (0.5), and set the vertical position to way above the game screen, so we won't be able to see it at first.(-2000)

We add a 0.5 seconds delay and set the vertical position to 100.

(linear 0.5 ypos 100)

This will make the logo slowly drop down to our visible area.

Then, we add a 0.1 second delay and set the vertical position back up to 50.

(linear 0.5 ypos 50)

and again, we add a 0.1 second delay and set it back to where we want the logo to stop.

This made the logo drop down, then back up a bit and down again like a bouncing ball.

The transform code should look like this.

Now, don't close our transforms tab, but go back to the screens tab.

Let's add our logo with the animation.

Simply add this under the window section but not in it.

add "images/mainmenu/logo.png" at logo_transform

It should look like this.

Now save and look at your game right after the reload. The logo plays the animation and stops. If you missed the animation, simply press Ctrl + R twice and you'll manually reload the game. Make sure autoreload is still written next to your title once you are done testing the animation.

Now, let's add our buttons.

There are two types of buttons in Ren'py language.

Text buttons and image buttons.

Although we will learn both, here, we will use text buttons.

First, let's define a style for our main menu text buttons.

We could use the new styling method for this, but I'll stick with the old version and the messier one. (I'm too old to adapt to changes easily. lol)

But it will be a bit of a messy code, because the old version clashes with the new GUI method, and the new GUI method is pretty strict, so we will have to give exact positions and decrease spacing etc. It's a messy messy way to do it, but it works and I hate how little control the new GUI method gives the developer. So, for freedom, I'll take messy.

Anyways,

Add this code somewhere below your main menu screen;

init -2:

style mainmenu_button:

xalign 0.5

style mainmenu_button_text:

is default

size 70

text_align 0.5

color "#ffffff"

font "fonts/cuteenung.otf"

outlines [ (2, "#e28faa", 0, 0) ]

hover_outlines [ (2, "#de892d", 0, 0) ]

kerning 1.7

We created a style called " mainmenu ", and we added some settings to every button and the button's text in this style.

We made sure our buttons are aligned at the center horizontally.

We made the button text size 70 pt.

Set the horizontal align of the texts to center.

Set the text color to white. (You can find the hex code of the color of your choosing on any image program like Photoshop, or by using a website for hex color codes like http://www.color-hex.com.

We set the text font to our custom font.

We gave the text some outlines.

hover_outlines are outlines that change when we hover over our button.

kerning sets the space between font characters. Our font has characters too close to each other, so I manually set the kerning space here.

Now it should look like this;

Once we are done with styling, let's make a Vbox and place our main menu items in it.

vbox:

style_group "mainmenu"

xalign 0.5

yalign 0.87

spacing -15

textbutton _("New Game") action Start()

textbutton _("Load Game") action ShowMenu("load")

textbutton _("Settings") action ShowMenu("preferences")

textbutton _("CG Gallery") action None

textbutton _("Credits") action None

textbutton _("Quit") action Quit()

A Vbox is a vertical box where whatever item we put in, it places the items in a vertical order. This works perfectly for centered vertical menus, which we are going for in our main menu.

We open a Vbox by typing vbox:

And start adding the items after a tab space.

We set the style group, so the style we previous created is going to run for every item in this particular vbox.

We align the Vbox so it's horizontally at the center of the screen, but a bit lower than the middle vertically. So the buttons won't hide our logo.

We set the spacing of the items aligned vertically. Here, I gave it a negative number because by default Renpy GUI method gives us a VERY wide spacing between main menu items. By adding a negative value, I got them closer to each other. This is a messy code. Normally, I shouldn't have to add a negative number. Works nonetheless.

Next, we add our text buttons and their actions (what happens when you click them).

Most of the main menu actions are already defined by Ren'py default, but we have custom screens here. CG gallery and Credits screen.

For these, we are adding a None action for now (That does nothing). We will go back and edit these later on.

The code should look like this now;

Now save and check out your game.

As you can see, the buttons are there. We have our main menu back!

But, we have a problem. While our logo is animated and fun and bouncy, our buttons just stay there and kind of look... well, boring.

Let's change that! Let's add animation to our buttons.

We could actually have a single animation for the whole group inside the vbox by adding one animation to the vbox itself. But I'm not going to do that.

I want the buttons to have individual animations, so that it will seem like they are popping out one by one. I think it's smoother and cuter than just having the entire box animated.

For this, we will write separate transform animations for each button.

Go back to your transforms tab, and add the following code to an empty space.

transform ng_transform:

zoom 0.0 xoffset 0.5 yoffset 0.5

linear 0.5 zoom 1.0

linear 0.1 zoom 0.9

linear 0.1 zoom 1.0

on hover:

linear 0.3 ypos -10

on idle:

linear 0.3 ypos 0

It should look like this;

We created a transform called ng_transform.

We made the item zoom to 0.0 (so practically invisible), and made sure the item's horizontal and vertical offsets are exactly at its center. So, when it zooms in and out, it will be zooming directly from the center.

We added a delay of 0.5 seconds and set the size back to its default.

Then we added a 0.1 delay and set the size a little smaller.

And finally we add one more 0.1 delay and made the size back to its original size 1.0.

This gave the item a smooth popping up animation.

We then added a hover animation to our button, so that when we hover our cursor over the button, we will make sure the button is hovered.

When we add a hover animation to a button, make sure to add an idle animation, so that once you hover over your item and unhover, it won't stay hovered. (That's a lot of hovers)

Now let's add this transform to our New Game button.

Go back to your screens and add the transform at the end of your New Game button.

textbutton _("New Game") action Start() at ng_transform

Now save and test your button. Once you are done, let's add the same effect to the other buttons by giving them individual transform names (like lg_transform etc), but this time also adding a small pause number, so that they will animate one after another.

The finished transform tab should look like this;

And your menu screen like this;

Now test your game!

You just learned how to make a fancy main menu.

Now before we are done with the main menu, I have one more thing to show you.

Let's make raining stars on our main menu.

For raining items, we use a renpy image function called SnowBlossom.

Add this to an empty space above your mainmenu scene or any empty space you find, really. Just remember where you put this code, so if you want to change it later on, you can find it easily.

image star = SnowBlossom(At("images/mainmenu/star.png", starspin_transform), count=35, xspeed=(15, 35), yspeed=(55, 75), start=30, horizontal=False)

It should look like this;

We defined the SnowBlossom image, the animation, count of items, the horizontal and vertical speeds and the starting count. You can play around with these settings for different falling effects!

Next, we create a transform for the star, so that it will rotate around while falling down, which will give it a more natural look.

Go back to your transforms tab and add this;

transform starspin_transform:

xpos 0.5 ypos 0.5

linear 7.0 rotate 360

linear 7.0 rotate 0

repeat

the repeat action here makes sure the animation is not a one time thing. That it goes back to the first line once it's done animating the last line of our animation, and starts rotating again.

The code should look like this;