Filling "boxes" with content and move them with xalign 0.5 yalign 0.5 possible?

[Avalonica]

Hello and sorry for being back to the very basics, but here are some examples that I have some issues solving in a optimized way:

Lets say this is 3 lines of text, how would you best "box them" so they can be ordered around (as a unity) with the xalign 0.5 yalign 0.5 command?

text "This is the first line"
text "This is the second line"
text "This is the third line"

Lets say we now have 3 different "boxed" examples of the one in the code example. How would the code look to move them 3 different boxes around on screen with box 1 on: xalign 0.5 yalign 0.5, box 2 on xalign 0.6 yalign 0.6 and box 3 on xalign 0.8 yalign 0.8

text "This is the first line"
text "This is the second line"
text "This is the third line"

Renpy for sure lack a GUI to work in, and I am not used to work in non-GUI environment. Looking on WIKI does not help since it's zero practical examples that I understand currently. I think if I receive some guidance on the above examples in written code , then I'll understand.

Here is an example of a problem I currently have:

I need to order "stuff" like this around on the screen with impunity i.e. xalign and yalign commands. Then I at least can design 100% the way I want the screen to look like.

                    vbox:
                        label _('Display')
                        textbutton _('Window') action Preference('display', 'window')  style_suffix 'warn_button'
                        textbutton _('Fullscreen') action Preference('display', 'fullscreen')  style_suffix 'warn_button'

                    vbox:
                        label _("Rollback Side")
                        textbutton _("Disable") action Preference("rollback side", "disable")
                        textbutton _("Left") action Preference("rollback side", "left")
                        textbutton _("Right") action Preference("rollback side", "right")

Now, if I could "wrap" those evil unruly lines of code in "individual" boxes that could be moved/placed with xalign and yalign commands 90% of my problems would be gone directly!

 

[Porcus Dev]

Here are several samples of the possibilities... then you just have to add xalign/yalign (and xmaximum/ymaximum if necessary) in each option.

You must be registered to see the links

I also have a lot of problems, and I always end up doing a lot of tests... so don't pay too much attention to me, but maybe this would help you:

sceen test1:
     fixed:
          xalign 0.5
          yaligh 0.5
          xmaximum 400
          ymaximum 200
          
          vbox:
               text "This is the first line"
               text "This is the second line"
               text "This is the third line"

 

[recreation]

mgomez0077 is right, there is also an example on the renpy wiki:

You must be registered to see the links

screen ask_are_you_sure:
    fixed:
         text "Are you sure?" xalign 0.5 yalign 0.3
         textbutton "Yes" xalign 0.33 yalign 0.5 action Return(True)
         textbutton "No" xalign 0.66 yalign 0.5 action Return(False)

 

[anne O'nymous]

More basically, the approach here is the same than for CSS.

You've screen statements that create "boxes", and so can be moved in the same time that their content, whatever it is. And you've statements that are "inline", totally independent of everything, and that can be placed wherever in a "box".
Alas, the doc don't class them like this, not even have a "type: box" line to help. You need to read the explanation for each screen statement, and understand by this if it's a box or an inline statement.

When you want to position the content of your screen, the most used statements are :

• You must be registered to see the links
  which is a generic box and offer the more possibilities ;
• You must be registered to see the links
  and
  You must be registered to see the links
  which are more limited in what they offer, but permit to order the content, either vertically or horizontally ;
  

  screen whatever():
      vbox:
          hbox:
              text "this is"
              text "horizontally aligned" 
          text "this is bellow the previous line"

• You must be registered to see the links
  where everything inside share the exact same origin, useful for superposition ;
  

  screen whatever():
      fixed:
          bar value myBarValue range 10
          text "This text is over the bar and can describe it"

• You must be registered to see the links
  where everything inside will be given an amount of space equivalent to the biggest one.
  

  screen whatever():
      vbox:
          grid 3 1:
              vbox:
                  text "This is the first box."
                  text "It will be on the left of the screen."
              vbox:
                  text "middle box"
                  text "small"
              vbox:
                  text "Finally the last box is a really big one, bigger than the two other."
                  text "It's the box that will define the size"
                  text "of all the other boxes"
                  text "but only for this 'grid' box."
          text "This is bellow everything"

 

[the66]

but keep in mind, if you're using a vpgrid, the element size is determined by the 1st element and not the biggest.