[Tutorial]Adding a Love Meter Bar

A place for Ren'Py tutorials and reusable Ren'Py code.
Forum rules
Do not post questions here!

This forum is for example code you want to show other people. Ren'Py questions should be asked in the Ren'Py Questions and Announcements forum.
Message
Author
User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

[Tutorial]Adding a Love Meter Bar

#1 Post by OokamiKasumi »

Zalkyria wrote:I am stumped as to how to add in a love meter to my game. Can you please help me?
Sure!
-- First of all, you'll need some Graphics.
bar_full.png
bar_full.png
bar_full.png (10.88 KiB) Viewed 29488 times
bar_hover.png
bar_hover.png
bar_hover.png (11.29 KiB) Viewed 29488 times
bar_empty
bar_empty
bar_empty.png (3.14 KiB) Viewed 29488 times
thumb
thumb
thumb.png (3.85 KiB) Viewed 29488 times
frame
frame
frame.png (504 Bytes) Viewed 29488 times
-- WARNING: The code listed is for a 1024x768 game. If you're using a different size, adjustments WILL be necessary.
-- Also! The Blank Spaces; the indentation at the beginning of each line, is very important! Make sure you leave them intact!!!

To use those bar graphics in the Love Meter, add this code to your script.rpy file, at the very top, or at the bottom of your options.rpy page:

Code: Select all

init -5 python:
    #custom bar -----------------------
    style.my_bar = Style(style.default)
    style.my_bar.xalign = 0.5
    style.my_bar.xmaximum = 315 # bar width
    style.my_bar.ymaximum = 30 # bar height
    style.my_bar.left_gutter = 5
    style.my_bar.right_gutter = 5
    
    # I have all my User Interface graphics stored in one file called ui. 
    # To access them in my code, I put ui/ in front of all images in that file. 
    
    style.my_bar.left_bar = Frame("ui/bar_full.png", 0, 0)
    style.my_bar.right_bar = Frame("ui/bar_empty.png", 0, 0)
    style.my_bar.hover_left_bar = Frame("ui/bar_hover.png", 0, 0)
    
    style.my_bar.thumb = "ui/thumb.png"
    style.my_bar.thumb_shadow = None
    style.my_bar.thumb_offset = 5
In your script.rpy file, at the very top, add this code for every character that gets a love meter. This happens to be Giselle's code.

Code: Select all

init -2 python:
    ## Character Giselle --------------
   
    giselle_love = 10 #The number of points she Starts with. 
    max_love = 150  #The maximum points she can get. 

init python: 
    ## ------------ Love Points Activation Code-------------------
    #This controls when the love-points floater appears. 
    show_giselle=False

    ## ------------ Love Points Floating Meter --------------------
    def stats_overlay():               
        
        # --- Giselle's Love Bar -------
        if show_giselle:
            ui.frame(
                xalign = 0.5, #centered
                ypos = 400,) #400 px Down from the Top
            
            ui.vbox(xalign = 0.5)
            ui.text ("Giselle's Love Points: %d" %giselle_love, 
                xalign = 0.5)
            ui.bar(max_love, giselle_love, 
                style="my_bar")
            
            ui.close()
    config.overlay_functions.append(stats_overlay)
Then, when you want to SHOW the addition of points on the bar during the story, you pop in this bit of code:

Code: Select all

    $ show_giselle=True 
    # This makes the Meter appear.

    pause 0.5
    # This makes the meter sit there for half a second, so that when the points 
    # are added, the player can actually 'see' the meter extend.

    $ giselle_love+=50
    #This adds points to the meter. 
    
    show expression Text("{color=ffffff}{font=LHFmisterkookyREG_0.TTF}+50 Love Points{/font}{/color}", 
        size=50, 
        yalign=0.5, # Centers the text -- Toward Bottom.
        xalign=0.5, # Centers the text -- Toward Right. 
        drop_shadow=(2, 2)) as text
    with dissolve

    # This is the Announcement Text for the Love Meter, including a specific font, and font color.
    # This states how many points Giselle is being awarded.  
    # Note the FONT! If you use this code without replacing the font Name with one In Your Game,
    # you will get an error message. 
    
    $ show_giselle=True
    # This is a Refresh that shows the increase in points ON the meter.

    $ renpy.pause()
    #This keeps the bar visible until the player hits a key. 

    hide text with dissolve
    # This hides the Text. 

    $ show_giselle=False
    # This hides the Meter. 
A super easy way to manage the code for all your Love Meters is by making a whole new Tab (.rpy page), and putting all of the python code on that one page:

