[Solved] Custom hovering on save slot buttons

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
User avatar
Samitha
Newbie
Posts: 16
Joined: Wed Nov 13, 2019 5:21 pm
Projects: Princess Impersonator
itch: samitha-games
Contact:

[Solved] Custom hovering on save slot buttons

#1 Post by Samitha » Thu Jan 16, 2020 6:59 pm

Hello!

I'm a newbie coding in general, and thus can't seem to know where to customize the hovering state of the save slot buttons.
My idea is to have a thin frame surround the slot button:
Save-screen.png


I am aware that style_prefix "slot" in the original sample of The Question is in charge of that hovering but I just can't seem to find that particular style anywhere. Inside my code, it displays a blue line on the left side of the slot buttons:
Save-screen_hover.png
Here's my code:

Code: Select all

screen file_slots(title):

    default page_name_value = FilePageNameInputValue(pattern=_("Page {}"), auto=_("Automatic saves"), quick=_("Quick saves"))

    use game_menu(title):

        fixed:

            ## This ensures the input will get the enter event before any of the
            ## buttons do.
            order_reverse True

            ## The grid of file slots.
            grid gui.file_slot_cols gui.file_slot_rows:
                style_prefix "slot"
                xsize 800
                xalign 0.5
                yalign 0.3

                spacing 50

                for i in range(gui.file_slot_cols * gui.file_slot_rows):

                    $ slot = i + 1

                    button:
                        xsize 423
                        ysize 243
                        action FileAction(slot)
                        add "gui/saveslot_image.png"

                        vbox:

                            add FileScreenshot(slot) xalign 0.5 size(423,243)

                            text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("empty slot")):
                                xalign 1.0
                                size 25

                        key "save_delete" action FileDelete(slot)

            ## Buttons to access other pages.
            vbox:

                xalign 0.95
                yalign 0.3

                spacing 30
                textbutton _("^") action FilePagePrevious()

                if config.has_autosave:
                    textbutton _("{#auto_page}Auto") action FilePage("auto")

                if config.has_quicksave:
                    textbutton _("{#quick_page}Quick") action FilePage("quick")

                ## range(1, 10) gives the numbers from 1 to 9.
                for page in range(1, 6):
                    textbutton "[page]" action FilePage(page)

                textbutton _("v") action FilePageNext()


style page_label is gui_label
style page_label_text is gui_label_text
style page_button is gui_button
style page_button_text is gui_button_text

style slot_button is gui_button
style slot_button_text is gui_button_text
style slot_time_text is slot_button_text
style slot_name_text is slot_button_text

style page_label:
    xpadding 75
    ypadding 5

style page_label_text:
    text_align 0.5
    layout "subtitle"
    hover_color gui.hover_color
    size 25

style page_button:
    properties gui.button_properties("page_button")

style page_button_text:
    properties gui.button_text_properties("page_button")

style slot_button:
    properties gui.button_properties("slot_button")

style slot_button_text:
    properties gui.button_text_properties("slot_button")



What should I do?

I'd be eternally grateful :D :D !
Last edited by Samitha on Mon Jan 20, 2020 3:45 pm, edited 1 time in total.

User avatar
Imperf3kt
Lemma-Class Veteran
Posts: 2840
Joined: Mon Dec 14, 2015 5:05 am
Location: Your monitor
Contact:

Re: Custom hovering on save slot buttons

#2 Post by Imperf3kt » Thu Jan 16, 2020 7:56 pm

I can answer the question as asked, but first I'll answer your specific goal, as that may be simpler.

You say you want thin frame around the Save slot, this already exists.
look under gui.rpy for the save slot borders.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Twitter

User avatar
gas
Miko-Class Veteran
Posts: 613
Joined: Mon Jan 26, 2009 7:21 pm
Contact:

Re: Custom hovering on save slot buttons

#3 Post by gas » Fri Jan 17, 2020 6:35 am

That blue border is in fact a graphical .png picture, not a style definition.
You should change the picture in the GUI folder with the one with proper borders. And you should adjust size and paddings of the slot area in the GUI definition script, as they have a left padding for that blue border by default.
10 ? "RENPY"
20 GOTO 10

RUN

User avatar
Samitha
Newbie
Posts: 16
Joined: Wed Nov 13, 2019 5:21 pm
Projects: Princess Impersonator
itch: samitha-games
Contact:

Re: Custom hovering on save slot buttons

#4 Post by Samitha » Fri Jan 17, 2020 3:52 pm

Thank youu! Both of you :D

And sorry for the newbie-type of a question, I couldn't find an answer anywhere, hehe.

Could I ask for another thing, though? The buttons grew a little bit in size and they seem to be disappearing towards the bottom part of the screen. However much I want to, I can't get the grid to move upwards. I don't know if there's another property I could use, or something I'm doing wrong. Though the xalign does work somewhat, the yalign doesn't.

User avatar
gas
Miko-Class Veteran
Posts: 613
Joined: Mon Jan 26, 2009 7:21 pm
Contact:

Re: Custom hovering on save slot buttons

#5 Post by gas » Fri Jan 17, 2020 8:32 pm

I think is the top_padding of this style definition you can find in the game_menu screen.

Code: Select all

style game_menu_outer_frame:
    bottom_padding 25
    top_padding 100

    background "gui/overlay/game_menu.png"
(but I can't test it right now).
10 ? "RENPY"
20 GOTO 10

RUN

User avatar
Samitha
Newbie
Posts: 16
Joined: Wed Nov 13, 2019 5:21 pm
Projects: Princess Impersonator
itch: samitha-games
Contact:

Re: Custom hovering on save slot buttons

#6 Post by Samitha » Mon Jan 20, 2020 3:39 pm

You nailed it! Thank you so much! ♥

Post Reply

Who is online

Users browsing this forum: Google [Bot], Valhalla Ent