Fuck Yeah Ren'Py

Imagemap Tutorial: Part 3 - The Save/Load Menu

Imagemap Tutorial Navigation:
Part 1 - Imagemap Basics |Part 2 - The Main Menu | Part 3 - The Save/Load Menu | Part 4 - The Preferences Menu | Part 5 - The Navigation Menu | Part 6 - The Yes/No Prompt
——
Welcome to part 3 of the Imagemap Tutorial!
In this part of the tutorial, I’m going to show you, step-by-step, how to make a functional imagemap for the save/load menu.
Let’s begin!
——
Step #1: Make the images for your save/load menu imagemap using an art program of your choice.
Just like with the main menu imagemap, the save/load menu imagemap requires three images, one for each state: 1) ground, 2) idle, and 3) hover. Remember to make the images have transparent backgrounds if you have defined a background for the save/load menu in the “options.rpy” file using gm_root.
I made my ground and idle images the same, and changed some parts of it for the hover image. If you want to see what my images look like, here they are: ground, idle, and hover. (Yes, my ground and idle images are the same!)
Don’t forget to copy/paste your finished images to your game folder or sub-folder!
Step #2: Imagemap coding.
On to the coding!
Unlike the imagemap coding for the main menu, the save/load menu is composed of two separate screens: 1) screen save and 2) screen load. This means that we’ll need to write an imagemap code for each screen. (The good news is that the 99% of the coding for both is the same!)
Let’s write the coding for screen save first.
Find the following code in the “screens.rpy” file:
screen save:

    # This ensures that any other menu screen is replaced.
    tag menu

    use navigation
    use file_picker
