<<Resolved>> text over an image, not a button...

[ISAWHIM]

I am running into difficulty trying to get text to display over an image, while within the screens.rpy format for a screen.

I have this all formatted, using hboxes and vboxes, but I can not find any way to display text over images. Setting values for absolute positions, does not work. EG, telling an image to be 0,0 and then telling text to be 0,0. The text just appends, in order, after the image. (Depending on if it is a hbox or a vbox.)

Trying to add a frame into the vbox or hbox, completely breaks the format and throws everything to the left. Same with using "fixed"... It throws everything to the left side of the screen. Even though the whole screen is told to align to the right.

This is for a calendar, which has a "Day of the week" at the top, a "Numeric day" in the middle, and a "Month name" below. All across a single image. Which should be displayed within a hbox, so it sits after an image of a giant clock.

[Divona]

Use xoffset and yoffset?

[ISAWHIM]

Use xoffset and yoffset?

That almost works, except that it still treats the text as if it is in the original location. Thus, since this is a right-side aligned vbox, it is now pushed away from the edge, the width of the text. But the text is not there, it is offset -100 pixels.

EG, It still thinks the text is on the right and has widened the vbox to fit the space.

So frustrating to do such simple things with this code. I just want it to work like the dialogue box. Text over an image. Two individual things, stacked one on top of another.

[Divona]

I'm still not quite see the picture of what the final result should look like. Do you have a sample image of what do you want the end result to be? For calendar, it should be something as simple as:

Code: Select all

    hbox:
        fixed:
            xmaximum 192
            ymaximum 192

            add "#ff0000"
            text "Saturday" xalign 0.5 yalign 0.05
            text "30" xalign 0.5 yalign 0.5
            text "October" xalign 0.5 yalign 0.95
        fixed:
            xmaximum 192
            ymaximum 192

            add "#ff0000"
            text "Sunday" xalign 0.5 yalign 0.05
            text "31" xalign 0.5 yalign 0.5
            text "October" xalign 0.5 yalign 0.95

I thought.

[ISAWHIM]

This is the code I am dealing with...

This aligns to the right-side, and is only present when doing navigation or basic interactions. It hides at certain times, during game-play.

There is one main vbox holding three hbox areas. (Icons), (Time/Date), (Navigation)

The (Time/Date) hbox, should have a vbox component for the vertical stacking of text/variables, [Day of week],[Numeric month/day], [Month]... or whatever order I end-up using. (Can't play with the looks, until it looks right.)

What I get is the following results, from various attempts to use code correctly. (As described or sampled.)

The lower two options, just adding the word "fixed", breaks the whole thing... The whole lower half of the menu doesn't even show-up... The vbox with all the navigation buttons. all the "btn7.jpg", at the bottom of the code.

vbox and hbox don't even obey sizes, or size-limits, or pixel-limits... so I am not sure why they are even talked about, for use. They do work for "fixed" boxes, but fixed boxes break everything in the process, making nothing seem to work correctly.

Original code...

Code: Select all

define groupLocation = 0
screen sideNav():
    modal False
    zorder 10
    vbox:
        xanchor 1.0
        yanchor 0.0
        xpos 1906
        ypos 14
        hbox:
            imagebutton auto "_save_%s.png" xpos 0 ypos 4 action ShowMenu("save")
            imagebutton auto "_stats_%s.png" xpos 8 action NullAction()
            imagebutton auto "_notes_%s.png" xpos 16 action NullAction()
            imagebutton auto "_settings_%s.png" xpos 24 action ShowMenu("preferences")
        hbox:
            ypos 8
            add "_clock_8.png"
            add "_calendar.png" xpos 8
            #vbox:
                #xmaximum 0
                #xoffset -100
                #text "{color=#000}WED{/color}"
                #text "{color=#000}21{/color}"
                #text "{color=#000}DEC{/color}"
        vbox:
            imagebutton auto "btn7_%s.jpg" ypos 16 action NullAction()
            imagebutton auto "btn7_%s.jpg" ypos 24 action [SetVariable("groupLocation", 0), SelectedIf(groupLocation == 0)]
            imagebutton auto "btn7_%s.jpg" ypos 32 action [SetVariable("groupLocation", 1), SelectedIf(groupLocation == 1)]
            imagebutton auto "btn7_%s.jpg" ypos 40 action [SetVariable("groupLocation", 2), SelectedIf(groupLocation == 2)]
            imagebutton auto "btn7_%s.jpg" ypos 48 action [SetVariable("groupLocation", 3), SelectedIf(groupLocation == 3)]
            imagebutton auto "btn7_%s.jpg" ypos 56 action [SetVariable("groupLocation", 4), SelectedIf(groupLocation == 4)]
            imagebutton auto "btn7_%s.jpg" ypos 64 action [SetVariable("groupLocation", 5), SelectedIf(groupLocation == 5)]
            imagebutton auto "btn7_%s.jpg" ypos 72 action [SetVariable("groupLocation", 6), SelectedIf(groupLocation == 6)]

[Divona]

Try:

Code: Select all

    hbox:
        ypos 8
        
        fixed:
            xmaximum 192    # width of _clock_8.png
            ymaximum 64      # height of _clock_8.png

            add "_clock_8.png"

        fixed:
            xmaximum 64    # width of _calendar.png
            ymaximum 64    # height of _calendar.png

            xpos 8

            add "_calendar.png"

            text "{color=#000}WED{/color}" xalign 0.5 yalign 1.0
            text "{color=#000}21{/color}" xalign 0.5 yalign 0.5
            text "{color=#000}DEC{/color}" xalign 0.5 yalign 1.0

From a quick prototype, it seems to work out fine.

[ISAWHIM]

As soon as I add "fixed", anywhere inside of the main vbox, I lose all formatting for the entire screen... Everything goes to 0,0... (Every individual item... but the buttons, which still just disappear completely.)

Defeating the purpose/function of aligning it to the right-top corner. (Because it all goes to the left-top corner.)

I was avoiding manual placement, giving every element an X,Y cords, because the purpose of hboxes and vboxes, is to do this automaticly, without hard-coding redundant values. (The images X,Y and positions)

Thus, now I lose all "flow" and ability to change anything, without re-coding every individual value.

So, it looks like I will just have to do this the hard way, and figure-out where each item has to be, and never change my design...

Thanks for the help.

P.S. RenPy doesn't even get the actual positions right either... They don't match-up with the actual positions on a 1080p screen. They all have to be faked, to go where you actually want them... Not sure what oddity is there... floating-point issues, I assume.