More newbie-friendly guide to customizing load/save screen?

[Giovedi]

Before you suggest 'em, I've already checked out OokamiKasumi's tutorial and Camille's tutorial. I'm just too new to this to properly understand 'em.

I want to know, specifically, how to rearrange the save slots/thumbnails? Desiging the GUI is fun. Trying to put everything in place isn't. At all.

I'd appreciate a newbie-friendly explanation to go along with the code. As a new learner, I need to know why things are the way they are, on top of having examples presented to me.

Sorry for asking so many questions lately, by the by. If there's a post limit per month or something I haven't found it.

[MissLanna]

Woohoo! I can actually help out in a thread for once instead of just making ones asking questions... @~@

Anyway. Hi there! A custom load/save screen seems intimidating, but it's not too hard to do.

This is one using imagemaps, which I find the best and most customizable way:

Basically, you make an image like this:

This is my "ground" image.

But three versions of it, showing the different button states.

Ground = Everything inactive, unclickable.
Idle = Normal state, what you'll see by default.
Hover = When your mouse be hovering over the section in question.

Here's what my Idle & hover images look like!

These will go inside your game folder, preferably in a folder for all your gui stuff. So for example, mine is in a folder called picker inside a folder called gui inside the game folder.

Now, open up your screens script! Luckily for you, you don't have to mod TOO much. This looks like A LOT but don't worry, we'll dissect it.

Code: Select all

##############################################################################
# Save, Load

   
screen save:
    
    tag menu

    imagemap:
        ground "gui/picker/grounds.png"
        idle "gui/picker/idles.png"
        hover "gui/picker/hovers.png"
        cache False
 
     
        hotspot (478,210,68,58) clicked FilePage(1) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,269,68,58) clicked FilePage(2) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,326,68,58) clicked FilePage(3) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,385,68,58) clicked FilePage(4) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,444,68,58) clicked FilePage(5) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,502,68,58) clicked FilePage("auto") activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        
        hotspot (32, 178, 420, 195) clicked FileSave(1):
            use load_save_slot(number=1) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (32, 385, 420, 195) clicked FileSave(3):
            use load_save_slot(number=3) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (570, 178, 420, 195) clicked FileSave(2):
            use load_save_slot(number=2) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (570, 385, 420, 195) clicked FileSave(4):
            use load_save_slot(number=4) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"

        hotspot (949, 9, 63, 63) action Return() activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
         
screen load:
   
   tag menu

   imagemap:
        ground "gui/picker/ground.png"
        idle "gui/picker/idle.png"
        hover "gui/picker/hover.png"
        cache False
        
        hotspot (478,210,68,58) clicked FilePage(1) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,269,68,58) clicked FilePage(2) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,326,68,58) clicked FilePage(3) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,385,68,58) clicked FilePage(4) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,444,68,58) clicked FilePage(5) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,502,68,58) clicked FilePage("auto") activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        
        hotspot (32, 178, 420, 195) clicked FileLoad(1):
            use load_save_slot(number=1) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (32, 385, 420, 195) clicked FileLoad(3):
            use load_save_slot(number=3) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (570, 178, 420, 195) clicked FileLoad(2):
            use load_save_slot(number=2) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (570, 385, 420, 195) clicked FileLoad(4):
            use load_save_slot(number=4) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"

        hotspot (949, 9, 63, 63) action Return() activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        
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 "GOODDOG.TTF"
    
    key "save_delete" action FileDelete(number)
    
init -2 python:
    
    config.thumbnail_width = 180
    config.thumbnail_height = 150
    

Okay, so tackling the first bit:

Code: Select all

screen save:
    
    tag menu

    imagemap:
        ground "gui/picker/grounds.png"
        idle "gui/picker/idles.png"
        hover "gui/picker/hovers.png"
        cache False
 
     
        hotspot (478,210,68,58) clicked FilePage(1) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"
        hotspot (478,269,68,58) clicked FilePage(2) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"

screen save < the "screen" bit is the word you put before it coming up with a new screen, and 'save' is the name of that screen in particular

tag menu < I don't recall what this does I think it just classifies it as a menu or something but whatevs, it's good to have there

imagemap:
ground, idle, hover, etc.

^ This is where you set up the screen as an imagemap, i.e. "I'm using my custom design for this, this is where you get the ground state of all the buttons, this is where you get the idle state of all the buttons, and the hover state of all the buttons". As you can see, it tells you exactly what folder the image is in. Start point is always the game folder, so you just write "folderinsidegamefolder/folderinsidethat/filename.extension" Make sure you keep it in that order! ground, idle, hover. Otherwise one of the states won't work.

cache False < Sometimes when you change imagemaps around, they glitch even though there's no error. Clearing the cache with this little line helps prevent such problems

hotspot (478,210,68,58) clicked FilePage(1) activate_sound "sfx/menu/select.mp3" hover_sound "sfx/menu/hover.mp3"

Okay! The hotspots take time to set up, but it's not a difficult task:

Hotspots are places you can click. You define each hotspot and give it coordinates. after those coordinates comes the action. In this case, it's basically saying "when clicked, do this". In this case, it runs the built-in bit of code -- FilePage(1).

I.e., You're on page 1 of the save slots. If it was file page 2, you'd be on page 2. Relatively simple task!

How you go about the rest of it is define a hotspot, give it an action. You can ignore the activate_souind and hover_sound thing I have on the end of them for now, but basically activate sound is the sound effect you hear when it does what it's supposed to, hover sound is when you mouse over it.

HERE'S HOW YOU GET THE HOTSPOT COORDINATIONS.

