[SOLVED!] Scrollbar + Viewport for Custom Menu with Text

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
sasquatchii
Miko-Class Veteran
Posts: 516
Joined: Fri Jul 04, 2014 7:48 am
Completed: A Day in the Life of a Slice of Bread
Deviantart: sasquatchix
Soundcloud: sasquatchii
itch: sasquatchii
Location: South Carolina
Contact:

[SOLVED!] Scrollbar + Viewport for Custom Menu with Text

#1 Post by sasquatchii » Tue Jul 10, 2018 8:27 pm

Hello! I am working on coding the UI into my game, Laika, and have been scratching my head on how to make this work.

Here is what I am aiming for with my screen design:

Image

Basically, I'd like to include both text & images from the writer of the story, detailing a bit about why she wrote the game, the research she did, and the history behind Laika.

Here is what the screen currently looks like:

Image

First off, I'm wondering how I can customize the slider? I'm using dinosaur code from 2 years ago, here's what I've got:

Code: Select all

screen vbars_example():
    
    tag menu
    
    # The various buttons.
    imagemap:
        ground "images/gui/about-idle.png"
        idle "images/gui/about-idle.png"
        hover "images/gui/about-hover.png"
        
        if main_menu:
            hotspot (889,124,40,40) action Return()
            
        if not main_menu:
            hotspot (889,124,40,40) action Return()
    
    default n = 66

    frame:
        xalign 0.86 ypos 250
        ysize 332

        hbox:
            spacing 10

            vbar value ScreenVariableValue("n", 100) style "vslider"
I don't want to change the code to the most recent version because honestly coding is the part of this I dread most and it would be a huge pain to have to redo everything.

My second question is, how could I add text & images, and have the slider function with the text and images?

Any ideas or help are greatly appreciated! Thank you.
Last edited by sasquatchii on Thu Jul 12, 2018 9:29 pm, edited 1 time in total.
ImageImageImage

User avatar
mitoky
Veteran
Posts: 287
Joined: Sat Feb 07, 2015 9:12 pm
Projects: CrossDol, The Purring Demon's Love, circus eterie
Organization: astellic
Tumblr: mitoky
Contact:

Re: Scrollbar + Viewport for Custom Menu with Text

#2 Post by mitoky » Wed Jul 11, 2018 3:18 am

Technically i think you should have a viewport and inside the viewport everything else (so its all scrollable): so kind of like this:

Code: Select all

    viewport:
        yinitial 0.0
        
        #adjust these as wanted
        yalign 0.5
        xalign 0.5
        xmaximum 1200
        ymaximum 800

        draggable True
        mousewheel True

        scrollbars "vertical" style "vslider"

        vbox:
            ##At this point text and images how you want to show them, using hbox and vbox, spacing etc.
I didnt tested it, so let me know if something doenst works!
Image

[Logo Commissions - OPEN] || Wish to support or tip me? Buy Me a Coffee!

User avatar
sasquatchii
Miko-Class Veteran
Posts: 516
Joined: Fri Jul 04, 2014 7:48 am
Completed: A Day in the Life of a Slice of Bread
Deviantart: sasquatchix
Soundcloud: sasquatchii
itch: sasquatchii
Location: South Carolina
Contact:

Re: Scrollbar + Viewport for Custom Menu with Text

#3 Post by sasquatchii » Wed Jul 11, 2018 10:52 pm

mitoky wrote:
Wed Jul 11, 2018 3:18 am
Technically i think you should have a viewport and inside the viewport everything else (so its all scrollable): so kind of like this:

Code: Select all

    viewport:
        yinitial 0.0
        
        #adjust these as wanted
        yalign 0.5
        xalign 0.5
        xmaximum 1200
        ymaximum 800

        draggable True
        mousewheel True

        scrollbars "vertical" style "vslider"

        vbox:
            ##At this point text and images how you want to show them, using hbox and vbox, spacing etc.
I didnt tested it, so let me know if something doenst works!
IT WORKED!!! Thank you so, so much, I would have been super clueless if not for that code.

I do have a stupid question, how do I customize the scrollbar? Here's what it currently looks like:

Image

But I'd like to have it look more like the first image I posted in my original post. How do I customize what it looks like?

Here's the code I'm currently using if it makes a difference:

Code: Select all

