Show change in UI meter automatically [Solved]

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Show change in UI meter automatically [Solved]

#1 Post by yon »

I have a UI code I figured out the basics for a little while ago, where I based it on another user's tutorial code, but expanded upon it a litle.
Now, the way they had it set up I would need to input this entire block of code to show whenever the points go up in-game.

Code: Select all

    
    $ show_mi_meter = 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.

    $ mi_pts += 8
    #This adds points to the meter. 
    
    show expression Text("Affection Up!", 
        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_mi_meter = 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_mi_meter = False
    # This hides the Meter. 
    
Now, this is a bit of a pain to put in at every single menu choice that changes the amount of points you have. (There are 66 of these in one route alone, not counting the extra/present scenes or other routes. Altogether, there would be at least 500.)
Does anyone have any idea what kind of code I'd need to put in to make it so that:
1) It shows UI bar like above
2) Show the change from before the points were added to after, without having to manually input the points like above
3) Make the change dissolve without having to show the text expression

This is a scenario that takes place in the game:

Code: Select all

    menu:
        "\(Take a drink.\)":
            $ mi_pts += 8
            "Well, maybe this won't be so bad. It's not like she'd lie about that kind of thing too, right?"
            "I grabbed the cup and took a long sip, letting the flavor wash down me."

        "\(Eat the cinnamon roll.\)":
            $ mi_pts += 6
            "...That cinnamon roll looks pretty good. I'll just nibble on that for now."
            mi "Not thirsty? Suit yourself."

        "\(Do nothing.\)":
            $ mi_pts += 4
            "This whole situation bothered me. It just felt... awkward. I didn't know what to do."
            mi "Ah... are you alright?"

    "She and I spent a little while together, but it didn't feel like we connected that well."

            
# --- MORI LOVE METER CODE ---    

    $ show_mi_meter = True 
    # This makes the Meter appear.
    
    $ show_mi_meter = 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_mi_meter = False
    # This hides the Meter. 
    
# --- MORI LOVE METER CODE ---    

return
As you can see, the menu happens, points are added accordingly, and the bar is shown at the very end of the event before it returns. For the code to work as-is, I would have to make the bar show up immediately after the choice, which I feel would disrupt the flow. Otherwise, I would have to go in and do

Code: Select all

# --- MORI LOVE METER CODE ---    

    $ show_mi_meter = True 
    # This makes the Meter appear.

    if "\(Take a drink.\)":
        $ mi_pts += 8
    [repeat for other choices]
    
    $ show_mi_meter = 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_mi_meter = False
    # This hides the Meter. 
    
# --- MORI LOVE METER CODE --- 
    
or something like that. Slightly less tedious, but still a bit much since I'd have to make it 'if specific menu choice' for each menu. I feel like there has to be some better way to do this, right?

To put it simply: I just want to have the love meter show up at the end of an event, show what points you had prior to that event, and then show what points you have now with a dissolve transition.
Last edited by yon on Fri Nov 07, 2014 1:46 am, edited 1 time in total.

User avatar
TheChris
Regular
Posts: 47
Joined: Sat Oct 11, 2014 9:26 pm
Projects: Stickshooter
Deviantart: innocencecanceller
Location: United States
Contact:

Re: Show change in UI meter automatically?

#2 Post by TheChris »

I think you could move your affection point stuff onto a screen and then you could just call the screen whenever you want to show the bar increase.

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Show change in UI meter automatically?

#3 Post by yon »

How would I go about using a screen to show the bar increasing, though?

User avatar
TheChris
Regular
Posts: 47
Joined: Sat Oct 11, 2014 9:26 pm
Projects: Stickshooter
Deviantart: innocencecanceller
Location: United States
Contact:

Re: Show change in UI meter automatically?

#4 Post by TheChris »

yon wrote:How would I go about using a screen to show the bar increasing, though?
Try this:

In the script file:

Code: Select all

    e "xxx"
    $ mi = 0
    e "continue story"
    window hide
    show screen expr
    $ renpy.pause()
    $ mi += 8
    $ renpy.pause()
    hide screen expr
    window show
    e "x"
Here's the screen:

Code: Select all

screen expr:

    frame xmaximum 200:
        style_group "pref"
        has vbox

        label _("variable")
        bar value mi range 16

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Show change in UI meter automatically?

#5 Post by yon »

I'm sorry, I don't quite get how that screen will help. Could you explain more specifically?

