[SOLVED] Say window ATL and side images

[famakki1]

Hi all.

I am wondering if there is a simple way to animate the say window. I know we can use the following to dissolve:

Code: Select all

window show dissolve

I am trying to implement something like this:

Code: Select all

window show:
    linear 0 yoffset 0
    linear 0.1 yoffset 10
    linear 0.1 yoffset 0
    linear 0.1 yoffset -10
    linear 0.1 yoffset 0
    repeat(3)

I tried defining the ATL code as a transform and use it, but no luck.

Also a side question, I want the side images to appear below dialogue box text. Is this possible?

[Imperf3kt]

I'll leave the animated window to a more experienced individual, but for the side image, I can think of two ways.

One: make your side image as wide as your game, or as wide as needed, and draw it pixel perfect.
It aligns bottom left by default.
You may have to adjust the say window (either its position, or redraw it)
Two: (a bit more proper) the side image can be repositioned. I don't remember the exact way to do this off the top of my head, but a quick glance at the documentation should cover this.

[famakki1]

Hi Imperf3kt,

I can move around the side images and re position them just fine. I was just wondering if it is possible to have text write over the side images if text interferes with the side image. Maybe change what layer it is on?

EDIT: By default when a side image is too big, it is drawn over text. I know i can adjust the padding but I would prefer that the side image be drawn below the text and text over side image if this happens.

[Saltome]

I never really thought about animating the actual say window.
You can define a new transform, then in the say screen apply it to the window with the 'at' clause, but the exact implementation depends on your specific goal.

And about the side images, normally images are drawn in the order they are called in the code. So in the say screen, if you move the code relevant to side images before the code about the actual text window, it might make it so text is drawn over the image, in case of overlapping.
Or you can try changing the zorder of the side images, if the zorder of the side image is lower than the zorder of the text, text will appear on top of the image, in case of overlapping. But that will probably also put the side image beneath the actual text window.
...This is what you are talking about when you say "bellow the text", right?

[famakki1]

Hi Saltome,

I tried your suggestion and but so far nothing worked out for me. The closest I got was using the code below:

Code: Select all

screen say(who, what, side_image=None, two_window=False):

    if not two_window:

        window:
            id "window"

            has vbox:
                style "say_vbox"

            if who:
                text who id "who"

    else:

        vbox:
            style "say_two_window_vbox"

            if who:
                window:
                    style "say_who_window"

                    text who:
                        id "who"

            window:
                id "window"

                has vbox:
                    style "say_vbox"

    if side_image:
        add side_image
    else:
        add SideImage() xalign 0.0 yalign 1.0
    
    text what id "what" yalign 0.8 xpos 150

    use quick_menu

This will display text above the side image but the text will lose all padding/margin properties because it is no longer part of the window block.

Other than that I also tried moving the side image code block to the top, but this causes the dialogue box window to be on top of the side image.

Code: Select all

screen say(who, what, side_image=None, two_window=False):
    if side_image:
        add side_image
    else:
        add SideImage() xalign 0.0 yalign 1.0
    
    if not two_window:

        # The one window variant.
        window:
            id "window"

            has vbox:
                style "say_vbox"

            if who:
                text who id "who"

            text what id "what"

    else:

        # The two window variant.
        vbox:
            style "say_two_window_vbox"

            if who:
                window:
                    style "say_who_window"

                    text who:
                        id "who"

            window:
                id "window"

                has vbox:
                    style "say_vbox"

                text what id "what"

    use quick_menu

I also tried making a new screen for the side image and then using the use command like for the quick_menu, however doing so causes an error: side_image variable not defined.

[indoneko]

Also a side question, I want the side images to appear below dialogue box text. Is this possible?

Other than that I also tried moving the side image code block to the top, but this causes the dialogue box window to be on top of the side image.

I don't really get it. Do you want the side image to appear BELOW the textbox, or OVER it?
You might as well attach a pic of mock-up version of your textbox + side image.

[famakki1]

Hi,

Im looking to do something like this.

Basically I want the dialogue box to be at the bottom, then the side image as the middle layer with the text at the top.

[Saltome]

