How to have two scrollbars of different designs?

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
abeplaga
Regular
Posts: 34
Joined: Mon Oct 15, 2018 10:09 am
Contact:

How to have two scrollbars of different designs?

#1 Post by abeplaga » Thu Jun 18, 2020 8:40 pm

Hi! I have two viewports with a lot of text so I want a scrollbars (well, two because two viewports) but I would like to know if I can put a different design in each viewport... and how?

After the design, I have tried and researched the way toa dd them to the code, and I have managed to change the default layout of the scrollbar that is in the GUI folder (replacing the png files and also adding the new ones of the second scrollbar), but I don't know how to put my second layout in the game since it seems that you can only use the default scrollbar style!

I have tried to create scrollbar styles but I don't know how to apply them to the second viewport. Does anyone know how? On another occasion I have made several bars of different designs that works but I cannot do the same with the scrollbars.

Here's my viewport... The second is more or less the same, the code is identical except some text.

Code: Select all

screen two_texts():
    viewport pos (245, 200) xysize (250, 500):
            scrollbars "vertical"
            mousewheel True
            draggable True
            side_yfill True

            vbox:
                text ""
I have tried changing "vertical" by the name of my styles, put a viewport id "vscrollbar_second" but not working, the default scrollbar appears... and sometimes a horizontal scroll too or even the text becomes very narrow :s

And here's some styles I use it, but no one works...

Code: Select all

style vscrollbar_second is vscrollbar:
    base_bar Frame("gui/verticalbar_idle_bar_2.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)
    thumb Frame("gui/verticalbar_idle_thumb_2.png", gui.vscrollbar_borders, tile=gui.scrollbar_tile)


style vscrollbar_second is vscrollbar: # another try
    top_bar Frame("gui/verticalbar_idle_2.png", 5, 5)
    bottom_bar Frame("gui/verticalbar_hover_2.png", 5, 5)
    thumb Frame("gui/verticalbar_idle_thumb_2.png", 5, 5)
Thank you! I hope you can help me!

User avatar
namastaii
Eileen-Class Veteran
Posts: 1340
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: How to have two scrollbars of different designs?

#2 Post by namastaii » Thu Jun 18, 2020 9:43 pm


User avatar
abeplaga
Regular
Posts: 34
Joined: Mon Oct 15, 2018 10:09 am
Contact:

Re: How to have two scrollbars of different designs?

#3 Post by abeplaga » Fri Jun 19, 2020 4:42 am

namastaii wrote:
Thu Jun 18, 2020 9:43 pm
https://www.renpy.org/doc/html/style_properties.html
https://www.renpy.org/doc/html/style_pr ... properties

You just define different styles and use that style on each bar
Yeah, I read that before to create the thread and now too. I still don't know how to apply styles on a scrollbar. Also I tried and doesn't work bar propierties on scrollbar propierties. I created some styles as you can see on OP but I don't know how to apply them to the scrollbar, since in the documentation it doesn't say anything about it.

I do know how to apply different design to a bar since it appears the info there, but a scrollbar is not an independent attribute but is linked to a viewport. I have to put the style in the viewport or what? I honestly don't know how to do it.

Also, I tried it but error message.

Code: Select all

        viewport:
            top_bar "gui/verticalbar_idle_2.png"
            bottom_bar "gui/verticalbar_hover_2.png"
            thumb "gui/verticalbar_idle_thumb_2.png"
            scrollbars "vertical"
            mousewheel True
            draggable True

User avatar
namastaii
Eileen-Class Veteran
Posts: 1340
Joined: Mon Feb 02, 2015 8:35 pm
Projects: Template Maker for Ren'Py, What Life
Github: lunalucid
Skype: Discord: lunalucid#1991
Soundcloud: LunaLucidMusic
itch: lunalucid
Location: USA
Contact:

Re: How to have two scrollbars of different designs?

#4 Post by namastaii » Fri Jun 19, 2020 4:21 pm

You create the styles separately. in the viewport you'd just use 'bar' and you'd add style "yourstylenamehere" to that line
Image

I recommend looking at this page on how bars are used https://videlais.com/2018/07/11/advance ... -and-vbar/

but in the example photo above, you'd then apply your style to that same line:

Code: Select all

bar value Preference("sound volume") style "whatever"

Post Reply

Who is online

Users browsing this forum: Google [Bot], PlantMan