LoveMeter.rpy:

Code: Select all

init python: 

    #This controls when the love-points floater appears. 
    show_giselle=False
    show_arthur=False
    show_shino=False

    ## ------------ Love Points Floater ----------------------

    def stats_overlay():               
        
        # --- Giselle's Love Bar -------
        if show_giselle:
            ui.frame(
                xalign = 0.5, #centered
                ypos = 400,) #400 px Down from the Top
            
            ui.vbox(xalign = 0.5)
            ui.text ("Giselle's Love Points: %d" %giselle_love, 
                xalign = 0.5)
            ui.bar(max_love, giselle_love, 
                style="my_bar")
            
            ui.close()
            
        # --- Arthur's Love Bar -------   
        if show_arthur:
            ui.frame(
                xalign = 0.5,
                ypos = 400,) 
            
            ui.vbox()
            ui.text ("Arthur's Love Points: %d" %arthur_love, 
                xalign = 0.5)
            ui.bar(max_love, arthur_love, 
                style="my_bar")
            
            ui.close()
            
        # --- Shino's Love Bar -------   
        if show_shino:
            ui.frame(
                xalign = 0.5,
                ypos = 400,) 
            
            ui.vbox()
            ui.text ("Shino's Love Points: %d" %shino_love, 
                xalign = 0.5)
            ui.bar(max_love, shino_love, 
                style="my_bar")
            
            ui.close()
           
    config.overlay_functions.append(stats_overlay)

init -2 python:
    giselle_love=10
    max_love = 150

    arthur_love=10
    max_love = 150

    shino_love =10
    max_love = 150
    
init -5 python:
    #custom bar
    style.my_bar = Style(style.default)
    style.my_bar.xalign = 0.5
    style.my_bar.xmaximum = 315 # bar width
    style.my_bar.ymaximum = 30 # bar height
    style.my_bar.left_gutter = 5
    style.my_bar.right_gutter = 5
    
    # I have all my User Interface graphics stored in one file called ui. 
    # To access them in my code, I put ui/ in front of all images in that file. 
    
    style.my_bar.left_bar = Frame("ui/bar_full.png", 0, 0)
    style.my_bar.right_bar = Frame("ui/bar_empty.png", 0, 0)
    style.my_bar.hover_left_bar = Frame("ui/bar_hover.png", 0, 0)
    
    style.my_bar.thumb = "ui/thumb.png"
    style.my_bar.thumb_shadow = None
    style.my_bar.thumb_offset = 5
It looks like this!
love bar.jpg
I hope that helps. :)
Last edited by OokamiKasumi on Fri Oct 25, 2013 4:11 pm, edited 1 time in total.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

Giovedi
Regular
Posts: 147
Joined: Sun Sep 09, 2012 6:20 am
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#2 Post by Giovedi »

You are officially my favourite programmer on this site. As a wannabe artist, I can easily say that learning to draw is actually less frustrating than learning to code.

You are a goddess.

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#3 Post by OokamiKasumi »

Giovedi wrote:You are officially my favourite programmer on this site. As a wannabe artist, I can easily say that learning to draw is actually less frustrating than learning to code.

You are a goddess.
LOL! And I'm not even a programmer! I'm a dabbler in game-making who simply picked a few things up as I went along. Most of the tutorials I post are in fact, instructions I put together for my own personal use. I am so glad they're clear enough to be useful to other people too.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

Giovedi
Regular
Posts: 147
Joined: Sun Sep 09, 2012 6:20 am
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#4 Post by Giovedi »

Ahaha, how on god's green earth does one 'pick up' these sorts of things? :'D I'm still tripping over myself trying align elements on a single floopin' screen. I can't even make heads or tails of vbox/hbox. At all.

Your primers are gold. Don't stop making these things, I beg you, on behalf of all noobs everywhere.

User avatar
sapiboonggames
Veteran
Posts: 299
Joined: Thu Jan 05, 2012 8:53 am
Completed: I Love You, Brother [BxB]
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#5 Post by sapiboonggames »

Aaaa, I really love you for this, I really do :oops:
I actually thought of making my love points visible with number (and that just looks so lame...)
But now I can implement a love meter bar :twisted:
Visit my website: http://www.sapiboong.com

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#6 Post by OokamiKasumi »

Giovedi wrote:Ahaha... How on god's green earth does one 'pick up' these sorts of things? :'D I'm still tripping over myself trying align elements on a single floopin' screen. I can't even make heads or tails of vbox/hbox. At all.
vbox = Vertical box (^ Up to Down v)
hbox = Horizontal box (<-- Side to Side -->)

