Ren'Py Buttons wont move

Mescalino

Active Member
Aug 20, 2017
943
6,693
I have created a "quit" screen with yes no buttons:

Code:
## Confirm screen ##############################################################
##
## The confirm screen is called when Ren'Py wants to ask the player a yes or no
## question.
##
## http://www.renpy.org/doc/html/screen_special.html#confirm

screen confirm(message, yes_action, no_action):

    ## Ensure other screens do not get input while this screen is displayed.
    modal True

    zorder 200

    style_prefix "confirm"

    add "gui/yesno_ground.jpg"

    frame:
        vbox:
            xalign .5
            yalign .002
            spacing 30

            label _(message):
                style "confirm_prompt"
                xalign 0.5

        hbox:
            imagebutton:
                idle "gui/yesno_yes_idle.png"
                hover "gui/yesno_yes_hover.png"
                action yes_action
                xalign 0.300
                yalign 0.900

            imagebutton:
                idle "gui/yesno_no_idle.png"
                hover "gui/yesno_no_hover.png"
                action no_action
                xalign 0.800
                yalign 0.900


    ## Right-click and escape answer "no".
    key "game_menu" action no_action


style confirm_frame is gui_frame
style confirm_prompt is gui_prompt
style confirm_prompt_text is gui_prompt_text
style confirm_button is gui_medium_button
style confirm_button_text is gui_medium_button_text

style confirm_frame:
    background Frame([ "gui/yesno_ground.jpg"], gui.confirm_frame_borders, tile=gui.frame_tile)
    padding gui.confirm_frame_borders.padding
    xalign .5
    yalign .5

style confirm_prompt_text:
    text_align 0.5
    layout "subtitle"

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

style confirm_button_text:
    properties gui.button_text_properties("confirm_button")
When i change the allign here:

imagebutton:
idle "gui/yesno_no_idle.png"
hover "gui/yesno_no_hover.png"
action no_action
xalign 0.800
yalign 0.900

The buttons remain in the left top corner.
 

anne O'nymous

I'm not grumpy, I'm just coded that way.
Modder
Donor
Respected User
Jun 10, 2017
10,960
16,195
There's two things to take in consideration here.
1) All the positioning apply to the displayable which contains the object.
So, here you try to place the first imagebutton at 30% horizontally and 90% vertically of the surface used by hbox.

2) Unless explicitly stated otherwise, all the displayable use the minimum of space.
So, here the hbox use just enough space for to display your two images. Trying to place these images horizontally or vertically will never work because there isn't more space.

Imagine a box. Inside you put an object which have the same size than this box. Now, try to place this object on the left of the box, then in the middle... It will change nothing because there isn't enough space.
It's exactly the same thing here, so you need to give some space to your imagebutton. For this you can :
- Define a minimum size to hbox. It will not work since xminimum ask for a value in pixels and I assume that you want to continue to work relatively.
- Tell to the hbox to use all the available size. This will work.

So, your screen must be:
Code:
        hbox:
           xalign 0.0
           yalign 0.9
           xfill True

            imagebutton:
                idle "gui/yesno_yes_idle.png"
                hover "gui/yesno_yes_hover.png"
                action yes_action
                xalign 0.3

            imagebutton:
                idle "gui/yesno_no_idle.png"
                hover "gui/yesno_no_hover.png"
                action no_action
                xalign 0.8
First, we define where the hbox should be.
Like you want both button at the same horizontal position, no need to define it for each one, just put the hbox at the right place. And for the vertical position, placing the hbox against the left edge of the screen will let you have a better control on the vertical position of the buttons.
Finally, we define xfill at True, so we ask for the hbox to fill all the available space horizontally.
Then we remove the, now useless, yalign for the imagebutton.

Is the result what you wanted ?
 
  • Like
Reactions: Mescalino

Mescalino

Active Member
Aug 20, 2017
943
6,693
This is exactly what i wanted!! You mam(?) are amazing!

Also thanks for the explaination rather then just the code.