Customizable character reactions

[lindsay-jb]

Hello! I have successfully programmed a character customization screen, including different bodies, outfits, and hairstyles. However, the image created through the process is only the neutral face, and in the actual game I want to show different reaction faces for the customizable character. How can I do that, while still keeping the same outfit/hair/body customizations I made in the character customization screen?

Thank you in advance!

[_ticlock_]

Hi, lindsay-jb,

Check layered image doc. You can use it both to customize different bodies, outfits, and hairstyles, and emotions. For example:

Code: Select all

layeredimage augustina:
    ...
    group emotion:
        pos(x_pos,y_pos)
        
        attribute neutral default:
            "neutral"

        attribute happy:
            "happy"
            
         attribute sad:
            "sad"

label start:
    show augustina happy

[lindsay-jb]

How does this work if you have multiple races/genders? Because I don't have just one "base" to set to, like in the example they just have the one sprite that's Augustina. I have 8 different sprite possibilities: 4 races across 2 genders. Here's the coding for female customization:

Code: Select all

#image rowan = DynamicDisplayable(rowan_sprite) #uncomment to use python version
init:
    default f_rowan_race = 1
    default f_rowan_race_max = 4
    default f_rowan_outfit = 1
    default f_rowan_outfit_max = 7
    default f_rowan_hair = 1
    default f_rowan_hair_max = 8

#####################################renpy langauge version:
image f_rowan = Composite(
    (0, 0),
        (0, 0), "Create_Character/Rowan_Female/Bodies/fmc[f_rowan_race].png",
        (0, 0), "Create_character/Rowan_Female/Outfits/fMC_Outfit[f_rowan_outfit].png",
        (0, 0), "Create_character/Rowan_Female/Hair/fMC_hair[f_rowan_hair].png",
)
#####################################python version:
init python:
    def f_rowan_sprite(st, at):
        return LiveComposite(
            (0, 0),
            (0, 0), "Create_Character/Rowan_Female/bodies/fmc{}.png".format(f_rowan_race),
            (0, 0), "Create_character/Rowan_Female/Outfits/fMC_Outfit{}.png".format(f_rowan_outfit),
            (0, 0), "Create_character/Rowan_Female/Hair/fMC_hair{}.png".format(f_rowan_hair),

        ),.1

screen f_race_rowan():
    modal True

    imagemap:
        ground "Dressup_Screen/background.png"
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"


        ##F!Rowan Race##
        hotspot(47,959,75,130) action If(f_rowan_race > 1, SetVariable("f_rowan_race", f_rowan_race - 1), SetVariable("f_rowan_race", 1))
        hotspot(1068, 959, 70, 127) action If(f_rowan_race < f_rowan_race_max, SetVariable("f_rowan_race", f_rowan_race + 1), SetVariable("f_rowan_race", f_rowan_race_max))

        ##Continue##
        hotspot(137,1422,900,228) action Return()

        add "f_rowan":
            pos(0, 0)
screen f_hair_rowan():
    modal True

    imagemap:
        ground "Dressup_Screen/background.png"
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"
        ##F!Rowan Hair##
        hotspot(47,959,75,130) action If(f_rowan_hair > 1, SetVariable("f_rowan_hair", f_rowan_hair - 1), SetVariable("f_rowan_hair", 1))
        hotspot(1068, 959, 70, 127) action If(f_rowan_hair < f_rowan_hair_max, SetVariable("f_rowan_hair", f_rowan_hair + 1), SetVariable("f_rowan_hair", f_rowan_hair_max))

        ##Continue##
        hotspot(137,1422,900,228) action Return()
        add "f_rowan":
            pos(0, 0)

screen f_outfit_rowan():
    modal True
    imagemap:
        ground "Dressup_Screen/background.png"
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"
        ##F!Rowan Outfit##
        hotspot(47,959,75,130) action If(f_rowan_outfit > 1, SetVariable("f_rowan_outfit", f_rowan_outfit - 1), SetVariable("f_rowan_outfit", 1))
        hotspot(1068, 959, 70, 127) action If(f_rowan_outfit < f_rowan_outfit_max, SetVariable("f_rowan_outfit", f_rowan_outfit + 1), SetVariable("f_rowan_outfit", f_rowan_outfit_max))

        ##Continue##
        hotspot(137,1422,900,228) action Return()
        add "f_rowan":
            pos(0, 0)

