Side Image Question

[BlueLakeKylie]

Is it possible to just control the side image (the one in the text box) freely? I'm trying to get the main character's pictures to show in the text box at all times, not just when he's talking, and I want to just be able to choose which one it shows throughout the game, so I can just show what lines up with what he's saying whenever I want. I mean… it gets a bit complicated if you have 13 different expression images and tons of characters.

[SundownKid]

Yes, it is all explained here: http://www.renpy.org/doc/html/side_image.html

To have the MC be shown at all times, give every character the same side image (of the MC).

[PyTom]

Actually, setting config.side_image_tag is probably the best way to do this.

[BlueLakeKylie]

When I use the code in the options file and use the show command in the game as I would for a normal image, the side image appears in the middle bottom of the screen, behind the text box. How do I customize that…?

[BlueLakeKylie]

Sorry for the bump but I would really like an answer to this

[xela]

You restyle the say window layout, this is one of the most basic questions that's been answered dozens of times, not mentioning cookbook tutorials. You can also rewrite the say screen if you like, that will have the same effects.

[BlueLakeKylie]

Could you be more elaborate? I seriously have no clue how to do this, nor have I ever seen it answered before. I don't have any idea exactly where to search for an answer, either. I've spent hours upon hours searching for answers to questions like these and I've never found them, so that's not particularly helpful.

Code: Select all

init python:
    config.side_image_tag = "groosesweg"
    config.side_image_tag = "grooseangry"
    config.side_image_tag = "groosecreepy"
    config.side_image_tag = "groosepoint"
    config.side_image_tag = "grooseweird"
    config.side_image_tag = "groosewtf"
    config.side_image_tag = "grooseyeah"
    config.side_image_tag = "groosezoom"
    config.side_image_tag = "groosefall"
    config.side_image_tag = "groosehorrified"
    config.side_image_tag = "groosehair"
    config.side_image_tag = "grooseheh"
    config.side_image_tag = "groosekek"

This is my code that I want to set the location of on the screen (all of these images being defined of course), and I'm really not seeing any way how. (don't ask questions about why everything is labeled as Groose… it's a long story)

[Mammon]

I've actually asked a similar question just a while back in 'how to work with layers in side-image[Solved]'. I was given several solutions until I got one that worked, so you could try and read through that topic for a few ideas.

The best way to prevent your image appearing behind the textbox would be to, as Xela already said, restyling the say window. In layman terms; Take the .png image of the box your text appears in during your VN and literally just erase the problematic part. Or go to Creative commons and find a custom made textbox without the part that appears in front of your image.

Alternatively, you could use the same solution I got for my problem: make your side image supercede all the layers of screens. You can do this by going to options.rpy and add this line: (ml is the custom layer I added)

Code: Select all

config.layers = [ 'master', 'transient', 'screens', 'ml', 'overlay' ]

Next, add an anchor point in script.rpy

Code: Select all

transform corner:
     xalign 0.0, yalign 1.0

And then, customise the textbox padding to prevent the side image of overlapping the text by changing the following in options.rpy:

Code: Select all

## Padding is space inside the window, where the background is
    ## drawn.

    style.window.left_padding = 206
    # style.window.right_padding = 6
    # style.window.top_padding = 6
    # style.window.bottom_padding = 6

and then show your side image as a normal image rather than a side image like:

Code: Select all

show rmsmile at corner onlayer ml

This should allow you to make your character appear at all times. Unfortunately I'm being literal when I'm saying ALWAYS; see image.

This solution should solve your problem. However, I cannot recommend it due to the massive amount of work it requires in terms of coding. You said you only have thirteen side images? Then stick to the regular side image techniques that Ren'py already offers. The only reason I'm using this technique is because I have over 15000 different combinations for my character. (It sounds like more than it really is.)

[Keinart]

Alright, never did it but I think I have an idea about how you should do it. First you have to define the images in the script.rpy, including the side images for the textbox, this is basic so renpy can find the pictures, you already probably know this but I prefer to explain everything just in case.

Code: Select all

# images
image mc smile = "mc_smile.png" #this would be the normal sprite
image side mc smile = "mc_smile.png" #and this would be sprite shown in the side
image mc sad = "mc_sad.png"
image side mc sad = "mc_sad.png"

Notice how I start every image for the main character with "mc" because that's how renpy will know that all these images belong to the main character. You can use whatever you want.
Then add what Tom said:

Code: Select all

init python:
    config.side_image_tag = "mc"

With this now every side image will be linked to the mc pictures. Now ingame you only have to add what expression do you want when people talk:

Code: Select all

label start:
mc "This is normal text said by the mc character."
mc smile "This is normal text said by the mc character with the mc smile side image."
a smile "This is normal text said by the a character with the mc smile side image.

Never tried the config.side_image_tag though so I may be mistaken about it, but I think this should work.

[novalyssa]

I'm still a total noob when it comes to Ren'py, so I'm sort of hesitant to post this, but what the heck! Maybe it will help. This is sort of a piggyback off of Keinart's suggestion.

screens.rpy:

