[Solved] Help making a slider bar to change the Save/Load page

[Adabelitoo]

I never liked the original save/load page system where the higher page you can access with a click is 9 and then you have to click all the way up to, let's say, page 50. What I did in other games was increasing the range from 1 to 30 so the player can reach that many pages with just a click if they want it. Now I'm looking to implement something like this.



A bar the player can slide until the page they want, the previous/next page buttons (first and last page button would be unnecesary) and the page number next to it. With this players could increment the range to whatever number they want (I think 99 pages would be way more than enough) and hopefully disable the next page button once it's in page 99.

I haven't make much progress yet. I can add the slider bar to the save/load page where the range(1, 10) goes, but I have no idea how to attach the page number value to it. Also for some reason, the hbar takes the entire horizontal space on screen. Lastly, I can show the value next to the bar by doing something simple like text "[FilePageName()]/99" but is it possible to make FilePageName() return 02 (two digits) instead of 2 (one digit) when in page 2?

Thanks for reading.

[Ocelot]

If you are using f-strings, then f'{FilePageName()]:0>2} / 99' will show you page number padded with leading zeroes to be two wide.

You can set bar's released or even changed properties to invoke FilePage action to set page you want.
https://www.renpy.org/doc/html/screens.html#bar
https://www.renpy.org/doc/html/screen_a ... l#FilePage

By default bars take all avaliable space. You need to either set style properties to limit their max size or to make sure they are placed in appropriate containers.

[jeffster]

There is a simpler approach: add "double shift" buttons to jump 10 pages in that direction.

Code: Select all

<<   <   Q   A   1   2   3   4   5   6   7   8   9   10   >   >>

The slider UI is interesting, and it's doable.

1. To format numbers with padding, Python formatting methods can be used:
https://pyformat.info/#number_padding

In Ren'Py 8, as it uses Python 3, you can do it with so called f-strings:

Code: Select all

    $ page_num = f"{FilePageName():02d}"

":02d" means "format the value as zero-padded 2 digits".

2. To set the width of the bar you can use style properties like xsize.
https://renpy.org/doc/html/style_proper ... erty-xsize

3. To connect the slider bar with values, see
https://renpy.org/doc/html/screen_actio ... bar-values

You would want bar values to be integers in range(1, 100). (Which in Python means 1-99).
Bar action would be action FilePage(<page_n>).
The value (page number) could be probably stored as something like "persistent.page_n".
Hence it's probably like this:

PS. Edit:
There is a persistent variable "_file_page", but it's of "str" type, so try this:

Code: Select all

default persistent.file_page = 1

init python:
    def upd_file_page():
        persistent._file_page = str(persistent.file_page + 1)
        renpy.restart_interaction()

    def next_file_page():
        if persistent.file_page < 98:
            persistent.file_page += 1
            upd_file_page()

    def prev_file_page():
        if persistent.file_page > 0:
            persistent.file_page -= 1
            upd_file_page()

#... In the file_slots screen:
                    textbutton _("<") action prev_file_page

                    if config.has_autosave:
                        textbutton _("{#auto_page}A") action FilePage("auto")

                    if config.has_quicksave:
                        textbutton _("{#quick_page}Q") action FilePage("quick")

                    bar value FieldValue(persistent, "file_page", 98, step=1, action=upd_file_page, force_step=True):
                        xsize 800
                        # 0..98 => correct to 1..99 page in upd_file_page()

                    textbutton _(">") action next_file_page

PPS. Corrected buttons for prev_file_page & next_file_page. PPPS. "default", not "define" for persistent. And 0..98 -> 1..99.

[Adabelitoo]

Thank you both for your answers.

If you are using f-strings, then f'{FilePageName()]:0>2} / 99' will show you page number padded with leading zeroes to be two wide.

You can set bar's released or even changed properties to invoke FilePage action to set page you want.
https://www.renpy.org/doc/html/screens.html#bar
https://www.renpy.org/doc/html/screen_a ... l#FilePage

By default bars take all avaliable space. You need to either set style properties to limit their max size or to make sure they are placed in appropriate containers.

