Custom Save Screen with Imagemapping

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
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.
Post Reply
Message
Author
Wendyd24
Newbie
Posts: 24
Joined: Wed Nov 15, 2017 11:04 pm
Contact:

Custom Save Screen with Imagemapping

#1 Post by Wendyd24 » Sun Dec 15, 2019 5:09 pm

Hey again! Almost finished with my gui but I've gotten to the hard parts.

I want to make a custom save screen with image mapping, but I'm not sure how to do this.
I studied grids, but I'm not sure how to get them to work properly or if that's even what I'm needing.

Not sure what kind of info to give you to help out, but the first save should be under the location
hotspot (0,176,562,100)
Tried messing around with FileAction(slot) and a few other things, but I'm a beginner and I can't figure it out.

So sorry to ask, but any help is appreciated. Pointing me to a forum thread or working with me would be lovely.
Written on mobile so forgive any formatting errors.

User avatar
Ibitz
Regular
Posts: 56
Joined: Thu Jul 27, 2017 4:47 pm
Projects: Magical Disarray (WIP)
Organization: Ibitz Visual Novels
Deviantart: http://ibitz.deviant
itch: ibitz
Contact:

Re: Custom Save Screen with Imagemapping

#2 Post by Ibitz » Wed Dec 18, 2019 9:07 pm

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.

Image

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.
Image

Ibitz is a self-taught coder/artist who works alone on their games. All games I create are freeware. If you need any help with coding or creating your game, just let me know. I'd be more than happy to help.

Post Reply

Who is online

Users browsing this forum: Google [Bot]