Filepicker consisting of screenshot? [SOLVED]

[Joey]

Sorry if this sounds confusing but I was wondering how to implement this (I've been peering at code forever and I still can't figure it out @_@)

Basically since my game's a KN I figured that the save/load screen doesn't need 878378137891 save slots and only needs about 2, and that the slots should sort of show what "page" the player was on when s/he last saved, so I thought about replacing the file picker grid with just 2 big screenshots that you click on to return to the point last saved. Here's an ugly mockup:

(there's some graphics at the left side so I'm only using the right side)

Any idea how to go about doing this? I tried something with imagemaps but... bleh ._.

[Code Monkey]

Here's something that will get you started

Code: Select all

    on 'show' action FilePage(1)
    on 'replace' action FilePage(1)
    
    frame:
        style "file_picker_frame"

        has vbox

        $ columns = 1
        $ rows = 2
                
        # Display a grid of file slots.
        grid columns rows:
            transpose True
            xfill True
            style_group "file_picker"
            
            # Display only 2 files slots
            for i in range(1, 3):

                # Each file slot is a button.
                button:
                    action FileAction(i)
                    xfill True

                    has hbox

                    # Add the screenshot.
                    add FileScreenshot(i)
                    
                    # Format the description, and add it as text.
                    $ description = "% 2s. %s\n%s" % (
                        FileSlotName(i, columns * rows),
                        FileTime(i, empty=_("Empty Slot.")),
                        FileSaveName(i))

                    text description

                    key "save_delete" action FileDelete(i)

It's the default file picker modified to only show the first file page for saves and the grid is 1 column and 2 rows for your two slots. If you don't like grids then you can replace it with a vbox. You can add the other frame that has that smiling stick figure. Hope this helps.

[Joey]

Thanks for the reply Code Monkey! ^^ However I'm still having problems:

This is my current code

Code: Select all

screen file_picker:
    on 'show' action FilePage(1)
    on 'replace' action FilePage(1)
    frame:
        yanchor 0.5
        ypos 0.5
        xalign 0.8
        has vbox

        $ columns = 1
        $ rows = 2
                
        # Display a grid of file slots.
        grid columns rows:

            transpose True
            xfill False
            style_group "file_picker"
            
            # Display only 2 files slots
            for i in range(1, 3):

                # Each file slot is a button.
                button:
                    action FileAction(i)
                    xfill True
                    ymaximum 225
                    xmaximum 400
                    add FileScreenshot(i)

                    key "save_delete" action FileDelete(i)    

which I changed slightly from your original code to produce this result:


However I'd like the screenshot to fill the entire button, if that's possible ._. Also to get rid of the green frame (I tried using a plain vbox without the frame, but the buttons turned out wonky). If there's a workaround for the effect I want that I can use imagemaps for, that's actually what I want because I have some effects I'd like to apply around the screenshot buttons (like a border around the screenshot when hovered over).

I tried changing the size of the screenshot using this

Code: Select all

config.screenshot_crop =

but, no dice. :c

[Code Monkey]

1. For the size of the screenshots, you can change the size they are by defining them in the options.rpy file. This wont change existing ones, but future ones.

Code: Select all

config.thumbnail_width = 500
config.thumbnail_height = 400

2. If you want to use imagemaps just remove the grid altogether. Here's your code modified to use an imagemap with the screenshots and text overlayed on it.

Code: Select all

screen file_picker:
    on 'show' action FilePage(1)
    on 'replace' action FilePage(1)
    frame:
        yanchor 0.5
        ypos 0.5
        xalign 0.8
 
        imagemap:
            ground 'ground_map.png'
            hover 'hover_map.png'
             
            hotspot (0, 0, 200, 200) action FileAction(1)
            hotspot (0, 200, 200, 200) action FileAction(2)
 
        vbox:
            hbox:
                add FileScreenshot(1)
                 
                $ description = "% 2s. %s\n%s" % (
                    FileSlotName(1, 2),
                    FileTime(1, empty=_("Empty Slot.")),
                    FileSaveName(1))
     
                text description
                key "save_delete" action FileDelete(1)
                 
            hbox:
                add FileScreenshot(2)
                 
                $ description = "% 2s. %s\n%s" % (
                    FileSlotName(2, 2),
                    FileTime(2, empty=_("Empty Slot.")),
                    FileSaveName(2))
     
                text description
                key "save_delete" action FileDelete(2)

I tested this and it worked fine, the hotspot dimensions are made up, and I would get rid of the "has vbox" statement in your original code. It seemed to mess with styling >.<

[Joey]

Thanks so much, managed to achieve the results I wanted after tweaking it slightly. ^_^

[Code Monkey]

No problem! Glad it worked out