[Tutorial]Adding a Love Meter Bar

[HimawariChiyako]

Okay, I'll check that out, Thank you.

Also, make sure you actually have the font used in the announcement messages. That will cough up errors too.

Okay, I will.
But, I have another question, How do you make these bars, hovers, and all that? I intend to try another style for these things, yet I don't know how to.

[OokamiKasumi]

...But, I have another question, How do you make these bars, hovers, and all that? I intend to try another style for these things, yet I don't know how to.

I make all my graphic images in Photoshop.
-- What I do is create a template PSD the exact size of my game (1024x768 or 1366x768) and make all the graphics exactly the way I want them to look in the game as individual layers. I then save the interface graphics as PNGs and the backgrounds as JPGs.

[HimawariChiyako]

...But, I have another question, How do you make these bars, hovers, and all that? I intend to try another style for these things, yet I don't know how to.

I make all my graphic images in Photoshop.
-- What I do is create a template PSD the exact size of my game (1024x768 or 1366x768) and make all the graphics exactly the way I want them to look in the game as individual layers. I then save the interface graphics as PNGs and the backgrounds as JPGs.

Thank you again!
But can you give me a tutorial on how-to? I kept searching for that on the web, however, I can't find an easy and clear explanation.

[OokamiKasumi]

Thank you again!
But can you give me a tutorial on how-to? I kept searching for that on the web, however, I can't find an easy and clear explanation.

The problem is that I'm not sure what you're asking for.
-- Are you asking for a Photoshop tutorial on how to make graphics, or a tutorial on how to code for graphic buttons?

If you're looking for a tutorial on using button graphics, read Aleema's [Tutorial] Customizing Menus, it's where I learned how to do it.

If you're looking for a Photoshop tutorial for making buttons and other graphics, you're asking for something seriously huge and very time consuming -- something I really don't have the time to create. Also, the level of complexity depends on the graphics you want to use. The Yes/No buttons only need Two versions (hover & idle,) but some buttons like the Main Menu need Three versions, and others like Navigation need Five.

Personally, I keep my coding and graphics as simple as possible with only color or shading differences, but there are other game makers who use very complex set-ups in a wide range of styles.

If you plan to do this yourself, you're better off using simple graphics with minimal code changes because it's harder to mess up that way. However, if you're determined to have something complicated, get one of the graphic artists to design and code you a full working theme. Be aware though that such work won't be Free, so expect to pay good money for good work.

[HimawariChiyako]

Thank you again!
But can you give me a tutorial on how-to? I kept searching for that on the web, however, I can't find an easy and clear explanation.

If you're looking for a Photoshop tutorial for making buttons and other graphics, you're asking for something seriously huge and very time consuming -- something I really don't have the time to create. Also, the level of complexity depends on the graphics you want to use. The Yes/No buttons only need Two versions (hover & idle,) but some buttons like the Main Menu need Three versions, and others like Navigation need Five.

So, I should make these only in photoshop?

[Donmai]

Any graphics editor you feel comfortable with will do, as long as it can save images as png (for interface elements and sprites) or jpg (for backgrounds). Google for The Gimp, for example. It's a free program that is very similar to Photoshop.

[HimawariChiyako]

Any graphics editor you feel comfortable with will do, as long as it can save images as png (for interface elements and sprites) or jpg (for backgrounds).

Okay, I kinda get it now, thanks anyway.

[OokamiKasumi]

So, I should make these only in photoshop?

Gimp is a perfectly fine program for making graphics. I mentioned Photoshop because that's the only program I (know how to) use.

[zombiechipmunk]

hey, I'm having a problem.
Just so you know, I am very new at this, I've been working on this game only for a day, and it is my first try.
Anyway, I've done exactly as you've told us to, but the love meter won't appear
here's my code

Code: Select all

# You can place the script of your game in this file.

    # Set up the size of the screen, and the window title.


init python:
    show_Louis = False
    show_Roland = False
    show_Jeremy = False

    def stats_overlay():
        if show_Louis:
            ui.frame(
                xalign = 0.5,
                ypos = 400,)
            ui.vbox(xalign = 0.5)
            ui.text ("Louis's Love points: %d" %Louis_love,
                xalign = 0.5)
            ui.bar(max_love, Louis_love,
                style = "my_bar")
            ui.close()
            
            if show_Roland:
            ui.frame(
                xalign = 0.5,
                ypos = 400,)
            ui.vbox(xalign = 0.5)
            ui.text ("Roland's Love points: %d" %Louis_love,
                xalign = 0.5)
            ui.bar(max_love, Roland_love,
                style = "my_bar")
            ui.close()
            
            if show_Jeremy:
            ui.frame(
                xalign = 0.5,
                ypos = 400,)
            ui.vbox(xalign = 0.5)
            ui.text ("Jeremy's Love points: %d" %Louis_love,
                xalign = 0.5)
            ui.bar(max_love, Jeremy_love,
                style = "my_bar")
            
            ui.close()
        
    config.overlay_functions.append(stats_overlay)