screen vbars_example():
    
    tag menu
    
    # The various buttons.
    imagemap:
        ground "images/gui/about-idle.png"
        idle "images/gui/about-idle.png"
        hover "images/gui/about-hover.png"
        
        if main_menu:
            hotspot (889,124,40,40) action Return()
            
        if not main_menu:
            hotspot (889,124,40,40) action Return()
    
    default n = 66

    viewport:
        yinitial 0.0
        
        #adjust these as wanted
        yalign 0.4
        xalign 0.5
        xminimum 720
        xmaximum 720
        yminimum 341
        ymaximum 341

        draggable True
        mousewheel True

        scrollbars "vertical" style "vslider"

        vbox:
            ##At this point text and images how you want to show them, using hbox and vbox, spacing etc.

            add "images/pictures/laikapic2.png"
ImageImageImage

User avatar
mitoky
Veteran
Posts: 287
Joined: Sat Feb 07, 2015 9:12 pm
Projects: CrossDol, The Purring Demon's Love, circus eterie
Organization: astellic
Tumblr: mitoky
Contact:

Re: Scrollbar + Viewport for Custom Menu with Text

#4 Post by mitoky » Thu Jul 12, 2018 12:04 am

sasquatchii wrote:
Wed Jul 11, 2018 10:52 pm
mitoky wrote:
Wed Jul 11, 2018 3:18 am
Technically i think you should have a viewport and inside the viewport everything else (so its all scrollable): so kind of like this:

Code: Select all

    viewport:
        yinitial 0.0
        
        #adjust these as wanted
        yalign 0.5
        xalign 0.5
        xmaximum 1200
        ymaximum 800

        draggable True
        mousewheel True

        scrollbars "vertical" style "vslider"

        vbox:
            ##At this point text and images how you want to show them, using hbox and vbox, spacing etc.
I didnt tested it, so let me know if something doenst works!
IT WORKED!!! Thank you so, so much, I would have been super clueless if not for that code.

I do have a stupid question, how do I customize the scrollbar? Here's what it currently looks like:

Image

But I'd like to have it look more like the first image I posted in my original post. How do I customize what it looks like?

Here's the code I'm currently using if it makes a difference:

Code: Select all

screen vbars_example():
    
    tag menu
    
    # The various buttons.
    imagemap:
        ground "images/gui/about-idle.png"
        idle "images/gui/about-idle.png"
        hover "images/gui/about-hover.png"
        
        if main_menu:
            hotspot (889,124,40,40) action Return()
            
        if not main_menu:
            hotspot (889,124,40,40) action Return()
    
    default n = 66

    viewport:
        yinitial 0.0
        
        #adjust these as wanted
        yalign 0.4
        xalign 0.5
        xminimum 720
        xmaximum 720
        yminimum 341
        ymaximum 341

        draggable True
        mousewheel True

        scrollbars "vertical" style "vslider"

        vbox:
            ##At this point text and images how you want to show them, using hbox and vbox, spacing etc.

            add "images/pictures/laikapic2.png"

Ok, so first of all change the style name from "vslider" to "custom_vslider" since i think vslider exists already. Afterwards you create a custom style underneath (not in the screen, on its own) like this:

Code: Select all

style custom_vslider:
    base_bar "YOURIMAGE.png"
    thumb "YOURIMAGE.png"
    thumb_offset 0
    top_gutter 0
    bottom_gutter 0
    xmaximum 25
    ymaximum 100
base_bar = The slider itself.
thumb = the thumb used on the slider
thumb offset = You will see when you experiement with that but basically hides the transparents space on top and bottom between the thumb and slider.
top & bottom gutter = if you thumb starts too high or low, adjust these numbers higher to get it right
xmaximum = should be the width of your base_thumb image
ymaximum = should be the height of your base_thumb image

Also make sure the base_thumb image height (and hence its ymaximum) and the ymaximum of the vbox are identical. I hope i could help!
Image

[Logo Commissions - OPEN] || Wish to support or tip me? Buy Me a Coffee!

User avatar
sasquatchii
Miko-Class Veteran
Posts: 516
Joined: Fri Jul 04, 2014 7:48 am
Completed: A Day in the Life of a Slice of Bread
Deviantart: sasquatchix
Soundcloud: sasquatchii
itch: sasquatchii
Location: South Carolina
Contact:

Re: Scrollbar + Viewport for Custom Menu with Text

#5 Post by sasquatchii » Thu Jul 12, 2018 8:12 am

mitoky wrote:
Thu Jul 12, 2018 12:04 am
Ok, so first of all change the style name from "vslider" to "custom_vslider" since i think vslider exists already. Afterwards you create a custom style underneath (not in the screen, on its own) like this:

Code: Select all

style custom_vslider:
    base_bar "YOURIMAGE.png"
    thumb "YOURIMAGE.png"
    thumb_offset 0
    top_gutter 0
    bottom_gutter 0
    xmaximum 25
    ymaximum 100
