Reply to topic  [ 1 post ] 
 Coding with Renpy, Part 2 
Author Message
Level 39
Level 39
User avatar

Cash on hand:
2,187.55

Bank:
5,250.50
Posts: 21063
Joined: Sat Feb 14, 2009 11:44 pm
Group: Sysop
Post Coding with Renpy, Part 2
Part 2: Pics, backgrounds and shit that makes a visual novel a visual novel

OR

CTRL+ZCTRL+ZCTRL+ZCTRL+ZCTRL+ZCTRL+ZCTRL+ZCTRL+ZCTRL+ZCTRL+ZCTRL+Z

Level: Absolute beginner.

Summary: In this part, you’ll create branching paths that the player can take, and add graphics. Maybe.


Skills that are absolutely needed:

- You must have read part 1 of this series. No? FFS GO AND READ IT ALREADY YOU TARD.

Skills that will almost certainly come in handy:

- Being able to draw people and scenery

- Being able to tell a story


In the last episode, we left our IDIOT hero with Yotsuba!. And 50 bucks! or something like that! In this episode, we shall make branching paths and shit!.

... I hope they dont hit each other too hard...

Code:
init:
    $ me = Character("Me", color="#aaaaff")
    $ g = Character("Girl", color="#aaffaa")
    $ y = Character("Yotsuba", color="#aaffaa")

label start:
    me "I wish I had some money"
    me "It's so damn hot, and I can't buy anything..."
    me "...Huh?"
    "I saw something stuck to my shoe on a sliver of gum."
    "I picked it away."
    "It was a 50 buck note!"
    "I love you, lady luck..."
    g "Excuse me, but have you seen a fifty around here?"
    y "My name's Yotsuba, by the way. Nice to meet you!"
    return


Right, what we've created is a kinetic novel, or in other words, a visual novel that has no interaction whatsoever. Unless you're a very good storyteller, it's probably best to add some choices for the player. Which you're not... maybe!

The best way to do this is to use menus.

Image
That over there is an example of a menu.

That's pretty great and all. Now, exactly how does one go on about inserting a menu?

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

        "Choice B":
            #Do action B


Note: The '#string' are comments, and will not process. You need to enter commands to make the choices work. We'll get to these later.

Note about indentation... AGAIN: jEdit handles indentation OK, and most of the time, you don't need to worry. However, in the case of menus, anyone 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. Do not use the tab key to make indentations. The engine simply cannot read tab inputs.

With that out of the way...

In order 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 some greenbacks, and meet a girl (YOTSUBA) who asked if the player had seen moneys.

... okay, so it 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 money, or should they lie instead?

Code:
init:
    $ me = Character("Me", color="#aaaaff")
    $ g = Character("Girl", color="#aaffaa")
    $ y = Character("Yotsuba", color="#aaffaa")

label start:
    me "I wish I had some money"
    me "It's so damn hot, and I can't buy anything..."
    me "...Huh?"
    "I saw something stuck to my shoe on a sliver of gum."
    "I picked it away."
    "It was a 50 buck note!"
    "I love you, lady luck..."
    g "Excuse me, but have you seen a fifty around here?"
    y "My name's Yotsuba, by the way. Nice to meet you!"
    "She seems nice."
    "I should probably give it back..."
    "...but then again, I hate being broke..."
    "...what should I do?"
    menu:
        "Be honest and give the money to her":
            jump honest

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



Okay, save that - but don't run the game yet!.

You're most certainly wondering what that new command I had you type.

Okay, so I'll explain. jump #, simply goes over the standard flow of the program (useful if you want to create branching paths in your story.) WHICH IS WHAT WE'RE ABOUT TO DO YOU DUNDERHEAD COCONUT.

You'll notice the label after jump - that's where the flow will be redirected. For example, if you typed in jump start, the game STARTS ALL OVER AGAIN!.

Okay, so we're going to declare some scenes, to create the branching paths.

How to create scenes? Relax!

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

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


