Showing/Hiding and how UI bar works [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
mugenjohncel
Hentai Poofter
Posts: 2121
Joined: Sat Feb 04, 2006 11:13 pm
Organization: Studio Mugenjohncel
Location: Philippines
Contact:

Showing/Hiding and how UI bar works [SOLVED]

#1 Post by mugenjohncel »

I have 2 horizontal bar png files named
motivation_full.png (red)
motivation_empty.png (gray)
each bar is measuring 200px width and 10px height

And I have this in the code...

Code: Select all

label start:
    $ motivation = 100
I've been reading the manuals and everything but still beyond the grasp of this mere mortal so I now humbly ask for help.

- How do I Show/Hide it?

- How do I dictate how it will behave (say it will drain from left to right)

- Is it possible to create vertical ones?

- If vertical ones are possible... How do I dictate how it will behave (say it will drain from top to bottom)

- May I request a copy/paste code so I can study it in greater detail (with comments if possible)

Thanks in advance...

"POOF" (Disappears)
Last edited by mugenjohncel on Fri Jul 17, 2009 2:47 am, edited 1 time in total.

User avatar
mugenjohncel
Hentai Poofter
Posts: 2121
Joined: Sat Feb 04, 2006 11:13 pm
Organization: Studio Mugenjohncel
Location: Philippines
Contact:

Re: Showing/Hiding and how UI bar works

#2 Post by mugenjohncel »

Shameless bump... help anyone?...

"POOF" (Disappears)

User avatar
mugenjohncel
Hentai Poofter
Posts: 2121
Joined: Sat Feb 04, 2006 11:13 pm
Organization: Studio Mugenjohncel
Location: Philippines
Contact:

Re: Showing/Hiding and how UI bar works

#3 Post by mugenjohncel »

Still waiting patiently like a good boy while doing the Puppy Eyes...

"POOF" (Disappears)

Jo'ogn
Veteran
Posts: 398
Joined: Sat Jul 12, 2008 1:31 pm
Projects: Kassiopeia [iVN]
Location: Deutschland
Contact:

Re: Showing/Hiding and how UI bar works

#4 Post by Jo'ogn »

A while ago I found somewhere an example of using imaged based bars. I sorta played around with it and it worked.

Code: Select all

          ui.bar(max_value, value,
                xmaximum=120,ypos=-0.4,
                left_bar=Frame("rrslider_full.png", 12, 10),
                right_bar=Frame("rrslider_empty.png", 12, 10),
                thumb=None,thumb_shadow=None)
Don't ask me why the ypos is negative. Can't remember. I scrapped the bars from my display some weeks ago.

It draws an empty bar of 120 pixel long and 12 pixel high and fills it in relation to value/max_value. i.e. 5/10 would be 50% filled.


EDIT: http://www.renpy.org/wiki/renpy/doc/ref ... Properties
here it says sth about vertical settings. top_bar and bottom_bar...
Audio Plays: [original] The White Feathers Directive - [Star Wars] Through Flame and Shadow
Ren'Py: Kassiopeia [very interactive VN] work in progress - looking for proof reader english

chronoluminaire
Eileen-Class Veteran
Posts: 1153
Joined: Mon Jul 07, 2003 4:57 pm
Completed: Elven Relations, Cloud Fairy, When I Rule The World
Tumblr: alextfish
Skype: alextfish
Location: Cambridge, UK
Contact:

Re: Showing/Hiding and how UI bar works

#5 Post by chronoluminaire »

The code I used in Elven Relations's combat engine was this:

Code: Select all

ui.bar(range=1.0, value=times[ThisChar], xmaximum=100, ymaximum=13, left_bar=Frame("ActionBar_full.png", 13, 0), right_bar=Frame("ActionBar_empty.png", 13, 0), thumb=None, thumb_shadow=None)
The "value" (times[ThisChar] in my case) is how far along to chop the image, relative to the "range". In my case, I had "range" of 1.0, so the "value" was taken as a fraction of 1.0: 0.0 says "use none of the left_bar and all of the right_bar"; 1.0 says "use all of the left bar and none of the right_bar"; 0.2 says "use the left-hand 20% of the left_bar and the right-hand 80% of the right_bar", etc.

If you define some other variable like "motivation_max", to be something like 100, then you can have your "motivation" variable vary between 0 and 100, as long as you supply "motivation_max" as the "range" parameter.
- How do I Show/Hide it?
This is the same as any other UI element you want to only appear sometimes: inside the UI overlay function, hide it behind an "if" statement to see whether it should be showing, as defined by some other variable like "show_motivation". Then in your Ren'Py code, set that variable to True or False to show or hide the bar.

Code: Select all

init python:
  def ui_motivation(): # this function will be called *every* time the text box is displayed
    if show_motivation: # so we make it do nothing unless show_motivation is set
      ui.bar(range=motivation_max, value=motivation, xmaximum=200, ymaximum=10, left_bar=Frame("motivation_left.png", 10, 0), right_bar=Frame("motivation_right.png", 10, 0), xalign=1.0, yalign=0.0)

  config.overlay_functions.append(ui_motivation) # this is lined up with the "def" above, and tells Ren'Py to call the ui_motivation function every time it's about to display the text box

label start:
  $ show_motivation = False
  $ motivation_max = 100
  $ motivation = 100
  "Let's see how motivated I am..."
  $ show_motivation = True
  "Houah! Go for it, me!"
- How do I dictate how it will behave (say it will drain from left to right)
This is controlled by specifying the right thing for the left_bar, right_bar, and the value. As I've got it above, your value of "motivation" will indicate how far to the right the bar should be: so higher values will make the bar use more of the left_bar and less of the right_bar. If you want it the other way around, you can add the "bar_invert" parameter to the call to ui.bar, like this:

Code: Select all

      ui.bar(bar_invert=True, range=motivation_max, value=motivation,  ...
- Is it possible to create vertical ones?

- If vertical ones are possible... How do I dictate how it will behave (say it will drain from top to bottom)
As Jo'ogn linked, it is indeed. You just need to include the "bar_vertical" parameter in your call to ui.bar, like this:

Code: Select all

      ui.bar(bar_vertical=True, range=motivation_max, value=motivation, top_bar=Frame("motivation_top.png", 10, 0), bottom_bar=Frame("motivation_bottom.png", 10, 0), xalign=1.0, yalign=0.0)
- May I request a copy/paste code so I can study it in greater detail (with comments if possible)
I've included some scraps of code above. I'm afraid I haven't tested them, but I hope they're useful.
I released 3 VNs, many moons ago: Elven Relations (IntRenAiMo 2007), When I Rule The World (NaNoRenO 2005), and Cloud Fairy (the Cute Light & Fluffy Project, 2009).
More recently I designed the board game Steam Works (published in 2015), available from a local gaming store near you!

User avatar
mugenjohncel
Hentai Poofter
Posts: 2121
Joined: Sat Feb 04, 2006 11:13 pm
Organization: Studio Mugenjohncel
Location: Philippines
Contact:

Re: Showing/Hiding and how UI bar works

#6 Post by mugenjohncel »

Jo'ogn and chronoluminaire
I really appreciate the help guys...

OK, I decided to use chrono's code like this...

Code: Select all

init:
    $ m = Character('Madonna', color="#c8ffc8")
    
init python:
    def ui_motivation(): 
        if show_motivation: 
            ui.bar(range=motivation_max, value=motivation, xmaximum=200, ymaximum=10, left_bar=Frame("motivation_left.png", 10, 0), right_bar=Frame("motivation_right.png", 10, 0), xalign=1.0, yalign=0.0)

    config.overlay_functions.append(ui_motivation) 

label start:
    $ show_motivation = False
    $ motivation_max = 100
    $ motivation = 100
    m "Let's see how motivated I am..."
    $ show_motivation = True
    m "Houah! Go for it, me!"
    return
But after a few clicks, I always get this...

Code: Select all

I'm sorry, but an exception occured while executing your Ren'Py
script.

TypeError: __init__() got multiple values for keyword argument 'value'

While running game code:
 - script at line 17 of C:\Documents and Settings\acer\Desktop\renpy-6.9.2\Lifebar Practice/game/script.rpy
 - python at line 7 of C:\Documents and Settings\acer\Desktop\renpy-6.9.2\Lifebar Practice/game/script.rpy.

-- Full Traceback ------------------------------------------------------------

  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\bootstrap.py", line 255, in bootstrap
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\main.py", line 308, in main
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\main.py", line 92, in run
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\execution.py", line 230, in run
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\ast.py", line 341, in execute
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\exports.py", line 507, in say
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\character.py", line 546, in __call__
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\character.py", line 505, in do_display
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\character.py", line 320, in display_say
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\ui.py", line 69, in interact
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\display\core.py", line 1362, in interact
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\display\core.py", line 1477, in interact_core
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\Lifebar Practice/game/script.rpy", line 7, in ui_motivation
  File "C:\Documents and Settings\acer\Desktop\renpy-6.9.2\renpy\ui.py", line 401, in bar
TypeError: __init__() got multiple values for keyword argument 'value'

While running game code:
 - script at line 17 of C:\Documents and Settings\acer\Desktop\renpy-6.9.2\Lifebar Practice/game/script.rpy
 - python at line 7 of C:\Documents and Settings\acer\Desktop\renpy-6.9.2\Lifebar Practice/game/script.rpy.

Ren'Py Version: Ren'Py 6.9.2a
I tried moving and changing a few things but still not work.

I've been working on this specific thing for several days now and is the one final wall I have to overcome for my project and I really wanted to figure out how UI-Bar thingy works... please help.

I wanted it to behave like...

It will read this value...

Code: Select all

    $ motivation = 100
The motivation will have maximum value of 100

It will deplete from right to left

It will display when I typed this into the code...

Code: Select all

    $ show_motivation = True
...and will dissapear after I typed something like this

Code: Select all

    $ show_motivation = False
I don't know if this is relevant but the image bars (motivation_left.png, motivation_right.png) each measuring 200 pixels lenght and 10 pixels height.

I attached here all the necessary files (including the images)... I now humbly beg for help on this subject. Could someone knowledgable on this subject modify and paste a working code so I could study it with comments if possible.

Apologies for being dumb and thanks in advance.

KimiYoriBaka
Miko-Class Veteran
Posts: 636
Joined: Thu May 14, 2009 8:15 pm
Projects: Castle of Arhannia
Contact:

Re: Showing/Hiding and how UI bar works

#7 Post by KimiYoriBaka »

Ah! found the problem. Did you notice the difference between the codes of chronoluminaire and jo'ogn? chronoluminaire put the range and value in with "value=" and "range=" which aren't part of the function (because those mandatory for a bar to work and thus are used as the expected first two parameters, as compared to arguments which need to be distinguished from each other). I wouldn't have expected this to be a problem, but I think ren'py's error response can be translated: "mugen-sama! why do I have two motivations?! I can only use one!" You just need to make sure poor ren'py knows that it's the same motivation.

Thus the code should be:

Code: Select all

init python:
    def ui_motivation(): 
        if show_motivation: 
            ui.bar(motivation_max, motivation, xmaximum=200, ymaximum=10, left_bar=Frame("motivation_left.png", 10, 0), right_bar=Frame("motivation_right.png", 10, 0), xalign=1.0, yalign=0.0)

    config.overlay_functions.append(ui_motivation) 
Though, to be honest, you're gonna need to tweak that bar. It looks kinda...

User avatar
mugenjohncel
Hentai Poofter
Posts: 2121
Joined: Sat Feb 04, 2006 11:13 pm
Organization: Studio Mugenjohncel
Location: Philippines
Contact:

Re: Showing/Hiding and how UI bar works

#8 Post by mugenjohncel »

Thank you KimiYoriBaka it is now displayed on screen and hide it...

One more question. How do I remove that triangle pointer thingy displayed?...

KimiYoriBaka
Miko-Class Veteran
Posts: 636
Joined: Thu May 14, 2009 8:15 pm
Projects: Castle of Arhannia
Contact:

Re: Showing/Hiding and how UI bar works

#9 Post by KimiYoriBaka »

So I just checked a working example, and now it is clear what the reference meant by "thumb." ugh, such a wierd name for a pointer. Anyway, you just need to tell the bar not to show it like so:

Code: Select all

ui.bar(motivation_max, motivation, xmaximum=200, ymaximum=10, left_bar=Frame("motivation_left.png", 10, 0), right_bar=Frame("motivation_right.png", 10, 0), xalign=1.0, yalign=0.0, thumb=None, thumb_shadow=None)

User avatar
mugenjohncel
Hentai Poofter
Posts: 2121
Joined: Sat Feb 04, 2006 11:13 pm
Organization: Studio Mugenjohncel
Location: Philippines
Contact:

Re: Showing/Hiding and how UI bar works

#10 Post by mugenjohncel »

Thank you very much KimiYoriBaka... it is now working properly...

"POOF" (Disappears)

Post Reply

Who is online

Users browsing this forum: No registered users