base_bar = The slider itself.
thumb = the thumb used on the slider
thumb offset = You will see when you experiement with that but basically hides the transparents space on top and bottom between the thumb and slider.
top & bottom gutter = if you thumb starts too high or low, adjust these numbers higher to get it right
xmaximum = should be the width of your base_thumb image
ymaximum = should be the height of your base_thumb image

Also make sure the base_thumb image height (and hence its ymaximum) and the ymaximum of the vbox are identical. I hope i could help!
Thank you so much!! I added your code in (the game wouldn't let me add the style without having "init -2:" in front of it, but it didn't work :(

Here's what the code currently looks like:

Code: Select all

screen vbars_example():
    
    tag menu
    
    # The various buttons.
    imagemap:
        ground "images/gui/about-idle.png"
        idle "images/gui/about-idle.png"
        hover "images/gui/about-hover.png"
        
        if main_menu:
            hotspot (880,124,40,40) action Return()
            
        if not main_menu:
            hotspot (880,124,40,40) action Return()
    
    default n = 66

    viewport:
        yinitial 0.0
        
        #adjust these as wanted
        yalign 0.692
        xalign 0.53
        xminimum 715
        xmaximum 715
        yminimum 303
        ymaximum 303

        draggable True
        mousewheel True

        scrollbars "vertical" style "custom_vslider"

        vbox:
            ##At this point text and images how you want to show them, using hbox and vbox, spacing etc.

            add "images/pictures/explanation-2.png"
 
    
init -2:
    style custom_vslider:
        base_bar "images/gui/base_bar.png"
        thumb "images/gui/thumb.png"
        thumb_offset 0
        top_gutter 0
        bottom_gutter 0
        xmaximum 19
        ymaximum 294
Basically, I can still launch the game & see the screen - but the scrollbar is unchanged!
ImageImageImage

User avatar
mitoky
Veteran
Posts: 287
Joined: Sat Feb 07, 2015 9:12 pm
Projects: CrossDol, The Purring Demon's Love, circus eterie
Organization: astellic
Tumblr: mitoky
Contact:

Re: Scrollbar + Viewport for Custom Menu with Text

#6 Post by mitoky » Thu Jul 12, 2018 8:17 am

Hmm i see, maybe try this:

Code: Select all

screen vbars_example():
    
    tag menu
    
    # The various buttons.
    imagemap:
        ground "images/gui/about-idle.png"
        idle "images/gui/about-idle.png"
        hover "images/gui/about-hover.png"
        
        if main_menu:
            hotspot (880,124,40,40) action Return()
            
        if not main_menu:
            hotspot (880,124,40,40) action Return()
    
    default n = 66

    viewport:
        style_prefix "custom"
        yinitial 0.0
        
        #adjust these as wanted
        yalign 0.692
        xalign 0.53
        xminimum 715
        xmaximum 715
        yminimum 303
        ymaximum 303

        draggable True
        mousewheel True

        scrollbars "vertical"

        vbox:
            ##At this point text and images how you want to show them, using hbox and vbox, spacing etc.

            add "images/pictures/explanation-2.png"
 
    
init -2:
    style custom_vscrollbar:
        base_bar "images/gui/base_bar.png"
        thumb "images/gui/thumb.png"
        thumb_offset 0
        top_gutter 0
        bottom_gutter 0
        xmaximum 19
        ymaximum 294
Image

[Logo Commissions - OPEN] || Wish to support or tip me? Buy Me a Coffee!

User avatar
sasquatchii
Miko-Class Veteran
Posts: 516
Joined: Fri Jul 04, 2014 7:48 am
Completed: A Day in the Life of a Slice of Bread
Deviantart: sasquatchix
Soundcloud: sasquatchii
itch: sasquatchii
Location: South Carolina
Contact:

Re: Scrollbar + Viewport for Custom Menu with Text

#7 Post by sasquatchii » Thu Jul 12, 2018 9:29 pm

That worked!!!! Thank you so much for all your help, Mitoky :D
ImageImageImage

User avatar
mitoky
Veteran
Posts: 287
Joined: Sat Feb 07, 2015 9:12 pm
Projects: CrossDol, The Purring Demon's Love, circus eterie
Organization: astellic
Tumblr: mitoky
Contact:

Re: Scrollbar + Viewport for Custom Menu with Text

#8 Post by mitoky » Fri Jul 13, 2018 4:26 am

sasquatchii wrote:
Thu Jul 12, 2018 9:29 pm
That worked!!!! Thank you so much for all your help, Mitoky :D
No problem at all, glad that it works (:
Image

[Logo Commissions - OPEN] || Wish to support or tip me? Buy Me a Coffee!

Post Reply

Who is online

Users browsing this forum: TsukiWorks