Thanks. I completely forgot bar had styles until now. I've been able to resize it and put it in place by using area. The one thing I haven't managed to do is making the thing you slide across the bar bigger than the bar itself like in the image. I managed to reduce the bars height to 50px and the thing you slide remains in the original height so that makes it bigger than the bar already, but the top of the the thing you slide always sticks to the top of the bar instead.



I'd like for the thing you slide to go up (ot the bar to go down) so it looks in the center like in the picture I posted before.

3. To connect the slider bar with values, see
https://renpy.org/doc/html/screen_actio ... bar-values

You would want bar values to be integers in range(1, 100). (Which in Python means 1-99).
Bar action would be action FilePage(<page_n>).
The value (page number) could be probably stored as something like "persistent.page_n".
Hence it's probably like this:

PS. Edit:
There is a persistent variable "_file_page", but it's of "str" type, so try this:

Code: Select all

default persistent.file_page = 1

init python:
    def upd_file_page():
        persistent._file_page = str(persistent.file_page + 1)
        renpy.restart_interaction()

    def next_file_page():
        if persistent.file_page < 98:
            persistent.file_page += 1
            upd_file_page()

    def prev_file_page():
        if persistent.file_page > 0:
            persistent.file_page -= 1
            upd_file_page()

#... In the file_slots screen:
                    textbutton _("<") action prev_file_page

                    if config.has_autosave:
                        textbutton _("{#auto_page}A") action FilePage("auto")

                    if config.has_quicksave:
                        textbutton _("{#quick_page}Q") action FilePage("quick")

                    bar value FieldValue(persistent, "file_page", 98, step=1, action=upd_file_page, force_step=True):
                        xsize 800
                        # 0..98 => correct to 1..99 page in upd_file_page()

                    textbutton _(">") action next_file_page

PPS. Corrected buttons for prev_file_page & next_file_page. PPPS. "default", not "define" for persistent. And 0..98 -> 1..99.

This works great, but it changes my slide bar, the bar where you have a little thing in the middle to slide across the bar, to a filling bar, those that change color when going up and down. I can't tell exactly what's forcing it to change.

[Ocelot]

When defining displayable for a bar thumb, add yalign=0.5 to make it centered on a bar. Or play with yoffset property to control position manually.

[Adabelitoo]

I'm confused. I managed to make the bar smaller than the thing you slide by doing this

Code: Select all

bar value Preference("music volume"):
    area (780, 98, 800, 25)

Ignoring the fact that is says Preference("music volume") because that's the one I copy pasted to use until I learn how to change the value. How and where do I have to add yalign=0.5? I can't add it there unless I'm missing something, it says area and yalign are incompatible.

[Ocelot]

Bar takes thumb property: https://www.renpy.org/doc/html/style_pr ... erty-thumb
It is a displayable which is used for, well, bar thumb. You can define any displayable and use it there.

[Adabelitoo]

I'm still confused. I messed up with those thumb values before but I didn't get any results. Now I thought you meant adding thumb_yalign 0.5 below area(780, 98, 800, 25) but that also doesn't work.

[jeffster]

The graphical elements that constitute the bar are .PNG images.
See "game/gui/bar/".

There are files "right.png" (that is used to fill the "empty part" of the bar), and "left.png" (for the "filled part" of the bar).
That's why standard bar style has brighter strip to the left of the slider/thumb.

You can replace the images with your own shapes and colors, for example:



Images can be partially transparent, so they can look thin compared to "thumb" without any need to adjust their size in style properties.
If you take the same image for "left" and "right", there will be no visible difference to the left and to the right of the slider (only thumb would indicate its position).

Of course we can use different images and styles for different bars:
https://www.renpy.org/doc/html/style_pr ... properties

[Adabelitoo]

Sorry I think I'm still missing the point here. I understand how left and right work, but I don't want to use the bar bar (game/gui/bar/), I want to use the slider bar (game/gui/slider/). Copy-pasting your code shows a bar and I'd like to make it a slider bar.

[jeffster]

Oh yes, of course. See
https://renpy.org/doc/html/gui.html#sliders
Of course, use slider images, not "bar" images. My bad.

In standard "screens.rpy" there is "style slider":

Code: Select all

