Side Image Above Textbox?

Discuss how to use the Ren'Py engine to create visual novels and story-based games. New releases are announced in this section.
Forum rules
This is the right place for Ren'Py help. Please ask one question per thread, use a descriptive subject like 'NotFound error in option.rpy' , and include all the relevant information - especially any relevant code and traceback messages. Use the code tag to format scripts.
Post Reply
Message
Author
User avatar
meowworkstm
Regular
Posts: 38
Joined: Wed Dec 23, 2015 4:08 am
Projects: The Riddlemaster, A Cottage Story
Tumblr: ladymeowsith
Deviantart: Meowworkstm
Contact:

Side Image Above Textbox?

#1 Post by meowworkstm » Sun Jul 12, 2020 10:19 pm

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.

944685-butterfly-soup-macintosh-screenshot-diya-constantly-has-dogs.jpeg

User avatar
RicharDann
Veteran
Posts: 206
Joined: Thu Aug 31, 2017 11:47 am
Projects: A funny little Dating Sim (not named yet)
Contact:

Re: Side Image Above Textbox?

#2 Post by RicharDann » Mon Jul 13, 2020 10:25 am

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

User avatar
meowworkstm
Regular
Posts: 38
Joined: Wed Dec 23, 2015 4:08 am
Projects: The Riddlemaster, A Cottage Story
Tumblr: ladymeowsith
Deviantart: Meowworkstm
Contact:

Re: Side Image Above Textbox?

#3 Post by meowworkstm » Tue Jul 21, 2020 2:46 am

RicharDann wrote:
Mon Jul 13, 2020 10:25 am

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...

User avatar
RicharDann
Veteran
Posts: 206
Joined: Thu Aug 31, 2017 11:47 am
Projects: A funny little Dating Sim (not named yet)
Contact:

Re: Side Image Above Textbox?

#4 Post by RicharDann » Wed Aug 05, 2020 8:21 am

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

Post Reply

Who is online

Users browsing this forum: No registered users