Is there an easy way to put text/images/etc without having to guess numbers?

[Karrion]

Basically what the title says. One of my worst nightmares while programming is having to place text/images and the like and having to guess the values of the xalign and yalign to place the things in the same place of the layout that our graphics guy designed it.

As a concrete example:

https://i.imgur.com/n2Q6d8S.png

This is the actual state of the settings screen I'm trying to program and am having lots of problem trying to align both texts.

Code: Select all

screen preferences():

    tag menu
    zorder 101
    add "images/template_opciones.jpg"

    vbox:

        xalign 0.506
        yalign 0.465

        hbox:
            box_wrap True

            if renpy.variant("pc"):

                vbox:
                    style_prefix "radio"
                    label _("DISPLAY")
                    hbox:
                        spacing 41
                        textbutton _("Window") action Preference("display", "window")
                        textbutton _("Fullscreen") action Preference("display", "fullscreen")

            vbox:
                style_prefix "radio"
                label _("LANGUAGE")
                hbox:
                    textbutton _("ENG") text_font "fonts/PixelMaster.ttf" action Language("english")
                    textbutton _("JAP") text_font "fonts/PixelMaster.ttf" action Language("japanese")
                    textbutton _("ESP") text_font "fonts/PixelMaster.ttf" action Language(None)
            ## Additional vboxes of type "radio_pref" or "check_pref" can be
            ## added here, to add additional creator-defined preferences.
        vbox:
            style_prefix "check"
            label _("SKIP")
            hbox:
                spacing 75
                textbutton _("Unseen") action Preference("skip", "toggle")
                textbutton _("After Ch.") action Preference("after choices", "toggle")
                textbutton _("Transitions") action InvertSelected(Preference("transitions", "toggle"))
        hbox:
            style_prefix "slider"
            spacing 130
            box_wrap True
            if config.has_music:
                vbox:
                    label _("MUSIC VOL.")
                    bar value Preference("music volume")
            if config.has_sound:
                vbox:
                    label _("SOUND VOL.")
                    bar value Preference("sound volume")

style pref_label is gui_label
style pref_label_text is gui_label_text
style pref_vbox is vbox

style radio_label is pref_label
style radio_label_text is pref_label_text
style radio_button is gui_button
style radio_button_text is gui_button_text
style radio_vbox is pref_vbox

style check_label is pref_label
style check_label_text is pref_label_text
style check_button is gui_button
style check_button_text is gui_button_text
style check_vbox is pref_vbox

style slider_label is pref_label
style slider_label_text is pref_label_text
style slider_slider is gui_slider
style slider_button is gui_button
style slider_button_text is gui_button_text
style slider_pref_vbox is pref_vbox

style mute_all_button is check_button
style mute_all_button_text is check_button_text

style pref_label:
    top_margin gui.pref_spacing
    bottom_margin 3

style pref_label_text:
    xalign 0.0
    yalign 1.0
    size 72

style pref_vbox:
    xsize 338

style radio_vbox:
    spacing gui.pref_button_spacing

style radio_button:
    properties gui.button_properties("radio_button")
    foreground "gui/button/check_[prefix_]foreground.png"

style radio_button_text:
    properties gui.button_text_properties("radio_button")
    size 72

style check_vbox:
    spacing gui.pref_button_spacing

style check_button:
    properties gui.button_properties("check_button")
    foreground "gui/button/check_[prefix_]foreground.png"

style check_button_text:
    properties gui.button_text_properties("check_button")
    size 72

style slider_slider:
    xsize 413

style slider_button:
    properties gui.button_properties("slider_button")
    yalign 0.5
    left_margin 15

style slider_button_text:
    properties gui.button_text_properties("slider_button")

style slider_vbox:
    xsize 420

This is the code I'm working with. Every time I change the spacing to the options, the align of the entire vbox moves, every time I change the border of the options to align the check mark, the entire vbox moves again; and I can't even get the "After Ch." text to be in just one line. Is there a better way to do this than just putting random numbers in the aligns and spacings and hoping everything is aligned? I tried measuring the space between the options in the layout in pixels to at least nail the spacing and not even that works.

Any help would be much appreciated.

[Per K Grok]

Basically what the title says. One of my worst nightmares while programming is having to place text/images and the like and having to guess the values of the xalign and yalign to place the things in the same place of the layout that our graphics guy designed it.

------

This is the code I'm working with. Every time I change the spacing to the options, the align of the entire vbox moves, every time I change the border of the options to align the check mark, the entire vbox moves again; and I can't even get the "After Ch." text to be in just one line. Is there a better way to do this than just putting random numbers in the aligns and spacings and hoping everything is aligned? I tried measuring the space between the options in the layout in pixels to at least nail the spacing and not even that works.

Any help would be much appreciated.

In my opinion xpos and ypos is better than xalign and yalign to put things in an exact position, whether it is position on the game screen or within a frame or box.

If you have an image with the elements drawn in the desired positions you can open that image in a drawing program and check the xpos/ypos of the top/left corner of the item that you want to place in the game.

One thing I often do is to during the programming use a screen like this.

Code: Select all

screen checkMousePos():
    $ t=0	
    $ mx=renpy.get_mouse_pos()[0]
    $ my=renpy.get_mouse_pos()[1]
    
    text str(mx) + ":" + str(my)
    
    timer 0.2 action SetVariable("t", 1) repeat True

That can be rather helpful to find the xpos/ypos of a specific point on the screen.

[Karrion]

Doesn't xpos and ypos screw with positioning when the game is in a resolution other than the original?

[Imperf3kt]

Doesn't xpos and ypos screw with positioning when the game is in a resolution other than the original?

No, that's only if you change the resolution on your end, not the players end.