[SOLVED] Help on viewports and displaying imagebuttons in them?

[elysiaenjoyerr]

I've tried looking for a detailed tutorial on viewports for days, but there haven't been any. I checked the official Ren'Py website and it only left me even more confused.

I'm trying to create a screen that has a scrollbar to scroll through imagebuttons. Then if these imagebuttons are pressed an NVL will appear next to it. It looks like this;



I really don't know anything about viewports, and I'm extremely stuck. Any useful links or explanations are greatly appreciated! (っ* ´□` )っ

[jeffster]

At the end of the official docs on Viewport
https://renpy.org/doc/html/screens.html#viewport
see an example. It shows that viewport and its scrollbar are typically used with "side" displayable.
Yes, it's easy to get a little confused.

But if your buttons can be made of the same size, then there's a simpler solution, "vpgrid":
https://renpy.org/doc/html/screens.html#vpgrid

Code: Select all

screen vpgrid_test():
    default nvl_index = 0
    vpgrid:
        cols 1
        spacing 12
        draggable True
        mousewheel True
        scrollbars "vertical"

        for i in range(1, 20):
            textbutton "Button [i]":
                xysize (300, 100)
                background "#AA7"
                hover_background "#BB9"
                action SetScreenVariable("nvl_index", i)
    frame:
        pos (400, 100)
        xysize (1000, 600)
        background "#CCA"
        text "NVL [nvl_index]" size 64

label start:
    call screen vpgrid_test

[elysiaenjoyerr]

Hello! Thank you so much for this, I used the vpgrid method and I'm at least closer to what I want.

I just 1. Would like the scroll bar to be different from the set one in the GUI, because that one fits my whole game but not this specific part of the game (the color scheme changes and such). I would also like it to be next to the imagebuttons on the left, inside the light box.

2. The boxes are too spaced out (I thought 'spacing' in the vpgrid would change it but it doesn't) and only shows one button at a time.

3. The boxes overlap the box behind it (which is only an image file) when I want it all to be inside the box.

If you could help with these that would be extremely appreciated! Thank you once again ૮ ˶ᵔ ᵕ ᵔ˶ ა

[elysiaenjoyerr]

At the end of the official docs on Viewport
https://renpy.org/doc/html/screens.html#viewport
see an example. It shows that viewport and its scrollbar are typically used with "side" displayable.
Yes, it's easy to get a little confused.

But if your buttons can be made of the same size, then there's a simpler solution, "vpgrid":
https://renpy.org/doc/html/screens.html#vpgrid

Code: Select all

screen vpgrid_test():
    default nvl_index = 0
    vpgrid:
        cols 1
        spacing 12
        draggable True
        mousewheel True
        scrollbars "vertical"

        for i in range(1, 20):
            textbutton "Button [i]":
                xysize (300, 100)
                background "#AA7"
                hover_background "#BB9"
                action SetScreenVariable("nvl_index", i)
    frame:
        pos (400, 100)
        xysize (1000, 600)
        background "#CCA"
        text "NVL [nvl_index]" size 64

label start:
    call screen vpgrid_test

Hello! Thank you so much for this, I used the vpgrid method and I'm at least closer to what I want.

I just 1. Would like the scroll bar to be different from the set one in the GUI, because that one fits my whole game but not this specific part of the game (the color scheme changes and such). I would also like it to be next to the imagebuttons on the left, inside the light box.

2. The boxes are too spaced out (I thought 'spacing' in the vpgrid would change it but it doesn't) and only shows one button at a time.

3. The boxes overlap the box behind it (which is only an image file) when I want it all to be inside the box.

If you could help with these that would be extremely appreciated! Thank you once again ૮ ˶ᵔ ᵕ ᵔ˶ ა

(also im not very good with lemma soft forums and I accidentally replied to myself instead of your comment...)

[jeffster]

1. Would like the scroll bar to be different from the set one in the GUI, because that one fits my whole game but not this specific part of the game (the color scheme changes and such). I would also like it to be next to the imagebuttons on the left, inside the light box.

2. The boxes are too spaced out (I thought 'spacing' in the vpgrid would change it but it doesn't) and only shows one button at a time.

3. The boxes overlap the box behind it (which is only an image file) when I want it all to be inside the box.

There must be something wrong with your vpgrid elements.

"vpgrid" is like a table (or matrix if you wish) of elements, arranged in columns and rows (1 col in your case).

It looks like you put the huge text area (on the right) inside the vpgrid. Note that in my code example, "frame" is at the same indentation level as "vpgrid", i.e. not inside it. (It's a separate element from vpgrid, it's just the text content changes when you click those buttons).

As for scrollbars, their visual style can be changed.
https://renpy.org/doc/html/gui.html#scrollbars

But it seems that vpgrid has vertical scrollbar only on the right. If you want it on the left, then use "viewport" instead of "vpgrid", or perhaps add some hack, like e.g. "xoffset -200" to shift the scrollbar on the right to be shown 200 pixels moved to the left.

(I will check later today how to apply styles to scrollbar in your case, but it's probably something straightforward).

PS. Or if your "vpgrid" contains only those buttons, what size they are? Perhaps they are really large? Try to set their size explicitly, like

Code: Select all

            button:
                xysize (280, 170)

[elysiaenjoyerr]

1. Would like the scroll bar to be different from the set one in the GUI, because that one fits my whole game but not this specific part of the game (the color scheme changes and such). I would also like it to be next to the imagebuttons on the left, inside the light box.

2. The boxes are too spaced out (I thought 'spacing' in the vpgrid would change it but it doesn't) and only shows one button at a time.

3. The boxes overlap the box behind it (which is only an image file) when I want it all to be inside the box.

There must be something wrong with your vpgrid elements.

"vpgrid" is like a table (or matrix if you wish) of elements, arranged in columns and rows (1 col in your case).

It looks like you put the huge text area (on the right) inside the vpgrid. Note that in my code example, "frame" is at the same indentation level as "vpgrid", i.e. not inside it. (It's a separate element from vpgrid, it's just the text content changes when you click those buttons).

As for scrollbars, their visual style can be changed.
https://renpy.org/doc/html/gui.html#scrollbars

But it seems that vpgrid has vertical scrollbar only on the right. If you want it on the left, then use "viewport" instead of "vpgrid", or perhaps add some hack, like e.g. "xoffset -200" to shift the scrollbar on the right to be shown 200 pixels moved to the left.

(I will check later today how to apply styles to scrollbar in your case, but it's probably something straightforward).

PS. Or if your "vpgrid" contains only those buttons, what size they are? Perhaps they are really large? Try to set their size explicitly, like

Code: Select all

            button:
                xysize (280, 170)

This worked great, thank you so much! (≧◡≦)

Now the buttons sit comfortably next to each other, like this. I'll mess around with the xoffset, and I did try it, but not only did it take the scrollbar with it, but also the vpgrid. I think the easier way would be to just put the scrollbar on the left, which is what I'll do.



I'm still not sure what to do with the box behind it, which I want the vpgrid to stay in and disappear after crossing the end of it (like a mask?). And of course, I had a look through the scrollbar features and it only uses the GUI scrollbar, I can't seem to find anything concerning being able to customize one for only one screen.

And in terms of the actual NVL, how does it work with the set screen variable? I want to display different, pretty long pieces of text (which, now I think about it, may need it's own vpgrid because they are extremely long) with every button (eg button 1 displays NVL 1, button 2 displays NVL 2). Your example which used the int worked as every button would display a different number, but I'm not sure how to do that with words. I had a look on the official Ren'Py website and couldn't find anything about that on the 'SetScreenVariable' action.

[jeffster]

Now the buttons sit comfortably next to each other, like this. I'll mess around with the xoffset, and I did try it, but not only did it take the scrollbar with it, but also the vpgrid. I think the easier way would be to just put the scrollbar on the left, which is what I'll do.

Here's how I did the vpgrid with customized scrollbar:

Code: Select all

# Just some image to test buttons:
image btn_bg:
    Solid("#AA7", xysize=(280, 170))
    on idle:
        alpha 1.
        Solid("#AA7", xysize=(280, 170))
    on hover:
        alpha 0.3
        Solid("#884", xysize=(280, 170))
        easein 0.3 alpha 1.

screen vpgrid_test():
    default nvl_index = 0
    vpgrid:
        cols 1
        spacing 12
        draggable True
        mousewheel True
        scrollbars "vertical"

        # Here's the magic:
        xpos 40                     # Shift vpgrid to the right (40 px)
        vscrollbar_xsize 40  # Width of the scrollbar (40 px)
        vscrollbar_xoffset -320  # Shift the scrollbar to the left by its width + button width

        # Your custom vertical scrollbar images:
        vscrollbar_base_bar Frame("gui/scrollbar/vertical_[prefix_]bar2.png")
        vscrollbar_thumb Frame("gui/scrollbar/vertical_[prefix_]thumb2.png")
        
        for i in range(1, 20):
            button:
                xysize (280, 170)
                add "btn_bg"
                text "Button [i]" align (.5, .5)
                action SetScreenVariable("nvl_index", i)
    frame:
        pos (400, 100)
        xysize (1400, 800)
        background "#CCA"
        text "NVL [nvl_index]" size 64

label start:
    call screen vpgrid_test

I'm still not sure what to do with the box behind it, which I want the vpgrid to stay in and disappear after crossing the end of it (like a mask?).

You can wrap the vpgrid into a frame which would limit its height (e.g. set it as the frame's "ysize").

And of course, I had a look through the scrollbar features and it only uses the GUI scrollbar, I can't seem to find anything concerning being able to customize one for only one screen.

Properties prefixed with "vscrollbar_" are passed to the scrollbar (from viewport or vpgrid definitions), see the docs.

And in terms of the actual NVL, how does it work with the set screen variable? I want to display different, pretty long pieces of text (which, now I think about it, may need it's own vpgrid because they are extremely long) with every button (eg button 1 displays NVL 1, button 2 displays NVL 2). Your example which used the int worked as every button would display a different number, but I'm not sure how to do that with words. I had a look on the official Ren'Py website and couldn't find anything about that on the 'SetScreenVariable' action.

'SetScreenVariable' action is here
https://renpy.org/doc/html/screen_actio ... ta-actions

Regarding NVL text, I don't know what is your idea. Is this whole screen like "History"?
Then what do you show in the buttons on the left?
I mean, there could be thousands lines of dialog. Will you have a button for each of them?
Or one button per "page" of NVL dialogs?

PS. There should be some kind of correspondence between a button on the left and the displayed text.
E.g. as a list

Code: Select all

define nvl_screen = [
        "This is the text for button 1",
        "Another text - for button 2",
        "And so on (button 3 here)..."
    ]

Then those text lines could be accessed as
nvl_screen[0]
nvl_screen[1]
nvl_screen[2]

Or instead of list if you use a "dict" ("dictionary"):

Code: Select all

define nvl_screen = {
        "This is":      "This is the text for button 1",
        "Another":      "Another text - for button 2",
        "And so on":    "And so on (button 3 here)..."
    }

Then those text lines could be accessed by the dict's keys - as
nvl_screen["This is"]
nvl_screen["Another"]
nvl_screen["And so on"]

[jeffster]

You can wrap the vpgrid into a frame which would limit its height (e.g. set it as the frame's "ysize").

I thought about "frame" because it's convenient to set the background of a frame.
Of course if the background was already set, you can just set "ysize" property directly in the vpgrid.
And you can set vpgrid's position with "pos" etc.
https://renpy.org/doc/html/style_properties.html

[elysiaenjoyerr]

Regarding NVL text, I don't know what is your idea. Is this whole screen like "History"?
Then what do you show in the buttons on the left?
I mean, there could be thousands lines of dialog. Will you have a button for each of them?
Or one button per "page" of NVL dialogs?

It's supposed to be a 'library'. Each button displays a different story that is shown in the form of NVL.
And talking about that... I realized I should probably have something that differentiates the buttons from each other. Is there a way to display a different text on every button to display what that story is? Or would they all have to be different buttons? I'm currently using imagebuttons, like this:

Code: Select all

for i in range(1, 19):
                    imagebutton:
                        auto "archive_nvl_button_%s" focus_mask True xysize (500, 180) action [SetScreenVariable("nvl_index", "Testing")]

Anyway, your code really really helped, thank you so much. I've now got it working perfectly, the only problem is that there's wasted space next to it, like this;



I messed around with the frame. When the xsize is smaller than the xsize of the image button, it cuts the buttons off. However, that's the only way I can get rid of the wasted space... here's my code;

Code: Select all

screen vpgrid_test():

    add "archive_nvl_background"
    default nvl_index = 1

    frame:
        pos (600, 100)
        xysize (1300, 900)
        background "#ffdcd9"
        text "[nvl_index]" size 32

    frame:

        pos (50, 100)
        xysize (500, 900)
        background "#ffdcd9"
    
        vpgrid:

            cols 1
            spacing 1
            draggable True
            mousewheel True
            scrollbars "vertical" xoffset -30

            xpos 35                     
            vscrollbar_xsize 20  
            vscrollbar_xoffset -330  

            vscrollbar_base_bar Frame("gui/scrollbar/vertical_idle_bar2.png")
            vscrollbar_thumb Frame("gui/scrollbar/vertical_idle_thumb2.png")

            for i in range(1, 19):
                    imagebutton:
                        auto "archive_nvl_button_%s" focus_mask True xysize (500, 180) action [SetScreenVariable("nvl_index", "Testing")]

[jeffster]

the only problem is that there's wasted space next to it
...
I messed around with the frame. When the xsize is smaller than the xsize of the image button, it cuts the buttons off. However, that's the only way I can get rid of the wasted space...

Wasted space?
If you mean to the left of the buttons, then what size they are?
You have

Code: Select all

imagebutton:
    auto "archive_nvl_button_%s"
    xysize (500, 180)

Are the button images really 500 px wide?
If not, set x size to the actual width of the image.
Like xysize (280, 180) if the button is 280px wide.

Or, if the button images have large transparent borders on the left, cut them out from the image files.

Anyways, all the problems with the page layout could be solved by proper "pos" and "xysize", usually.

Another thing to take into account is accessibility. Players can set different font sizes. Hence it's best to test page elements (if they have text) with different font sizes (evoked by shift-A in game).

And talking about that... I realized I should probably have something that differentiates the buttons from each other. Is there a way to display a different text on every button to display what that story is? Or would they all have to be different buttons? I'm currently using imagebuttons, like this:

Code: Select all

                for i in range(1, 19):
                    imagebutton:
                        auto "archive_nvl_button_%s"
                        focus_mask True
                        xysize (500, 180)
                        action [SetScreenVariable("nvl_index", "Testing")]

(You probably don't need "focus_mask True", as buttons are pretty much rectangular).

Yes, I imagine buttons to be different - either having "titles" of the stories, or pictures as titles.

For titles, it makes sense to use "button" instead of imagebutton, e.g.:

Code: Select all

                for i in range(1, 19):
                    button:
                        # images:
                        background "archive_nvl_button_idle"
                        hover_background "archive_nvl_button_hover"
                        selected_background "archive_nvl_button_selected"

                        text "Button [i] (testing)":
                            align (.5, .5)
                            size 32
                        xysize (300, 180)
                        action [SetScreenVariable("nvl_index", "Testing")]

Then for the "NVL" part, you can just show text (like reading a book in Morrowind), doing something like this:

Code: Select all

define library = {

    "A Dance in Fire, Book I":
        """Scene: The Imperial City, Cyrodiil
Date: 7 Frost Fall, 3E 397

It seemed as if the palace had always housed the Atrius Building Commission, the company of clerks and estate agents who authored and notarized nearly every construction of any note in the Empire. It had stood for two hundred and fifty years, since the reign of the Emperor Magnus, a plain-fronted and austere hall on a minor but respectable plaza in the Imperial City. Energetic and ambitious middle-class lads and ladies worked there, as well as complacent middle-aged ones like Decumus Scotti. No one could imagine a world without the Commission, least of all Scotti. To be accurate, he could not imagine a world without himself in the Commission.

"Lord Atrius is perfectly aware of your contributions," said the managing clerk, closing the shutter that demarcated Scotti's office behind him. "But you know that things have been difficult."

"Yes," said Scotti, stiffly.
        """,


    "A Game at Dinner":
        """Forward From The Publisher:

The history behind this letter is almost as interesting and dark as the story it tells. The original letter to the mysterious Dhaunayne was copied and began circulating around the Ashlands of Vvardenfell a few months ago. In time, a print found its way to the mainland and Prince Hlaalu Helseth's palace outside Almalexia. While the reader may conclude after reading this letter that the Prince would be furious about such a work, impugning his highness with great malevolence, quite the reverse was true. The Prince and his mother, Queen Barenziah, had it privately printed into bound copies and sent to libraries and booksellers throughout Morrowind.

As matter of record, the Prince and the Queen have not officially stated whether the letter is a work of pure imagination or based on an actual occurrence. The House Dres has publicly denounced the work, and indeed, no one named Dhaunayne, despite the suggestions in the letter, has ever been linked to the house. We leave the reader to interpret the letter as he or she believes.

-- Nerris Gan, Publisher
        """,
    }

And the script could be like

Code: Select all

define library = {

        None:           "",


        "A Dance in Fire, Book I":
            """
Scene: The Imperial City, Cyrodiil
Date: 7 Frost Fall, 3E 397

It seemed as if the palace had always housed the Atrius Building Commission, the company of clerks and estate agents who authored and notarized nearly every construction of any note in the Empire. It had stood for two hundred and fifty years, since the reign of the Emperor Magnus, a plain-fronted and austere hall on a minor but respectable plaza in the Imperial City. Energetic and ambitious middle-class lads and ladies worked there, as well as complacent middle-aged ones like Decumus Scotti. No one could imagine a world without the Commission, least of all Scotti. To be accurate, he could not imagine a world without himself in the Commission.

"Lord Atrius is perfectly aware of your contributions," said the managing clerk, closing the shutter that demarcated Scotti's office behind him. "But you know that things have been difficult."

"Yes," said Scotti, stiffly.

"Lord Vanech's men have been giving us a lot of competition lately, and we must be more efficient if we are to survive. Unfortunately, that means releasing some of our historically best but presently underachieving senior clerks."

"I understand. Can't be helped."

"I'm glad that you understand," smiled the managing clerk, smiling thinly and withdrawing. "Please have your room cleared immediately."

<...>
            """,

        "A Game at Dinner":
            """
Forward From The Publisher:

The history behind this letter is almost as interesting and dark as the story it tells. The original letter to the mysterious Dhaunayne was copied and began circulating around the Ashlands of Vvardenfell a few months ago. In time, a print found its way to the mainland and Prince Hlaalu Helseth's palace outside Almalexia. While the reader may conclude after reading this letter that the Prince would be furious about such a work, impugning his highness with great malevolence, quite the reverse was true. The Prince and his mother, Queen Barenziah, had it privately printed into bound copies and sent to libraries and booksellers throughout Morrowind.

As matter of record, the Prince and the Queen have not officially stated whether the letter is a work of pure imagination or based on an actual occurrence. The House Dres has publicly denounced the work, and indeed, no one named Dhaunayne, despite the suggestions in the letter, has ever been linked to the house. We leave the reader to interpret the letter as he or she believes.

-- Nerris Gan, Publisher
***

Dark Liege Dhaunayne,

You asked for a detailed description of my experience last night and the reasons for my plea to House Dres for another assignment. I hope I have served you well in my capacity as informant in the court of Prince Helseth, a man who I have stated in many previous reports could teach Molag Bal how to scheme. As you know, I've spent nearly a year now working my way into his inner circle of advisors. He was in need of friendship when he first arrived in Morrowind and eagerly took to me and a few others. Still, he was disinclined to trust any of us, which is perhaps not surprising, given his tenuous position in Morrowind society.

For your unholiness's recollection, the Prince is the eldest son of Barenziah, who was once the Queen of Morrowind and once the Queen of the High Rock kingdom of Wayrest. At the death of her husband, Prince Helseth's stepfather, King Eadwyre, there was a power struggle between the Prince and Eadwyre's daughter, the Princess Elysana. Though details of what transpired are imperfect, it is clear that Elysana won the battle and became Queen, banishing Helseth and Barenziah. Barenziah's only other child, Morgiah, had already left court to marry and become Queen of the Summurset Isle kingdom of Firsthold.

<...>
            """,


        "And so on":    "And so on (button 3 here)...",
    }

image btn_bg:
    Solid("#AA7", xysize=(280, 170))
    on idle:
        alpha 1.
        Solid("#AA7", xysize=(280, 170))
    on hover:
        alpha 0.5
        Solid("#884", xysize=(280, 170))
        easein 0.1 alpha 1.

screen vpgrid_test():
    default nvl_index = None
    vpgrid:
        cols 1
        spacing 12
        draggable True
        mousewheel True
        scrollbars "vertical"

        xpos 40
        vscrollbar_xsize 40
        vscrollbar_xoffset -320
        vscrollbar_base_bar Frame("gui/scrollbar/vertical_[prefix_]bar2.png")
        vscrollbar_thumb Frame("gui/scrollbar/vertical_[prefix_]thumb2.png")
        
        # for i in range(1, 20):
        for k,v in library.items():
            if k:
                button:
                    xysize (280, 170)
                    add "btn_bg"
                    text k align (.5, .5)
                    action SetScreenVariable("nvl_index", k)

    side "c r":
        area (400, 100, 1400, 800)

        viewport id "vp":
            draggable True
            mousewheel True

            text "[library[nvl_index]]"

        vbar value YScrollValue("vp")

label start:
    call screen vpgrid_test

which means dict "library" consists of books, where book titles are used as dict's keys and are shown as button titles; book texts are shown on the right.

Or, if you wish to have clickable dialogs on the right, then probably clicking a button on the left would take readers to the labels of those stories.

Something like action Jump("story_123"), where

Code: Select all

label story123:
    nvl_character_1 "Dialog line 1"
    nvl_character_2 "Dialog line 2"
    # etc.

[elysiaenjoyerr]

[/code]

And the script could be like

Code: Select all

define library = {

        None:           "",


        "A Dance in Fire, Book I":
            """
Scene: The Imperial City, Cyrodiil
Date: 7 Frost Fall, 3E 397

It seemed as if the palace had always housed the Atrius Building Commission, the company of clerks and estate agents who authored and notarized nearly every construction of any note in the Empire. It had stood for two hundred and fifty years, since the reign of the Emperor Magnus, a plain-fronted and austere hall on a minor but respectable plaza in the Imperial City. Energetic and ambitious middle-class lads and ladies worked there, as well as complacent middle-aged ones like Decumus Scotti. No one could imagine a world without the Commission, least of all Scotti. To be accurate, he could not imagine a world without himself in the Commission.

"Lord Atrius is perfectly aware of your contributions," said the managing clerk, closing the shutter that demarcated Scotti's office behind him. "But you know that things have been difficult."

"Yes," said Scotti, stiffly.

"Lord Vanech's men have been giving us a lot of competition lately, and we must be more efficient if we are to survive. Unfortunately, that means releasing some of our historically best but presently underachieving senior clerks."

"I understand. Can't be helped."

"I'm glad that you understand," smiled the managing clerk, smiling thinly and withdrawing. "Please have your room cleared immediately."

<...>
            """,

        "A Game at Dinner":
            """
Forward From The Publisher:

The history behind this letter is almost as interesting and dark as the story it tells. The original letter to the mysterious Dhaunayne was copied and began circulating around the Ashlands of Vvardenfell a few months ago. In time, a print found its way to the mainland and Prince Hlaalu Helseth's palace outside Almalexia. While the reader may conclude after reading this letter that the Prince would be furious about such a work, impugning his highness with great malevolence, quite the reverse was true. The Prince and his mother, Queen Barenziah, had it privately printed into bound copies and sent to libraries and booksellers throughout Morrowind.

As matter of record, the Prince and the Queen have not officially stated whether the letter is a work of pure imagination or based on an actual occurrence. The House Dres has publicly denounced the work, and indeed, no one named Dhaunayne, despite the suggestions in the letter, has ever been linked to the house. We leave the reader to interpret the letter as he or she believes.

-- Nerris Gan, Publisher
***

Dark Liege Dhaunayne,

You asked for a detailed description of my experience last night and the reasons for my plea to House Dres for another assignment. I hope I have served you well in my capacity as informant in the court of Prince Helseth, a man who I have stated in many previous reports could teach Molag Bal how to scheme. As you know, I've spent nearly a year now working my way into his inner circle of advisors. He was in need of friendship when he first arrived in Morrowind and eagerly took to me and a few others. Still, he was disinclined to trust any of us, which is perhaps not surprising, given his tenuous position in Morrowind society.

For your unholiness's recollection, the Prince is the eldest son of Barenziah, who was once the Queen of Morrowind and once the Queen of the High Rock kingdom of Wayrest. At the death of her husband, Prince Helseth's stepfather, King Eadwyre, there was a power struggle between the Prince and Eadwyre's daughter, the Princess Elysana. Though details of what transpired are imperfect, it is clear that Elysana won the battle and became Queen, banishing Helseth and Barenziah. Barenziah's only other child, Morgiah, had already left court to marry and become Queen of the Summurset Isle kingdom of Firsthold.

<...>
            """,


        "And so on":    "And so on (button 3 here)...",
    }

I copy and pasted the define library code and it came up with this. If you can't see it from the huge piles of text, it's a text tag error. Apart from that, the text on the buttons worked, I just need them all to have the names. And onto that, I'm sorry, I'm finding myself a little confused by all the new code, if you could reiterate that would be wonderful ( ˃́▿˂̀ ). Sorry again. Thank you for the help so far!

[jeffster]

I copy and pasted the define library code and it came up with this.
...

Oh, I used the last Ren'Py version (something like 8.3.4), that allows better nested syntax in text interpolation.
In other words, the script should work if you update from Ren'Py 8.1.3 (e.g. to a last stable version).

PS. Actually instead of

Code: Select all

text "[library[nvl_index]]"

there should be

Code: Select all

text library[nvl_index]

Then it will work with older versions of Ren'Py too.

I'm finding myself a little confused by all the new code, if you could reiterate that would be wonderful ( ˃́▿˂̀ ).

I'm not sure if, when you say you want to show stories as NVL (in the right part of the screen), do you mean "click to show another line" dialog, or you just want to show the story text in one go. (Like a "book" text).

Therefore I described both options:
- One is to show just a long text in the viewport (that's what the last example script does).
- Another option is to use NVL dialog, how you do that in Ren'Py script usually. It's just the dialog script but using "NVL characters".
https://renpy.org/doc/html/nvl_mode.html

If you explain what exactly is the idea, I could explain better its possible implementation.

[elysiaenjoyerr]

I copy and pasted the define library code and it came up with this.
...

Oh, I used the last Ren'Py version (something like 8.3.4), that allows better nested syntax in text interpolation.
In other words, the script should work if you update from Ren'Py 8.1.3 (e.g. to a last stable version).

PS. Actually instead of

Code: Select all

text "[library[nvl_index]]"

there should be

Code: Select all

text library[nvl_index]

Then it will work with older versions of Ren'Py too.

I'm finding myself a little confused by all the new code, if you could reiterate that would be wonderful ( ˃́▿˂̀ ).

I'm not sure if, when you say you want to show stories as NVL (in the right part of the screen), do you mean "click to show another line" dialog, or you just want to show the story text in one go. (Like a "book" text).

Therefore I described both options:
- One is to show just a long text in the viewport (that's what the last example script does).
- Another option is to use NVL dialog, how you do that in Ren'Py script usually. It's just the dialog script but using "NVL characters".
https://renpy.org/doc/html/nvl_mode.html

If you explain what exactly is the idea, I could explain better its possible implementation.

Hello! Sorry for the really late reply, I was busy with work and school (.❛ ᴗ ❛.)

I updated my Ren'Py and it unexpectedly solved a small problem I had with something else, so thanks for letting me know to update it! And yeah, it only started working when I had

Code: Select all

text library[nvl_index]

not

Code: Select all

text "[library[nvl_index]]"

Don't worry, I used your first code with showing the texts on the side. I've got most of it working now!

Some things I ran into (and the main problem...):

I don't know why, but the buttons don't align with their stories... Instead of Button 2 showing Story 2, it shows Story 1 instead. And Button 1 isn't a button but instead some text, like this (sorry for the white text being hard to read, I haven't had a chance at changing the font color);



The other thing bugging me is that the title of the story overlaps the story when it's scrolled. Is there a way to not include the title on the right while keeping it for the button?

Please let me know if you need any code, I didn't know if it would be needed ( ˙▿˙ )

[jeffster]

I don't know why, but the buttons don't align with their stories... Instead of Button 2 showing Story 2, it shows Story 1 instead.

It's probably because indexes in Python start from 0 (just like in C), not from 1 as you might expect.

And Button 1 isn't a button but instead some text
...
Please let me know if you need any code, I didn't know if it would be needed ( ˙▿˙ )

Yes, without actual code I don't know how to correct the script.



PS. If two elements (like text) are shown in the same place, it must be because they have the same position (0, 0 by default).

You can either set the position of the second text, e.g. as "ypos 100" to shift it 100px down,
or use a vertical box:

Code: Select all

    vbox:
        text "Story title"
        text "Story body"

[elysiaenjoyerr]

Yes, without actual code I don't know how to correct the script.

Sorry about that, I should probably assume that code is needed in the first place.

Code: Select all

define librarytestvpgrid = { 
    
    None:           "",

        "Story 1":    "And so on (button 1 here)...",

        "Story 2":    "And so on (button 2 here)...",

        "Story 3":    "And so on (button 3 here)...",

        "Story 4":    "And so on (button 4 here)...",

        "Story 5":    "And so on (button 5 here)...",

        "Story 6":    "And so on (button 6 here)...",

        "Story 7":    "And so on (button 7 here)...",

        "Story 8":    "And so on (button 8 here)...",
    }


screen vpgrid_test():

    add "archive_nvl_background"
    default nvl_index = None

    frame:
        pos (600, 100)
        xysize (1300, 900)
        background "#ffdcd9"
        text "[nvl_index]" size 32
        
        side "c r":

#                area (600, 100, 1300, 900)

                viewport id "vp":
                    draggable True
                    mousewheel True
                
                    xysize (1100, 900)

                    text librarytestvpgrid[nvl_index]

                vbar value YScrollValue("vp")   
    frame:

        pos (50, 100)
        xysize (500, 900)
        background "#ffdcd9"
    
        vpgrid:

            allow_underfull True
            cols 1
            spacing 1
            draggable True
            mousewheel True
            scrollbars "vertical" xoffset -30

            xpos 35                     
            vscrollbar_xsize 20  
            vscrollbar_xoffset -330  
            vscrollbar_base_bar Frame("gui/scrollbar/vertical_idle_bar2.png")
            vscrollbar_thumb Frame("gui/scrollbar/vertical_idle_thumb2.png")
            
              
                
#            for i in range(1, 19):
            for k,v in librarytestvpgrid.items():
                if k:
    
                    button:

                        xysize (500, 180)

                        background "archive_nvl_button_idle"
                        hover_background "archive_nvl_button_hover"
                        selected_background "archive_nvl_button_selected"

                
                        text "[k]":
                                xalign (0.829)
                                size 32
                        action [SetScreenVariable("nvl_index", k)]

The stories just serve as placeholders for now.