Reply to topic  [ 4 posts ] 
 Coding with Renpy, part 4. 
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 4.
Part 4: Customizing and adding features to your Renpy game.

OR

EXTRA! EXTRA! READ ALL ABOUT IT!

-

What you'll need for this tutorial
1) You really should read Parts 1, 2 and 3 before reading this.
2) Comprehension of english.
3) Understanding numbers. Especially hex numbers.
4) A decent memory span, or a simple word processor.
5) Knowledge of color codes, from 000000 to FFFFFF.

What you'll learn in this tutorial.
1) Commenting your code
2) Flags and menu choices based on flags.
3) Story flow based on flags
4) Customizing the main menu
5) Adding music to the main menu.
6) Creating a sound test

In the last episode of POKEYMANZ, TEAM ROCKET HAS CAPTURED PEEKACHOO, AND ASS KETCHUM MUST FACE OFF AGAINST A GAUNTLET OF POWERFUL TRAINERS- oh wait, wrong show. Uhhh... we made basic customizations to our game with custom icons, and learned how to make simple transitions and stuff. While we were at it, We've also learned how to create custom transitions as well.

Today, we'll be learning how to further customize your main menu, learn how to further improve your game experience and add extra doodads to your game.

Before we start, though...

Documenting your code.

Code:
#THE BEACH IS A LIE. I am a boat. Poop. This house is actually a closet.


It's important to comment on your code. Be it to leave injokes to other developers, instructions to future you, or whatever. Sometimes, people think that documenting their code is a pain in the ass. But you'll be the one finding that you have no idea what the code you wrote 2 months ago if you disregard this simple step.

So please, do yourself (and us) a favor, and DOCUMENT YOUR DAMN CODE.

And now, we begin the tutorial proper.

Flags.
Image
Daadah dah dah duh dah da dah daaaah dah, dah da-wait, not that kind of flag!

In renpy, flags are the term used to designate memory of events.

First, you designate the variables! Best placed at the beginning of the game.
$ gift = ""
# "" creates a null value

Next, you enter variables!
You can remember user choices by assigning to variables. For example:

menu:
"Buy her a pair of panties":
$ gift = "panties"
me "Here, please wrap it up. It's a special present."
"Buy her a sunhat":
$ gift = "sunhat"
me "I'll take that sunhat, my good man!"
"Buy her a swimsuit":
$ gift = "swimsuit"
me "I'll be buying this swimsuit"

#TIME SKIP

Please note that a single "=" is used to assign a variable.

Later in the game, you can then use the if statement to change the script based on the previous choice:

me "Open it, Yotsuba-chan."
if gift == "panties":
show y birthdaygirlhappy
y "Ah, such cute panties! Thank you!"
if gift == "sunhat":
show y birthdaygirlsurprised
y "Whoa! What a nice sunhat!"
if gift == "swimsuit"
show y birthdaygirlblush
y "Ah, this swimsuit is so pretty!"

Please note that the double "==" is used to test for equality. Literally, it checks whether the variable gift is equal to the given value.

You can call your variables anything that you like, as long as it doesn't conflict with keywords or character objects. The only rule with variables is that you have to assign to a variable before you can use it in a conditional.

BUT WAIT, THERE'S MORE!
And that's not all you can do with them.

You can make storylines fork, depending on whether these flags are on or off.

For example

Code:
if dontrapeasagi == "yes":
    jump asagibackup
else:
    jump nobackupforyou



If you haven't raped Asagi, she vouches for you when you get in trouble with the partyvan.

NOTE: You have to define the variables and scenes mentioned above if you want this to work.

REMEMBER TO DEFINE YOUR FLAGS AT THE START OF THE GAME. THEY WONT WORK OTHERWISE.

And one more thing you can do with flags...

Often, when you get to a particular point in a game, you'll want to tailor the options offered to the player depending on what they've chosen to do earlier in the game. Let's imagine that You and Yotsuba are going out on your second date, and the player gets to choose between the Park and the Cafe - unless you gave Yotsuba the swimsuit as a gift, in which case they can go to the beach!

Here's how:

Code:
y "So, where would you like to go, mister?"

menu:
     "I'd like to go to the park!":
          jump park_date
     "I'd like to go to the cafe!":
          jump cafe_date
     "Can we go to the beach?" if gift == "swimsuit":
          jump beach_date


(Notice the two equals signs "==" between gift and swimsuit.)

