Align Text Within Frame In Screen [SOLVED]

[yon]

Hey all,

I'm trying to align my text to the right side of the frame, but it doesn't seem to be working.

What I'd like is to set the text boxes for the top and bottom text boxes to be neatly aligned within the frame against the right.

I have an example of what my game looks like right now, vs what I want it to look like. Specifically in the top right sections of both.

My code for the screen is as follows:

Code: Select all

screen locbox():
    frame:
        xsize 310
        ysize 80
        xpos 970
        background Frame("gui/locbox.png")
        vbox:
            xsize 310
            ysize 80
            xalign 1
            text "[v_area]"
            text "[v_room]"

[enaielei]

Use float xalign 1.0 instead of int xalign 1, the two differ from each other.

[yon]

How would I make it a float instead of an int? I tried adding float as a prefix but I got this:

Code: Select all

File "game/screens.rpy", line 1523: u'float' is not a keyword argument or valid child for the frame statement.
    float xalign 1

I don't quite understand how to set the formatting and style for a screen like this.

[felsenstern]

Just add a dot and a 0 to your xalign statement.

xalign 1 -> xalign 1.0

if you write 1 it's interpreted as an integer value, if you write 1.0 it's interpreted as s float value.

[yon]

Ah, sorry.

I did that, but the text still isn't right-aligned. It still looks as it does in the screenshot.

How can I move the text lines around within the vbox? I want to first set them right aligned, then make sure their textbox is the correct size and has the correct padding (or are directly placed where needed with x and y). For whatever reason, the text just won't move.

[yon]

Wait, I just tried fussing with it, and the vbox itself seems to be right-aligned, but not the text. Hmm. I guess it really is a matter moving the text around, rather than the box.

[yon]

Sorry, one more quick update -- the text IS right-aligned in relation to the screen, but the second line of text is left-aligned in relation to the first line of text.

I'll try putting them into separate vboxes.

[yon]

Once I split it up into multiple vboxes it stopped right-aligning them. Hm.

And now it won't do it even when I combine them into one vbox?

How am I supposed to turn this into something that allows me to set the style and location of the strings of text within the frame?

Code: Select all

screen locbox():
    frame:
        xsize 310
        ysize 80
        xpos 970
        background Frame("gui/locbox.png")
        vbox:
            xsize 260
            ysize 20
            xalign 1.0
            ypos 10
            text "[v_area]"
            text "[v_room]"

[felsenstern]

try:

Code: Select all

screen locbox():
    frame:
        xsize 310
        ysize 80
        xpos 970
        background Frame("gui/locbox.png")
        vbox:
            xsize 260
            ysize 20
            xalign 1.0
            ypos 10
            text "[v_area]":
               text_align 1.0
            text "[v_room]":
               text_align 1.0

[yon]

That leaves me with this, as seen in the picture.

I tried using transforms to set things, and that gave me a little more success, but for some reason it wants the vbox to be oriented around some invisible point in the top right corner rather than the top right corner itself?

Here's what I tried:

Code: Select all

transform trans_v_area:
    xalign 1.0 alpha 1.0
    xpos 10
    ypos 10

transform trans_v_room:
    xalign 1.0 alpha 1.0
    xpos 10
    ypos 10
    
screen locbox():
    frame:
        xalign 1.0
        xsize 310
        ysize 80
        background Frame("gui/locbox.png")
        vbox:
            xalign 1.0
            text "[v_area]" at trans_v_area
            text "[v_room]" at trans_v_room

and it gave me this, in the second picture:

[felsenstern]

text_align!!!

check out my example

[yon]

I tried your example, and it didn't align the text along the right edge

I'm trying it again, this is what it gives me:

[felsenstern]

Oh, I see. Sorry I had no idea from which part of your screen you were talking.

Yes in that case you are right. Like frame and vbox, the text is kinda creating it's own box which you then position with the position style properties.

The only thing to add is, that you don't need to use transform to apply position command to your text(-box). You can do that in several ways:

directly:

Code: Select all

screen locbox():
    frame:
        xalign 1.0
        xsize 310
        ysize 80
        background Frame("gui/locbox.png")
        vbox:
            xalign 1.0
            text "[v_area]":
                xalign 1.0
            text "[v_room]":
                xalign 1.0

or in an extra style definition

Code: Select all

screen locbox():
    style_prefix "mystyle1"
    frame:
        xalign 1.0
        xsize 310
        ysize 80
        background Frame("gui/locbox.png")
        vbox:
            xalign 1.0
            text "[v_area]"
            text "[v_room]"

style mystyle1_text is default:
    xalign 1.0 # mystyle_text: xalign align
    size 8 # mystyle_text: font size
    color "#773410ff"

and of course in the way you did it as a transform.

Ah and one more thing, just to add a simple background picture to your frame, you don't need the Frame command. Just background "gui/locbox.png" would be enough. The Frame command is dissecting a picture into 4 corners, 4 borders and the center image and methods like stretching or repeating border graphics and such.
Like here:
https://www.renpy.org/dev-doc/html/disp ... html#Frame

You don't really use that kind of background image. So

Code: Select all

background Frame("gui/locbox.png")

just adds unnecessary complexity and a further chance of causing a problem.

This here is enough for a simple image.

Code: Select all

background "gui/locbox.png"

Or if you just want a slightly darker glasslike/transparent background, you would use:

Code: Select all

background Solid("#0003") # Solid for use of a color instead of a picture.

[Ocelot]

By default, text displayable takes all avaliable space and vbox increases in size on demand, so it takes all avaliable space too. Limit either vbox or text by setting xmaximum property.

[yon]

Sorry for not being more clear on my end. I really do appreciate your help. This has made it work almost exactly as I want it. There's only two more things now.

1) I don't know how to align the text on the X axis. Every time I try to put in an xpos, it starts counting from the left instead of from the right. I don't want it directly against the right side of the window -- I was thinking a 20 pixel border.
2) I want to be able to set the y position of the second line of text independent of the first line of text. As it is now, it's dependent on the above one, spacing it by default as though it were a new line.

Both of these may be able to be addressed by setting borders or some other kind of buffer zone, but when I try to include them, it seems to break things.

I've included an example of the effect I'm trying to achieve. The grid is 10x10 pixels, and the white boxes are to indicate where I want the text boxes to be located.

Thank you again for all your help.