Screen Elements Being Put Outside the Window

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
qirien
Miko-Class Veteran
Posts: 541
Joined: Thu Jul 31, 2003 10:06 pm
Organization: Metasepia Games
Deviantart: qirien
Github: qirien
itch: qirien
Location: New Mexico, USA
Discord: qirien
Contact:

Screen Elements Being Put Outside the Window

#1 Post by qirien »

Hey everyone! I'm trying to learn screen language to make a custom monthly menu for my game; so far it seems pretty straightforward, but Ren'Py is not putting the elements where I would have thought it should.

I want to have three columns, with different sections in each column going down. But it is putting all the text for each column on top of the other text, and instead of having the game window divided into three neat columns, it is putting the second and third columns outside the game window. I'm not sure how to tell it to position things the way I want.

Here is my screen code:

Code: Select all

screen computer_pad:
    tag month_menu
    
    frame:
        text "Welcome, [her_name]." size 30   
        hbox:
            # Left column
            vbox:  
                frame:
                    label "Relationship"
                    text "Loved: [loved]"
                
                frame:
                    label "Time"
                    text "Talaam: Year %(year)d, month %(local_month)d"
                    text "Earth: Year %(earth_year)d, month %(earth_month)d"
            
                frame:
                    label "Health"
                    if (month == 14):
                        text "You are in fair health."
                    else:
                        text "You are in good health."
                    if (is_pregnant or is_pregnant_later):
                        text "Trimester: [trimester]"                
                        
                frame:
                    textbutton "Skills":
                        action Show("skill_screen")
                    
            # Middle column - skills
            # TODO: make these buttons that integrate with DSE
            vbox:
                label "Focus"
                frame:
                    label "Work"
                    vbox:
                        text "Do your best!"
                        text "Take it easy"
                
                frame:
                    label "Skills"
                    text "Domestic"
                    text "Physical"
                    text "Creative"
                    text "Technical"
                    text "Social"
                    text "Knowledge"
                    text "Spiritual"
                    
                frame:
                    label "Free Time"
                    vbox:
                        text "Together"
                        text "Alone"
                    
            # Right column
            vbox:
                frame:
                    label "South Camera View"
                    text "Season: [season]"
                    text "Weather: [weather]"
                    
                frame:
                    label "Colony Messages"            
                
                frame:
                    textbutton _("GO!"):
                            action Return()
And here's a screenshot of what it does. Notice the right and lower edges have stuff on them that I want to put inside the game window (not outside it).
Attachments
screenshot0005.png
Finished games:
Image
Image
Image

User avatar
chirinworks
Newbie
Posts: 8
Joined: Wed Apr 09, 2014 10:44 am
Projects: Saturn's Trip to the Sun
Organization: Chirin Works
Contact:

Re: Screen Elements Being Put Outside the Window

#2 Post by chirinworks »

It's an easy thing to fix. By changing the hbox that contains the columns into a grid, they will do what you want. Then adding yfill/xfills the frames get streched out and even and has vbox makes sure the text isn't overlapping.

I had to take out the variables to test it, but it looks like this for me. (using a different theme, of course)

Image

Code: Select all

screen computer_pad:
    tag month_menu
    
    frame:
        yfill True
        has vbox

        text "Welcome, [her_name]." size 30   
        grid 3 1:
            # Left column
            vbox:  
                frame:
                    xfill True
                    has vbox

                    label "Relationship"
                    text "Loved: [loved]"
                
                frame:
                    xfill True
                    has vbox

                    label "Time"
                    text "Talaam: Year %(year)d, month %(local_month)d"
                    text "Earth: Year %(earth_year)d, month %(earth_month)d"
            
                frame:
                    xfill True
                    has vbox

                    label "Health"
                    if (month == 14):
                        text "You are in fair health."
                    else:
                        text "You are in good health."
                    if (is_pregnant or is_pregnant_later):
                        text "Trimester: [trimester]"                
                        
                frame:
                    xfill True
                    has vbox

                    textbutton "Skills":
                        action Show("skill_screen")
                    
            # Middle column - skills
            # TODO: make these buttons that integrate with DSE
            vbox:
                label "Focus"
                frame:
                    xfill True
                    has vbox

                    label "Work"
                    vbox:
                        text "Do your best!"
                        text "Take it easy"
                
                frame:
                    xfill True
                    has vbox

                    label "Skills"
                    text "Domestic"
                    text "Physical"
                    text "Creative"
                    text "Technical"
                    text "Social"
                    text "Knowledge"
                    text "Spiritual"
                    
                frame:
                    xfill True
                    has vbox

                    label "Free Time"
                    vbox:
                        text "Together"
                        text "Alone"
                    
            # Right column
            vbox:
                frame:
                    xfill True
                    has vbox

                    label "South Camera View"
                    text "Season: [season]"
                    text "Weather: [weather]"
                    
                frame:
                    xfill True
                    has vbox

                    label "Colony Messages"            
                
                frame:
                    xfill True
                    has vbox

                    textbutton _("GO!"):
                            action Return()

User avatar
qirien
Miko-Class Veteran
Posts: 541
Joined: Thu Jul 31, 2003 10:06 pm
Organization: Metasepia Games
Deviantart: qirien
Github: qirien
itch: qirien
Location: New Mexico, USA
Discord: qirien
Contact:

Re: Screen Elements Being Put Outside the Window

#3 Post by qirien »

Thank you! I had no idea you had to use "has" - that wasn't really explained anywhere in the screen language documentation. That's exactly what I needed to know. :-)

But... shouldn't an hbox with 3 vboxes be the same as a grid 3 1 ? It seems to be the same with simpler examples, so I don't know why mine was going off the screen with hbox but not with grid... Maybe there's another formatting thing I needed to tell it? It seems weird that it would ever try to render things off the screen... hmmm...
Finished games:
Image
Image
Image

User avatar
chirinworks
Newbie
Posts: 8
Joined: Wed Apr 09, 2014 10:44 am
Projects: Saturn's Trip to the Sun
Organization: Chirin Works
Contact:

Re: Screen Elements Being Put Outside the Window

#4 Post by chirinworks »

You can use hboxes, but then you need to define the width for each one. Or, now that I think about it, you can add an xfill True in your first frame, but I'm not sure if that would work?
You could do the following, I think.

Code: Select all

 frame:
        text "Welcome, [her_name]." size 30   
        hbox:
            xmaximum .33
            xminimum .33
            vbox:  
                frame:
                    label "Relationship"
                    text "Loved: [loved]"
But I personally find having it in a grid is more convenient. If you want to add of remove a column it is quick to do, since it is just changing a single number.

User avatar
qirien
Miko-Class Veteran
Posts: 541
Joined: Thu Jul 31, 2003 10:06 pm
Organization: Metasepia Games
Deviantart: qirien
Github: qirien
itch: qirien
Location: New Mexico, USA
Discord: qirien
Contact:

Re: Screen Elements Being Put Outside the Window

#5 Post by qirien »

Yeah, that works. Thanks again for your help!
Finished games:
Image
Image
Image

Post Reply

Who is online

Users browsing this forum: Lacha, Ocelot