[solved] Is it possible to make a button transparent?

[Chekhov]

This is the regular code that shows the file slots.

Unless I'm mistaken, the relevant code that creates the look of the save/load slots is this:

Code: Select all

                    button:
                        
                        action FileAction(slot)

                        has vbox

                        add FileScreenshot(slot) xalign 0.5

                        text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("empty slot")):
                            style "slot_time_text"

                        text FileSaveName(slot):
                            style "slot_name_text"

                        key "save_delete" action FileDelete(slot)

And the relevant styling:

Code: Select all

## File Slot Buttons ###########################################################
##
## A file slot button is a special kind of button. It contains a thumbnail
## image, and text describing the contents of the save slot. A save slot uses
## image files in gui/button, like the other kinds of buttons.

## The save slot button.
define gui.slot_button_width = 414
define gui.slot_button_height = 309
define gui.slot_button_borders = Borders(15, 15, 15, 15)
define gui.slot_button_text_size = 21
define gui.slot_button_text_xalign = 0.5
define gui.slot_button_text_idle_color = gui.idle_small_color
define gui.slot_button_text_selected_idle_color = gui.selected_color
define gui.slot_button_text_selected_hover_color = gui.hover_color


## The width and height of thumbnails used by the save slots.
define config.thumbnail_width = 484
define config.thumbnail_height = 270

## The number of columns and rows in the grid of save slots.
define gui.file_slot_cols = 3
define gui.file_slot_rows = 2

I have the impression I should be able to add something simple like "alpha .5" somewhere to make the save slots without a save in them look transparent, but every place that seemed to make sense to me gave me errors. Any suggestions?


For reference sake here is the full code for the file_slots screen in a new ren'py project:

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 page name, which can be edited by clicking on a button.
            button:
                style "page_label"

                key_events True
                xalign 0.5
                action page_name_value.Toggle()

                input:
                    style "page_label_text"
                    value page_name_value

            ## The grid of file slots.
            grid gui.file_slot_cols gui.file_slot_rows:
                style_prefix "slot"

                xalign 0.5
                yalign 0.5

                spacing gui.slot_spacing

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

                    $ slot = i + 1

                    button:
                        action FileAction(slot)

                        has vbox

                        add FileScreenshot(slot) xalign 0.5

                        text FileTime(slot, format=_("{#file_time}%A, %B %d %Y, %H:%M"), empty=_("empty slot")):
                            style "slot_time_text"

                        text FileSaveName(slot):
                            style "slot_name_text"

                        key "save_delete" action FileDelete(slot)

            ## Buttons to access other pages.
            hbox:
                style_prefix "page"

                xalign 0.5
                yalign 1.0

                spacing gui.page_spacing

                textbutton _("<") action FilePagePrevious()

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

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

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

                textbutton _(">") action FilePageNext()

[Chekhov]

Heh I thought there was a reply before and I tried out the solution, but it did not work. I guess he found out it didn't work and deleted it

I appreciate the effort to help though! Thank you for trying to help me work this out!

I've been trying a couple of things but still no success.

[Ocelot]

Does following not work?

Code: Select all

transform halftransparent:
    alpha 0.5

# . . .

button:
    #...
    at halftransparent

[Alex]

...I have the impression I should be able to add something simple like "alpha .5" somewhere to make the save slots without a save in them look transparent, but every place that seemed to make sense to me gave me errors. Any suggestions?...

Not tested, but try to create a transparent displayable and use it when there's no screenshot for the slot, like

Code: Select all

image my_semitransparent_displayable:
    Solid("#0005")
    size (config.thumbnail_width, config.thumbnail_height)

Code: Select all

add FileScreenshot(slot, empty='my_semitransparent_displayable') xalign 0.5

https://www.renpy.org/doc/html/screen_a ... Screenshot

edit: corrected FileAction to FileScreenshot

[Chekhov]

Does following not work?

Code: Select all

transform halftransparent:
    alpha 0.5

# . . .

button:
    #...
    at halftransparent

This does not work. Because then it makes the button transparent even if there is a save present in that slot, which is not intended behaviour. (Which admittedly, I may not have made clear in my post).

Not tested, but try to create a transparent displayable and use it when there's no screenshot for the slot, like

Code: Select all

image my_semitransparent_displayable:
    Solid("#0005")
    size (config.thumbnail_width, config.thumbnail_height)

Code: Select all

action FileAction(slot, empty='my_semitransparent_displayable')

https://www.renpy.org/doc/html/screen_a ... Screenshot

There are a couple of flaws in this, but by fixing them I was able to solve it (thanks for the link!).

The end result looks like this:

Code: Select all

image my_semitransparent_displayable:
    Solid("#000000")
    size (config.thumbnail_width, config.thumbnail_height)
    alpha 0.9

and

Code: Select all

add FileScreenshot(slot, empty='my_semitransparent_displayable') xalign 0.5
#empty is a component of filescreenshot, not fileaction

And in case anyone finds this and wants to solve it, you also have to either remove or edit:

Code: Select all

style_prefix "slot"

If you don't, the style will give a solid color background.

[Alex]

...

Code: Select all

add FileScreenshot(slot, empty='my_semitransparent_displayable') xalign 0.5
#empty is a component of filescreenshot, not fileaction

...

Oops, sorry - glad you've solved this...

[zmook]

The docs on FileScreenshot are cryptic, but it turns out the argument for the `empty` parameter is a displayable you want to show whenever the slot doesn't have a valid save, instead of an invisible Null displayable over a solid-color rectangle.

Those solid-color rectangles are pregenerated and saved as gui/button/slot_idle_background.png and gui/button/slot_hover_background.png. You can replace those with your own images, or add your own `background` parameter to the `button` or `vbox` displayables in the file slot grid and tell the screen to show whatever you like.

[Chekhov]

...

Code: Select all

add FileScreenshot(slot, empty='my_semitransparent_displayable') xalign 0.5
#empty is a component of filescreenshot, not fileaction

...

Oops, sorry - glad you've solved this...

Well I learned an interesting new function and it helped me. Thanks!

The docs on FileScreenshot are cryptic, but it turns out the argument for the `empty` parameter is a displayable you want to show whenever the slot doesn't have a valid save, instead of an invisible Null displayable over a solid-color rectangle.

Those solid-color rectangles are pregenerated and saved as gui/button/slot_idle_background.png and gui/button/slot_hover_background.png. You can replace those with your own images, or add your own `background` parameter to the `button` or `vbox` displayables in the file slot grid and tell the screen to show whatever you like.

Changing these images is by far the easiest and quickest solution.

Thanks.