I tried to modify the say screen to have Groose's portrait show up for any character, and what's cool about this is that you can have more than one side image per character. For example, one of the characters from my wip game has a relationship bar that changes depending on a numeric variable, but I also wanted the main character's side image to appear when he was speaking; all I had to do was set "show_side_image=" to the mc's portrait and "image=" to the relationship meter when defining the character.

There might be some unnecessary code, but so far I've had no problems with it. It's taken almost directly from Alex's post here.

Code: Select all

screen say:

    # Defaults for side_image and two_window
    default side_image = None
    default two_window = False
    default side_xalign = 0.0   # default values, so you don't need to change all the characters 
    default side_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"

            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"

    # If there's a side image, display it above the text.
    if side_image:
        add "Groose" xalign -0.10 yalign -0.50
        add SideImage() xalign side_xalign yalign side_yalign
    else:
        add SideImage() xalign side_xalign yalign side_yalign #xalign 0.0 yalign 1.0
    # Use the quick menu.
    use quick_menu
    # Use the quick menu.
    use quick_menu

script.rpy:

Here, the variable "grooseemo" determines the side image for Groose, but of course you can change the name of the variable to anything you want. The images for him are all named "groose_something", with 'something' being the emotion I want him to have. Any time I want to change his portrait, all I have to do is type out something like $grooseemo = INSERTEMOTIONHERE.

I also tested the side image appearing for both narration ("x") and other characters ("NotGroose") - both seem to work just fine.

Code: Select all

init:
    $ x = Character("",
        image = "Groose",
        window_left_padding = 200)
    $ g = Character("Groose",
        image = "Groose",
        window_left_padding = 200)
    $ n = Character("Notgroose",
        image = "Groose",
        window_left_padding = 200)
    

    image side Groose = "Groose_portrait"
    image Groose_portrait:
        "images/Groose/groose_%s.png"%grooseemo
                                                
    

# The game starts here.
label start:
    
    $grooseemo = "neutral"
    x "Here is some narration text . . ."
    g "Now I'm talking as Groose."
    n "And I'm talking as a person who is not Groose."
    $grooseemo = "angry"    
    g "NOW I'M ANGRY!"
    $grooseemo = "sad" 
    g "NOW I'M SAD!"

Again, I have like zero idea what I'm doing, but if you're aiming to do what I think you are then this may do for now? I'm sorry that it's sort of a workaround rather than a simple solution.

EDIT: I just noticed one of your images is something like "groosehair", so I thought I'd let you know that you can also use this method to layer different parts of the side image if you use a LiveComposite. You can even have the side image blink and have lip flaps if you want. Here's part of my code I'm working on for the customizable main character's side image in my game:

Code: Select all

init python:
    def draw_character(st, at): 
        return LiveComposite(
            (600, 1850),
            (0, 0), "images/characters/Player/Skintone/base/%s.png"%skintone ,
            (0, 0), "images/characters/Player/Skintone/eyelids/%s.png"%skintone ,
            (0, 0), WhileSpeaking("draw_character", "mc_mouth", "mc_mouth_rest"),
            (0, 0), "mc_blink"
            ),.1
#--MAIN IMAGES-----------------------------------------------------------------#    
init:
    image character:
        DynamicDisplayable(draw_character)
    image character2:
        DynamicDisplayable(draw_character)
        zoom .75
    
#--EYES------------------------------------------------------------------------#       
    image mc_blink:
        "images/characters/Player/Eyes/"+ eye_emo +"/%s.png" % (eyecolor)
        4.25
        "images/characters/Player/Eyes/closed.png"
        .25
        repeat

#--MOUTH------------------------------------------------------------------------#
    image mc_mouth_rest:
        "images/characters/Player/Mouth/"+ mouth_emo +"/%s/1.png" % (skintone)
    image mc_mouth:
        "images/characters/Player/Mouth/"+ mouth_emo +"/%s/1.png" % (skintone)
        0.14
        "images/characters/Player/Mouth/"+ mouth_emo +"/%s/2.png" % (skintone)
        0.08
        "images/characters/Player/Mouth/"+ mouth_emo +"/%s//3.png" % (skintone)
        0.14
        repeat

example image folder

example screenshots

[BlueLakeKylie]

Alright, never did it but I think I have an idea about how you should do it. First you have to define the images in the script.rpy, including the side images for the textbox, this is basic so renpy can find the pictures, you already probably know this but I prefer to explain everything just in case.

Code: Select all

# images
image mc smile = "mc_smile.png" #this would be the normal sprite
image side mc smile = "mc_smile.png" #and this would be sprite shown in the side
image mc sad = "mc_sad.png"
image side mc sad = "mc_sad.png"

Notice how I start every image for the main character with "mc" because that's how renpy will know that all these images belong to the main character. You can use whatever you want.
Then add what Tom said:

Code: Select all

init python:
    config.side_image_tag = "mc"

With this now every side image will be linked to the mc pictures. Now ingame you only have to add what expression do you want when people talk:

Code: Select all

label start:
mc "This is normal text said by the mc character."
mc smile "This is normal text said by the mc character with the mc smile side image."
a smile "This is normal text said by the a character with the mc smile side image.

