CREATING A VISUAL NOVEL WITH RENPY PART 2

Courtesy of Generic User

Part 1: http://rpgmaker.net/tutorials/514/

*************************************************************************
NOTE:
First of all, this tutorial is from a person named Generic User. It's been a year(?) since he posted and I thought his excellent tutorial could get more exposure. You can find the original over here. So onwards!
*************************************************************************

(Again, please tell me if this can be improved, and where. Comments are appreciated very much. I'll add more illustrations ASAP, though)

Creating A Visual Novel With Ren'Py

Part 2: The content

Level: Absolute beginner, but I'll assume that you've followed Part 1 of this tutorial.

Summary: We're going to create a visual novel using Ren'Py(an engine for creating visual novels), complete with dialogue, choices, graphics, and sounds.
At the end of this tutorial, you'll have learned how to create a visual novel with Ren'Py, and you'll have a finished game that can be sent to other people.
In this part, you’ll create branching paths that the player can take, and add graphics.


Skills that are absolutely needed:

- None

Skills that will almost certainly come in handy:


- Being able to draw people and scenery

- Being able to tell a story


The game so far:


init:
$ me = Character("Me", color="#aaaaff")
$ girl = Character("Girl", color="#aaffaa")

label start:
me "I wish I had just one more quarter..."
me "I’d rather take the bus instead of walking there."
me "What’s that?"
"I saw something shiny on the street."
"I picked it up."
"It was a quarter!"
"That cheered me up... "
girl "Excuse me, but have you seen any coins around here?"
girl "*sigh* I can’t find that one quarter..."
return




Step 5: Branching paths

So far, what we've created is a kinetic novel, or in other words, a visual novel without gameplay. Unless you're a very good storyteller, it's probably best to add some choices for the player.
The best way to do this is to use menus.
In the first part, I showed you an example of menus:



To get menus like these, we use the menu statement:


menu:
"Choice A":
#Do action A

"Choice B":
#Do action B


Small note about indentation, part 2:

I previously told you that jEdit handles indentation OK, and that you didn't need to worry. Well, in the case of menus, jEdit can make mistakes, so double check that it's correct before you go ahead. In the above example, the "#Do action A" line should have 12 spaces in front of it.

To implement this in our game, we need to find a choice that the player can take. In the previous part, we had the player find a coin, and meet a girl who asked if the player had seen any coins.
While this isn't exactly the greatest ever written plot for a visual novel, the story gives us an opportunity to give the players a choice: Should they be truthful and tell that they found the coin, or should they lie instead?

Let's try putting it in the game.

init:
$ me = Character("Me", color="#aaaaff")
$ girl = Character("Girl", color="#aaffaa")

label start:
me "I wish I had just one more quarter..."
me "I’d rather take the bus instead of walking there."
me "What’s that?"
"I saw something shiny on the street."
"I picked it up."
"It was a quarter!"
"That cheered me up... "
girl "Excuse me, but have you seen any coins around here?"
girl "*sigh* I can’t find that one quarter..."
"I should probably give it back..."
"...but then again, I hate walking that long way..."
"...what should I do?"
menu:
"Be honest and give the quarter to her":
jump honest

"Lie to her, and keep it for yourself":
jump lie



Save this, but don't play it yet.
We're now going to add the remaining scenes. Since this is a short test game, these scenes will also be the endings. When you feel brave enough, you can create more scenes with more branching paths.
We add scenes by using the label statement. You've used this once already:


label start:


This is the start scene, where every game starts. Adding new scenes is simple: just give the scene a name, and use the jump statement to jump to it.


label start:
"We're in the start scene now"
jump end_scene

label end_scene:
"We're in the end scene now"
return


If you saved and played the above example, you'd see "We're in the start scene now", and then "We're in the end scene now".
As you can see, creating scenes is pretty easy.

Beware; if you have a lot of scenes, with branching paths, you should do your best to avoid clutter. Try to find a way to organize your scenes.


In this game, clutter won't be a problem, but having a plan when you begin writing the novel is much better than trying to make one in the middle of writing your 3 hours+ epic sci-fi game.

Now we're going to finish the plot. This means that there won't be any new gameplay or story in the game from now on; we'll just add graphics, sound and polish it a bit before we're finished.
In this story we're going to reward the player for being honest. If you want to, you could make a story where this isn't the case, but for now, let's just stick with that.


label honest:
"I should probably be honest."
me "Yes, I found this quarter..."
girl "Thank you!"
girl "Now I can take the bus instead of walking there..."
me "I was going to take the bus too..."
girl "Then why don't we walk to the bus stop together?"
"To be honest, I didn't expect that..."
me "O-OK."
"Just as we came to the bus stop, the bus drove right past us."
me "What?!?"
girl "Didn't he notice us?"
me "I'll check out when the next bus will arrive."
"I looked at the timetable."
"Oh my..."
me "It looks like the next one isn't going to come before 10 am..."
me "...and the clock is 8 am right now."
girl "*sigh* I hate walking all the way to Light University..."
me "You go there too?"
girl "Yes..."
girl "Hey, maybe we could walk there together?"
"That was really unexpected...but why not?"
me "Sure!"
"I didn't know it then, but this would be the beginning of a long friendship..."
"-- Good ending - Walked together with girl --"
return


label lie:
"Meh, what she doesn't know can't hurt her."
me "I'm sorry, but I haven't seen anything."
girl "Oh, OK..."
"I slowly walked away."
"And then I hurried to the bus stop."
"Just when I got there, the bus drove right past me."
me "WHAT THE?!?"
me "Argh...didn't he see me?"
"I looked at the timetable to see when the next bus would come..."
me "10:00 AM...that's two hours from now!"
me "*sigh*"
me "I might as well walk..."
"-- Bad Ending - Walking alone --"
return



Put these scenes at the end of the code, save the file, and launch the game. The game itself is now complete; like I said, the only thing we need to do now is to add everything else, like...

Step 6: The visuals

This step is split in two parts; if you're confident in your drawing skills, you can skip the next section.

Step 6a: I can't draw!

If you can’t draw, don't panic; there are plenty of options for making art for visual novels that doesn't require drawing:

1. Character art: There's plenty of art that’s already out there that works for making your own visual novels. For instance, you can look at the OELVN Community Wiki, specifically the “Character Art” and the “Background Art” page. Remember to credit the artist if you use their art, though!
This is the approach we'll be using to create our game. We'll use the Sylvie character from this website.

2. Generators: The creators of Ren'Py also made a program called ALICE, a “paperdoll creator”. In other words, a tool to create anime-style characters in a few minutes, and a quick and easy way to make characters. However, the only “dolls” available are girls, and there aren't a lot of them. If you can tolerate that, though, it's a good way to create characters.

ALICE has since been replaced with the upgrade ALICE.NET.
The old ALICE is found at www.bishoujo.us/alice/, while ALICE.NET is found at www.the-other.endoftheinternet.org/alicedotnet/

3. Choose a different art style: You can also choose a different art style for your visual novel, like silhouettes, real life images, or even paintings. This has two benefits; you don’t need to draw, and it sets your game apart from the others.

When you've found out what suits you best, go to Step 7.

Step 6b: I can draw!

Knowing how to draw is a big plus; it gives you a lot more freedom when you make the game.
(Unfortunately, I haven't tried importing drawings myself, since I don't have a scanner ATM)

You might want to look at this tutorial:

http://www.newtutorials.com/coloring-a-pencil-sketch-in-photoshop.htm

As for the technical part:

It's best to make sure that the characters(not the backgrounds) you've made are properly resized and have transparency. If they're not, you might end up with ugly results, like a white box around your character, or a really big/small character. Backgrounds work a little better, though, since they're scaled to fit.
The ideal character images for Ren'Py are transparent PNGs, and the resolution should be around 300x600.

If you want to try making the graphics for this game, there are 3-4 images that the game needs:

- A happy girl
- The same girl in a slightly sorry'n'surprised mood. Just use this picture for guidance.
- A road(seen from first person perspective)
- A bus stop(also seen from 1st person perspective)

When you've drawn and imported the art, it's time to...

Step 7: Add the graphics

If you didn't make your own art, use these pictures for the backgrounds.

busstop.jpg

street.jpg

When you've downloaded the images, rename them like this:

streetge9.jpg to street.jpg
800px-Winthrop_busstop.JPG to busstop.jpg

As for the character, download the the Sylvie character set, unzip it, and rename

sylvie2_smile.png to girl_happy.png
sylvie2_suprised.png to girl_sorry.png

Now that we have the images, let's add them into our game.

The first thing we want to do is to let the game access them. This isn't really that complicated; open up the Ren'Py Launcher, and select "Game Directory."

A folder will now open up. This is where the code, assets and the other files are stored; copy the four images to this folder. So far, so good. Now, on to the coding...

Ren'Py has two important statements for displaying graphics; scene and show, used for backgrounds and characters respectively.
First, though, we have to import the images. This is where the image statement comes in. It's put in the "init" section, like this:


init:
image bg street = "street.jpg"
image girl happy = "girl_happy.png"


(Note that "bg" and "girl" aren't strictly neccessary. However, it will prevent confusion later on. So you might want to add a "bg "-prefix to backgrounds, and the character names before their images.)
After we've added in the images, the "init" section should look like this:



init:
image bg street = "street.jpg"
image bg busstop = "busstop.jpg"

image girl happy = "girl_happy.png"
image girl sorry = "girl_sorry.png"

$ me = Character("Me", color="#aaaaff")
$ girl = Character("Girl", color="#aaffaa")


Note: If you made your own art, you might want to change the filenames in this codeblock. Remember, the game needs four images: "street.jpg", "busstop.jpg", "girl_happy.png", and "girl_sorry.png"

Like I mentioned before, we'll use the scene and show statements to display these images. Luckily, they're pretty similar and easy to use:


//This is how we change the background...
scene bg busstop

//...and this is how we show the character.
show girl happy


As you can see, it's pretty simple. All that's left to do now is to repeat this for whenever we want to change the scene or the character. Since I didn't list "Patience" on the list of required skills, this is already done for you:


init:
image bg street = "street.jpg"
image bg busstop = "busstop.jpg"

image girl happy = "girl_happy.png"
image girl sorry = "girl_sorry.png"

$ me = Character("Me", color="#aaaaff")
$ girl = Character("Girl", color="#aaffaa")

label start:
scene bg street
me "I wish I had just one more quarter..."
me "I’d rather take the bus instead of walking there."
me "What’s that?"
"I saw something shiny on the street."
"I picked it up."
"It was a quarter!"
"That cheered me up... "
show girl sorry
girl "Excuse me, but have you seen any coins around here?"
girl "*sigh* I can’t find that one quarter..."
"I should probably give it back..."
"...but then again, I hate walking that long way..."
"...what should I do?"
menu:
"Be honest and give the quarter to her":
jump honest

"Lie to her, and keep it for yourself":
jump lie

label honest:
"I should probably be honest."
me "Yes, I found this quarter..."
show girl happy
girl "Thank you!"
girl "Now I can take the bus instead of walking there..."
me "I was going to take the bus too..."
girl "Then why don't we walk to the bus stop together?"
"To be honest, I didn't expect that..."
me "O-OK."
scene bg busstop
"Just as we came to the bus stop, the bus drove right past us."
show girl sorry
me "What?!?"
girl "Didn't he notice us?"
me "I'll check out when the next bus will arrive."
"I looked at the timetable."
"Oh my..."
me "It looks like the next one isn't going to come before 10 am..."
me "...and the clock is 8 am right now."
girl "*sigh* I hate walking all the way to Light University..."
me "You go there too?"
girl "Yes..."
show girl happy
girl "Hey, maybe we could walk there together?"
"That was really unexpected...but why not?"
me "Sure!"
scene black
"I didn't know it then, but this would be the beginning of a long friendship..."
"Good ending - Walked together with girl"
return

label lie:
"Meh. What she doesn't know can't hurt her."
me "I'm sorry, but I haven't seen anything."
girl "Oh, OK..."
"I slowly walked away."
"And then I hurried to the bus stop."
scene bg busstop
"Just when I got there, the bus drove right past me."
me "WHAT THE?!?"
me "Argh...didn't he see me?"
"I looked at the timetable to see when the next bus would come..."
me "10:00 AM...that's two hours from now!"
me "*sigh*"
me "I might as well walk..."
scene black
"Bad Ending - Walking alone"
return


Congratulations, you now have a true visual novel!

Next, and final part: We'll add the sound, polish the game, and pack it into an executable that other people can play.

Stuff to do in the meantime:

- Expand on this game and create more paths for the player to take.
- Learn, or perfect drawing characters and backgrounds.
- Make your own visual novel

Posts

Pages: 1
Just a warning, I'm finding that jEdit is a lot more wonky with indentation than these tutorials would have you believe. Overall though, these were extremely helpful!
Pages: 1