Ren'Py Help with "say" box background image

[DarkLoki]

Hello. As always, thank you in advance for reading. I am having issues with customizing the dialogue box. I have lowered the box and resized it where I want, but when I add a background, it displays as too big and too high on the screen. I have outlined generally where the dialogue appears in red on this image. You can clearly see the grey gradient image that should be behind the drawn-on red frame (the red frame is NOT part of the game, it is my estimate of where the dialogue box is, next to the name box).



I have spent many days researcing say box options but to no avail. Not sure what code to post, so to start, here is my say box:

screen say(who, what):

    style_prefix "say"

    window:
        id "window"
        background Image(im.MatrixColor("gui/textbox1.png", im.matrix.opacity(textbox_opacity)))

        if who is not None:

            window:
                style "namebox"
                text who id "who"

        text what id "what"

    add SideImage()

style window is default
style say_label is default
style say_dialogue is default
style say_thought is say_dialogue

style namebox is default
style namebox_label is say_label

style window:
    xalign gui.textbox_xalign
    yalign gui.textbox_yalign
    ysize gui.textbox_height
    xfill True
    left_padding 150
    top_padding 20

style namebox:
    xpos gui.name_xpos
    xanchor gui.name_xalign
    xsize gui.namebox_width
    ypos gui.name_ypos
    ysize gui.namebox_height

    background Frame("gui/namebox.png", gui.namebox_borders, tile=gui.namebox_tile, xalign=gui.name_xalign)
    padding gui.namebox_borders.padding

Anything I modify affects the dialogue box but has no effect whatsoever on the BG image. Any help would be greatly appreciated, and I shall send infinate prayers to generations of your unborn progeny.

 

[osanaiko]

This is the second time this exact sort of problem has come up in the past 6 months. Are you following a tutorial video for having a dialog opacity slider? or using someone's base game code?

Or it could just be coincidence that a very similar misunderstanding/bug has come up. I would link to the last time we helped the developer debug the issue, but i can't find the post , so I guess FUCK IT WE'RE DOING IT LIVE.

Anyway, here's some of the default screen and styles for Renpy v8.2.3, with irrelevant parts snipped out

screen say(who, what):
    style_prefix "say"

    window:
        id "window"

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"

style window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Image("gui/textbox.png", xalign=0.5, yalign=1.0)

In this case, the background is defined in the style window block. And that line has it's own inline style params: xalign and yalign. Those xalign and yalign on the Image are relative to the container element, which in this case is the window element.

Now, your code has moved the background so it is inline in the screen say definition.

AND here is the bug: the xalign and yalign have been lost as part of the move, somehow. Maybe they got overwritten when the "im.matrix.opacity" function was used to allow the background to be faded.

To fix it, try this - putting the xalign and yalign style properties back on the Image:

screen say(who, what):

    style_prefix "say"

    window:
        id "window"
        background Image(im.MatrixColor("gui/textbox1.png", im.matrix.opacity(textbox_opacity)), xalign=0.5, yalign=1.0)

        if who is not None:

            window:
                style "namebox"
                text who id "who"

        text what id "what"

    add SideImage()

 

[DarkLoki]

This is the second time this exact sort of problem has come up in the past 6 months. Are you following a tutorial video for having a dialog opacity slider? or using someone's base game code?

Or it could just be coincidence that a very similar misunderstanding/bug has come up. I would link to the last time we helped the developer debug the issue, but i can't find the post , so I guess FUCK IT WE'RE DOING IT LIVE.

Anyway, here's some of the default screen and styles for Renpy v8.2.3, with irrelevant parts snipped out

screen say(who, what):
    style_prefix "say"

    window:
        id "window"

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"

style window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Image("gui/textbox.png", xalign=0.5, yalign=1.0)

In this case, the background is defined in the style window block. And that line has it's own inline style params: xalign and yalign. Those xalign and yalign on the Image are relative to the container element, which in this case is the window element.

Now, your code has moved the background so it is inline in the screen say definition.

AND here is the bug: the xalign and yalign have been lost as part of the move, somehow. Maybe they got overwritten when the "im.matrix.opacity" function was used to allow the background to be faded.

To fix it, try this - putting the xalign and yalign style properties back on the Image:

screen say(who, what):

    style_prefix "say"

    window:
        id "window"
        background Image(im.MatrixColor("gui/textbox1.png", im.matrix.opacity(textbox_opacity)), xalign=0.5, yalign=1.0)

        if who is not None:

            window:
                style "namebox"
                text who id "who"

        text what id "what"

    add SideImage()

You are correct in your assumption that I'm creating a mod with someone else's code. Thank you for the reply, I will try this later on today and let you know

 

[DarkLoki]

This is the second time this exact sort of problem has come up in the past 6 months. Are you following a tutorial video for having a dialog opacity slider? or using someone's base game code?

Or it could just be coincidence that a very similar misunderstanding/bug has come up. I would link to the last time we helped the developer debug the issue, but i can't find the post , so I guess FUCK IT WE'RE DOING IT LIVE.

Anyway, here's some of the default screen and styles for Renpy v8.2.3, with irrelevant parts snipped out

screen say(who, what):
    style_prefix "say"

    window:
        id "window"

        if who is not None:

            window:
                id "namebox"
                style "namebox"
                text who id "who"

        text what id "what"

style window:
    xalign 0.5
    xfill True
    yalign gui.textbox_yalign
    ysize gui.textbox_height

    background Image("gui/textbox.png", xalign=0.5, yalign=1.0)

In this case, the background is defined in the style window block. And that line has it's own inline style params: xalign and yalign. Those xalign and yalign on the Image are relative to the container element, which in this case is the window element.

Now, your code has moved the background so it is inline in the screen say definition.

AND here is the bug: the xalign and yalign have been lost as part of the move, somehow. Maybe they got overwritten when the "im.matrix.opacity" function was used to allow the background to be faded.

To fix it, try this - putting the xalign and yalign style properties back on the Image:

screen say(who, what):

    style_prefix "say"

    window:
        id "window"
        background Image(im.MatrixColor("gui/textbox1.png", im.matrix.opacity(textbox_opacity)), xalign=0.5, yalign=1.0)

        if who is not None:

            window:
                style "namebox"
                text who id "who"

        text what id "what"

    add SideImage()

I tried a few variations based on what you told me and researched what you presented a little more. None of it worked , none of it threw any errors either. I'm sure what you presented is sage advise when applied to code that wasn't run through a meat grinder, and I will keep it in mind when I start my own game.

In the meantime, I thought of a cheap work around, I remade the textbox.png with a transparent bar on top, so now it's top half transparent / bottom half gradient. Cheap workaround, but at least it's not delaying further development.

Again, thank you for the reply and I'm sure going forward this will help me resolve a dozen issues I don't even have yet.

 

[gojira667]

Inspect the dialogue text and char name text. Go backwards up the chain to see the actual heights, widths, etcetera actually in use.

What's the value of style.window.ysize and style.namebox.ysize?

You must be registered to see the links

        background Image(im.MatrixColor("gui/textbox1.png", im.matrix.opacity(textbox_opacity)), xalign=0.5, yalign=1.0)

You must be registered to see the links

. Go Transform():

        background Transform("gui/textbox1.png", matrixcolor=OpacityMatrix(textbox_opacity), xalign=0.5, yalign=1.0)