init -2 python:
    Louis_love = 10
    max_love = 150
    
    Jeremy_love = 10
    max_love = 150
    
    Roland_love = 10
    max_love = 150
    
init -5 python:
    style.my_bar = Style(style.default)
    style.my_bar.xalign = 0.5
    style.my_bar.xmaximum = 315
    style.my_bar.ymaximum = 30
    style.my_bar.left_gutter = 5
    style.my_bar.right_gutter = 5
    
    style.my_bar.left_bar = Frame("errors.png",0,0)
    style.mu_bar.right_bar = Frame("bar_empty.png", 0,0)
    style.my_bar.hover_left_bar = Frame("bar_hover.png",0,0)
    
    style.my_bar.thumb = "thumb.png"
    style.my_bar.thumb_shadow = None
    style.my_bar.thumb_offset = 5
    


define e = Character('Lucy', color="#FFC0CB")
define r = Character('Roland', color= "#8B2500")
define l = Character("Louis", color = "#0000CD")
define j = Character("Jeremy", color = "#00BFFF")
image bg space = "110530.jpg"
image bg room = "120529.jpg"
image bg classroom = "Classroom_01_day.jpg"
image bg school_corridor_afternoon = "school_corridor_afternoon.jpg"
image Lucy normal= im.Scale("Default.png", 250, 600)
image Roland normal = im.Scale("MS2-smile1.png", 250, 700)
image Lucy sweat1 = im.Scale("sweat1.png",250,600)
image Roland flirty = im.Scale("MS2-wink2.png", 250, 700)
image Lucy scared1 = im.Scale("scared1.png",250,600)
image Lucy shock1 = im.Scale("shock1.png",250,600)
image Lucy shy = im.Scale("embarrassed2.png",250,600)
image Lucy pout = im.Scale("pout1.png",250,600)
image Lucy happy1 = im.Scale("smile3.png",250,600)
image Lucy happy2 = im.Scale("smile1.png",250,600)
image Louis flirty = im.Scale("MS1-wink.png",400,700)
image Louis normal = im.Scale("MS1-default.png",300,700)
image Roland happy = im.Scale("MS2-smile6.png",250,700)
image Roland upset = im.Scale("MS2-upset1.png",250,700)
image Louis upset = im.Scale("MS1-awkward.png",400,700)
image Louis unhappy = im.Scale("MS1-pout.png",400,700)
image Roland sad = im.Scale("MS2-sad.png",250,700)
image Lucy tired = im.Scale("huh1.png",250, 600)
image Jeremy surprised = im.Scale("MS3-surprised2.png",300,700)
image Jeremy smile = im.Scale("MS3-smile5.png", 300, 700)
image Jeremy normal = im.Scale("MS3-default.png",300,700)
image nebula = "nebula.jpg"
image mm_idle = "mm_idle.png"
image mm_hover = "mm_hover.png"
image mm_ground = "mm_idle.png"