As I mentioned a moment before, the syntax of this command is label name, where name is your scene name. Please, think of your own scene names.

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. I recommend a flowchart (I use http://www.draw.io). Saves to xml, so it's great to use as a cross-platform documentation.

In this example game, clutter won't be much of a problem - unless you somehow turn it into a massive space opera or something. Remember; its always better to have a plan when you begin writing the novel is much better than trying to make one in the middle of writing your 512 hours+ epic sci-fi game.

With that out of the way, we're going to finish the plot of our example game. This means that there won't be any new gameplay or story in the game from now on; we'll just add graphics, characters 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. Because, dude, who's dishonest to Yotsuba? You sick fucker.:(

We're gonna add the scenes and the dialogue in it to our game.

Your game's script.rpy should now look like this.

Code:
init:
    $ me = Character("Me", color="#aaaaff")
    $ g = Character("Girl", color="#aaffaa")
    $ y = Character("Yotsuba", color="#aaffaa")

label start:
    me "I wish I had some money"
    me "It's so damn hot, and I'm fucking broke. Hungry, too."
    me "...Huh?"
    "I saw something stuck to my shoe on a sliver of gum."
    "I picked it away."
    "It was a 50 buck note!"
    "I love you, lady luck..."
    g "Excuse me, but have you seen a fifty around here?"
    y "My name's Yotsuba, by the way. Nice to meet you!"
    "She seems nice."
    "I should probably give it back..."
    "...but then again, I hate being broke..."
    "...what should I do?"
    menu:
        "Be honest and give the money 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 50 bucks..."
    y "Thank you!"
    y "I've been starving the whole day!"
    me "Ah, I see"
    "At that moment, my stomach growls"
    "She notices, and smiles"
    y "You're hungry too? Why don't we go get some snacks together?"
    "To be honest, I didn't expect that..."
    me "O-OK."
    "Just as we came to the vending machine, we found that it was closed."
    me "What?!?"
    y "This stinks!"
    me "Know any other vending machines?"
    "Yotsuba looks deep in thought for a bit."
    "Then, she smiles."
    y "Forget the vending machine, let's go eat at a restaurant!"
    me "Huh? Is that really okay?"
    "That was really unexpected...but why not?"
   y "Sure! Cmon!"
    "I didn't know it then..."
    "but this would be the beginning of a long friendship..."
    "-- Good ending - Yotsuba --"
    return

label lie:
    "Meh, what she doesn't know can't hurt her."
    me "I'm sorry, but I haven't seen anything."
    y "Oh, OK..."
    "I slowly walked away."
    "And then I hurried to the vending machine."
    "The vending machine was closed"
    me "WHAT THE?!?"
    me "Argh...now what do I do?"
    "My stomach growls"
    me "Ugh, so hungry..."
    me "*sigh*"
    me "I might as well eat at that restaurant over there..."
    "-- Bad Ending - Alone --"
    return



We now have a basic story. But it's still not a visual novel. Why? Because either your character is blind like Lilly Satou or you haven't added in any graphics! Or you're wearing a blindfold because you like it kinky. :errg

Now, the visuals. ya know, that's why they call it a visual novel.

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

I can't draw!

You're fucked. Just kidding. Maybe.

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!

2. Ask/beg others: Yom might be an idiot, but he can make simple arts. Go ask him. Dat cheap plug...

3. Choose a different art style aka STEAL: You can also choose a different art style for your visual novel, like silhouettes, real life images, paintings or even pidgeons. 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 on to the next section.

I can draw!

Knowing how to draw is a big plus; it gives you a lot more freedom when you make the game.

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:

- Happy Yotsuba
- Slightly downcast Yotsuba
- A road(seen from first person perspective)
- A vending machine.
- Restaurant

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.

Imagepack for sample game.

This imagepack contains five images.

restaurant.jpg
street.jpg
vending.jpg
y_happy.png
y_worried.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" under the Open Directory.

A folder will now open up. This is where the code, assets and the other files are stored; copy the five 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 bg vending = "vending.jpg"
    image bg restaurant = "restaurant.jpg"
    image y happy = "y_happy.png"
    image y worried = "y_worried.png"


(Note that "bg" and "y" 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 vending = "vending.jpg"
    image bg restaurant = "restaurant.jpg"
    image y happy = "y_happy.png"
    image y worried = "y_worried.png"

    $ me = Character("Me", color="#aaaaff")
    $ g = Character("Girl", color="#aaffaa")
    $ y = Character("Yotsuba", color="#aaffaa")


Note: If you made your own art, you might want to change the filenames in this codeblock. Remember, the game needs five images: "street.jpg", "vending.jpg", "y_happy.png", "restaurant.jpg" and "y_worried.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 street

#...and this is how we show the character.
show y worried


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.

There's one more thing. What do you do when you want to erase a picture/character (esp when s/he leaves)?

we hide the image
Code:
hide y worried


Simple, eh? Now let's try that with a complete game.

Code: (The entire game)
Code:
init:
    image bg street = "street.jpg"
    image bg vending = "vending.jpg"
    image bg restaurant = "restaurant.jpg"
    image y happy = "y_happy.png"
    image y worried = "y_worried.png"

    $ me = Character("Me", color="#aaaaff")
    $ g = Character("Girl", color="#aaffaa")
    $ y = Character("Yotsuba", color="#aaffaa")

label start:
    scene bg street
    me "I wish I had some money"
    me "It's so damn hot, and I'm broke and hungry"
    me "...Huh?"
    "I saw something stuck to my shoe on a sliver of gum."
    "I picked it away."
    "It was a 50 buck note!"
    "I love you, lady luck..."
    show y worried
    g "Excuse me, but have you seen a fifty around here?"
    show y happy
    y "My name's Yotsuba, by the way. Nice to meet you!"
    "She seems nice."
    "I should probably give it back..."
    "...but then again, I hate being broke..."
    "...what should I do?"
    menu:
        "Be honest and give the money 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 50 bucks..."
    show y happy
    y "Thank you!"
    y "I've been starving the whole day!"
    me "Ah, I see"
    show y worried
    "At that moment, my stomach growls"
    show y happy
    "She notices, and smiles"
    y "You're hungry too? Why don't we go get some snacks together?"
    "To be honest, I didn't expect that..."
    me "O-OK."
    scene bg vending
    "Just as we came to the vending machine, we found that it was closed."
    me "What?!?"
    show y worried
    y "This stinks!"
    me "Know any other vending machines?"
    "Yotsuba looks deep in thought for a bit."
    show y happy
    "Then, she smiles."
    y "Forget the vending machine, let's go eat at a restaurant!"
    me "Huh? Is that really okay?"
    y "Sure! Cmon!"
    scene bg restaurant
    show y happy
    "I didn't know it then..."
    "but this would be the beginning of a long friendship..."
    "-- Good ending - Yotsuba --"
    return

label lie:
    "Meh, what she doesn't know can't hurt her."
    me "I'm sorry, but I haven't seen anything."
    y "Oh, OK..."
    "I slowly walked away."
    hide y worried
    "... I feel kinda bad."
    scene bg vending
    "And then I hurried to the vending machine..."
    "But.. the vending machine was closed."
    me "WHAT THE?!?"
    me "Argh...now what do I do?"
    "My stomach growls."
    me "Ugh, so hungry..."
    me "*sigh*"
    scene bg restaurant
    me "I might as well eat at that restaurant over there..."
    "-- Bad Ending - Alone --"
    return



Congratulations, you now have a simple, yet true visual novel!

Here's a Windows version of said game. Let's see what you weirdos do with it...

-
Special thanks to Calli for properly rending those Yotsubas I drew.

In our next tutorial, we'll discuss text and graphical effects, sound effects and how to port your game into an executable so others can enjoy your production like I did just now! Don't miss it!.

_________________
Image
Yeap.

_________________
Click the icon to see the image in fullscreen mode  
1 pcs.
Click the icon to see the image in fullscreen mode  
4 pcs.


Fri May 10, 2013 5:42 pm
Profile E-mail WWW
Display posts from previous:  Sort by  
Reply to topic   [ 1 post ] 
 

Similar topics

 
Yom makes a simple Renpy game!
Forum: Dev Forum
Author: Pantsman
Replies: 33
Electro-convulsive therapy, part one
Forum: ./General Spam
Author: 「H A N Z O」
Replies: 2
Electro-convulsive therapy, part one
Forum: ./General Spam
Author: 「H A N Z O」
Replies: 2
Top


Who is online

Users browsing this forum: No registered users and 5 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum

Search for:
Jump to:  
cron
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group
Mods Database :: Imprint :: Crawler Feeds :: Reset blocks
Designed by STSoftware for PTF.

Portal XL 5.0 ~ Premod 0.3 phpBB SEO