Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
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.
- Mumeishi
- Newbie
- Posts: 8
- Joined: Mon Sep 28, 2020 4:19 pm
- Projects: My Untitled VN game
- Organization: Dai-Gurren Brigade
- Contact:
Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
I reaaally need help with this one, I haven't found any thread that helps me with this particular problem. I'm making my first Renpy game and I might be a bit too ambitious for a first-timer but I'm trying to completely change the look of the default screens. To be more specific I'm trying to emulate the look of the menus in Katawa Shoujo (which was the first VN game I ever played). I managed to make my Preferences and Gallery look very similar by using modals and frames, but the save/load screen is not working for me. I been looking at countless tutorials and other threads in this forum to find code that will help me achieve that particular look but I've had no luck.
Here's a screenshot of what I'm refering to:
It has a system where only the slots that you use show up and you can scroll through them, if you add a new save it then shows up at the bottom of the list. I have no idea how to achieve that in my game. Any help will be appreciated!
Here are screenshots of how my game looks right now, the images here are not the definitive yet, they are just placeholders I made but they look close to what I'm going for (my game is in spanish btw, but once I'm finished I will make an english ver):
Main menu
Preferences
Gallery
My horrible save/load screen that doesnt work
Here's a screenshot of what I'm refering to:
It has a system where only the slots that you use show up and you can scroll through them, if you add a new save it then shows up at the bottom of the list. I have no idea how to achieve that in my game. Any help will be appreciated!
Here are screenshots of how my game looks right now, the images here are not the definitive yet, they are just placeholders I made but they look close to what I'm going for (my game is in spanish btw, but once I'm finished I will make an english ver):
Main menu
Preferences
Gallery
My horrible save/load screen that doesnt work
"Kick logic to the curb and do the impossible!"
- -Kamina
- hell_oh_world
- Miko-Class Veteran
- Posts: 777
- Joined: Fri Jul 12, 2019 5:21 am
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
You're actually pretty much close just looking at it. Additional things that I can suggest:
1.) Refer to this to configure the thumbnail/slot size: https://www.renpy.org/doc/html/gui.html ... ot-buttons
2.) Maybe add some xsize width to the viewport or xfill True to span it entirely.
3.) As for the slot buttons that are not empty. Use the FileLoadable() function. https://www.renpy.org/doc/html/gui.html ... ot-buttons
So in your vbox all you gotta do is add a condition using the function.
1.) Refer to this to configure the thumbnail/slot size: https://www.renpy.org/doc/html/gui.html ... ot-buttons
2.) Maybe add some xsize width to the viewport or xfill True to span it entirely.
3.) As for the slot buttons that are not empty. Use the FileLoadable() function. https://www.renpy.org/doc/html/gui.html ... ot-buttons
So in your vbox all you gotta do is add a condition using the function.
Code: Select all
screen file_slots(title):
...
vbox:
if FileLoadable(slot):
button:
action FileAction(slot)
...
- Mumeishi
- Newbie
- Posts: 8
- Joined: Mon Sep 28, 2020 4:19 pm
- Projects: My Untitled VN game
- Organization: Dai-Gurren Brigade
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
Thank you for the reply! I'm not sure where to add that code. But I get the purpose of using de FileLoadable() function. I pretty much just copied the original code and pasted it to my modal but I'm sure this is the wrong way to do it. My code looks like this right now (is a mess):
Code: Select all
screen my_saves():
modal True
zorder 200
style_prefix "confirm"
add "gui/overlay/confirm.png"
frame:
xalign 0.5
yalign 0.5
xminimum 1080
xmaximum 1080
yminimum 800
ymaximum 800
vpgrid:
cols 1
rows 5
scrollbars "vertical"
mousewheel True
side_yfill True
grid 1 5:
style_prefix "slot"
xalign 0.0
yalign 0.5
spacing 10
for i in range(1 * 5):
$ slot = i + 1
button:
action FileAction(slot, page="Cargar")
has vbox
add FileScreenshot(slot) xalign 0.0
text FileTime(slot, format=_("{#file_time}%A, %d de %B, %H:%M"), empty=_("vacío")):
style "slot_time_text"
text FileSaveName(slot):
style "slot_name_text"
#key "save_delete" action FileDelete(slot)
button:
text "[ Volver ]"
action Hide("my_saves",transition = dissolve)
"Kick logic to the curb and do the impossible!"
- -Kamina
- hell_oh_world
- Miko-Class Veteran
- Posts: 777
- Joined: Fri Jul 12, 2019 5:21 am
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
The file_slots screen is the screen for the save and load screens found in screens.rpy, so I just assumed that you're using that one. Anyhow, in your code, you're using grid which is okay too. All you need is to add a condition then in the else block just add Null() to fill the empty cells.
Not sure with this though, iirc, a grid's cell must be the same size with others, so this approach might result in displaying an empty cell but with a large gap representing each cell. That's why in your kind of setup, where displayables are aligned vertically, it is better to use a plain vbox and contain it inside a viewport, in that way you won't be having a problem in filling empty cells and you can independently size each row of saves etc.
Code: Select all
screen my_saves():
modal True
zorder 200
style_prefix "confirm"
add "gui/overlay/confirm.png"
frame:
xalign 0.5
yalign 0.5
xminimum 1080
xmaximum 1080
yminimum 800
ymaximum 800
vpgrid:
cols 1
rows 5
scrollbars "vertical"
mousewheel True
side_yfill True
grid 1 5:
style_prefix "slot"
xalign 0.0
yalign 0.5
spacing 10
for i in range(1 * 5):
$ slot = i + 1
if FileLoadable(slot):
button:
action FileAction(slot, page="Cargar")
has vbox
add FileScreenshot(slot) xalign 0.0
text FileTime(slot, format=_("{#file_time}%A, %d de %B, %H:%M"), empty=_("vacío")):
style "slot_time_text"
text FileSaveName(slot):
style "slot_name_text"
#key "save_delete" action FileDelete(slot)
else:
add Null()
button:
text "[ Volver ]"
action Hide("my_saves",transition = dissolve)
- Mumeishi
- Newbie
- Posts: 8
- Joined: Mon Sep 28, 2020 4:19 pm
- Projects: My Untitled VN game
- Organization: Dai-Gurren Brigade
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
Thank you again! I'll try using your code and see how it works. When you tell me to use a vbox contained in a viewport you mean replacing the vpgrid for viewport and grid for vbox, is that correct?
"Kick logic to the curb and do the impossible!"
- -Kamina
- Mumeishi
- Newbie
- Posts: 8
- Joined: Mon Sep 28, 2020 4:19 pm
- Projects: My Untitled VN game
- Organization: Dai-Gurren Brigade
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
Now it looks waaay better!
Thanks a lot! Now it only shows the slots with saved games and you can scroll. I also followed your advice and made it into a viewport with a vbox but I had no idea what I had to write inside this part:
In the range I originally wrote 1*5 because my grid was 1 col 5 rows (and that made sense to me) . But now I wrote 1 because I only want one slot to apper a at a time?...right? I dont know much about how this works... But in any case, it looks good, and the game doesnt crash (YET).
It looks closer to what I'm aiming for. A couple of things missing is that I don't want to be able to SAVE or overwrite by clicking on the image/slot I want to add a button (it might be just a textbutton) to make new saves. I only want to be able to LOAD by clicking the image/slot. Again, this is in keeping with the way it worked in KS which I liked better that the default Renpy system.
Do you have any idea of how that would work?
Thanks a lot! Now it only shows the slots with saved games and you can scroll. I also followed your advice and made it into a viewport with a vbox but I had no idea what I had to write inside this part:
Code: Select all
for i in range(1):
$ slot = i + 1
if FileLoadable(slot):
button:
action FileLoad(slot)
It looks closer to what I'm aiming for. A couple of things missing is that I don't want to be able to SAVE or overwrite by clicking on the image/slot I want to add a button (it might be just a textbutton) to make new saves. I only want to be able to LOAD by clicking the image/slot. Again, this is in keeping with the way it worked in KS which I liked better that the default Renpy system.
Do you have any idea of how that would work?
"Kick logic to the curb and do the impossible!"
- -Kamina
- Mumeishi
- Newbie
- Posts: 8
- Joined: Mon Sep 28, 2020 4:19 pm
- Projects: My Untitled VN game
- Organization: Dai-Gurren Brigade
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
Ok, I made it possible only to LOAD by clicking on the thumbnail. But I still need to make a button that allows users to SAVE and show that saved game in the list under the first slot. I tried making one but it didn't work, I get an error saying the "ZipFileImage is not callable" (I don't know what that means, but I guess is something about how I tried to "save" the game with my button).
You can see the button I made in this pic:
This is the code I'm using now:
You can see the button I made in this pic:
This is the code I'm using now:
Code: Select all
screen my_saves():
modal True
zorder 200
style_prefix "confirm"
add "gui/overlay/confirm.png"
frame:
xalign 0.5
yalign 0.5
xminimum 1080
xmaximum 1080
yminimum 800
ymaximum 800
viewport:
scrollbars "vertical"
mousewheel True
side_yfill True
vbox:
style_prefix "slot"
xalign 0.0
yalign 0.5
spacing 10
for i in range(1):
$ slot = i + 1
if FileLoadable(slot):
button:
action FileLoad(slot)
has vbox
add FileScreenshot(slot) xalign 0.0
text FileTime(slot, format=_("{#file_time}%A, %d de %B, %H:%M"), empty=_("vacío")):
style "slot_time_text"
text FileSaveName(slot):
style "slot_name_text"
#key "save_delete" action FileDelete(slot)
else:
add Null()
vbox:
xalign 1.0
yalign 1.0
xsize 200
ysize 100
button:
text "[ Volver ]"
action Hide("my_saves",transition = dissolve)
vbox:
xalign 0.0
yalign 1.0
xsize 200
ysize 100
for i in range(1):
$ slot = i + 1
if FileNewest(slot):
button:
text "[Guardar]"
action [ FileSave(slot),FileScreenshot(slot),FileTime(slot) ]
"Kick logic to the curb and do the impossible!"
- -Kamina
- hell_oh_world
- Miko-Class Veteran
- Posts: 777
- Joined: Fri Jul 12, 2019 5:21 am
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
Try this. Use FileUsedSlots() function to get only the loadable slots.Thanks a lot! Now it only shows the slots with saved games and you can scroll. I also followed your advice and made it into a viewport with a vbox but I had no idea what I had to write inside this part:
Code: Select all
screen my_saves():
modal True
zorder 200
style_prefix "confirm"
add "gui/overlay/confirm.png"
frame:
xalign 0.5
yalign 0.5
xminimum 1080
xmaximum 1080
yminimum 800
ymaximum 800
viewport:
scrollbars "vertical"
mousewheel True
side_yfill True
vbox:
style_prefix "slot"
xalign 0.0
yalign 0.5
spacing 10
for slot in FileUsedSlots(highest_first=False): # the function returns a list containing only the loadable slots, so you can do it without having a condition now...
button:
action FileLoad(slot)
has hbox # let's align the save slot like what is shown in your ideal layout...
add FileScreenshot(slot) xalign 0.0
vbox:
text FileTime(slot, format=_("{#file_time}%A, %d de %B, %H:%M"), empty=_("vacío")):
style "slot_time_text"
text FileSaveName(slot):
style "slot_name_text"
vbox:
xalign 1.0
yalign 1.0
xsize 200
ysize 100
button:
text "[ Volver ]"
action Hide("my_saves",transition = dissolve)
Haven't also tried this, so sorry if the hbox messed up your layout
- Mumeishi
- Newbie
- Posts: 8
- Joined: Mon Sep 28, 2020 4:19 pm
- Projects: My Untitled VN game
- Organization: Dai-Gurren Brigade
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
Hello again. Thanks to your help + some extra tweaking I managed to achieve a very similar look to the KS save screen so far. I added your code plus a small button that lets you delete the save by adding this part:
And I changed the code for my SAVE button (but it doesnt work the way it should...more on that later)
I also tried deleting my saves even before you suggested it but it led to a problem. I can't save unless there's an older save slot visible and all it can do is rewrite that same slot. My save button can only rewrite a previous save, if there are no saves visible then it supposedly "saves" but nothing shows up on the list.
So, for now my save screen can only show one slot with thumbnail and if the user clicks the SAVE button it overwrites that one instead of creating a new one underneath.
Once again, thank you for all your help. There has been a great progress so I'll just keep looking for ways to make the code work the way I need, so if you have more ideas please let me know.
This is how it looks now:
BTW the code for my "save game" button is this:
Code: Select all
add FileScreenshot(slot) xalign 0.0
hbox:
xalign 0.5
yalign 0.5
xminimum 400
xmaximum 400
text FileTime(i, format=_("{#file_time}%A, %d de %B, %H:%M"), empty=_("vacío")):
xalign 0.7
hbox:
xalign 0.7
yalign 0.5
xsize 50
ysize 50
button:
text "(X)"
xalign 0.7
action FileDelete(slot)
I also tried deleting my saves even before you suggested it but it led to a problem. I can't save unless there's an older save slot visible and all it can do is rewrite that same slot. My save button can only rewrite a previous save, if there are no saves visible then it supposedly "saves" but nothing shows up on the list.
So, for now my save screen can only show one slot with thumbnail and if the user clicks the SAVE button it overwrites that one instead of creating a new one underneath.
Once again, thank you for all your help. There has been a great progress so I'll just keep looking for ways to make the code work the way I need, so if you have more ideas please let me know.
This is how it looks now:
BTW the code for my "save game" button is this:
Code: Select all
vbox:
xalign 0.0
yalign 1.0
xsize 200
ysize 100
button:
text "[Guardar]"
action FileAction(slot)
"Kick logic to the curb and do the impossible!"
- -Kamina
- hell_oh_world
- Miko-Class Veteran
- Posts: 777
- Joined: Fri Jul 12, 2019 5:21 am
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
PRIORITY: In deleting the save, delete first the saves in your game directory then delete the saves folder for your game in the temp folder of your system. For windows, hit winkey + r then type this %appdata%, then hit enter then find the RenPy directory, inside that directory find your game name and delete that folder, after doing this all of the conflicting saves from the old approach should be removed by now.
For the saving, the action I think should be like this instead.
or I think something like this should also do the trick (Much less verbose).
Haven't tried all of these, but should work *I think*, find what suits your need the most
For the saving, the action I think should be like this instead.
Code: Select all
action FileAction(max(FileUsedSlots() or [0]) + 1) # I think this would work, also FileSave might be the best one to use here instead of FileAction
Code: Select all
action FileAction(None) # FileSave(None) should also work
- Mumeishi
- Newbie
- Posts: 8
- Joined: Mon Sep 28, 2020 4:19 pm
- Projects: My Untitled VN game
- Organization: Dai-Gurren Brigade
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
To better explain how the system is currently working I made a short demo video:
https://youtu.be/jYXojNB6_7c
I feel like we are getting SO close to it working perfectly! Right now there are a couple issues, one is that there's a blank space above the list of save slots at all times, I don't know why that happens, but I think it may have something to do with how I use a variable with $ slot = slot + 1, I know you told me to drop the variable but thanks to it I'm able to keep saving on new slots instead of just overwriting the same one. If you have a better solution please tell me.
Another problem is that when I use the (X) to delete the saves it only works fine if I delete the last one on the list, if I try to delete another one on the top then it deletes 2 slots, the one I want and the one right below. Again, I think this is beacues of that variable, but I can't find a better way to achieve something that works the way I need
I added your code for the SAVE button, it works great! I'm working on an old Macbook so I don't know how to find the saves on the temp folder you mentioned, I will look into it, but I have already deleted the saves in the project folder and the persistent data as you previously suggested.
I can't thank you enough for all your help . If you know a way to fix these issues or a better way to work around them then please tell me.
This is the code right now:
https://youtu.be/jYXojNB6_7c
I feel like we are getting SO close to it working perfectly! Right now there are a couple issues, one is that there's a blank space above the list of save slots at all times, I don't know why that happens, but I think it may have something to do with how I use a variable with $ slot = slot + 1, I know you told me to drop the variable but thanks to it I'm able to keep saving on new slots instead of just overwriting the same one. If you have a better solution please tell me.
Another problem is that when I use the (X) to delete the saves it only works fine if I delete the last one on the list, if I try to delete another one on the top then it deletes 2 slots, the one I want and the one right below. Again, I think this is beacues of that variable, but I can't find a better way to achieve something that works the way I need
I added your code for the SAVE button, it works great! I'm working on an old Macbook so I don't know how to find the saves on the temp folder you mentioned, I will look into it, but I have already deleted the saves in the project folder and the persistent data as you previously suggested.
I can't thank you enough for all your help . If you know a way to fix these issues or a better way to work around them then please tell me.
This is the code right now:
Code: Select all
screen my_saves():
modal True
zorder 200
style_prefix "confirm"
add "gui/overlay/confirm.png"
frame:
xalign 0.5
yalign 0.5
xminimum 1080
xmaximum 1080
yminimum 800
ymaximum 800
viewport:
yminimum 500
ymaximum 500
scrollbars "vertical"
mousewheel True
side_yfill True
vbox:
style_prefix "slot"
xalign 0.0
yalign 0.1
spacing 25
for slot in FileUsedSlots(highest_first=False):
$ slot = slot + 1
if FileLoadable(slot):
button:
action FileLoad(slot)
has hbox
add FileScreenshot(slot)
hbox:
xalign 0.5
yalign 0.5
xminimum 400
xmaximum 400
text FileTime(slot, format=_("{#file_time}%A, %d de %B, %H:%M"), empty=_("vacío")):
xalign 0.7
text FileSaveName(slot):
xalign 0.7
hbox:
xalign 1.0
yalign 0.5
button:
text "(X)"
action FileDelete(slot)
else:
add Null()
vbox:
xalign 1.0
yalign 1.0
xsize 200
ysize 100
button:
text "[ Volver ]"
action Hide("my_saves",transition = dissolve)
vbox:
xalign 0.0
yalign 1.0
xsize 200
ysize 100
button:
text "[Guardar]"
action FileAction(max(FileUsedSlots() or [0]) + 1)
"Kick logic to the curb and do the impossible!"
- -Kamina
- hell_oh_world
- Miko-Class Veteran
- Posts: 777
- Joined: Fri Jul 12, 2019 5:21 am
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
It looks okay on me though. I just copied and pasted your code in this one, left the styles to default and didn't add any. So I suggest checking your styles if ever you changed the styles for the slots or confirm.
In my previous post, I actually eliminated the conditionals, the if FileLoadable(slot) part.
Is kinda bad though, I tried this one, if you have no saves (empty) then click the save button, the first save slot wont show even though its saved, on the 2nd click of the save button it will show one save instead of showing 2.
And it works well for me without any issue with this line of code being dropped and with the save button's action that I suggested.
This might also help, the official doc says... https://www.renpy.org/doc/html/config.h ... _directory
If you found it then it should look something like this. Overall, this how it looks on my side, with the line of code that I said being dropped. (GIF)
If you really cant figure out why it has a gap then maybe try the inspector? On one of your saves, hover your cursor onto the screenshot of the save then hit shift + i then see the structure in the inspector and click the style for the vbox or the viewport to see if you added some styles that might have caused the gap.
Maybe its because of this part? Not sure though, but you wont be needing this. It's only applicable in your old method where you're using a grid instead of vbox. Vboxes don't throw an error when there's a missing child or what.
Code: Select all
else:
add Null()
This one...
Code: Select all
$ slot = slot + 1
And it works well for me without any issue with this line of code being dropped and with the save button's action that I suggested.
In your config.rpy you should find a variable config.save_directory or config.savedir, something like that. It should contain the path to the temp folder of the game. Another option would be, while in game press shift + o then type config.savedir or config.save_directory then press enter and you should see the path in the console where the temp folder is located.I'm working on an old Macbook so I don't know how to find the saves on the temp folder you mentioned
This might also help, the official doc says... https://www.renpy.org/doc/html/config.h ... _directory
But if not then try the first workarounds that I suggested.This is used to generate the directory in which games and persistent information are saved. The name generated depends on the platform:
Windows
%APPDATA%/RenPy/save_directory
Mac OS X
~/Library/RenPy/save_directory
Linux/Other
~/.renpy/save_directory
If you found it then it should look something like this. Overall, this how it looks on my side, with the line of code that I said being dropped. (GIF)
- Mumeishi
- Newbie
- Posts: 8
- Joined: Mon Sep 28, 2020 4:19 pm
- Projects: My Untitled VN game
- Organization: Dai-Gurren Brigade
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
IT WORKS!!!
Finally everything works as it should! Here's a short video demo again:
https://youtu.be/w_dU-Nj-aAc
I'm so happy, thanks a lot for your help hell_oh_world! I used your recommendations plus some extra tweaking.
I will put you in the credits of my game once I'm finished! (I still have a lot of work left to complete it)
As I said in my first message this is my first game so I'll probably be returning to the forums for help with development. I think I will also make a post with a "tutorial" ...or at least just the code so others can customize their save/load screen in this way as I'm sure others would like to have this design.
Thanks again!
Finally everything works as it should! Here's a short video demo again:
https://youtu.be/w_dU-Nj-aAc
I'm so happy, thanks a lot for your help hell_oh_world! I used your recommendations plus some extra tweaking.
I will put you in the credits of my game once I'm finished! (I still have a lot of work left to complete it)
As I said in my first message this is my first game so I'll probably be returning to the forums for help with development. I think I will also make a post with a "tutorial" ...or at least just the code so others can customize their save/load screen in this way as I'm sure others would like to have this design.
Thanks again!
"Kick logic to the curb and do the impossible!"
- -Kamina
- hell_oh_world
- Miko-Class Veteran
- Posts: 777
- Joined: Fri Jul 12, 2019 5:21 am
- Contact:
Re: Making a vertical scrollable LOAD/SAVE screen that only shows slots if they are in use
Glad you made it work . Good luck and best wishes for your game!
Who is online
Users browsing this forum: Bing [Bot]