# The game starts here.
label start:
    play music "Intro.mp3" fadeout 1
    queue music "Intro.mp3"
    scene bg space
    with fade

    e "Aristophanes believed that humans originally had four legs, four arms and one head with two faces."
    e "He believed, that existing as such, they were strong enough to pose a threat even for the Gods."
    e "Because of it, the Gods were distressed. They could not simply get rid of them- They loved their sacrifices."
    e "So, Zeus came to a solution, a brilliant one, indeed."
    e "He split them in half to weaken them, thus condemning the humans to isolation and endless longing for their other half."
    e "So, the halves were soulmates. Perfect together."
    e "Separated, they were in pain."
    e "Love was cruel to the Greeks,"
    e "Cupid and Psyche, Orpheus and Eurydice, they were all soulmates forced to part."
    e "Punished by the hands of faith."
    e "Yet, there is a distinct beauty in their suffering."
    e "Imagine, to love so much, everything else seems irrelevant."
    e "I wonder if I will ever be able to find such a beautiful love worth sacrificing for."
    e "I wish, but,as it seems, it is not going to happen."
    stop music fadeout 1
    scene bg classroom
    show Lucy shock1
    with fade
    play music "Forever forward.mp3" fadeout 1
    queue music "Forever forward.mp3" 
    "It is valentines day."
    "And, once again, I am alone."
    "Usually, I am not bothered by my love life- or, better said, lack of love life."
    "But, somehow, surrunded by couples, even in the classroom..."
    "Makes me feel really lonely."
    "?""Why so glum, sugar plum?"
    show Roland flirty at left
    show Lucy shy
    "Roland appears and winks, I can feel blood rushing to my head."
    "Roland, Louis and I used to be best friends."
    "But, suddenly, they got in a fight, and after that Roland started avoiding me."
    "I tried to ask them what happened, but neither would answer."
    e "Roland! W-what's going on?"
    show Roland normal at left
    r "Nothing? I'm just curious about why you seem down today. You've been moping the whole first period"
    show Lucy shock1
    "I didn't think he would notice- after all, Roland and I have stopped hanging out years ago."
    "This means he has been watching me whole period? What is going on?"
    show Lucy scared1
    "I miss him, I miss the trio we made. Maybe-just maybe the two of them made up and he's trying to gather the gang once again?"
    "But, maybe he got into a nother fight with Louis, and is trying to prove a point or something."
    "We all know Louis has a soft spot for me, and I don't want to get in the middle of their ongoing war."
    "If I tell him... Maybe we could be friends again..."
    "Or... Louis could have one of his jealousy tantrums again..."
    menu:
        "Just tell him- no real harm done.":
            jump Roland
        "Better not - why risk it?":
            jump Louis
    stop music fadeout 1
            
    return
label Roland:
    scene bg classroom
    show Lucy normal
    show Roland normal at left
    "Even if Louis gets jealous, for what there is no need, I can just ignore hime."
    "After third period, he'll get over it."
    e "Well, nothing really, just, I can't help feeling jealous of all the couples."
    e "I mean... It's valentines day, and I fell a little left out."
    show Roland flirty at left
    r "Oh, you have a crush? What's he like?"
    show Lucy shy
    e "No I don't! I knew you'd just tease me"
    show Lucy pout
    e "I shouldn't have told you."
    r "Ohh, don't be like that, you're cute when you're upset"
    show Lucy shy
    e "W-what?"
    show Roland happy at left
    r "Now you're even cuter!"
    r "If you continue being so cute..."
    show Roland flirty at left
    r "I might try to steal you"
    r "After all, I am rather fond of cute things"
    "?""Yo, Roland, what are you doing to our poor Lucy?"
    show Lucy happy1
    with None
    show Louis flirty at right
    with dissolve
    l "Is he bothering you, love?"
    show Lucy happy2
    e "No! Maybe teasing a bit, but I don't mind."
    show Louis unhappy at right
    l "Really?"
    show Roland normal at left
    r "Yes, Louis."
    show Louis upset at right
    l "Oh..."
    l "I have to go, see you Lucy, darling!"
    hide Louis upset
    with moveoutleft
    show Lucy shock1
    e "What the-?"
    r "Well, We dont get along very well"
    e "I know, but this is odd behaviour, even for Louis!"
    e "And, you might as well tell me why you got into that stupid fight."
    r "Well, we just didn't agree on a solution to a problem. It doesn't matter."
    "*bell rings*"
    show Roland flirty at right
    r "See you later, alligator."
    show Lucy happy1
    e"see you in a while, crocodile"
    $ show_Roland = True
    pause 0.5 
    $ Roland_love += 10
    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_Roland = True
    
    $ renpy.pause()
    $ hide text with dissolve
    $ show_Roland = False
    hide bg classroom
    hide Roland flirty
    hide Lucy happy
    with dissolve
    
    
    jump continue
    return
label Louis:
    scene bg classroom
    show Lucy  scared1
    show Roland normal at left
    "Better not to risk it, Louis can be very tiring when jealous."
    
    e "No, its really nothing, I just havent had enough sleep."
    "?" "Yo, Roland, stop bothering out poor Lucy"
    show Lucy happy1
    show Roland sad at left
    e "Louis!"
    show Louis flirty at right
    show Lucy happy2
    e "How are you!"
    l "Im fine, you? Been up to no good, as usual?"
    show Roland upset at left
    r"Err... I have to go, see you!"
    hide Roland upset
    with moveoutright
    show Lucy shock1
    e "What the-?"
    show Louis normal at right
    l "We dont get along very well."
    e "Well, I know, but neither of you bothered on telling me why!"    
    l "Well... We both liked the same things, but there was one thing we liked too much to share."
    l "We couldnt agree on the sollution of the issue, ending in a fight."
    show Louis flirty at right
    l "I won."
    show Louis normal at right
    l "It seems, though, that he isnt holding on his end of the bargain."
    e" How come you didn't tell me earlier? Even now you are being awfully vague."
    e "I deserve to know- You ARE my best friend."
    e "And Roland and I used to be close."
    l "We didn't really talk about it."
    l "It isnt a well known issue."
    show Lucy pout
    e " Though it is too bad you dont get along"
    l "I guess..."
    "*bell rings*"
    e"Ugh, we better get seated."
    $ show_Louis = True
    pause 0.5 
    $ Louis_love += 10
    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_Louis = True
    pause 0.5
    $ renpy.pause()
    $ hide text with dissolve
    $ show_Louis = False


    hide bg classroom
    hide Lucy pout
    hide Louis normal
    with dissolve    
    jump continue
    
    
    return