The menu choice for the beach will only appear when the result of the "if" test is true. If Yotsuba was given a panties or a sunhat, then the player will only be able to choose the park or cafe dates.

NOTE: Remember to define the images for y birthdaygirlx, and set up the labels for park_date, cafe_date and beach_date. or else this won't work at all.

-

A treatise on Custom Doodads.

Customizing the menu.
Image
NOTE: The theme is 3D and the color scheme is Basic Blue.

This menu, man. It looks ... empty. No background image, no credits, no n0th1n!.

n0th1n: Dafuq am I doing here?

Yom: I don't know, but have you checked Gen No Spam lately?

n0th1n: Nope.

Yom: Lolk.

We gotter fix that.

For you total newbies (don't be shy, we all were at one point), the most basic way of customizing your menu screens is already provided for you in your options.rpy file. Find these lines of code:

Code:
    #########################################
    # Themes
   
    ## We then want to call a theme function. themes.roundrect is
    ## a theme that features the use of rounded rectangles. It's
    ## the only theme we currently support.
    ##
    ## The theme function takes a number of parameters that can
    ## customize the color scheme.

    theme.glow(


This is basically the core of the 'style' you chose when you first made your new project. It allows you to fine-tune the whole style as you see fit.

The following is a brief explanation of all available options. Experiment with them until you find the RIIIIIIIIIIIIIIGHT COMBINATION for your game's final design.

Code:
## The color of an idle widget face.
widget = "#333333",

This designates the color background of a menu button that is not currently selected, but is useable.

Code:
## The color of a focused widget face.
widget_hover = "#000000",

This designates the color background of a menu button when your mouse is hovering above it.

Code:
## The color of the text in a widget.
widget_text = "#6C8A2F",

This designates the color of text in menu buttons, and even menu-based choices.

Code:
## The color of the text in a selected widget. (For
## example, the current value of a preference.)
widget_selected = "#FFFFFF",

This designates the color of text that displays in a menu system where it is open. For example, when the load menu is open, this color is used to show that the current function is in use in the main menu. It's also used to mark which page you're on in the load game menu, along with other things.

Code:
## The color of a disabled widget face.
disabled = "#919191",

This designates the color of a disabled button's background. For example, empty save slots in the load game menu, or the joystick function in your preferences if you dont have a joystick installed will have this color. And yes, it's gonna be unselectable. I recommend having a grey-dark grey color for this.

Code:
## The color of disabled widget text.
disabled_text = "#4F4F4F",

This one's an easy one. This designates the color of disabled(katawa) text in menus, etc. Blank save files will show up as this color. I recommend using a very dark grey for this one.

Code:
## The color of informational labels.
label = "#FFCC00",

This designates the color of the headers in the preferences menu. Text like Display, Transitions, etc (in the preferences menu) will be affected.

Code:
## The color of a frame containing widgets.
frame = "#8F0000",

Another easy one. This designates the color of your menu's background.

Now, we come across something new.

Code:
        ## The background of the main menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        mm_root = "#dcebff",

        ## The background of the game menu. This can be a color
        ## beginning with '#', or an image filename. The latter
        ## should take up the full height and width of the screen.
        gm_root = "#dcebff",



mm_root is the Main Menu's background, and gm_root is the Game Menu's background. This can be a color or an image. By default, they are colors that matched the color scheme you picked when you first created your game. To make them images, replace the hex value already there, like this:

Code:
mm_root = "title.jpg",


The file title.jpg should be inside your game folder. If it is deeper inside your game folder, for instance in an "images" folder, you need to clarify its exact location:

Code:
mm_root = "images/title.jpg"


As we touched upon before, the same goes for any other files you point to in Ren'Py. The same goes for

Code:
gm_root = "#000000"


The only difference between the main menu and the game menu is while the main menu is displayed on the starter, menu backgrounds are used as the background of several in-game menus, including but not limited to the 'quit screen', load game, etc.

NOTE: Both mm_root and gm_root can accept both color hex codes and images.

Remember; the basic setting for both is #000000 (this returns a perfect black)

PROTIP: If you want a cheap reference to colors, I recommend using this website.
http://www.colorschemer.com/online.html

That's not all in the menus you can configure, actually. Scroll down the options.rpy. See that?

There's a slew of options you can mess about with to truly customize your game. Give them a whirl! (remember to back up your options.rpy file before you do, though)

For example...
Code:
config.main_menu_music = "main_menu_theme.ogg"
#where main_menu_theme.ogg is your music filename.


See that? It'll play on the main menu. :P We're gonna change that "main_menu_theme.ogg" to track1.mp3. Renpy supports mp3 playback as well, see?

...

Still here? Good.

Because we're gonna study how to FURTHER CUSTOMIZE DIS HERE MAIN MENU.

On the Renpy Launcher, open up the screens.rpy file.
Image

Mosey your way to this segment of code.

Code:
screen main_menu:

    # This ensures that any other menu screen is replaced.
    tag menu

    # The background of the main menu.
    window:
        style "mm_root"

    # The main menu buttons.
    frame:
        style_group "mm"
        xalign .98
        yalign .98

        has vbox

        textbutton _("Start Game") action Start()
        textbutton _("Load Game") action ShowMenu("load")
        textbutton _("Preferences") action ShowMenu("preferences")
        textbutton _("Help") action Help()
        textbutton _("Quit") action Quit(confirm=False)



Direct your attention to this segment of code.

Code:
# The main menu buttons.
    frame:
        style_group "mm"
        xalign .98
        yalign .98



0.5 means halfway, 0.75 means 3/4 the way, etc. You can now move the menu around the screen by editing those INTEGRAL numbers.

Now if you're done trying to hide the main menu (:errg), we'll take the next step = adding new buttons to the main menu.

Code:
screen main_menu:

    # This ensures that any other menu screen is replaced.
    tag menu

    # The background of the main menu.
    window:
        style "mm_root"

    # The main menu buttons.
    frame:
        style_group "mm"
        xalign .98
        yalign .98

        has vbox

        textbutton _("Start Game") action Start()
        textbutton _("Load Game") action ShowMenu("load")
        textbutton _("Preferences") action ShowMenu("preferences")
        textbutton _("Help") action Help()
        textbutton _("Quit") action Quit(confirm=False)



Once again, direct your attention to this segment of code.

Code:
        textbutton _("Start Game") action Start()
        textbutton _("Load Game") action ShowMenu("load")
        textbutton _("Preferences") action ShowMenu("preferences")
        textbutton _("Help") action Help()
        textbutton _("Quit") action Quit(confirm=False)


That right there, is how you define and even ADD new buttons to the main menu. Note how each button has a designated "Action" set to it. Given here are the basic actions that already exist on the screens.rpy file, which you can see, does the stuff designated to it.

Sound Test!

So you've finally finished your game, and the beta testing team reports that their feels are being strip-mined by a healthy adolscent s- UHHHHHH I MEAN a touching, emotionally inspiring and awesome OST composed by internet musicians. What better way to give people the means to re-listen to their favourite tracks at their leisure by giving them a ...danananaaa~ SOUND TEST?

A music room is a screen in Renpy that allows the user to select and play music tracks from the game. These tracks may start off locked when the user first begins playing a particular game, and will be unlocked as the user listens to the music while playing the game. Most games do that, so shall we.

A music room is managed by an instance of the MusicRoom class. There can be more than one MusicRoom instance in a game, allowing a game to have multiple music rooms. Creating a music room consists of the following four steps:

1. Create an instance of MusicRoom. The MusicRoom constructor takes parameters to control the channel on which music is played back, and how long it takes to fade music out and back in.

2. Add music files to the instance.

3. Create a screen that uses the MusicRoom instance to create actions for buttons, imagebuttons, or hotspots. These actions can pick a track, the next or previous track, or stop and start the music.

NOTE: Note that the actions used are members of a MusicRoom instance, so if the MusicRoom instance is named mr, then mr.Play("track1.ogg") is how you'd use the play action.

And last, Add the music room screen to the main menu, or an extras menu.

Here's an example of the first three steps:

Code:
#This goes in screens.rpy
init python:

# Step 1. Create a MusicRoom instance.
    mr = MusicRoom(fadeout=1.0)

# Step 2. Add music files.
    mr.add("track1.mid", always_unlocked=True)
    mr.add("track2.mp3", always_unlocked=True)
    mr.add("track3.mp3", always_unlocked=True)

#REMEMBER TO ADD THESE FILES TO YOUR GAME FOLDER.
#always_unlocked=True means they'll be available for playing no matter what.

screen music_room:
    tag menu
       
    frame:
        xalign .50
        yalign .50
        #Designates coordinate values of the box
        has vbox
       
        # The buttons that play each track.
        textbutton "Track 1" action mr.Play("track1.mp3")
        textbutton "Track 2" action mr.Play("track2.mp3")
        textbutton "Track 3" action mr.Play("track3.mp3")

        null height 20
       

        # Buttons that let us advance tracks.
        textbutton "Next" action mr.Next()
        textbutton "Previous" action mr.Previous()
        null height 5
        # The button that lets the user exit the music room.
        textbutton "Main Menu" action ShowMenu("main_menu")

    # Start the music playing on entry to the music room.
    #on "replace" action mr.Play()

    # Restore the main menu music upon leaving.
    on "replaced" action Play("music", "track1.mp3")
    # track1 should preferably be title screen music.
   



And then we append this final bit of code...

Code:
textbutton "Music Room" action ShowMenu("music_room")


to this segment of the code, preferably one line below "textbutton _("Preferences") action ShowMenu("preferences")"

Code:
        textbutton _("Start Game") action Start()
        textbutton _("Load Game") action ShowMenu("load")
        textbutton _("Preferences") action ShowMenu("preferences")
        textbutton _("Help") action Help()
        textbutton _("Quit") action Quit(confirm=False)


NOTE: Depending on the layout of your main menu, you may need to create an extras menu for this game. This is entirely up to you, though.

NOTE: Remember to have the correct sounds in your game folder, and be sure to have them properly labeled and in the correct folders. Alter your code depending on which folder your music files are in.

And there you have it, my friends - a simple, albeit functional sound test.

In the next episode of our nonsensical tutorial, we shall study... a proper money system, how to add a gallery, even more menu/game customization, text tricks and a lesson in game interactivity! Sorry, fellas. No DLC this time.

Any questions? Feel free to ask.

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


Last edited by Pantsman on Tue Feb 18, 2014 12:57 pm, edited 1 time in total.

Updated some info.



Thu Nov 07, 2013 12:18 am
Profile E-mail WWW
Level 1
Level 1
User avatar

Cash on hand:
26,649.20
Posts: 220
Joined: Mon Dec 28, 2015 4:32 pm
Group: Registered users
Post Re: Coding with Renpy, part 4.
When's the next tutorial coming?

_________________
Image


Sun Jun 19, 2016 5:41 am
Profile
Level 20
Level 20
User avatar

Cash on hand:
1,859.50
Posts: 2051
Joined: Thu Aug 29, 2013 8:51 pm
Location: [nobody fills this out right, right?]
Group: Special Access
Post Re: Coding with Renpy, part 4.
Shush, he's busy. For nearly three years. See: Yom you overworked busy fuck!

_________________
In just under one-thousand eight-bit bytes I have to confer some glorious shrine to myself by means of text, images, hyper links, embeded flash compositions and possibly formatting. I could abuse this easily. Ten hour clips on youtube embeded in a single vertical stack. Multi-megapixel long transparent GIFs causing scrollbar hell. Nuero-linguistic programs that fuck your mind like a fresh squid. Eye raping color schemes using ascii full-width blocks. Images or links to images of things that can not be unseen. Anything called "epilepsy" dot SWF. This is what I want to do. I am not a good person. I just know that would be a flagrant display of disrespect. I'll wait until I can get away with it.
NOW IN GLORIOUS TODD A.O.!
fluffco™ LLC takes no responsibility for anything, ever, at all, under any circumstances and is entirely fictional outside Colorado.


Sun Jun 19, 2016 6:12 pm
Profile E-mail
Level 1
Level 1
User avatar

Cash on hand:
26,649.20
Posts: 220
Joined: Mon Dec 28, 2015 4:32 pm
Group: Registered users
Post Re: Coding with Renpy, part 4.
fluffy wrote:
Shush, he's busy. For nearly three years. See: Yom you overworked busy fuck!


Poor yommy. :(

_________________
Image


Mon Jul 11, 2016 8:27 am
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 4 posts ] 
 

Similar topics

 
Electro-convulsive therapy, part one
Forum: ./General Spam
Author: 「H A N Z O」
Replies: 1
Electro-convulsive therapy, part one
Forum: ./General Spam
Author: 「H A N Z O」
Replies: 2
Flash lessons to get your toes wet. PART 3
Forum: Tokyo U
Author: Pantsman
Replies: 11
Electro-convulsive therapy, part one
Forum: ./General Spam
Author: 「H A N Z O」
Replies: 3
Top


Who is online

Users browsing this forum: No registered users and 2 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