It's called, I started with something really small and kept adding things from there.
-- My first game was a super simple MadLibs type of game that used Player Input to fill in blanks in a story. (A lot of Player Input, actually.) I added a few pictures and a couple variations to the story by way of optional locations, and that was it. All the games I made after that were marginally more complicated because I tried something new --but Simple-- every time.
Giovedi wrote:Your primers are gold. Don't stop making these things, I beg you, on behalf of all noobs everywhere.
Thank you. I'll do my best to continue to post tutorials on the things I know -- once I know them. LOL!

~~~~~~~~~~~~~~~~~~~~~~~
sapiboonggames wrote:Aaaa, I really love you for this, I really do :oops:
I actually thought of making my love points visible with number (and that just looks so lame...)
But now I can implement a love meter bar :twisted:
I'm so glad this will prove useful.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
NoahSindri
Regular
Posts: 69
Joined: Tue May 07, 2013 1:05 pm
Projects: Truculence, Noraska:The cats valley
Organization: Sunset Productions
Location: Cyprus
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#7 Post by NoahSindri »

I faced this problem while coding, can you help me?



This is the errors list:

Code: Select all

File "game/script.rpy", line 47: expected statement.
    Zaniega_love = 0 
                 ^

File "game/script.rpy", line 48: expected statement.
    max_love = 100
             ^

File "game/script.rpy", line 49: expected statement.
    show_Zaniega=False
                ^

File "game/script.rpy", line 51: expected statement.
    ui.frame(xalign = 0.5, ypos = 400)
                                      ^

File "game/script.rpy", line 52: expected statement.
    ui.vbox(xalign = 0.5)
                         ^

File "game/script.rpy", line 53: expected statement.
    ui.text ("Zaniega's Love Points: %d" %Zaniega_love, xalign = 0.5)
                                                                     ^

File "game/script.rpy", line 54: expected statement.
    ui.bar(max_love, Zaniega_love, style="my_bar")
                                                  ^

File "game/script.rpy", line 56: expected statement.
    Rhen_love = 0 
              ^

File "game/script.rpy", line 57: expected statement.
    max_love = 100
             ^

File "game/script.rpy", line 58: expected statement.
    show_Rhen=False
             ^

File "game/script.rpy", line 60: expected statement.
    ui.frame(xalign = 0.5, ypos = 400)
                                      ^

File "game/script.rpy", line 61: expected statement.
    ui.vbox(xalign = 0.5)
                         ^

File "game/script.rpy", line 62: expected statement.
    ui.text ("Rhen's Love Points: %d" %Rhen_love, xalign = 0.5)
                                                               ^

File "game/script.rpy", line 63: expected statement.
    ui.bar(max_love, Rhen_love, style="my_bar")
                                               ^

File "game/script.rpy", line 65: expected statement.
    Waytar_love = 0 
                ^

File "game/script.rpy", line 66: expected statement.
    max_love = 100
             ^

File "game/script.rpy", line 67: expected statement.
    show_Waytar=False
               ^

File "game/script.rpy", line 69: expected statement.
    ui.frame(xalign = 0.5, ypos = 400)
                                      ^

File "game/script.rpy", line 70: expected statement.
    ui.vbox(xalign = 0.5)
                         ^

File "game/script.rpy", line 71: expected statement.
    ui.text ("Waytar's Love Points: %d" %Waytar_love, xalign = 0.5)
                                                                   ^

File "game/script.rpy", line 72: expected statement.
    ui.bar(max_love, Waytar_love, style="my_bar")
                                                 ^

File "game/script.rpy", line 74: expected statement.
    Phentely_love = 0 
                  ^

File "game/script.rpy", line 75: expected statement.
    max_love = 100
             ^

File "game/script.rpy", line 76: expected statement.
    show_Phentely=False
                 ^

File "game/script.rpy", line 78: expected statement.
    ui.frame(xalign = 0.5, ypos = 400)
                                      ^

File "game/script.rpy", line 79: expected statement.
    ui.vbox(xalign = 0.5)
                         ^

File "game/script.rpy", line 80: expected statement.
    ui.text ("Phentely's Love Points: %d" %Phentely_love, xalign = 0.5)
                                                                       ^

File "game/script.rpy", line 81: expected statement.
    ui.bar(max_love, Phentely_love, style="my_bar")
                                                   ^

File "game/script.rpy", line 371: expected statement.
    show_giselle=True
                ^