label continue:
    scene bg school_corridor_afternoon
    show Lucy tired
    "Thoroughly hungry and craving, no, desperately needing a cup of coffee, I aimelessly began wandering through the school corriddors."
    "I could feel my heavy eyelids closing as I struggled to remain awake."
    "*CRASH*"
    show Jeremy surprised at right
    with vpunch
    j "Hey! Are you all right?"
    show Lucy scared1
    e "Yeah, I guess I am... How are you? I am so sorry!"
    show Jeremy smile at right
    j "No, don't be, all is well that ends well!"
    "He said beaming at me, the fog that clouded my thought finally lifted."
    show Lucy shy
    "He had the bluest eyes, I could feel my heartbeat rising as I realised our close proximity."
    e "So... Pretty..."
    "I hear myself mutter, and  the moment I realise what just happened."
    show Lucy shock1
    show Jeremy surprised at right
    e "Eh, sorry, I have to go, I have to... I know that..."
    e "EEEEH!"
    hide Lucy shock 1
    with moveoutleft
    j "What an odd girl..."
    j "Huh?"
    show Jeremy normal at right
    j "A notebook?"
    j "She must've dropped it."
    j "I guess I should return it to her- maybe I can wait after school at the front gates."
    
    
    return

    
    

Thank you in advance

[Katherine]

hey is there a way to make the bar be constantly visible?

[Katherine]

okay this might sound stupid but say I want the bar to be vertical on the side of the screen . . . is there a different coding I would use or would I have to work with a different graphic?

[rayminator]

is there anyway to put this into a screen and how?

[Moshibit]

is there anyway to put this into a screen and how?

Code: Select all

screen horizontal_bar_example():
    frame:
        xalign 0.5 ypos 50
        xsize 500
        bar:
            value VariableValue("love_points", 100, style=u'my_bar_style') 
 
style my_bar_style:
    left_bar my_image1.png
    right_bar my_image2.png

    # TODO: make your own style using Bar Style Properties

references:
https://www.renpy.org/doc/html/screens.html#vbar
https://www.renpy.org/doc/html/screen_a ... iableValue
https://www.renpy.org/doc/html/style_pr ... properties

[rayminator]

is there anyway to put this into a screen and how?

Code: Select all

screen horizontal_bar_example():
    frame:
        xalign 0.5 ypos 50
        xsize 500
        bar:
            value VariableValue("love_points", 100, style=u'my_bar_style') 
 
style my_bar_style:
    left_bar my_image1.png
    right_bar my_image2.png

    # TODO: make your own style using Bar Style Properties

references:
https://www.renpy.org/doc/html/screens.html#vbar
https://www.renpy.org/doc/html/screen_a ... iableValue
https://www.renpy.org/doc/html/style_pr ... properties

thanks it work but I just want it to be displayed not changeable

[EDIT]:
found another way of doing it

Code: Select all

bar:
                #xpos 1100 ypos 100
                xysize(270,100)
                value amber_love
                range 100
                left_bar "gui/love100.png"
                right_bar "gui/love.png"

[Moshibit]

It is true that it can be done like this, but for each love meter that you do you will have to write the same, but if you define a style you can use it in each love meter just by indicating that you use that style. Another way you can do it is like this.

Code: Select all

bar:
    value # add your value
    style "my_style"

style my_style:
    # add your  properties
    

Another more interesting way is that you can make a screen that receives parameters, and this allows you to reuse your code, I'll use your method.

Code: Select all

screen love_meter(love_interest_points):
        
    bar:
        xpos 1100 ypos 100
        xysize(270,100)
        value love_interest_points
        range 100
        left_bar "gui/love100.png"
        right_bar "gui/love.png"
            
label start:
    amber "Hi!"
    show screen love_meter(amber_love_points)
    
    .
    .
    .
    
    eileen "Hi!"
    show screen love_meter(eileen_love_points)

There are many ways to do the same thing in different ways, the important thing is that you use the one that is most understandable for you when reading your own script.