User avatar
TheChris
Regular
Posts: 47
Joined: Sat Oct 11, 2014 9:26 pm
Projects: Stickshooter
Deviantart: innocencecanceller
Location: United States
Contact:

Re: Show change in UI meter automatically?

#6 Post by TheChris »

yon wrote:I'm sorry, I don't quite get how that screen will help. Could you explain more specifically?
This screen shows the meter and then when the player clicks the screen, the variable is increased and the bar increases. After the bar increases, the player has to press again and then the screen is hidden and the game continues.

Go ahead and try it out for yourself. If you do that, you'll get to see it for yourself and determine whether it is of any help to you. If it's not, well... I'll still be here.

Create a new project in Ren'py and make this your script:

Code: Select all

define e = Character('Eileen', color="#c8ffc8")

label start:
    e "xxx"
    $ mi = 0
    e "continue story"
    window hide
    show screen expr
    $ renpy.pause()
    $ mi += 8
    $ renpy.pause()
    hide screen expr
    window show
    e "xx"
and copy this code into screens.rpy:

Code: Select all

screen expr:

    frame xmaximum 200:
        style_group "pref"
        has vbox

        label _("variable")
        bar value mi range 16

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Show change in UI meter automatically?

#7 Post by yon »

Oh, I see. Is there a way to make the bar expand with a dissolve?
I already have a code in place for a bar, so I already have a screen, and a "show meter" code when I need the screen shown.

I actually went in and updated my meter code last night. I'll include the code itself and the script, as well as pictures of what it looks like in execution.

script.rpy:

Code: Select all

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

# Declare images below this line, using the image statement.
image t = "char/toriumi.png"

# Declare characters used by this game.
define t = Character('Toriumi', color="#c8ffc8")


# The game starts here.
label start:

    show t
    t "Test."
    
    menu:
        
        "2":
            $ t_love +=2
       
        "3":
            $ t_love +=3
       
        "100":
            $ t_love +=100
            
    t "Test."
    
    $ show_tbar=True 

    pause 0.5
    
    show expression Text("{color=ffffff}{font=DejaVuSans.ttf}LOVE UP!{/font}{/color}", 
        size=50, 
        ypos=497, # Centers the text -- Toward Bottom.
        xpos=620, # Centers the text -- Toward Right. 
        drop_shadow=(2, 2)) as text
    with dissolve

    $ renpy.pause() 

    hide text with dissolve

    $ show_tbar=False
lovemeter.rpy:

Code: Select all

init python: 

    #This controls when the love-points floater appears. 
    show_tbar=False

   ## ------------ Love Points Floating Meter --------------------
    def stats_overlay():               
        
        # --- T's Love Bar -------
        if show_tbar:
            ui.frame(
                xalign = 0.5, 
                yalign = 1.0,
                style="my_bar")
            
            
            ui.vbox(xalign = 0.5)
            ui.vbar(t_max_love, t_love, 
                style="my_bar")
            
            ui.close()
            
            ui.frame(
                xalign = .1115, 
                ypos = 482,
                style="my_bar2")
            ui.text ("%d" %t_love, style="my_bar2") 
           
    config.overlay_functions.append(stats_overlay)

init -2 python:
    t_love=0
    t_max_love = 80
    
init -5 python:
    #custom bar -----------------------
    style.my_bar = Style(style.default)
    style.my_bar.xalign = 0.5
    style.my_bar.xmaximum = 692 # bar width
    style.my_bar.ymaximum = 114 # bar height
    style.my_bar.left_gutter = 0
    style.my_bar.right_gutter = 0
    
    # 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", 5, 5)
    style.my_bar.right_bar = Frame("ui/bar_empty.png", 5, 5)
    style.my_bar.background = Frame("ui/frame.png", 0, 0)
    #THIS IS WHAT MAKES THE GRAPHICS LOOK CLEAN AND NOT RESIZED. THEY ARE SIZED AGAINST ONE ANOTHER
    style.my_bar.left_padding = 175
    style.my_bar.right_padding = 25
    style.my_bar.top_padding = 16
    style.my_bar.bottom_padding = 16
    
    style.my_bar2 = Style(style.default)
    style.my_bar2.font = "DS-Digi.ttf"
    style.my_bar2.size = 120
    style.my_bar2.bottom_padding = 0
Here's what the script looks like when played (don't mind the huge character sprite.):

Image

A simulation of what the menus in my game are like. You choose an answer, get x points. This simply shows me how many points each choice awards.

Image

The bar appears to show you how many points you have. I clicked 2, and thus, I have 2 points. I can also make it display percentage of points.

