Side Image Above Textbox?

[meowworkstm]

I feel like this is a really basic question but how would I go about making side images like in Butterfly Soup? The image is above the textbox and fades in and out. I haven't really manipulated side images before and my main question is if it's like a namebox where it has a frame and padding? And also how the sprite image stays overlayed on the gradient.

[RicharDann]

The way side images are displayed is defined in screens.rpy, inside the say screen proper, around line 116.

Code: Select all

    if not renpy.variant("small"):
        add SideImage() xalign 0.0 yalign 1.0 

It doesn't have a frame by default but you can add your own, change the background property to the gradient image and also adjust the position so it
appears above the namebox.
For example:

Code: Select all

    if not renpy.variant("small"):
        frame:
            xalign .1
            yalign .6
            background "gui/gradient.png"
            add SideImage() xalign .5

[meowworkstm]

Code: Select all

    if not renpy.variant("small"):
        frame:
            xalign .1
            yalign .6
            background "gui/gradient.png"
            add SideImage() xalign .5

Thank you so much! This code works but for some reason the gradient background appears even when there isn't a side image displayed. I've tried looking through documentation but I still haven't figured it out...

[RicharDann]

Sorry for the late reply.
"the gradient background appears even when there isn't a side image displayed."
Sorry I didn't notice this before. This happens because the way I wrote the code, it doesn't check if a side image is showing. To solve this, you will have to add another clause to the if statement, to see if there's a SideImage() object onscreen. Sadly I can't get to test this atm, but try this (make a backup just in case):

Code: Select all

#change this line
if not renpy.variant("small") and not isinstance(SideImage(), Null):

This would check if the currently displaying side image is not a Null object (an empty image, which is what the SideImage function returns when there's no side image), and only show the frame below if it's not.
If this doesn't work, then you might have to use the original code and include the background IN the image file proper (the picture of the character with the background in a layer below).
I hope this helps.
Consulted documentation:
https://www.renpy.org/doc/html/screen_a ... #SideImage
https://www.renpy.org/doc/html/side_ima ... tomization