Here you go... This should work. Even though I'm honestly disgusted with myself, for taking such a convoluted roundabout way to achieving the goal... So if anyone has any better ideas please do.
To make it work I made it so, when there is a side image it creates it's own window, and the part that shows the text doesn't create a window. Then I show the text, and manually align it on top of the window created by the side image. Ugh, disgusting.

Code: Select all

screen say(who, what, side_image=None, two_window=False):
    if side_image:
        window:
            id "window"
            #has vbox:
                #style "say_vbox"
            add side_image
    else:
        if not two_window:
            window:
                id "window"
                #has vbox:
                #style "say_vbox"
                add SideImage() xalign 0.0 yalign 1.0 
        else:
            window:
                id "window"
                add SideImage() xalign 0.0 yalign 1.0 

    # Decide if we want to use the one-window or two-window variant.
    if not two_window:

        # The one window variant.
#        window:
#            id "window"

            vbox:
                yalign 0.8
                style "say_vbox"

                if who:
                    yalign 0.85
                    text who id "who"

                text what id "what"

    else:

        # The two window variant.
        vbox:
            yalign 0.78
            style "say_two_window_vbox"

            if who:
                window:
                    style "say_who_window"

                    text who:
                        id "who"

#            window:
#                id "window"
            null height 6
            vbox:
                style "say_vbox"

            text what id "what"

    # If there's a side image, display it above the text.
    

    # Use the quick menu.
    use quick_menu

[famakki1]

Hi Saltome,

Thanks for your hard work! This code gives me a few more ideas on how to make it work. To be honest, the code snippet in my previous post also involved manual positioning but the issue was it threw of the text in random places.

I tried this code, and it is doing the same for the time being. I will try to modify to suit and if I end up with a solution I will post it here. Meanwhile if anyone else have any other ideas feel free to share!

[Saltome]

Hmm, in random places? How about you show me a screenshot? It works perfectly fine for me.

[famakki1]

Hi Saltome,

Attached are some samples. Basically these are issues I faced before as well when I modified the code. The images are for your code.

The side image is being placed in the wrong location. This should be easy enough to fix.
However, the text is a bigger problem. You may notice that when there are two or more lines of dialogue, the text is shown in the wrong place (in 2 line example, first line is placed higher as compared with when there is only a single line. Also if there is no side image, the dialogue box moves position.

I think it is conflicting with style properties, which are as follows for me:

Code: Select all

    style.window.background = im.Alpha("data/game_frame_avg.png",0.8)

    style.window.left_margin = 0
    style.window.right_margin = 0
    style.window.top_margin = 0
    style.window.bottom_margin = 0

    style.window.left_padding = 170
    style.window.right_padding = 150
    style.window.top_padding = 10
    style.window.bottom_padding = 10

    style.window.yminimum = 180

Left padding is 170 to provide space for side images. Right padding is 150 to place quick menu here at a later stage.

EDIT: Forgot to upload the image

[Saltome]

You are correct. Having multiple lines does change the position.
Then in the say screen, change the yalign properties to ypos, then set their values to a good position.

Just leave those two lines as they are.

Code: Select all

add SideImage() xalign 0.0 yalign 1.0 

[famakki1]

Okay, so I tried using ypos, and it does fix the issue of the text.

However, initially I thought fixing the side image position should be easy, and it is because I can change the location of the xalign/yalign, however the text box is not anchored correctly. As shown in the previous picture, if there is a side image, the text box moves position. Commenting the padding/margins code does not have any affect. Also the text is no longer being correctly padded/marginalized (most likely because the text is no longer in the same block as the window)...

This is more difficult than I thought.

EDIT: Maybe Ill post a demo project on here in a while with the issue so it is easier to look into.

[Saltome]

Welcome to renpy...
Changing yalign to ypos should make sure the text doesn't change position when there are multiple lines.
As far as style properties go, I've never used any myself. But it's possible I broke them when I commented out these lines.

Code: Select all

#style "say_vbox"

I assume that's the code that handles applying style properties. So you can try uncommenting them, see what that does for you.

[famakki1]

Uncommenting the vbox lines did not affect anything

Anyway, attached is a demo project replicating the problem if anyone could use it to fix the issue it would be fantastic

I have attached a file showing the padding/margins resultant area of where the text should be as well.