Elmiwisa
Veteran
Posts: 476
Joined: Sun Jul 21, 2013 8:08 am
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#8 Post by Elmiwisa »

Maybe you forgot a $ in front of all these lines with errors?

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#9 Post by OokamiKasumi »

NoahSindri wrote:I faced this problem while coding, can you help me?
I'd need to see your actual code to tell what went wrong.
Elmiwisa wrote:Maybe you forgot a $ in front of all these lines with errors?
If they're placed under an:

Code: Select all

init python:
-- they don't need the $ sign.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
NoahSindri
Regular
Posts: 69
Joined: Tue May 07, 2013 1:05 pm
Projects: Truculence, Noraska:The cats valley
Organization: Sunset Productions
Location: Cyprus
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#10 Post by NoahSindri »

Code: Select all

    ## Character Giselle --------------
   
    zaniega_love = 10 #The number of points she Starts with. 
    max_love = 150  #The maximum points she can get. 

init python: 
    ## ------------ Love Points Activation Code-------------------
    #This controls when the love-points floater appears. 
    show_zaniega=False

    ## ------------ Love Points Floating Meter --------------------
    def stats_overlay():               
        
        # --- Giselle's Love Bar -------
        if show_zaniega:
            ui.frame(
                xalign = 0.5, #centered
                ypos = 400,) #400 px Down from the Top
            
            ui.vbox(xalign = 0.5)
            ui.text ("Zaniega's Love Points: %d" %zaniega_love, 
                xalign = 0.5)
            ui.bar(max_love, zaniega_love, 
                style="my_bar")
            
            ui.close()
define z = Character('Rhen', window_left_padding=160, color ="#463E3F", show_two_window=True, ctc="ctc_blink")



Here is the whole thing

User avatar
NoahSindri
Regular
Posts: 69
Joined: Tue May 07, 2013 1:05 pm
Projects: Truculence, Noraska:The cats valley
Organization: Sunset Productions
Location: Cyprus
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#11 Post by NoahSindri »

Also this of another character that I want the meter to appear:

Code: Select all

            $ show_phentely=True 
            pause 1.5
            $ phentely_love+=50
            show expression Text("{color=ffffff}{font=LHFmisterkookyREG_0.TTF}+50 Love Points{/font}{/color}", 
                size=50, 
                yalign=0.5, # Centers the text -- Toward Bottom.
                xalign=0.5, # Centers the text -- Toward Right. 
                drop_shadow=(2, 2)) as text
            with dissolve
            $ show_phentely=True
            $ renpy.pause()
            hide text with dissolve
            $ show_phentely=False

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#12 Post by OokamiKasumi »

Ah... I see the problem.
-- at the very top of your script, you forgot this:

Code: Select all

init -2 python:
Go all the way up to my original post and you will see it at the top of the code block.

It's supposed to look like this:

Code: Select all

init -2 python:
    ## Character Zaniega --------------
   
    zaniega_love = 10 #The number of points she Starts with. 
    max_love = 150  #The maximum points she can get. 

init python: 
    ## ------------ Love Points Activation Code-------------------
    #This controls when the love-points floater appears. 
    show_zaniega=False
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

MistyDew
Newbie
Posts: 8
Joined: Sun Sep 22, 2013 4:12 am
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#13 Post by MistyDew »

Can you put another style for the love bar?

User avatar
OokamiKasumi
Eileen-Class Veteran
Posts: 1779
Joined: Thu Oct 14, 2010 3:53 am
Completed: 14 games released -- and Counting.
Organization: DarkErotica Games
Deviantart: OokamiKasumi
Location: NC, USA
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#14 Post by OokamiKasumi »

MistyDew wrote:Can you put another style for the love bar?
Of course you can.
-- You can use any style you like by simply changing the Graphics.
Ookami Kasumi ~ Purveyor of fine Smut.
Most recent Games Completed: For ALL my completed games visit: DarkErotica Games

"No amount of great animation will save a bad story." -- John Lasseter of Pixar

User avatar
sapiboonggames
Veteran
Posts: 299
Joined: Thu Jan 05, 2012 8:53 am
Completed: I Love You, Brother [BxB]
Contact:

Re: [Tutorial]Adding a Love Meter Bar

#15 Post by sapiboonggames »

Will this code work if I change the shape of the bar?
I want to make it the shape of heart and has been wondering if this code will work as well.
Thanks! :)
Visit my website: http://www.sapiboong.com

Post Reply

Who is online

Users browsing this forum: No registered users