Launch your game.
Hit Shift + d to bring up the developer menu.
click image location picker
find one of your image states -- for example, mine would be gui/picker/ground.png

This will pull up the image in question! Then you take your mouse and click over the area you want to make a hotspot. On the bottom-left there'll be a set of four coordinates, and those are what you'll use for your hotspot line!

^ Just like that! So, our hotspot in question would look like:

Code: Select all

hotspot (27,176, 434,198) 

And then you just need to pick which action goes where. Here's a rundown of the actions that you'll use!

clicked FilePage(1) - As I said, goes to a page of files

clicked FilePage("auto") - Goes to a page of auto saves that the game makes on its own

clicked FileLoad(1): / clicked FileSave(1)
use load_save_slot(number=1)
- That is the action of Loading /Saving a file and what number the save slot is. I.e., this would be number 1

action Return () - Takes you back to the previous menu / screen

OKAY! So that's the big tough stuff. Time for the last bit:


screen load_save_slot:
$ file_text = "% 2s. %s\n%s" % (
FileSlotName(number, 4),
FileTime(number, empty=_("Empty Slot")),
FileSaveName(number))

^ This is the stuff that shows up in your save slot. It shows the number and the date and time the file was saved; if there's no info there, it just says "empty slot"


add FileScreenshot(number) xpos 220 ypos 20
text file_text xpos 0 ypos 10 size 40 color "#ffffff" outlines [ (2, "#302B54") ] kerning 2 font "GOODDOG.TTF"

^ This adds a screenshot of the game of whatever is on the screen at the time of saving. the xpos / ypos are where it appears in the hotspot in question, so just play with the numbers until you get it right where you want it. The text bit
below that customizes how the font written on the file save slot looks and where it shows up

key "save_delete" action FileDelete(number)

^ This allows you to delete a file by hovering over it and clicking delete.

init -2 python:

config.thumbnail_width = 180
config.thumbnail_height = 150


^And this customizes the width and height of the thumbnail you put on the files !

==

That's all there is to it. JUST NOTE ONE MAJOR THING:

The Save / Load Screen use pretty much the same code. You can even use the same imagemaps for them if you want! (I chose not to, as you can see I have an imagemap "grounds" "hovers" "idles" for the save screen and imagemap "ground" "hover" "idle" for the load screen.

The big differences are HERE:

hotspot (32, 178, 420, 195) clicked FileLoad(1):
use load_save_slot(number=1)

^ Load Screen

hotspot (32, 178, 420, 195) clicked FileSave(1):
use load_save_slot(number=1)

^ Save Screen


But essentially you can copy the code of one screen, paste it, and just change the FileSaves to FileLoads.

I hope this helped you and was thorough enough!!

[Giovedi]

You are an angel.

Thank you, holy crap.

[MissLanna]

No problem! I'm glad to help

[chocoberrie]

Holy smokes thank you so so so so so much for this guide, it was immensely helpful! I'm making progress with my GUI finally~ ; v ;

[CrimsonMoon]

Thank you! This helps very much.

[Nova Alamak]

How do you add something like a chapter name to the file slot? Camille's tutorial mentioned you could do that but didn't explain it at all. I get that it would be something like [chapternumber] but I don't get where you're supposed to place that. I assume it has to be inside that "% 2s. %s\n%s" part but I don't understand the formatting of that section to begin with (and I found nothing anywhere else about it) and I'm afraid what I might screw up if I place anything else in there.

I'm also wondering how that would work to begin with if the variable is potentially different at the time of looking at the load screen and at the time of saving the game. I inserted it below the aforementioned string as its own text but it applied to every save slot, so I've obviously done this wrong.

Lastly, the save_delete thing in your code doesn't appear to refer to anything above it so when I hover over the file, I don't see any option to delete. Would that be some kind of extra hotspot I'm missing?

[SilverSnow]

@MissLanna Thank your for this detailed tutorial! Really helped a lot! ^^

[Zenytee]

I have a problem . I get the error

Code: Select all

File "game/screens.rpy", line 317: end of line expected.
    use load_save_slot(number=1) activate_sound "sfx/click.mp3" hover_sound "sfx/click.mp3"
                                 ^

File "game/screens.rpy", line 344: end of line expected.
    use load_save_slot(number=1) activate_sound "sfx/click.mp3" hover_sound "sfx/click.mp3"

[PyTom]

You can't use style properties with the use statement. You probably want to add them to the button in screen load_save_slot.

[gas]

How do you add something like a chapter name to the file slot? Camille's tutorial mentioned you could do that but didn't explain it at all. I get that it would be something like [chapternumber] but I don't get where you're supposed to place that. I assume it has to be inside that "% 2s. %s\n%s" part but I don't understand the formatting of that section to begin with (and I found nothing anywhere else about it) and I'm afraid what I might screw up if I place anything else in there.

I'm also wondering how that would work to begin with if the variable is potentially different at the time of looking at the load screen and at the time of saving the game. I inserted it below the aforementioned string as its own text but it applied to every save slot, so I've obviously done this wrong.

Lastly, the save_delete thing in your code doesn't appear to refer to anything above it so when I hover over the file, I don't see any option to delete. Would that be some kind of extra hotspot I'm missing?

1 & 2: the chapter name is the save name, so at a given point in your game, do this in your game script:

Code: Select all

$ save_name="My first chapter!"

That's all. This will appear as the name of your slot when someone save.
Obviously declare another save_name when the chapter change!

3: the delete option is just... you pressing the DEL key when hovering the slot XD. There's no extra stuff at that stage (of course you can add a delete button for each slot, but that's another question).

[SilverSnow]

If anyone's still following this guide and you encounter a problem with the "save_load_slot", refer to this post.