Ren'Py xalign/yalign/pos/xpos/ypos

[Lilou_5]

Where can I learn xalign/ yalign/pos/xpos/ypos?

I'm learning how to put information on the screen but I can't get it right because I don't know where to see the xalign/ yalignI that i need.


Something like this, to show the days, money, time, advance time, inventory.
Some with image buttons but others with only text.

 

[InCompleteController]

Have you played the Tutorial project that follows with Renpy?
Under In Depth, there's a tutorial called Position Properties which goes over the stuff.

In short an element has an Anchor on the element and a Pos on the screen, which the game will match up. Align just sets the Anchor and Pos to the same value.

Since all your elements are at the top, they can have yAlign 0.0.

The element to the left can have xAlign 0.0, whereas your elements on the far right should have xAlign 1.0.
For all other elements to the right, they should have an xAlign somewhere between 0.5 and 1.0.

Since they are all UI elements, I would consider using xAnchor 0.0 for elements on the left and 1.0 for elements on the right, whilst using an integer for the xPos to give an exact position on the screen, instead of using xAlign.

 

[anne O'nymous]

I'm learning how to put information on the screen but I can't get it right because I don't know where to see the xalign/ yalignI that i need.

Why don't learn by practice ?

label start:
    call screen alignExample
    "END"
    return

screen alignExample():
    frame:
        background Solid( "#FF0000" )   # Red
        xalign 0.0
        yalign 0.0
        xsize 400 ysize 400

        frame:
            background Solid( "#00FF00" )   # Green
            xalign 1.0
            yalign 1.0
            xsize 200 ysize 200

        frame:
            xalign 0.5
            yalign 0.5
            background Solid( "#0000FF" )   # Blue
            xsize 200 ysize 200

            frame:
                background Solid( "#FF00FF" )   # Purple
                xalign 0.0
                yalign 0.0
                xsize 100 ysize 100

    frame:
        xalign 0.5
        yalign 0.5
        background Solid( "#FFFF00" )   # Yellow
        xsize 200 ysize 200

Launch, look, change the value, launch again, practice.

I used only frame, but you can obviously use button, text, hbox and so on, to see not only how the alignment react, but also how this reaction vary, or not, depending of the statement itself, as well as its father statement.

It will always teach you more that any kind of explanation.

 

[79flavors]

xpos and ypos are absolute positions.

The easiest way I've found to get "close enough" is to start your game, go into the Developer Menu (shift+D) then choose "Image Location Picker"... scroll down the list of images used by the game and find a fullscreen background image used by your game. It will load the image (hopefully fullscreen) and display it. In addition to your image, there will now also a box in the bottom left corner showing the current mouse position. Move the mouse about to where you want the top left corner of your UI element to be and write down the mouse coordinates. You can use these as your xpos and ypos. It probably won't be perfect first time, but it should close enough for you to start the game with your new code and keep moving things little by little until you are happy with the positioning.

Another handy way of doing that is the automatic source code reload RenPy can use in developer mode. Basically, once your game is running you can press (shift+R). Now if you change the source code and save... RenPy will notice the datetime/filesize has changed on the source code and reload the game using the new code. It's a great way to make small changes and see them almost immediately without having to quit and reload the game over and over. Even better if you have two monitors or enough screen area to be able to have both the game and the source code editor open and visible at the same time.

Now personally, I wouldn't do that. I'd load the background image into something like Photoshop or

You must be registered to see the links

(free) and position things on multiple layers until I'm happy with how everything looks. Then I'd zoom in and use the editor's UI side rulers in pixels to figure out the absolute positioning.

xalign and yalign are a little more complex.
xalign=0 will align the left hand side of an image against the left hand edge of the screen.
xalign=1 will align the right hand side of an image against the right hand edge of the screen.
... and everything in between. 0.5 is dead center. Same with yalign, except it's top and bottom instead.

The headache part (at least in my case) is that the image being displayed is also a certain size too. xalign=0.25 might seem at first glance like it would put something 25% across the screen... and it sort of does - but not quite. It positions the left hand edge at ((screen size * 0.25) - (image size * 0.25))... Essentially positioning things so it's 25% to the right of the screen, but then adjusted it 25% to the left based on the image size. It's why 0.5 is has the image in the middle of the screen, with the middle of the image aligned to the middle of the screen rather than one of it's edges.

Personally, I'd prefer to use xalign and yalign for things like animations and xpos and ypos for UI elements. But they are both interchangeable as long as you are willing to do a bit of trial and error.

 

[Lilou_5]

Putting all your examples into practice I have already managed to place the texts and buttons correctly.
Thank you all very much for your help.

 

[anne O'nymous]

Personally, I'd prefer to use xalign and yalign for things like animations and xpos and ypos for UI elements.

An important precision regarding this point :

People tend to believe that xpos and ypos correspond to coordinates on the window where the game is displayed, and that, in consequence, if you place something on xpos 500, then reduce the windows with bellow 500 pixels, the said "something" will disappear because placed outside of the resized window. And that's why many people only use xalign and yalign and their percents values ; by fear that once resized their game will looks bad.

But in fact, Ren'py is designed to works with whatever size of screen. Basically speaking, it's like it firstly build the screen as it will be seen, then resize it. Therefore, when you put something on xpos 500 it will still be seen after you've reduced the windows bellow 500 pixels, and still be at the same place, relatively to the rest of the screen.
And the same apply if you raise the size of the screen. Whatever the size your design will be shown, it will always looks exactly like you wanted it. This with a marge of error of 1 pixel maximum, due to the rounding of the value.