Never tried the config.side_image_tag though so I may be mistaken about it, but I think this should work.

Okay, so now it's appearing in front of the text box like it should be, but for some reason it's giving me the default missing image picture in the middle of the screen above the text box, despite me having set all of the images as side images, as if it thinks that each image is now two images and one of them is missing.

(also as a random note 'groosehair' is literally just a picture of him pointing to his hair so it's not anything significant lol)

[novalyssa]

(also as a random note 'groosehair' is literally just a picture of him pointing to his hair so it's not anything significant lol)

Haha, my bad! How silly of me - everyone knows that a picture of the character pointing to their hair is essential in any visual novel.

Also, I'm just now realizing how long and overthought my post was . . . that's just what happens when you've had no sleep in two days, I guess - you have the urge to post impetuously in online forums. xD I'll have to tinker with my own code and see if I can make it more simple.

[Keinart]

Okay, so now it's appearing in front of the text box like it should be, but for some reason it's giving me the default missing image picture in the middle of the screen above the text box, despite me having set all of the images as side images, as if it thinks that each image is now two images and one of them is missing.

(also as a random note 'groosehair' is literally just a picture of him pointing to his hair so it's not anything significant lol)

So let me get this right, you are getting the image correctly in the side, and also the default missing picture in the middle, or just the default missing picture? Also does it happen for every kind of text (the one with only mc in my example) or just with text with side images (like the mc smile in my example).

I would appreciate if you could share your code so I can see what's going on.

[BlueLakeKylie]

The side image is appearing correctly, but so is the default missing picture.

My textbox will always have the picture in it, but I hid it for the sake of testing, and when I do that, both images disappear.

Code: Select all

# My side images defined at the top of script.rpy:

image side groose sweg = "groosesweg.jpg"
image side groose angry = "grooseangry.jpg"
image side groose creepy = "groosecreepy.jpg"
image side groose point = "groosepoint.jpg"
image side groose weird = "grooseweird.png"
image side groose wtf = "groosewtf.jpg"
image side groose yeah = "grooseyeah.jpg"
image side groose close = "groosezoom.jpg"
image side groose fall = "groosefall.jpg"
image side groose what = "groosehorrified.jpg"
image side groose hair = "groosehair.jpg"
image side groose heh = "grooseheh.jpg"
image side groose kek = "groosekek.jpg"

# And the tag below it:

init python:
    config.side_image_tag = "groose"

Example of screen I get when I show the image:



I'm probably screwing something up that's really obvious…

If I define every single image of the character as side_image_tag, then it tells me my image is missing entirely and a different image of the character appears, because for some reason, one of them defined tested them separately, and the only one that works is the code I posted, except I've got the default missing image above the textbox. (Sorry if this is hard to understand)

I just use the images like normal, with 'show'.

And another thing, I set my yes/no to not remove previous screens. When I'm in the middle of the game and try to quit out of it from the computer and not the game, the textbox disappears, but the default missing image does not.

like so…

[Keinart]

snip

Got the answer. This is one of those things Renpy does to make the work easier, but that in this case just manages to make everything harder.

When in your code you show a sprite (something like "show mc happy with dissolve"), then in the next text box you have something like "mc smile", renpy will try to change also the show image we had before to the new sprite. It's basically one of those things made to make the writing of the script easier. The issue here is that you are trying to change ONLY the side image all the time, but renpy at the same time is trying to change the sprite in the middle of the screen to match it.

The same way "groose" is applied to each image, it is also applied to characters, so we can use that so that the game identify every character with groose so it can leave all your other images in peace. The way to fix this is easy. You just have to make sure that every character is defined by your side image

Code: Select all

l = Character('Luce Aurea', image="groose")
a = Character('Ausse Ealdwine', image="groose")

Now, your script should go just fine, as long as you make sure that no other sprite in-game use "groose" as defining term.

Code: Select all

l "Cosas" #Here is just a normal textbox with no text
l smile "Cosas con side image" #This show the "l" character, Luce, talking with the groose smile side image
show au happy with dissolve #Here I show a picture of character "a", Ausse, but since it's defined as "au" the game doesn't identify it with any other character
l surprise "Cosas cosas" #"au happy" is still displaying normally and doesn't try to change, while the groose side image does actually change
a smile "No cosas" #Here I change both the side image and the person talking, while "au happy" is still displaying normally

You probably had a "show something" in your code somewhere at the beginning, then renpy tried to change it afterwards even though you wanted to keep the sprite there. Just make sure that none of your sprites starts or include "groose" so that way it doesn't get mixed with the image defined for all the characters and you should be fine.

And another thing, I set my yes/no to not remove previous screens. When I'm in the middle of the game and try to quit out of it from the computer and not the game, the textbox disappears, but the default missing image does not.

like so…

This is actually something I tried to report to Tom and he told it was a no issue. I think he didn't get it because it CLEARLY is an issue. When you try to leave the game using the X button in the corner like you say, the transparencies or removing previous screen won't work, while it will work everywhere else. At the end all you can do is just make sure your yes/no screen is one that cover the entire screen.