Image

The bar refreshes with text. The text is shown (and hidden) with a dissolve, so I could fade-in the new amount of points with this, probably.

What I'd like to do is show the points you had prior to your choice, and then the increase of points when it refreshes.
The MAIN issue I'm having is this: How do I get the bar to show your points prior to the choice, and then show current points in one refresh?
I know there's a way to do it. I'm just not sure how I'd have it display "previous points" or something like that without making a separate set of points that somehow mirror the normal points before then, or something like that.

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Show change in UI meter automatically?

#8 Post by yon »

Ah, hold on. I don't have a screen in place for showing the bar itself, but rather the alignment of the graphics used in the bar.

I DO have a show code, but it's not exactly "show screen X". It's just this:

Code: Select all

    $ show_mi_meter = True
which is just a true/false variable, really.

If I changed this part to a screen somehow, would it be easier?

Code: Select all

init python: 
    ## ------------ Love Points Activation Code-------------------
    #This controls when the love-points floater appears. 
    show_an_meter = False
    show_az_meter = False
    show_mi_meter = False
    show_s_meter = False
    show_y_meter = False

   ## ------------ Love Points Floating Meter --------------------
    def stats_overlay():               
        
        # --- Anisha's Love Bar -------
        if show_an_meter:
            ui.frame(
                xalign = 0.5, 
                yalign = 1.0,
                style="my_bar")
            
            
            ui.vbox(xalign = 0.5)
            ui.vbar(max_love, an_pts, 
                style="my_bar")
            
            ui.close()
            
            ui.frame(
                xalign = .1115, 
                ypos = 482,
                style="my_bar2")
            ui.text ("%d" %an_pts, style="my_bar2") 
And that's not even the code used to bring up the bar and display text. So I think you're right in that a screen WOULD be useful, but I'm not sure how I'd go about doing that.

User avatar
octacon100
Regular
Posts: 163
Joined: Thu Sep 12, 2013 11:23 pm
Projects: Regeria Hope
Organization: Golden Game Barn
IRC Nick: Octacon100
Location: Boston, MA
Contact:

Re: Show change in UI meter automatically?

#9 Post by octacon100 »

Hi There,

Not sure if this could help, but maybe?

http://lemmasoft.renai.us/forums/viewto ... =8&t=18609

I'm using something similar with the confidence bar in my game, and it seems to work pretty well.
Image
Current Digital Projects -
Image
Regiera Hope Completed Game Forum Post

User avatar
octacon100
Regular
Posts: 163
Joined: Thu Sep 12, 2013 11:23 pm
Projects: Regeria Hope
Organization: Golden Game Barn
IRC Nick: Octacon100
Location: Boston, MA
Contact:

Re: Show change in UI meter automatically?

#10 Post by octacon100 »

I think the thing you'll find most interesting is the "bar value AnimatedValue(health, range=100.0)" section. That should give you the animation you are looking for. Let me know if I can help.
Image
Current Digital Projects -
Image
Regiera Hope Completed Game Forum Post

User avatar
TheChris
Regular
Posts: 47
Joined: Sat Oct 11, 2014 9:26 pm
Projects: Stickshooter
Deviantart: innocencecanceller
Location: United States
Contact:

Re: Show change in UI meter automatically?

#11 Post by TheChris »

Honestly, I'm pretty new to coding, so this ui stuff and bar customization is something I don't know much about. However, you did ask about using your current code and showing the variable change, and that's something I can help you with. You just have to add another variable. Here's what I did with your code:

lovemeter.rpy:

Code: Select all

init -2 python:
    t_love=0
    t_max_love = 80
    billyboy = 0
I created a new variable, billyboy. Instead of directly increasing t_love after a menu choice, I increase billyboy. After the first pause, I increase t_love by billyboy. The change is dissolved onto the screen at the same time the text dissolves onto the screen.

script.rpy:

Code: Select all

label start:

    t "Test."
   
    menu:
       
        "2":
            $ billyboy +=2
       
        "3":
            $ billyboy +=3
       
        "100":
            $ billyboy +=100
           
    t "Test."
   
    $ show_tbar=True

    pause 0.5
    $ t_love +=billyboy
   
    show expression Text("{color=ffffff}{font=DejaVuSans.ttf}LOVE UP!{/font}{/color}",
        size=50,
        ypos=497, # Centers the text -- Toward Bottom.
        xpos=620, # Centers the text -- Toward Right.
        drop_shadow=(2, 2)) as text
    with dissolve

    $ renpy.pause()

    hide text with dissolve

    $ show_tbar=False

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Show change in UI meter automatically?

