How to work with Side Image Conditionals (Custom characters)

[RxMoxiie]

Hello, everyone!

So I somehow managed, being the noob that I am, make a screen where you can customize the main character before starting the game.

Here is a screenshot of how it looks like.



Now that I did it, I want the player to be able to see their customized character in the Side Image of the text box. I read a lot of threads about conditional side images and how to use conditional switches to display the side image according to the different variables but I don't understand how the images will be displayed, like what part of the code is the png file name.


The variables I have are body_type, skin_color, eye_type, eye_color, hair_color, hair_type, misc (accessories and others) and outfit. I have all the parts in separate transparent PNG files.

Do I have to make EVERY custom character possibility into one finished image? Or can I use the parts to layer them over each other? How do I do the Side Images according to the custom character the player made depending on the options (variables)?

Some examples of my parts:




Thanks in advance!

[kivik]

Looks like you don't need to do ConditionSwitch for this if you're on 6.99.7 or above:

https://www.renpy.org/doc/html/changelo ... mic-images

You've got a fair few variables so you just need to make sure they're on the right layer on top of each other.

body_type, skin_color, eye_type, eye_color, hair_color, hair_type, misc, outfit

Code: Select all

image player = LiveComposite(
    (300, 600), # depends on your images size
    (0, 0), "player_[body_type]_[skin_color].png", # I assume it's one image for both variables
    (0, 0), "player_[eye_type]_[eye_color].png",
    (0, 0), "player_[hair_type]_[hair_color].png",
    (0, 0), "player_[misc].png", #not sure if this needs to be above or below outfit.
    (0, 0), "player_[outfit].png",
    )

[RxMoxiie]

Wow, thanks! It has been very helpful and I understand it with the hashtags better then in other posts.
However, no image is being displayed at all, or at least, I don't see it. (Sorry if I make things complicated x_x)

I did a small project just to test out how the image will appear depending on the options chosen.
Maybe I'm missing something? Or maybe is because of how the image is positioned?

I kept the image as the side of the screen (1600x900 with transparency) so the pieces would fall on place. The character is very big too so I want to show only a portion of the entire customized character. I don't know how to position the side image either.

This is how I would want it to look like (An example made with paint)



This is my code:

Code: Select all

# The script of the game goes in this file.

# Declare characters used by this game. The color argument colorizes the
# name of the character.

$ body_type = "none"
$ outfit = "none"
$ skin_color = "none"

define p = Character("Player", image= "player")

# The game starts here.

label start:
    
    menu:

     "Choose a body type"   
    
     "Thin":
         $ body_type = "thin"
         jump skin
                
     "Masculin":
         $ body_type = "masc"
         jump skin

     "Chubby":
         $ body_type = "chubby"
         jump skin
         
         
label skin:  
    
    menu:
        
     "Choose a skin color"
            
     "Light":
                
         $ skin_color = "white"
         jump outfit
                
     "Medium":
                
         $ skin_color = "tan"
         jump outfit

     "Dark":
                
         $ skin_color = "black"
         jump outfit

label outfit: 
    
    menu:
        
     "Choose an outfit"
            
     "Developer":
                
         $ outfit = "developer"
         jump realstart
                
     "Inverted rose":
                
         $ outfit = "inverted"
         jump realstart

     "Sporty":
                
         $ outfit = "sporty"
         jump realstart

label realstart:


    image player = LiveComposite(
    (1600, 900), # depends on your images size
    (1600, 900), "[body_type]_[skin_color].png", # I assume it's one image for both variables
    #(0, 0), "player_[eye_type]_[eye_color].png",#
    #(0, 0), "player_[hair_type]_[hair_color].png",#
    #(0, 0), "player_[misc].png", #not sure if this needs to be above or below outfit.
    (1600, 900), "[outfit]_[body_type].png",
    )



    p player "This is the character you customized. Hello!"

Also, I seem to be having indentation issues with making the image a side image.

[kivik]

Keep the tuples before the layers to 0,0 - they're coordinates not sizes. There isn't up to date documentation on it but here's an old page about how to use it:

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

Code: Select all

image player = LiveComposite(
    (1600, 900), # depends on your images size
    (0, 0), "[body_type]_[skin_color].png", # I assume it's one image for both variables
    #(0, 0), "player_[eye_type]_[eye_color].png",#
    #(0, 0), "player_[hair_type]_[hair_color].png",#
    #(0, 0), "player_[misc].png", #not sure if this needs to be above or below outfit.
    (0, 0), "[outfit]_[body_type].png",
    )

For side image you just need to create an image with the side tag:

Code: Select all

image player side = LiveComposite() # <- your composition in here.

You can use keywords to reposition and resize the main image as well:

Code: Select all

image player:
    LiveComposition() #<- your composite

image player side:
    LiveComposition() #<- your composite
    zoom 0.5 # half size

Use this to help you with the side images: https://www.renpy.org/doc/html/side_image.html

Finally create a custom transform to position the image differently on the player creation screen: https://www.renpy.org/doc/html/atl.html ... properties

Code: Select all

show player at player_creation

Hope this is helpful!

[Qlara]

Although kivik already answered your question, I'll clarify a little more, because I had such trouble understanding those composites.
In your character definition line you have

Code: Select all

define p = ("Player", image="player") 

image="player" in this particular spot tells Ren'Py to look for an image with the tag "side".
You want the composite that you named 'player' to be the side image, therefore you add:

Code: Select all

image player side:
    "player"
    #additional stuff here
    #like zoom etc

Finally,

Code: Select all

p player "This is the character you created."

I don't think the tag player is necessary after p, because you have your variables.

[kivik]

You want the composite that you named 'player' to be the side image, therefore you add:

Code: Select all

image player side:
    "player"
    #additional stuff here
    #like zoom etc

Oh I didn't think this was necessary as I thought Ren'py already gives the image a tag of "player" because the first word after image is "player"? I figured that's how all my named character images automatically gets swapped out because the first word is used as tagged.

[RxMoxiie]

Wow! All I added was the word side before the word image instead of at the end and that seemed to have fixed the LiveComposite!

It's finally working exactly how I wanted.

Thank you everyone, couldn't have done it by myself