Welcome, Guest. Please login or register.

Login with username, password and session length

 
Advanced search

1411283 Posts in 69325 Topics- by 58380 Members - Latest Member: bob1029

March 29, 2024, 01:08:27 AM

Need hosting? Check out Digital Ocean
(more details in this thread)
TIGSource ForumsCommunityTownhallForum IssuesArchived subforums (read only)TutorialsCreating a Visual Novel with Ren'Py: Part 2
Pages: [1]
Print
Author Topic: Creating a Visual Novel with Ren'Py: Part 2  (Read 38391 times)
genericuser
Guest
« on: January 09, 2009, 10:08:44 AM »

(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:

Code:
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:

Code:
    menu:
        "Choice A":
            #Do action A

        "Choice B":
            #Do action B


Quote
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.
Code: (The game, now with exactly one choice)
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:

Code:
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.

Code: (An example of this:)
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.

Quote
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.

Code: (The new scenes)
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:

Code:
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:

Code:

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")


Quote
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:

Code:
//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:

Code: (The entire game)
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


Logged
Cray
Level 0
***

can't upload an avatar :(


View Profile WWW
« Reply #1 on: January 26, 2009, 10:01:03 PM »

Thanks for a second great tutorial, genericuser!

The example story was cute too Smiley
Logged

▓█▓ rpg maker vx
▓█▓ cemetery manager
genericuser
Guest
« Reply #2 on: January 27, 2009, 08:19:58 AM »

Thanks for a second great tutorial, genericuser!

The example story was cute too Smiley

Thank you!  Grin
Logged
Pages: [1]
Print
Jump to:  

Theme orange-lt created by panic