Styling vertical bars for Prefs screen...[SOLVED! :D]

[Duskylli]

I'm trying to style the 'Music Volume', 'Sound Volume,' 'Text speed' and 'Auto Forward Time' bars vertically for the Prefs screen using Leon and Uncle Mugen's image button tutorial. The graphic for the bars and thumb appears fine when I use horizontal bars. But when I try to style it vertically the clock graphic and mouse disappears and the options don't work properly.

Code: Select all

 frame xpos 493 ypos 380:
        style_group "pref"
        has vbox
        vbar value Preference("music volume")
    frame xpos 647 ypos 380:
        style_group "pref"
        has vbox
        vbar value Preference("sound volume")
    frame xpos 806 ypos 380:
        style_group "pref"
        has vbox
        vbar value Preference("text speed")
    frame xpos 972 ypos 380:
        style_group "pref"
        has vbox
        vbar value Preference("auto-forward time")
      
init -2 python:
    # Styling for the bar sliders:
    # Aleema's Customizing Menus tutorial: http://lemmasoft.renai.us/forums/viewtopic.php?f=51&t=9812
    # Bar style properties documentation: http://www.renpy.org/doc/html/style.html#bar-style-properties
    style.pref_frame.background = None
    style.pref_slider.top_bar = "gui/config_vbar_full.png"
    style.pref_slider.bottom_bar = "gui/config_vbar_empty.png"
    style.pref_slider.thumb = None
    style.pref_slider.xmaximum = 72
    style.pref_slider.ymaximum = 263    
    style.pref_slider.thumb = "gui/thumb.png"
    style.pref_slider.thumb_offset = 20
    style.pref_slider.thumb_shadow = None

[feathersnake]

I remember having issues with that myself. Here's what I had for Rose's sliders after init -2 python:

Code: Select all

    style.pref_frame.background = None
    style.pref_slider.bar_vertical = True
    style.pref_slider.bar_invert = False
    style.pref_slider.bottom_bar = "Gui/Rose_Prefs_Thermfull.png"
    style.pref_slider.top_bar = "Gui/Rose_Prefs_Thermempty.png"
    style.pref_slider.thumb = None
    style.pref_slider.xmaximum = 30
    style.pref_slider.ymaximum = 148

Naturally, your x and y maximum values are different.
Also, in your code I noticed that you have "style.pref_slider.thumb" defined as None once and then again with an image.

[Duskylli]

Hey feathersnake! Oops the thumbs still work though xD

Ok I added some code but its still not working:

Code: Select all

init -2 python:
    style.pref_frame.background = None
    style.pref_slider.bar_vertical = True
    style.pref_slider.bar_invert =False
    style.pref_slider.bottom_bar = "gui/config_vbar_empty.png"
    style.pref_slider.top_bar = "gui/config_vbar_full.png"
    style.pref_slider.xmaximum = 72
    style.pref_slider.ymaximum = 263    
    style.pref_slider.thumb = "gui/thumb.png"
    style.pref_slider.thumb_offset = 20
    style.pref_slider.thumb_shadow = None

My x and y maximum are the exact size of the config bar graphic.

[feathersnake]

Hello. :3

Ah, I tried imitating a piece of your code that was different than mine to see if I could get a similar issue, and I think I found it. Instead of "vbar" in the values of your first chunk of code, try taking out the "v" so it's just "bar value" for each.

[Duskylli]

Its working perfectly now!!! Thanks so much for your help Feather!!!!!!

[feathersnake]

You're very welcome! ^^ I'm glad you got it working.
This is for NaNo right? Good luck to you guys on finishing up~ The GUI looks great!

[Duskylli]

Yep its for the our Nano game 'The Mishka Effect.' Thanks!