How would I use the layered imaging and make sure to use the proper expressions for the different race options that I have? I would like to have 5 different reaction faces for each of the different races.

[_ticlock_]

It looks like you used Keri-Dressup-RenPy-Template. You can just modify your code for different expressions:

Do you want to use show statements with image f_rowan, or only to show in the screen?

For screen only you can simply add expression to your Composite:

Code: Select all

default f_rowan_mood = ""

image f_rowan = Composite(
        (200, 200),     # You should specify size (0,0) will fail with show statements 
        (0, 0), "Create_Character/Rowan_Female/Bodies/fmc[f_rowan_race].png",
        (0, 0), "Create_character/Rowan_Female/Outfits/fMC_Outfit[f_rowan_outfit].png",
        (0, 0), "Create_character/Rowan_Female/Hair/fMC_hair[f_rowan_hair].png",
        (0,0), "Create_Character/Rowan_Female/Mood/fmc[f_rowan_race]_[f_rowan_mood].png" # You don't need comma here
)

and change mood variable:

Code: Select all

$ f_rowan_mood = "happy"

However, you won't be able to use transitions and show statements in this case.

For show statements (and screen as well):

Code: Select all

image f_rowan = Composite(
        (200, 200),     # You should specify size (0,0) will fail with show statements 
        (0, 0), "Create_Character/Rowan_Female/Bodies/fmc[f_rowan_race].png",
        (0, 0), "Create_character/Rowan_Female/Outfits/fMC_Outfit[f_rowan_outfit].png",
        (0, 0), "Create_character/Rowan_Female/Hair/fMC_hair[f_rowan_hair].png" # You don't need comma here
)

image f_rowan happy = Composite(
        (200, 200),     # YThe same size as for image f_rowan
        (0, 0), "f_rowan",
        (0, 0), "Create_Character/Rowan_Female/Mood/fmc[f_rowan_race]_happy.png"
)

Then in the script:

Code: Select all

label start:
    show f_rowan
    "neutral"
    show f_rowan happy with dissolve
    "happy with transition"

[lindsay-jb]

Oh perfect! Yup, that definitely worked, thank you. I just have one more question. So I wanted to have separate screens for the male vs female sprites, since the clothes fit differently on different bodies and I don't want them to have the option of selecting the non-fitting fem clothing on a masc body, however I'm having difficulty defining them as "rowan." Since they're in different screens, they need to have unique image names, but in the scriptI want to be able to just refer to it as "rowan" and have the game pull up the defined image. I'm sorry if I'm not explaining very well lol basically is it possible to do customization branch off in two different screens but then define it as the same name?

Or should it all be the same screen, and I just define what options are shown depending on if they want to play as male or female? I'm not sure how to specify what options appear. For example, the fem body options are 1-4 and male are 5-8, and if they chose female I'm not sure how to make it so the only options are 1-4 and if they chose male, then the only options they see are 5-8.

[_ticlock_]

You don't need separate screens for male and female. You just need to use conditions for control elements (hotspots) and change properly variables in actions.

Code: Select all

default rowan_male = True

For imagebutton/hotspot that toggle gender add also action to change other variables:

Code: Select all

# Rowan gender
imagebutton:
    idle "gender_button_idle.png"
    hover "gender_button_hover.png"
    
    if rowan_male:
        action SetVariable("rowan_male", False), SetVariable("rowan_race", 1), SetVariable("rowan_outfit", 1), 
SetVariable("rowan_hair", 1)

    else:
        action SetVariable("rowan_male", True), SetVariable("rowan_race", 5), SetVariable("rowan_outfit", 5), 
SetVariable("rowan_hair", 5)

Similar thing with other elements. For example:

Code: Select all

