[SOLVED] Trying to make a scrolling menu within a screen

[Maou Zenigame]

I'm trying to make a screen that has a scrolling list of imagebuttons off to one side, navigated with a vertical scrollbar.

Here's the mockup of what it's supposed to end up looking like:

I'm guessing that the way to pull this off would have something to do with viewports, but how exactly would I go about it?

[isobellesophia]

Can you show the code about the scrolling?

[isobellesophia]

I think you could try this one.

Code: Select all

screen ....:
tag menu
use game_menu(scroll="viewport"):

[Maou Zenigame]

That's the thing, I don't know where I'd even start with this.

I know I want a smaller window along where the "name of title" parts in the example image are that would scroll through a list of these:

but I don't know what I'd even do to start making such a thing.

[Maou Zenigame]

Bumping for help.

[isobellesophia]

Could you be specific? I mean.. i am bad at english so... you mean you wanted a scrolling menu inside of the textbutton itself right?

[Maou Zenigame]

Where I want the active area of the screen to be is in the red rectangle here:

There, I want to have a scrollable list of imagebuttons that link to certain parts of the script.

[Imperf3kt]

You want to use either a viewport, or a vpgrid.
https://www.renpy.org/doc/html/screens.html#viewport
There is an included example at the end of the section. Try that and see how it goes. If you need further help, I can probably be more specific soon (™)

[Maou Zenigame]

This is the code that I have right now.

Code: Select all

screen nicosensei():
    tag menu
    imagemap:
        ground "gui/Extra/nicosensei_bg.png"
        idle "gui/Extra/nicosensei_idle.png"
        hover "gui/Extra/nicosensei_hover.png"
        
        alpha False
        # This is so that everything transparent is invisible to the cursor. 
        
        hotspot (1078, 646, 172, 41) action ShowMenu("extra")

        side "c":
            area (640, 200, 600, 370)

            viewport id "nicomenu":
                scrollbars "verticalr"
                mousewheel True
                arrowkeys True

Like I said before, I know that the way to do what I want involves viewports but I don't know how to get it to work properly.
All this does is create a window with scrollbars, I don't know how to get the imagebuttons within it working or the text on top of it denoting what they're supposed to lead to or how to change the scrollbars or any of that.

[Milkymalk]

Code: Select all

            viewport id "nicomenu":
                scrollbars "vertical"
                mousewheel True
                arrowkeys True
                vbox:
                    imagebutton idle "button1.png" action MyAction()
                    imagebutton idle "button2.png" action MyAction()
                    imagebutton idle "button3.png" action MyAction()
                    # and so on

Changing how the scrollbars look is a style thing, I don't have a firm grasp on that myself atm

[Maou Zenigame]

What I have now:

Code: Select all

screen nicosensei():
    tag menu
    imagemap:
        ground "gui/Extra/nicosensei_bg.png"
        idle "gui/Extra/nicosensei_idle.png"
        hover "gui/Extra/nicosensei_hover.png"
        
        alpha False
        # This is so that everything transparent is invisible to the cursor. 
        
        hotspot (1078, 646, 172, 41) action ShowMenu("extra")

        side "c":
            area (640, 200, 600, 370)

            viewport id "nicomenu":
                scrollbars "vertical"
                mousewheel True
                arrowkeys True
                vbox:
                    imagebutton:
                        idle "gui/Extra/extrabox_idle.png"
                        hover "gui/Extra/extrabox_hover.png"
                        action Replay("interlude1")
                    imagebutton:
                        idle "gui/Extra/extrabox_idle.png"
                        hover "gui/Extra/extrabox_hover.png"
                        action Replay("interlude2")
                    imagebutton:
                        idle "gui/Extra/extrabox_idle.png"
                        hover "gui/Extra/extrabox_hover.png"
                        action Replay("interlude3")

My intention was to have the same two image as the hover/idle since it's supposed just be a list of the same imagebutton repeated (in the same way that in-game choices are displayed), but it doesn't seem to want to allow multiple instances of the same image.
And then there's the issue of getting the text in there as well, which I still can't figure out.

Regarding the scrollbar, I already have custom ones replacing the defaults for my history screen so I know I'm going to need to make a new style entirely, but that's something else that I don't know how to get working properly.

[Milkymalk]

You can use button instead of imagebutton and layer images and text inside it:

Code: Select all

button:
    add "button.png"
    text "Click Me"
    action MyAction()
    # other button stuff

But then you can't use idle, hover etc.
It IS possible to use an image and text as we see in the choice screens, but that uses styles and I don't really understand how those work.

[Maou Zenigame]

Which leads me right back to the problems that I've been having.

So both the buttons themselves and the scrollbar for this screen require me to make custom styles for them, but I don't know how to do so.

[Milkymalk]

You can use idle_background, hover_background etc. in a button to set those images.

[Maou Zenigame]

Now I have a "button," but only the text is active.
Also, it's still not letting me reuse the images themselves.

Code: Select all

screen nicosensei():
    tag menu
    imagemap:
        ground "gui/Extra/nicosensei_bg.png"
        idle "gui/Extra/nicosensei_idle.png"
        hover "gui/Extra/nicosensei_hover.png"
        
        alpha False
        # This is so that everything transparent is invisible to the cursor. 
        
        hotspot (1078, 646, 172, 41) action ShowMenu("extra")

        side "c":
            area (640, 200, 600, 370)

            viewport id "nicomenu":
                scrollbars "vertical"
                mousewheel True
                arrowkeys True
                vbox:
                    button:
                        idle_background "gui/Extra/extrabox_idle.png"
                        hover_background "gui/Extra/extrabox_hover.png"
                        text "testing 1 2 3"
                        action Replay("interlude1")
                    button:
                        idle_background "gui/Extra/extrabox_idle.png"
                        hover_background "gui/Extra/extrabox_hover.png"
                        text "testing 2 2 3"
                        action Replay("interlude2")
                    button:
                        idle_background "gui/Extra/extrabox_idle.png"
                        hover_background "gui/Extra/extrabox_hover.png"
                        text "testing 3 2 3"
                        action Replay("interlude3")