Side image above text - How To?

[xMassTransitx]

Hi!
In Ren'py, how do I put the Side Image above the text box? Right now, the side image goes on top of the text box, covering the text in the bottom left.

I think it has something to do with
add SideImage() xalign 0.0 yalign 1.0 in the file screens.rpy
It might also have something to do with the gui.rpy

I'd like to ensure that the bottom of the side image sits right on top of the text box.
My side image is 400x400 px


Note: I have read the documentation at

You must be registered to see the links

Thanks for the help!

 

[Porcus Dev]

Can you put a screenshot of how it is right now?

Also perhaps you can use "screen" instead of "side image".

 

[Rich]

You are completely correct about

add SideImage() xalign 0.0 yalign 1.0

being the magic. What this says is "add the side image, put its left edge against the left edge of the screen and its bottom image against the bottom image of the screen."

First, what you need to know is thal "align" is the equivalent of setting "anchor" and "pos" to the same value. So the above line is exactly equal to:

add SideImage() xanchor 0.0 yanchor 1.0 xpos 0.0 ypos 1.0

The "anchor" bits indicate which edges you're using to position the side image, while the "pos" bits say "where in the parent to put that anchor spot". Floating point numbers are interpreted as fractions of the image (0.0-1.0), while integers are interpreted as pixels. So this says "put the left edge of the image" (xanchor 0.0) "at the left edge of the parent" (xpos 0.0) "and the bottom edge of the image" (yanchor 1.0) "at the bottom edge of the parent" (ypos 1.0)

Let's suppose that you wanted the left edge of the side image 20 pixels from the left edge of the screen, and the bottom edge of the side image 60 pixels from the bottom edge of the screen. So you'd leave the anchor alone, but convert to using pixels for the "pos." And let's suppose that your screen was 1280 by 720. That means you want the bottom left edge of the image at pixel coordinate 1260,660 (1280-20, 720-60), since pixel positions area always measured from top left.

So, you'd change that line to:

add SideImage() xanchor 0.0 yanchor 1.0 xpos 1260 ypos 660

Now you just need to fill in the correct pixel values, based on exactly where on the screen you want the image to actually appear.

Hope that gets you going...

 

[xMassTransitx]

This is helpful! I've hacked a solution together for now, but I think with your feedback above, then I'll be able to improve upon it. Thanks!