screen race_rowan():
    modal True

    imagemap:
        #...

        ##Rowan Race##
        if rowan_male:
            hotspot(47,959,75,130) action If(rowan_race > 5, SetVariable("rowan_race", rowan_race - 1), SetVariable("rowan_race", 5))
            hotspot(1068, 959, 70, 127) action If(rowan_race < 8, SetVariable("rowan_race", rowan_race + 1), SetVariable("rowan_race", 8))

        else:
            hotspot(47,959,75,130) action If(rowan_race > 1, SetVariable("rowan_race", rowan_race - 1), SetVariable("rowan_race", 1))
            hotspot(1068, 959, 70, 127) action If(rowan_race < 4, SetVariable("rowan_race", rowan_race + 1), SetVariable("rowan_race", 4))
            
            
        #...

[lindsay-jb]

Thank you so so so much!! I've mostly got it working, the only issue I'm having is defining the "default" state for the male vs female sprite. Right now, if you choose that you want to play as a male sprite, it starts as the female sprite until I get into the male sprite options and then it won't go back to the fem sprite options (the fem sprite is working perfectly). I wanted to set it up in the script, like so. I did try the hotspot option like you had mentioned but I clearly didn't do something right.

Code: Select all

image lake = "Lake.png"
label start:
    scene black with dissolve

    menu:
        "I want to play as a..."
        "Girl.":

            jump f_rowan_customization

        "Guy.":

            jump m_rowan_customization

label f_rowan_customization:
    "Choose your character's face..."
    $ rowan_female = True
    call screen race_rowan
    scene lake
    $ quick_menu = True


    show rowan:
        pos(0, 0)

    "Next, choose your hair..."
    call screen hair_rowan
    scene lake
    $ quick_menu = True
    show rowan:
        pos(0, 0)

    "Next, choose your outfit..."
    call screen outfit_rowan
    scene lake
    $ quick_menu = True
    show rowan:
        pos(0, 0)

    "You've created your look!"

    jump a

label m_rowan_customization:
    "Choose your character's face..."
    $ rowan_female = False
    call screen race_rowan
    scene lake
    $ quick_menu = True


    show rowan:
        pos(0, 0)

    "Next, choose your hair..."
    call screen hair_rowan
    scene lake
    $ quick_menu = True
    show rowan:
        pos(0, 0)

    "Next, choose your outfit..."
    call screen outfit_rowan
    scene lake
    $ quick_menu = True
    show rowan:
        pos(0, 0)

    "You've created your look!"

    jump a

label a:

And then this is what the customization screen now looks like:

Code: Select all

#image rowan = DynamicDisplayable(rowan_sprite) #uncomment to use python version
init:
    default rowan_race = 1
    default rowan_race_max = 8
    default rowan_outfit = 1
    default rowan_outfit_max = 13
    default rowan_hair = 1
    default rowan_hair_max = 11
    default rowan_female = True

#####################################renpy langauge version:
image rowan = Composite(
    (400, 400),
        (0, 0), "Create_Character/Rowan/Bodies/rowan_[rowan_race].png",
        (0, 0), "Create_character/Rowan/Outfits/rowan_Outfit[rowan_outfit].png",
        (0, 0), "Create_character/Rowan/Hair/rowan_hair[rowan_hair].png"
)
image rowan happy = Composite(
    (400, 400),
        (0, 0), "Create_Character/Rowan/Bodies/rowan_[rowan_race].png",
        (0, 0), "Create_character/Rowan/Mood/rowan_[rowan_race]_happy.png",
        (0, 0), "Create_character/Rowan/Outfits/rowan_Outfit[rowan_outfit].png",
        (0, 0), "Create_character/Rowan/Hair/rowan_hair[rowan_hair].png"
)
image rowan sad = Composite(
    (400, 400),
        (0, 0), "Create_Character/Rowan/Bodies/rowan_[rowan_race].png",
        (0, 0), "Create_character/Rowan/Mood/rowan_[rowan_race]_sad.png",
        (0, 0), "Create_character/Rowan/Outfits/rowan_Outfit[rowan_outfit].png",
        (0, 0), "Create_character/Rowan/Hair/rowan_hair[rowan_hair].png"
)
image rowan angry = Composite(
    (400, 400),
        (0, 0), "Create_Character/Rowan/Bodies/rowan_[rowan_race].png",
        (0, 0), "Create_character/Rowan/Mood/rowan_[rowan_race]_angry.png",
        (0, 0), "Create_character/Rowan/Outfits/rowan_Outfit[rowan_outfit].png",
        (0, 0), "Create_character/Rowan/Hair/rowan_hair[rowan_hair].png"
)
image rowan surprised = Composite(
    (400, 400),
        (0, 0), "Create_Character/Rowan/Bodies/rowan_[rowan_race].png",
        (0, 0), "Create_character/Rowan/Mood/rowan_[rowan_race]_surprised.png",
        (0, 0), "Create_character/Rowan/Outfits/rowan_Outfit[rowan_outfit].png",
        (0, 0), "Create_character/Rowan/Hair/rowan_hair[rowan_hair].png"
)