Replace use navigation and use file_picker in the previous code with the following imagemap code:
    imagemap:
        ground "FILE NAME HERE"
        idle "FILE NAME HERE"
        hover "FILE NAME HERE"
        cache False
     
        hotspot (#,#,#,#) clicked FilePage(1) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(2) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(3) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(4) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(5) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(6) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(7) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(8) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(9) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        
        hotspot (#,#,#,#) clicked FileSave(1):
            use load_save_slot(number=1) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FileSave(2):
            use load_save_slot(number=2) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FileSave(3):
            use load_save_slot(number=3) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FileSave(4):
            use load_save_slot(number=4) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"

        hotspot (#,#,#,#) action Return() activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
Before we go further, let’s break this code down:
As with the main menu imagemap, the images for the three states (ground, idle, and hover) are defined as imagestatehere “FILE NAME HERE”. Replace FILE NAME HERE with the file name of your image. Do this for each of the states, and be sure to copy/paste your images into the game folder.
Hotspot – This indicates a hotspot. Remember from the main menu imagemap tutorial that hotspots are defined using coordinates. The numbers in the coordinate represent the following: (the X location of the upper-left corner, the Y location of the upper-left corner, the width of the hotspot, the height of the hotspot). For screen save, there are two sets of hotspots: 1) hotspots for the page numbers of save slots, and 2) hotspots for the save slots themselves.
FilePage(#) – This indicates the page number of save slots available. In the images I made, I decided I wanted to have 9 pages of save slots. This means that I’m going to need a total of 9 hotspots, one for each page number.
activate_sound – This is used to have a sound effect play when the save slot page numbers are clicked on. The file name for the sound file is indicated as FILE NAME HERE. If you want a sound to play, make sure you replace this with your file name and that you copy/paste the sound file into your game folder!
hover_sound – This is used to have a sound effect play when the save slot page numbers are hovered over by the mouse. The file name for the sound file is indicated as FILE NAME HERE. If you want a sound to play, make sure you replace this with your file name and that you copy/paste the sound file into your game folder!
clicked FileSave(#): use load_save_slot(number=#) – This defines the action of saving a game file. The pound sign in the parentheses refers to the number of the save slot in which the game is saved. There are only 4 of these defined because I only have 4 save slots on my images.
action Return() – This is used when you want to define a hotspot that takes the player back to the previous menu or screen. If the player saves during the game, then clicking on this hotspot will return the player to the game. In my image, I made a little “X” button in the top right corner that I’ll use this code for.
In case you’re confused about the different hotspots you’ll need, here’s a bit more explanation in this diagram I made using the ground state image of the save/load screen that I made. The hotspots are indicated with a light blue box.
Now, let’s move on to the coding for screen load.
Find the following code in the “screens.rpy” file:
screen load:

    # This ensures that any other menu screen is replaced.
    tag menu

    use navigation
    use file_picker
Copy/paste the following code instead of use navigation and use file_picker in the above code in the “screens.rpy” file:
screen load:
   
   tag menu

   imagemap:
        ground "FILE NAME HERE"
        idle "FILE NAME HERE"
        hover "FILE NAME HERE"
        cache False
        
        hotspot (#,#,#,#) clicked FilePage(1) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(2) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(3) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(4) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(5) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(6) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(7) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(8) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FilePage(9) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        
        hotspot (#,#,#,#) clicked FileLoad(1):
            use load_save_slot(number=1) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FileLoad(3):
            use load_save_slot(number=3) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FileLoad(2):
            use load_save_slot(number=2) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
        hotspot (#,#,#,#) clicked FileLoad(4):
            use load_save_slot(number=4) activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"

        hotspot (#,#,#,#) action Return() activate_sound "FILE NAME HERE" hover_sound "FILE NAME HERE"
You’ll notice that all of the coding for screen load is identical to the coding for screen save except for clicked FileLoad instead of clicked FileSave. (Pretty nifty – that means we can just copy/paste everything and replace “Save” with “Load!” Hooray!)
Let’s break this screen load code down:
As with the main menu imagemap, the images for the three states (ground, idle, and hover) are defined as imagestatehere “FILE NAME HERE”. Replace FILE NAME HERE with the file name of your image. Do this for each of the states, and be sure to copy/paste your images into the game folder.
Hotspot – This indicates a hotspot. Remember from the main menu imagemap tutorial that hotspots are defined using coordinates. The numbers in the coordinate represent the following: (the X location of the upper-left corner, the Y location of the upper-left corner, the width of the hotspot, the height of the hotspot). For screen save, there are two sets of hotspots: 1) hotspots for the page numbers of save slots, and 2) hotspots for the save slots themselves.
clicked FileLoad(#) – This defines the action of loading a saved game file. The pound sign in the parentheses refers to the number of the save slot in which the game was saved.
FilePage(#) – This indicates the page number of save slots available. In the images I made, I decided I wanted to have 9 pages of save slots. This means that I’m going to need a total of 9 hotspots, one for each page number.
activate_sound – This is used to have a sound effect play when the save slot page numbers are clicked on. The file name for the sound file is indicated as FILE NAME HERE. If you want a sound to play, make sure you replace this with your file name and that you copy/paste the sound file into your game folder!
hover_sound – This is used to have a sound effect play when the save slot page numbers are hovered over by the mouse. The file name for the sound file is indicated as FILE NAME HERE. If you want a sound to play, make sure you replace this with your file name and that you copy/paste the sound file into your game folder!
clicked FileLoad(#): use load_save_slot(number=#) – This defines the action of loading a saved game file. The pound sign in the parentheses refers to the number of the save slot in which the game is saved. There are only 4 of these defined because I only have 4 save slots on my images.
action Return() – This is used when you want to define a hotspot that takes the player back to the previous menu or screen. If the player saves during the game, then clicking on this hotspot will return the player to the game. In my image, I made a little “X” button in the top right corner that I’ll use this code for.
And now, for the last part of code we need: screen_load_save_slot, which is needed so that information about a saved game file appears in the save slot (e.g. slot number, date saved, time saved, and a screenshot of the game when it was saved). Hang in there, we’re almost done!
Find the following code in the “screens.rpy” file:
init -2:
    style file_picker_frame is menu_frame
    style file_picker_nav_button is small_button
    style file_picker_nav_button_text is small_button_text
    style file_picker_button is large_button
    style file_picker_text is large_button_text
Replace the previous code with the following code for screen_load_save_slot:
screen load_save_slot:
    $ file_text = "% 2s. %s\n%s" % (
                        FileSlotName(number, 4),
                        FileTime(number, empty=_("Empty Slot")),
                        FileSaveName(number))

    add FileScreenshot(number) xpos 220 ypos 20
    text file_text xpos 0 ypos 10 size 40 color "#ffffff" outlines [ (2, "#302B54") ] kerning 2 font "FONT FILE NAME HERE"
    
    key "save_delete" action FileDelete(number)
    
init -2 python:
    
    config.thumbnail_width = 180
    config.thumbnail_height = 150
Let’s break this code down:
The first 5 lines of code are needed so that information appears in your save slot. This code will show the slot number as well as the date and time that the save file was created.
The next line of code is needed to show a screenshot of the game when the save file was created. xpos and ypos are used to dictate the position of the screenshot within the save slot hotspot.
The next line of code allows for the font customization of the save slot information. This code also has a defined xpos and ypos, which are used to dictate the positioning of the information itself within the save slot hotspot.
The next line of code (key “save delete”…) allows the player to delete a saved game file by hovering over it with their mouse and pressing the Delete key on their keyboard.
The init-2 python block at the end allows for customization of the size of the screenshot of the saved game that appears in the save slot.
…And that’s it for the save/load menu! Hooray, another imagemap is done! Here is my entire code for the save/load screen’s imagemap, for your reference. :D
In the next part of the tutorial, I’ll show you, step-by-step, how to make a functional imagemap for the Yes/No prompt that appears when the player closes the game window.
I hope this helps! ^_^