[Solved] Help making a slider bar to change the Save/Load page
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.
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.
- Adabelitoo
- Regular
- Posts: 99
- Joined: Sat Apr 13, 2019 2:32 pm
- Contact:
[Solved] Help making a slider bar to change the Save/Load page
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.
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.
Last edited by Adabelitoo on Mon Feb 26, 2024 4:27 am, edited 3 times in total.
- Ocelot
- Lemma-Class Veteran
- Posts: 2445
- Joined: Tue Aug 23, 2016 10:35 am
- Github: MiiNiPaa
- Discord: MiiNiPaa#4384
- Contact:
Re: Help making a slider bar to change the Save/Load page
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.
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.
< < insert Rick Cook quote here > >
Re: Help making a slider bar to change the Save/Load page
There is a simpler approach: add "double shift" buttons to jump 10 pages in that direction.
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:
":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:
PPS. Corrected buttons for prev_file_page & next_file_page. PPPS. "default", not "define" for persistent. And 0..98 -> 1..99.
Code: Select all
<< < Q A 1 2 3 4 5 6 7 8 9 10 > >>
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}"
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
If the problem is solved, please edit the original post and add [SOLVED] to the title.
- Adabelitoo
- Regular
- Posts: 99
- Joined: Sat Apr 13, 2019 2:32 pm
- Contact:
Re: Help making a slider bar to change the Save/Load page
Thank you both for your answers.
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.
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.Ocelot wrote: ↑Sun Feb 25, 2024 3:27 am 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.
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.
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.jeffster wrote: ↑Sun Feb 25, 2024 3:38 am 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:
PPS. Corrected buttons for prev_file_page & next_file_page. PPPS. "default", not "define" for persistent. And 0..98 -> 1..99.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
- Ocelot
- Lemma-Class Veteran
- Posts: 2445
- Joined: Tue Aug 23, 2016 10:35 am
- Github: MiiNiPaa
- Discord: MiiNiPaa#4384
- Contact:
Re: Help making a slider bar to change the Save/Load page
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.
< < insert Rick Cook quote here > >
- Adabelitoo
- Regular
- Posts: 99
- Joined: Sat Apr 13, 2019 2:32 pm
- Contact:
Re: Help making a slider bar to change the Save/Load page
I'm confused. I managed to make the bar smaller than the thing you slide by doing this
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.
Code: Select all
bar value Preference("music volume"):
area (780, 98, 800, 25)
- Ocelot
- Lemma-Class Veteran
- Posts: 2445
- Joined: Tue Aug 23, 2016 10:35 am
- Github: MiiNiPaa
- Discord: MiiNiPaa#4384
- Contact:
Re: Help making a slider bar to change the Save/Load page
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.
It is a displayable which is used for, well, bar thumb. You can define any displayable and use it there.
< < insert Rick Cook quote here > >
- Adabelitoo
- Regular
- Posts: 99
- Joined: Sat Apr 13, 2019 2:32 pm
- Contact:
Re: Help making a slider bar to change the Save/Load page
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.
Re: Help making a slider bar to change the Save/Load page
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
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
If the problem is solved, please edit the original post and add [SOLVED] to the title.
- Adabelitoo
- Regular
- Posts: 99
- Joined: Sat Apr 13, 2019 2:32 pm
- Contact:
Re: Help making a slider bar to change the Save/Load page
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.
Re: Help making a slider bar to change the Save/Load page
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":
and some styles for slider elements
You just create a similar style for your bar, something like
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.
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"
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
Code: Select all
style page_slider:
xysize (800, 24)
base_bar "gui/slider/page_bar.png"
thumb "gui/slider/page_thumb.png"
For details refer to the link above, there are examples.
If the problem is solved, please edit the original post and add [SOLVED] to the title.
- Adabelitoo
- Regular
- Posts: 99
- Joined: Sat Apr 13, 2019 2:32 pm
- Contact:
Re: Help making a slider bar to change the Save/Load page
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
But I don't understand what thing would replace current-page to make it work, I tried many things but none worked.
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
Re: Help making a slider bar to change the Save/Load page
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:
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
if current_page < 99:
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
If the problem is solved, please edit the original post and add [SOLVED] to the title.
- Adabelitoo
- Regular
- Posts: 99
- Joined: Sat Apr 13, 2019 2:32 pm
- Contact:
Re: Help making a slider bar to change the Save/Load page
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.
I think that's it, for real this time, I hope. Thank you for your help.
Re: [Solved] Help making a slider bar to change the Save/Load page
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 .
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 .
If the problem is solved, please edit the original post and add [SOLVED] to the title.
Who is online
Users browsing this forum: Directony, Google [Bot]