So, like my main menu, you'll want to start with the basic codes that Ren'Py provides.
I used the below code to set up my save file slot designs, starting with the original
code and then tweaking it around and taking it apart and adding things to it until it
gives me what I want.
Code: Select all
screen load_save_slot:
$ file_text = "%2s. %s\n %s" % (
FileSlotName(number, 7),
FileTime(number, empty=_("Empty Slot.")),
FileSaveName(number))
add FileScreenshot(number) xpos 61 ypos 69
text file_text xpos 215 ypos 92 size 18 color "#ADA26D"
I also kept the stuff below so I'd have a basic menu to scroll through different save pages.
Code: Select all
screen file_picker():
frame:
style "file_picker_frame"
has vbox
# The buttons at the top allow the user to pick a
# page of files.
hbox:
style_group "file_picker_nav"
textbutton _("Previous"):
action FilePagePrevious()
textbutton _("Auto"):
action FilePage("auto")
textbutton _("Quick"):
action FilePage("quick")
for i in range(1, 10):
textbutton str(i):
action FilePage(i)
textbutton _("Next"):
action FilePageNext()
Now here is where you'd end up wanting to start creating your own thing. I'm not perfect at coding,
so most of what I do is a lot of trial and error and piecing things together. I can give you some
basics on what I've learned/what I think you should do and hopefully it can help you come to a solution.
Here's an example of my main menu code, which uses image mapping for the buttons and so I can have an
animated menu.
Code: Select all
screen main_menu:
tag menu
# This ensures that any other menu screen is replaced.
# The background of the main menu.
window:
style "main_menu"
imagemap:
ground "main_menu"
idle "gui/mm_idle.png"
hover "gui/mm_hover.png"
alpha False
# This is so that everything transparent is invisible to the cursor.
if not persistent.beaten:
hotspot (489,223,187,54) action Start()
else:
hotspot (489,223,187,54) action Start("real")
hotspot (491,276,187,54) action ShowMenu("save game")
hotspot (492,328,187,54) action ShowMenu("load")
hotspot (491,380,187,54) action ShowMenu("preferences")
hotspot (490,435,187,54) action ShowMenu("Extras")
hotspot (493,487,187,54) action Quit(confirm=False)
if persistent.beaten:
hotspot (489,223,187,54) action Start("continue")
You need to ensure you have a ground image (the base of the menu), an
idle image (basically the same as the ground one), and a hover image
(which is the image that shows icons or buttons being pressed, etc.).
As you can see, you then can use hotspots for your buttons or save files.
This person made an amazing hotspot generator that will help, if you
don't already use it:
viewtopic.php?t=31723
Let's continue on with the save code, which continues on after
textbutton _("Next"):
action FilePageNext()[/code]:
Code: Select all
[code]$ columns = 2
$ rows = 7
# Display a grid of file slots.
grid columns rows:
transpose True
xfill True
style_group "file_picker"
# Display ten file slots, numbered 1 - 10.
for i in range(1, columns * rows + 1):
# Each file slot is a button.
button:
action FileAction(i)
xfill True
has hbox
# Add the screenshot.
add FileScreenshot(i)
$ file_name = FileSlotName(i, columns * rows)
$ file_time = FileTime(i, empty=_("Empty Slot."))
$ save_name = FileSaveName(i)
text "[file_name]. [file_time!t]\n[save_name!t]"
key "save_delete" action FileDelete(i)
This code decides how many columns/rows you'll have per save page. Once you've studied
what each part does, you can slowly begin taking this code apart and piecing it into an
imagemap code.
While my save screen isn't too creative, here's what my code wound up looking like using
the above code and then this code, which turns my screen into an imagemap.
Code: Select all
screen save:
tag menu
add "saving"
imagemap:
ground "saving"
idle "saving"
hover "screens/save2.jpg"
alpha False
hotspot (382,555,63,29) action Return()
use file_picker
This is what my save screen ended up looking like.
Code: Select all
init -2 python:
##The save/load slots
style.large_button_text.font = "LoveYaLikeASister.ttf"
style.large_button.yminimum = 35
style.large_button.ypadding = 2
## The size of the Save/Load thumbnails
config.thumbnail_width = 50
config.thumbnail_height = 50
style.file_picker_frame.top_margin = 70
style.file_picker_frame.left_margin = 80
style.file_picker_frame.right_margin = 70
style.file_picker_frame.bottom_margin = 20
style.file_picker_nav_button.xalign = 1.5
style.file_picker_nav_button.yalign = .6
style.file_picker_nav_button.background= Frame ("SL_idle.png")
style.file_picker_nav_button.hover_background= Frame ("SL_hover.png")
style.file_picker_button = Style(style.large_button)
style.file_picker_text = Style(style.large_button_text)
style.file_picker_frame.background = Frame("grunge-scratches2.jpg")
style.file_picker_frame.xfill = True
style.file_picker_frame.xmargin = 43
style.file_picker_frame.top_margin = 35
If you're using your own save buttons/slots, you won't need to use the above code.
You'd have to kind of play around to make each action for the hotspot do this:
Code: Select all
button:
action FileAction(i)
xfill True
has hbox
# Add the screenshot.
add FileScreenshot(i)
$ file_name = FileSlotName(i, columns * rows)
$ file_time = FileTime(i, empty=_("Empty Slot."))
$ save_name = FileSaveName(i)
text "[file_name]. [file_time!t]\n[save_name!t]"
key "save_delete" action FileDelete(i)
And, an example of using actions for hotspots can be found in my main menu code:
Code: Select all
hotspot (490,435,187,54) action ShowMenu("Extras")
hotspot (493,487,187,54) action Quit(confirm=False)
I really hope this helps and you get your save menu done. I've been playing around with my current
game for 3 years now and it has taken a long time to get to where I am. Hopefully others will chime
in and together we can get you the best possible solution.