#####################################python version:
init python:
    def rowan_sprite(st, at):
        return LiveComposite(
            (0, 0),
            (0, 0), "Create_Character/Rowan/Bodies/rowan_{}.png".format(rowan_race),
            (0, 0), "Create_character/Rowan/Outfits/rowan_Outfit{}.png".format(rowan_outfit),
            (0, 0), "Create_character/Rowan/Hair/rowan_hair{}.png".format(rowan_hair),
        ),.1

screen race_rowan():
    modal True

    imagemap:
        ground "Dressup_Screen/background.png"
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"


        ##Rowan Race##
        if rowan_female:
            hotspot(47,959,75,130) action If(rowan_race > 1, SetVariable("rowan_race", rowan_race - 1), SetVariable("rowan_race", 1))
            hotspot(1068, 959, 70, 127) action If(rowan_race < 4, SetVariable("rowan_race", rowan_race + 1), SetVariable("rowan_race", 4))

        else:
            hotspot(47,959,75,130) action If(rowan_race > 5, SetVariable("rowan_race", rowan_race - 1), SetVariable("rowan_race", 5))
            hotspot(1068, 959, 70, 127) action If(rowan_race < 8, SetVariable("rowan_race", rowan_race + 1), SetVariable("rowan_race", 8))

        ##Continue##
        hotspot(137,1422,900,228) action Return()

        add "rowan":
            pos(0, 0)

screen hair_rowan():
    modal True

    imagemap:
        ground "Dressup_Screen/background.png"
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"

        ##Rowan Hair##
        if rowan_female:
            hotspot(47,959,75,130) action If(rowan_hair > 1, SetVariable("rowan_hair", rowan_hair - 1), SetVariable("rowan_hair", 1))
            hotspot(1068, 959, 70, 127) action If(rowan_hair < 8, SetVariable("rowan_hair", rowan_hair + 1), SetVariable("rowan_hair", 8))
        else:
            hotspot(47,959,75,130) action If(rowan_hair > 9, SetVariable("rowan_hair", rowan_hair - 1), SetVariable("rowan_hair", 9))
            hotspot(1068, 959, 70, 127) action If(rowan_hair < 11, SetVariable("rowan_hair", rowan_hair + 1), SetVariable("rowan_hair", 11))

        ##Continue##
        hotspot(137,1422,900,228) action Return()
        add "rowan":
            pos(0, 0)

screen outfit_rowan():
    modal True
    imagemap:
        ground "Dressup_Screen/background.png"
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"

        ##Rowan Outfit##
        if rowan_female:
            hotspot(47,959,75,130) action If(rowan_outfit > 1, SetVariable("rowan_outfit", rowan_outfit - 1), SetVariable("rowan_outfit", 1))
            hotspot(1068, 959, 70, 127) action If(rowan_outfit < 7, SetVariable("rowan_outfit", rowan_outfit + 1), SetVariable("rowan_outfit", 7))
        else:
            hotspot(47,959,75,130) action If(rowan_outfit > 8, SetVariable("rowan_outfit", rowan_outfit - 1), SetVariable("rowan_outfit", 8))
            hotspot(1068, 959, 70, 127) action If(rowan_outfit < 13, SetVariable("rowan_outfit", rowan_outfit + 1), SetVariable("rowan_outfit", 13))

        ##Continue##
        hotspot(137,1422,900,228) action Return()
        add "rowan":
            pos(0, 0)

Anyway, I'm not sure where/how to define the fem sprite vs male sprite. Right now, for the male option it originally shows rowan assembled with the "default" values and then once I get into the male variables, will no longer show the fem variables. Thanks so much for your help, and I apologize for all the questions, but your help is so appreciated!!!

