[SOLVED] Buttons - background and text aligned

[Bren]

Hi guys,

I have created a few buttons (each of them with background + specific text) and I'd like to make sure both background and text are perfectly aligned. So far I managed to do it manually by changing the padding for each button based on the text length, but if there's any change in the text length (e.g. translation) the background is not aligned anymore:

qsdqsdqdsqsd.JPG (22.68 KiB) Viewed 522 times

Code: Select all

button:
            text _("Gallery") color "#ffffff" hover_color "#e4bb53" size 20
            background ("gui/menuselector.png") hover_background ("gui/menuselector.png") left_padding 90 right_padding 90 top_padding 0.015 bottom_padding 0.015
            action ShowMenu("gallery")
           
button:
            text _("Preferences") color "#ffffff" hover_color "#e4bb53" size 20
            background ("gui/menuselector.png") hover_background ("gui/menuselector.png") left_padding 90 right_padding 90 top_padding 0.015 bottom_padding 0.015
            action ShowMenu("preferences")

I believe this should actually be quite easy, but for some reason i can't find a way to work it out... has anyone encountered this issue?

Many thanks!

[Ocelot]

I am not sure what do you want to od there. Do you want text to be centered on same vertical axis, so all labels would be over one another and have background images slightly shifted horisontally for each button?

[Bren]

Hey, thanks for reaching out - I would like to align the button background on the text (both vertically and - mainly - horizontally).

As you can see on the screenshot:
- texts are properly aligned to one another (centered on vertical axis)
- background for "Preferences" button is definitely not vertically aligned as it overflows to the left (while "Gallery" button looks OK)

Is there a way to do so without applying a case-by-case padding to each button?

[Ocelot]

Can you show more of your screen code? At least of the button container (I suppose it vbox, but it is better to actually see its properties). And could you post gui/menuselector.png image, so I could try to reproduce this problem?

[Bren]

Sure - this screen is mainly based on the standard Main Menu screen of Renpy:

Code: Select all

screen main_menu():

    ## This ensures that any other menu screen is replaced.
    tag menu

    style_prefix "main_menu"

    add gui.main_menu_background

    ## This empty frame darkens the main menu.
    frame:
        pass
    
    vbox:
        button:
            text _("Gallery") color "#ffffff" hover_color "#e4bb53" size 20
            background ("gui/menuselector.png") hover_background ("gui/menuselector.png") left_padding 90 right_padding 90 top_padding 0.015 bottom_padding 0.015
            action ShowMenu("gallery")

        button:
            text _("Preferences") color "#ffffff" hover_color "#e4bb53" size 20
            background ("gui/menuselector.png") hover_background ("gui/menuselector.png") left_padding 90 right_padding 90 top_padding 0.015 bottom_padding 0.015
            action ShowMenu("preferences")

    if gui.show_name:

        vbox:
            text "[config.name!t]":
                style "main_menu_title"

            text "[config.version]":
                style "main_menu_version"
                
style main_menu_frame is empty
style main_menu_vbox is vbox
style main_menu_text is gui_text
style main_menu_title is main_menu_text
style main_menu_version is main_menu_text

style main_menu_frame:
    xsize 280
    yfill True
    background "gui/overlay/main_menu.png"

style main_menu_text:
    properties gui.text_properties("main_menu", accent=True)

style main_menu_title:
    properties gui.text_properties("title")

style main_menu_version:
    properties gui.text_properties("version")
    
style main_menu_vbox:
    xalign 0.53
    xmaximum 960
    yalign 0.85
    spacing 15

style main_menu_button is default

style main_menu_button:
    color "#ffffff" hover_color "#e4bb53" size 20
    xalign 0.5

And attached is menuselector.png

Thanks!

[Ocelot]

Ok, main problem is that your button are of different sizes (because text is of different size) and background image is placed at top-left corner. We need to fix that. Most obvious solution is to align image to the center of the button. For that we need to declare out image with a transform applied to it. You can do it in the screen, like that: default bg_button_image = Image("gui/menuselector.png", xalign=0,5)
This already fixes this problem, but you can go one step further:

Code: Select all

    vbox:
        default bg_button_image = Image("gui/menuselector.png", style="main_menu_button_background") # use styles instead of manually supplying properties
        button:
            size_group "main menu button" # makes everyone with the same size_group be the same size
            text _("Preferences") style "main_menu_button_text" # apply style instead
            background       bg_button_image # add our defined custom image instead of relying on default behavior
            hover_background bg_button_image
            action ShowMenu("preferences")
        button:
            size_group "main menu button"
            text _("Gallery") style "main_menu_button_text"
            background       bg_button_image
            hover_background bg_button_image
            action ShowMenu("gallery")
        button:
            size_group "main menu button"
            text _("Pdfgdfgrhgffghjehkghkfghkghkeghkghkrghkghkences") style "main_menu_button_text"
            background       bg_button_image
            hover_background bg_button_image
            action ShowMenu("preferences")

#... just styles I used there

style main_menu_button is button:
    padding (0,0)
    ymargin 0.015
    xalign 0.5

style main_menu_button_text is text:
    color "#ffffff"
    hover_color "#e4bb53"
    size 20
    align (0.5, 0.5)

style main_menu_button_background:
    align (0.5, 0.5)

Even if the text is long enough to flow outside of the button, it does not break anything else:

[Bren]

Thank you so much for all your help Ocelot, just tried your code and it works perfectly! I could also use this for some other buttons in the settings and it looks flawless now - thanks a lot!