Displaying character face parts

[JayBlue]

So I have a question. I want a character to have a vast 'array of emotions' but I don't want to export a bunch of things and take up space in my game. Here's what I'm dealing with.

I have 1 character with...
3 different eyebrows,
4 different eyes,
8 different mouths,
and this is all for one character. now 3x4x8 = 96. That would mean that I would have to export the same character 96 times just to have that vast 'array of emotions'.

Not to mention that it uses up way too much space.

I would rather export the eyebrows separately, the eyes separately, and the mouths separately. So I would just have to export 15 different things instead of 96, and just mix and match the parts on the character via the code.

I think I've seen this done in other VNs, but how do it? How do I make it work with the code and how I make it work with the in-game transitions such as moving the character and fade-in and fade-out?

[chocoberrie]

I would like to know how this is done too, please! Anyone have any suggestions?

[TellerFarsight]

Here's some documentation on LiveComposite, which is exactly what you're looking for. Feel free to ask if you have further questions on it!

https://www.renpy.org/wiki/renpy/doc/re ... eComposite
https://www.renpy.org/wiki/renpy/doc/co ... d_Lip_Flap

Word of Warning: Make sure the eyebrows, eyes, mouth, nose, piercings or whatever don't have transparency in them. LiveCompositing a slightly transparent image on top of another image has done some funky things in my experience.

[chocoberrie]

Here's some documentation on LiveComposite, which is exactly what you're looking for. Feel free to ask if you have further questions on it!

https://www.renpy.org/wiki/renpy/doc/re ... eComposite
https://www.renpy.org/wiki/renpy/doc/co ... d_Lip_Flap

Ah yes, LiveComposite! I have used this before, but the old code that I have for it in a "test game" doesn't seem to work with the updated Ren'Py.

Word of Warning: Make sure the eyebrows, eyes, mouth, nose, piercings or whatever don't have transparency in them. LiveCompositing a slightly transparent image on top of another image has done some funky things in my experience.

So does this mean you would make the facial features on a white background? Wouldn't the white background show up on the sprite, then?

Also, is it possible to achieve smooth transitions between the appearance of one facial expression and the next?

Thanks for your help!

[TellerFarsight]

The facial features should be on a transparent background, I just meant that any pixels that have color should fully have colour. I tried to LiveComposite blush on a character once, with pink colour at like 70% opacity, and it created a black smudge background underneath it.

You should be able to smoothly transition between facial expressions the same way you transition between whole character poses, yeah? I've never tried doing that, but I'm sure there's an easy way.

[JayBlue]

So it would have to look something like this?