[_ticlock_]

I don't see where you change the starting values of the variables for male character. Something like this:

Code: Select all

label m_rowan_customization:
    python:
        rowan_female = False
        rowan_race = 5
        rowan_outfit = 8
        rowan_hair = 9
    "Choose your character's face..."
    call screen race_rowan

Small corrections:
You don't need these at all:

Code: Select all

#image rowan = DynamicDisplayable(rowan_sprite) #uncomment to use python version

Code: Select all

#####################################python version:
init python:
    def rowan_sprite(st, at):
        return LiveComposite(
            (0, 0),
            (0, 0), "Create_Character/Rowan/Bodies/rowan_{}.png".format(rowan_race),
            (0, 0), "Create_character/Rowan/Outfits/rowan_Outfit{}.png".format(rowan_outfit),
            (0, 0), "Create_character/Rowan/Hair/rowan_hair{}.png".format(rowan_hair),
        ),.1

Default statements should be outside init block:

Code: Select all

default rowan_race = 1
default rowan_outfit = 1
default rowan_hair = 1
default rowan_female = True

[lindsay-jb]

Oh, perfect, yes that's working now, thank you so so much!!

One last small thing, for the hover/selected button images, the layering has them behind the sprite image files, but I would like them to actually be on top of them. I can redesign the screen and buttons to move it somewhere else if necessary, but I would like the buttons to be hovering over the top of the sprites. Can I move the layering up for those files in the image map? I've googled and searched but couldn't figure it out.

(this part, I want to move up all the files to the top layer except the ground)

Code: Select all

imagemap:
        ground "Dressup_Screen/background.png"
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"

[_ticlock_]

1) You can try position sprite right after ground, but I think that will not work.

Code: Select all

screen race_rowan():
    modal True

    imagemap:
        ground "Dressup_Screen/background.png"
        add "rowan"
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"
        ...

If it does not you can take out background and sprite outside of imagemap:

Code: Select all

screen race_rowan():
    modal True
    
    add "Dressup_Screen/background.png"
    add "rowan"
    
    imagemap:
        idle "Dressup_Screen/idle.png"
        hover "Dressup_Screen/hover.png"
        selected_idle "Dressup_Screen/selected.png"
        selected_hover "Dressup_Screen/selected.png"
        ...

[lindsay-jb]

Your first suggestion of adding rowan to the image map worked! Thank you sooo much, I definitely couldn't have gotten the character customization working without your help!! I truly, truly appreciate it!! You're amazing <3

[lindsay-jb]

Okay, there is one last thing I wanted to add to the character customization screen, if possible... I'd like to have the sprites slide off the screen if you click the arrow. Right now, the sprites just appear with no transitions.

Basically, I have an arrow on the left side of the screen and right side of the screen, and I want to make it so that if you click the left arrow, the current sprite slides off to the left and the new sprite slides in from the right, and vice versa. But it seems like the regular transitions (dissolve, slideright) don't work since it's defining the image and isn't a "show image" function.

Is that animation possible to add? If not, it's not a huge deal, I just won't have the transitions. I think it would look nicer though.

[Ocelot]

Something like that:

Code: Select all

default outfit = "miki casual"

image miki_outfit:
    "[outfit]"

transform roll_out:
    on show:
        xalign -0.5
        linear 0.8 xalign 0.5
    on hide:
        linear 0.5 xalign 1.5

screen character():
    add "miki_outfit" at roll_out

screen choose_outfit():
    modal True
    on "show" action Show("character")

    vbox:
        hbox:
            textbutton "uniform"  action [Hide("character", dissolve), SetVariable("outfit", "miki uniform"), Show("character", dissolve)]
            textbutton "casual"  action [Hide("character", dissolve), SetVariable("outfit", "miki casual"), Show("character", dissolve)]
            textbutton "I'm done" action Return(True)

In short, it shows character image on separate screen with a transform attached to do some things when image is shown or hidden. In actions I hide character screen (which makes image to move out), change all variables I need (as image is offscreen and hidden, you cannot see changes yet), and show character screen again (transform applied to the image makes it slide in).

I attached a demo project, so you can see it in action.