style slider:
    ysize gui.slider_size
    base_bar Frame("gui/slider/horizontal_[prefix_]bar.png", gui.slider_borders, tile=gui.slider_tile)
    thumb "gui/slider/horizontal_[prefix_]thumb.png"

and some styles for slider elements

Code: Select all

style slider_slider:
    xsize 525

style slider_button:
    properties gui.button_properties("slider_button")
    yalign 0.5
    left_margin 15

style slider_button_text:
    properties gui.text_properties("slider_button")

style slider_vbox:
    xsize 675

You just create a similar style for your bar, something like

Code: Select all

style page_slider:
    xysize (800, 24)
    base_bar "gui/slider/page_bar.png"
    thumb "gui/slider/page_thumb.png"

where xysize is the size of the bar, and base_bar & thumb are their images.
For details refer to the link above, there are examples.

[Adabelitoo]

Thanks! The bar became a slider bar and I managed to make the thumb bigger than the bar itself by mixing the custom image with empty spaces and increasing the area height.

Thank you both. Marked as solved, although I'm still curious about how yaling would have worked.

Edit: I found an issue. If I press the previous or next page, the thumb stays in the same position, is it possible to make the previous and next page textbutton to update the thumb's position? Also, I wanted to limit the player from reaching pages higher than 99 by turning the next page textbutton into regular text when in page 99 so I thought I could do this

Code: Select all

if current-page >= 99:
    textbutton _("{size=40}>"):
    xalign 0.843
        yalign 0.081
        action FilePageNext()
else:
    text "{size=40}>":
        xalign 0.843
        yalign 0.081

But I don't understand what thing would replace current-page to make it work, I tried many things but none worked.

[jeffster]

The line "if current-page >= 99:" is incorrect because it should be "< 99" and also because you shouldn't use "-" in variable names. It's like "current" minus "page". Use underscore instead:

Code: Select all

if current_page < 99:

Actually the code I wrote here #3 should work to update the thumb position. It sets persistent._file_page and calls renpy.restart_interaction() which redraws the screen with the new values.

To move to adjacent pages in that case you would need to use
action prev_file_page
instead of FilePagePrevious()
and
action next_file_page
instead of FilePageNext(),
because the current page would depend on our persistent.file_page, which is not updated by standard Ren'Py functions. So you'd need to use our custom functions.

PS. In other words, here "persistent.file_page" is exactly "current page minus 1" (It's minus one because the bar value starts with 0, and I don't know how to make it start with 1. Maybe it's possible but it's easy to just add 1 when necessary):

Code: Select all

default persistent.file_page = 0

init python:
    def upd_file_page():
        persistent._file_page = str(persistent.file_page + 1)
        renpy.restart_interaction()

    def next_file_page():
        if persistent.file_page < 98:
            persistent.file_page += 1
            upd_file_page()

    def prev_file_page():
        if persistent.file_page > 0:
            persistent.file_page -= 1
            upd_file_page()

#... In the file_slots screen:
                    if persistent.file_page > 0:
                        textbutton _("<") action prev_file_page
                    else:
                        textbutton _("<") action None

                    if config.has_autosave:
                        textbutton _("{#auto_page}A") action FilePage("auto")

                    if config.has_quicksave:
                        textbutton _("{#quick_page}Q") action FilePage("quick")

                    bar value FieldValue(persistent, "file_page", 98, step=1, action=upd_file_page, force_step=True):
                        xsize 800

                    if persistent.file_page < 98:
                        textbutton _(">") action next_file_page
                    else:
                        textbutton _(">") action None

[Adabelitoo]

I used current-page, and especially used - instead of _, to indicate that that was what I wanted to replace but I didn't know what would replace it. I know current-page is wrong, that was the point, maybe I should have written something like xxxxxxxxxx >= 99 to make it easier to tell. I tried with persistent.file_page but it didn't work, because I did mess up the >= part so now it makes sense why it didn't work.

I think that's it, for real this time, I hope. Thank you for your help.

[jeffster]

You are welcome.
Thank you for the idea to use a bar to choose a save page. It's a classy idea and I think some developers would like to use it from now on. It looks great .