#12 Post by yon »

Ah, thank you to both of you. As I mentioned, it's probably doable with another variable to work off of the affection points.

And, actually, if I used a variable like the one you introduced, it would actually reduce the need for several different meters. I'd just have to flip it.

Essentially, I'd use 'billyboy' as the variable that the meter displays. Then I would add t_love. I could repeat the same "show meter" code for all of the routes, only changing which points it needs to work off of. (Since you only have one route at a time in this game, it wouldn't be a problem anyway.)

I'll try using the animate code as well! Once I mess around with these new bits of code I'll report back and tell you guys if it worked.

User avatar
yon
Regular
Posts: 174
Joined: Tue Sep 09, 2014 5:09 pm
Projects: YDSP
Soundcloud: tetra-yon
itch: v-ual
Location: United States
Contact:

Re: Show change in UI meter automatically [Solved]

#13 Post by yon »

It works now! Here's what I do.

lovemeter.rpy:

Code: Select all

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

   ## ------------ Love Points Floating Meter --------------------
    def stats_overlay():               
        
        # --- Love Bar -------
        if show_love_meter:
            ui.frame(
                xalign = 0.5, 
                yalign = 1.0,
                style="my_bar")
            
            
            ui.vbox(xalign = 0.5)
            ui.vbar(max_meter_pts, meter_pts, 
                style="my_bar")
            
            ui.close()
            
            ui.frame(
                xalign = .1115, 
                ypos = 482,
                style="my_bar2")
            ui.text ("%d" %meter_pts, style="my_bar2") 
           
    config.overlay_functions.append(stats_overlay)

init -2 python:
    meter_pts = 0
    max_meter_pts = 80
    new_pts = 0
    rt_pts = 0
    
init -5 python:
    #custom bar -----------------------
    style.my_bar = Style(style.default)
    style.my_bar.xalign = 0.5
    style.my_bar.xmaximum = 692 # bar width
    style.my_bar.ymaximum = 114 # bar height
    style.my_bar.left_gutter = 0
    style.my_bar.right_gutter = 0
    
    # 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", 5, 5)
    style.my_bar.right_bar = Frame("ui/bar_empty.png", 5, 5)
    style.my_bar.background = Frame("ui/frame.png", 0, 0)
    #THIS IS WHAT MAKES THE GRAPHICS LOOK CLEAN AND NOT RESIZED. THEY ARE SIZED AGAINST ONE ANOTHER
    style.my_bar.left_padding = 175
    style.my_bar.right_padding = 25
    style.my_bar.top_padding = 16
    style.my_bar.bottom_padding = 16
    
    style.my_bar2 = Style(style.default)
    style.my_bar2.font = "DS-Digi.ttf"
    style.my_bar2.size = 120
    style.my_bar2.bottom_padding = 0
when there's a menu:

Code: Select all

    menu:
        "(Give 「Nothing」)":
            
            y "..."
            m "Here you go."
            y "Um, dude... do I have to teach you what a joke is? Because this isn't a very good one."
            
            "Tough crowd."
        
        "(Give 「Fire Fist of Root Tiger Eye」)" if y_pres_01:
            $ rt_pts += 4
            $ new_pts += 4 
            $ y_pres_01 = False
            
            y "Hey, for real? You got this for me? Thanks, dude!"
when I want the bar to grow:

Code: Select all

# --- LOVE UP CODE ---    

    $ show_love_meter = True
    
    pause 0.5
    $ meter_pts += new_pts
    
    show expression Text("{color=ffffff}{font=DejaVuSans.ttf}LOVE UP!{/font}{/color}", 
        size=50, 
        ypos=497, # Centers the text -- Toward Bottom.
        xpos=620, # Centers the text -- Toward Right. 
        drop_shadow=(2, 2)) as text
    with dissolve

    $ renpy.pause() 

    hide text with dissolve

    $ show_love_meter = False
    $ new_pts = 0
    
# --- LOVE UP CODE ---    
the new_pts variable is to show how many NEW points are being added to the bar. When it's over and the bar's hidden, the new_pts are returned to 0, since if you didn't put them back at 0, it wouldn't accurately show how many points are being added.
The dissolve effect works as a nice transition between old->new points, so I don't think the animation is necessary.

Thank you for hanging in there and helping me out. I really appreciate it.

Post Reply

Who is online

Users browsing this forum: No registered users