Relative positioning

[Chiligoat]

Hey everyone!
I've been looking around in the cookbook and old forum posts, but I can't really seem to find anywhere that explains how to position a screen, image or similar displayable relative to another. In previous game making software, it was rather easily done by a function like "object.x+100", or something similar. But I've yet to figure out a way to do this in Renpy.
There are multiple places where I'd like to implement this kind of positioning, but most specifically in a horizontal inventory grid, and a phone where there are sometimes incoming messages that I would like to bring on top vertically, or stacking if you will. Here is a very simplified version of the latter's code; it would be nice if anyone had any suggestions on how to bring text_casper to push down the pre-existing text_mum!

Code: Select all

screen phonemain():
 tag phone
 modal True
 zorder 2
 add "images/scr_pmain.png" at truecenter
 imagebutton:
   idle "images/butt_invclose.png" #the x-button at the bottom
   xalign 0.5 yalign 0.925
   action Hide("phonemain")

 if text_casper:##THIS IS THE BIT THAT I'D LIKE TO "PUSH DOWN" THE OTHER MESSAGE
  imagebutton:
   idle "images/scr_msgbg.png" #the rectangle
   xalign 0.5 yalign 0.1
   action Show("msgcenter")
  if unread:
   imagebutton:
    idle "images/butt_unread.png" xpos 370 ypos 70 #the exclamation point
##THIS IS THE PART THAT DEALS WITH MESSAGE POSITIONING
  vbox:
   xpos 385 ypos 55 xmaximum 330
   textbutton "SENDER\nThis is a random text string to act as a msg preview" action Show("msgcenter")

 if text_mum:
  imagebutton:
   idle "images/scr_msgbg.png"
   xalign 0.5 yalign 0.3
   action Show("msgcenter")
  vbox:
   xpos 385 ypos 160 xmaximum 330
   textbutton "MUM\nThis is a permanent text that will never be labeled unread." action Show("msgcenter")

Here's an image to help visualise what's going on! It looks the way I'd like it to look when doing what I want it to do, but as you can see, only because of direct positioning. If the var that toggles text_casper is False, there's obviously just a gaping hole there.



What can I do to
a) Make Mum's text be on top until another one comes in
b) Stick the new text on top of hers

Thanks in advance for any pointers! I'm really new to Renpy still, so use your baby words, please!

[XxrenxX]

Maybe adding in a yoffset into the code? this messaging system uses that when showing/hiding a message. I'm not an expert so I could be wrong in using that but I think it might be possible to use that in the if statement to help the message move.

[philat]

Why wouldn't you just use a vbox to do the positioning for you?

[Chiligoat]

Maybe adding in a yoffset into the code? this messaging system uses that when showing/hiding a message.

Thanks for the tip! I'll read up on offsets to see what they are and take a look at that project to see if I can pick it apart and learn something.

Why wouldn't you just use a vbox to do the positioning for you?

I would love to let something else do all my heavy lifting, but wouldn't I need to tell it where and how to position things all the same? In the way that "new messages goes here, dethroning the previous top message, which will then go over there". I've only worked with boxes once, when trying to figure out how to make items appear one after another on a line, but didn't manage to make it work. Poked around at grids as well but that just flat out did not work out at all without specifying exactly where to put things. Am I missing some basic knowledge on v/hboxes in general?

EDIT: It turns out I was in fact missing pretty much all basic knowledge on boxes, their style properties, and how children worked! After taking some time with your advice and the Renpy cookbook, the code now works almost exactly the way I wanted it to, though I had to make some concessions (adding an image/imagebutton as a "background" beneath a textbutton just made another child and had to go).

[Chiligoat]

While I'm very pleased with how this has allowed me to make the edits to both my inventory and phone screens, I'm still unsure how to properly call the "latest" text to the top.

Code: Select all

screen phonemain():
 tag phone
 modal True
 zorder 2
 image "images/scr_pmain.png" at truecenter #phone bg
 imagebutton: #close button
   idle "images/butt_invclose.png" xalign 0.5 yalign 0.925
   action Hide("phonemain")

 vbox:
  box_reverse True
  spacing 10
  xalign 0.5 ypos 50 xmaximum 330
  
  if text_mum==1:
   textbutton "MUM\nThis is a permanent text that will never be labeled unread." action Show("msgcenter")

  if text_casper==1: #unread
   textbutton "{b}* CASPER\nThis whole here situation is ridiculous, girls.{/b}" action Show("msgcenter")
  if text_casper==2: #read
   textbutton "CASPER\nThis whole here situation is ridiculous, girls." action Show("msgcenter")

When making a vbox, even with box_reverse in place, one does define an order of children ahead of time. But what if my players go ahead and trigger the variables for getting a new text or picking up items in fun ways I hadn't anticipated? The items and texts would appear in the predetermined order that I added them to the list of children, not in the order of receiving/picking them up.

Would you say there is some way to make new children for a specific vbox in the actual script? Maybe by defining the vbox with a tag or a name or something, or making a predetermined style property or list to call on? I have no idea what something like that would look like, though!

[philat]

Pass it a list.

Code: Select all

screen phonemain(lst):
    vbox:
        box_reverse True
        for msg in lst:
            text msg # or, you know, a textbutton is also fine.