Unaligned button

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
Imperf3kt
Lemma-Class Veteran
Posts: 3785
Joined: Mon Dec 14, 2015 5:05 am
itch: Imperf3kt
Location: Your monitor
Contact:

Unaligned button

#1 Post by Imperf3kt »

I hope I'm just missing something really obvious, but for the life of me I cannot figure out why my return button is a few pixels further to the right, than my other buttons. Maybe someone can spot why? (Its definitely not the image itself)
screenshot0017.png
Image

Here's all the relevant code:

Game screen:

Code: Select all

screen game_menu(title, scroll=None):

    style_prefix "game_menu"

    if main_menu:
        add gui.main_menu_background
    else:
        add gui.game_menu_background

    frame:
        style "game_menu_outer_frame"

        hbox:

            ## Reserve space for the navigation section.
            frame:
                style "game_menu_navigation_frame"

            frame:
                style "game_menu_content_frame"
                

                if scroll == "viewport":

                    viewport:
                        scrollbars "vertical"
                        mousewheel True
                        draggable True

                        side_yfill True

                        vbox:
                            transclude

                elif scroll == "vpgrid":

                    vpgrid:
                        cols 1
                        yinitial 1.0

                        scrollbars "vertical"
                        mousewheel True
                        draggable True

                        side_yfill True

                        transclude

                else:

                    transclude

    use navigation
    
    imagebutton alt "back." auto "gui/button/back_%s.png" focus_mask True hovered tt.Action("Close this screen."):
        style "return_button"

        action Return()
    
    vbox:
        style_prefix "ttip"
    
        text tt.value

    

    if main_menu:
        key "game_menu" action ShowMenu("main_menu")


style game_menu_outer_frame is empty
style game_menu_navigation_frame is empty
style game_menu_content_frame is empty
style game_menu_viewport is gui_viewport
style game_menu_side is gui_side
style game_menu_scrollbar is gui_vscrollbar

style game_menu_label is gui_label
style game_menu_label_text is gui_label_text

style return_button is navigation_button
style return_button_text is navigation_button_text

style game_menu_outer_frame:
    bottom_padding 133
    top_padding 118

    background "gui/overlay/game_menu.png"

style game_menu_navigation_frame:
    xsize 499
    yfill True

style game_menu_content_frame:
    left_margin 30
    right_margin 30
    top_margin 15

style game_menu_viewport:
    xsize 1380

style game_menu_vscrollbar:
    unscrollable gui.unscrollable

style game_menu_side:
    spacing 15

style game_menu_label:
    xpos 75
    ysize 180

style game_menu_label_text:
    size gui.title_text_size
    color gui.accent_color
    yalign 0.5

style return_button:
    xpos gui.navigation_xpos
    yalign 1.0
    yoffset -45

style ttip_vbox:
    xpos 550
    ypos 1015
    text_align 0.0
    
style ttip_text:
    size 45
    
and as referenced, gui.navigation_xpos is in gui.rpy as: define gui.navigation_xpos = 60

Not sure if it is relevant, but here is main_menu:

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
    
    ## This displays the tooltip message when hovering the main menu buttons.
    ## It is repeated within the navigation screen so it shows on other screens as well.
    vbox:
        style_prefix "ttip"
        
        text tt.value

    ## The use statement includes another screen inside this one. The actual
    ## contents of the main menu are in the navigation screen.
    use navigation


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 420
    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")
    

According to the display inspector, Ren'Py has made the image button larger than the image?
https://i.imgur.com/dZ2TqDj.png
A different button, on the same screen:
https://i.imgur.com/oKeFAKa.png


Anybody understand whats going on here?
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

User avatar
MaydohMaydoh
Regular
Posts: 165
Joined: Mon Jul 09, 2018 5:49 am
Projects: Fuwa Fuwa Panic
Tumblr: maydohmaydoh
Location: The Satellite of Love
Contact:

Re: Unaligned button

#2 Post by MaydohMaydoh »

This happened to me a few times, where ui objects seem to get random style properties. Like 2 of my main menu buttons decided to set xfill to true and I couldn't figure out why and in the end I just had to manual set xfill to false. You could try forcing the size with xsize & ysize maybe?

But I would also like to know if anyone knows why it does this, whether is a bug or if we've done something wrong.

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

Re: Unaligned button

#3 Post by Imperf3kt »

From what I can tell, it looks like this particular button, since it is not part of the other group of buttons, is receiving some form of padding that the others are not. Maybe a frame in the way? I hate frames, frames are evil cursed things that I wish did not exist.
Warning: May contain trace amounts of gratuitous plot.
pro·gram·mer (noun) An organism capable of converting caffeine into code.

Current project: GGD Mentor

Twitter

Post Reply

Who is online

Users browsing this forum: Google [Bot], Majestic-12 [Bot]