Code: Select all

 
image girl normal = LiveComposite(
    (359, 927),
    (0, 0), "base.png",
    (101, 50), "brow_normal.png",
    (101, 50), "eyes_normal.png",
    (101, 50), "mouth_normal.png"

image girl happy = LiveComposite(
    (359, 927),
    (0, 0), "base.png",
    (101, 50), "brow_normal.png",
    (101, 50), "eyes_normal.png",
    (101, 50), "mouth_smile.png"

image girl pissed = LiveComposite(
    (359, 927),
    (0, 0), "base.png",
    (101, 50), "brow_angry.png",
    (101, 50), "eyes_normal.png",
    (101, 50), "mouth_normal.png"

I've not tested the code yet. But I assume this is it but without the eye blinking and lip flap.
Question. What are the numbers here for? --> (101, 50), "mouth_normal.png"

[Scribbles]

You could do a condition switch which would take up a lot less code space I think. so:

Code: Select all

image girl = LiveComposite((0,0),
    (0,0), "girl_base.png",
    (0,0), ConditionSwitch(
        "girl_mouth == 1", "girl_mouth01.png"
        "girl_mouth == 2", "girl_mouth01.png"
        ),
## and so on
    )

and then maybe to create expressions you would.... maybe a function?

Code: Select all

$ girl("happy")

Code: Select all

init python:
    def girl(str):
        if str == "happy":
            $ girl_mouth = 1
            $ girl_eyes = 1
            #and so on

sorry if that's overly complicated, but it's my best guess on how to do it. Not sure if my code is 100% working, but hopefully it gives you an idea?

[trooper6]

Okay, let me explain how to do this.

First off, a set up thing: It is better if all of your bits (eyes, mouth, etc) are the same size as your base image...this will make everything much, much easier.
Next, you will be using LiveComposite, ConditionSwitches, and Dynamic Images.
LiveComposite is for the image: https://www.renpy.org/doc/html/displaya ... eComposite
ConditionSwitch is in case you have something that you want to show up sometimes, but not others: https://www.renpy.org/doc/html/displaya ... tionSwitch
Dynamic Images is new(ish) and will make your life easier: https://www.renpy.org/doc/html/changelo ... mic-images

Code: Select all

default g_brow = "normal"
default g_eyes = "normal"
default g_mouth = "normal"
default g_blush = False

image girl = LiveComposite(
    (359, 927), #this is the size of the image
    (0, 0), "images/base.png", #this is where the image is anchored
    (0, 0), "images/brow_[g_brow].png",
    (0, 0), "images/eyes_[g_eyes].png",
    (0, 0), "images/mouth_[g_mouth].png",
    (0, 0), ConditionSwitch(
        "g_blush == False", Null(), #if g_blush if false, there will be no blush image shown
        "True", "images/blush.png")

label start:
    show girl at left
    "Hey!"
    $g_mouth = "smile"
    "Now the girl is smiling"
    $g_blush = True
    "Now she is blushing."

[JayBlue]

Okay, let me explain how to do this.

First off, a set up thing: It is better if all of your bits (eyes, mouth, etc) are the same size as your base image...this will make everything much, much easier.
Next, you will be using , , and .
LiveComposite is for the image: https://www.renpy.org/doc/html/displaya ... eComposite
ConditionSwitch is in case you have something that you want to show up sometimes, but not others: https://www.renpy.org/doc/html/displaya ... tionSwitch
Dynamic Images is new(ish) and will make your life easier: https://www.renpy.org/doc/html/changelo ... mic-images

Code: Select all

default g_brow = "normal"
default g_eyes = "normal"
default g_mouth = "normal"
default g_blush = False

image girl = LiveComposite(
    (359, 927), #this is the size of the image
    (0, 0), "images/base.png", #this is where the image is anchored
    (0, 0), "images/brow_[g_brow].png",
    (0, 0), "images/eyes_[g_eyes].png",
    (0, 0), "images/mouth_[g_mouth].png",
    (0, 0), ConditionSwitch(
        "g_blush == False", Null(), #if g_blush if false, there will be no blush image shown
        "True", "images/blush.png")

label start:
    show girl at left
    "Hey!"
    $g_mouth = "smile"
    "Now the girl is smiling"
    $g_blush = True
    "Now she is blushing."

Let me see if I understand:
So I use LiveComposite to set up the image with a base with other images stacked on top of it.

I use ConditionSwitch to declare multiple possible outcomes for the value of a variable. Basically Blush on or off.

And I use Dynamic Images as a way of changing the text that gets read by the program so that changing the variable, changes the image.

Seems easy enough. How would I add a dissolve transition when changing the Dynamic Image variables?

Code: Select all

    show girl at left
    "Hey!"
    $g_mouth = "smile" with dissolve(1)
    "Now the girl is smiling"
    $g_blush = True with dissolve(1)
    "Now she is blushing."

I'm assuming it wouldn't work just by shoving a 'with dissolve(1)' at the end.

[trooper6]

Seems easy enough. How would I add a dissolve transition when changing the Dynamic Image variables?
I'm assuming it wouldn't work just by shoving a 'with dissolve(1)' at the end.

So, the last time this question came up, I believe the answer was you can't use a transition with that option.
See this thread: viewtopic.php?f=8&t=39487

If you want transition, you can rework your images to not use dynamic images but use TransitionConditionSwitches inside your LiveComposite for everything. It'll make your code longer. Check out the following two threads if you want to do that:
viewtopic.php?f=8&t=44548
viewtopic.php?f=51&t=26612#p326683

[JayBlue]

So this would be the final product?

Code: Select all

image girl = LiveComposite(
    (359, 927),
    (0, 0), "images/base.png",
    (0, 0), TransitionConditionSwitch(Dissolve(0.4, alpha=True),       
        "g_brows == 'normal' ", "images/brow_normal.png",
        "g_brows == 'sad' ", "images/brow_sad.png",
        "g_brows == 'angry' ", "images/brow_angry.png")
    (0, 0), TransitionConditionSwitch(Dissolve(0.4, alpha=True),       
        "g_eyes == 'open' ", "images/eyes_open.png",
        "g_eyes == 'closed' ", "images/eyes_closes.png",
        "g_eyes == 'halfopen' ", "images/eyes_halfopen.png")
    (0, 0), TransitionConditionSwitch(Dissolve(0.4, alpha=True),       
        "g_mouth == 'normal' ", "images/mouth_normal.png",
        "g_mouth == 'open' ", "images/mouth_open.png",
        "g_mouth == 'smile' ", "images/mouth_smile.png")
    (0, 0), TransitionConditionSwitch(Dissolve(0.4, alpha=True), 
        "g_blush == False", Null(),
        "g_blush == True", "images/blush.png")

label start:
    show girl at left
    "Hey!"
    $g_mouth = "smile"
    "Now the girl is smiling with dissolve"
    $g_blush = True
    "Now she is blushing with dissolve"

[/quote]
So I changed ConditionSwitch to TransitionConditionSwitch
And I'm not using Dynamic Images anymore.

I'm not too worried about the code being longer, as long as the transitions look good and as long as I don't have 1GB go to character art, I'm happy

[trooper6]

I've never used the TransitionConditionSwitch, so you'll have to test out the code and see. But don't forget to put the TransitionConditionSwitch class in your code as well.

[chocoberrie]

Sorry for the question post! I'll put it in a new thread.

[JayBlue]

Ok, I got it working. The transitions work, granted they lag a bit. Probably cause my images are 1933x3166. I'll probably have to shrink them or something.

But its working, thank you :)