Customised CGs (and how they work)

Hi everyone! I thought I would just do a quick post on what it is like to do character customisation that is reflected in the CGs. I feel like there's a lot of misunderstanding around what exactly this entails in terms of work. This isn't really a tutorial on how to do it so much as an explanation of what is happening behind the scenes when you unlock one of these CGs.

I also feel like it's just really hilarious to show people what the art actually looks like vs what the player sees. 😂

I've picked a CG that isn't much of a spoiler since nothing specific is happening in it. And it's also one where all of Morgan's features are visible (hair, skin, eyes, eyebrows)

So this is what the player sees when the CG unlocks.

Or maybe they see this:

or this:

As you can see, MC's appearance will change depending on the options the player selected. Neat.

But I always see a lot of back and forth over what all this type of customisation entails and how easy or hard it is.

On one hand there are players who think this is "easy" to set up and don't understand why some indie developers do it while others elect to leave the MC out of the CGs if they are customisable. Meanwhile, I've heard people justify much bigger VN studios not including customisation on the grounds that it's too hard and would need *hundreds* of images to set up.

Neither of these is true and the latter is especially silly. LoL

Including customisation in CGs like this is neither so easy that any indie dev who doesn't do it is just lazy, nor is it so difficult that those big studios just can't do it lest they overtax their delicate developer fingers.

The truth is, of course, somewhere in the middle. It's complicated and requires more art - which puts it out of reach of a lot of indie studios (particularly those that have to hire coders or artists) - and more work. 

But it also does not require *hundreds* of images per CG or anything ridiculous like that.

This is what the CG files actually look like:

For the amount of customisation that Gilded Shadows has. . .it's about 30 files in a CG where all of Morgan's features are visible (less in CGs where her eyes are closed or eyebrows aren't visible).

As you can see, there are certainly more images that would be needed if Morgan wasn't customisable (in that case, you'd only need a single file) but there aren't *hundreds* of images. In the case of GS, all customisation is based around recolouring vs redrawing (IE. Morgan does not have varied hairstyles or features).

What is immediately obvious is that Morgan's parts all have to be saved individually. But I don't have to try to save every possible combination of features (which numbers in the thousands - not hundreds). 

I just save each recolour of each feature individually.

Each hair colour gets saved as a unique file.

Each eyebrow colour gets saved as a unique file. . .

Each eye colour/eye gets saved as a unique file.

And each skin colour gets saved as a unique file (you can also see how horrifically messy it is wherever it gets covered up by the hair anyway. LoL!)

Of course, all this gets neatly layered together in the game so the player sees a whole, cohesive image.

Of course, I don't want to oversimplify the art process here. 

CGs that include Morgan definitely take more time than the ones that don't. I have to plan them out better and take more care with how the file itself is organised. Then I have to go in and manually recolour all the parts according to the colour palettes I've designed for Morgan, which isn't as simple as adjusting colour sliders or using the paint bucket tool.

The shading layers and highlight layers need to be adjusted for different hair colours. And skin tones need a lot of adjustment sometimes. 

Saving all these files is also a lot more work than it would be otherwise. The game's CG folder already has nearly 500 files in it and I'm only just past halfway finished with CGs.

But I think it's important to have a balanced view of the level of work needed here.

There are ways to compromise on options, reduce workload, and still include allow for customisation. One example of this is simply focusing on recolour-based customisation because recolouring is much simpler than having to redraw entire features (such as face shape or hairstyle). And some indie studios are able to use these kinds of options to lower the bar for including customisation to something manageable for their studio.

And that's why it's absolutely within reach of any bigger studio that wants to invest in it but may still be out of reach for some smaller teams who lack resources.

So. . .for the curious. . 

How exactly does the game put these nightmare images from the folder above together into a cohesive image for the player? 

It really works like any composite image (that is, a single image made up of multiple other images). The images just layered on top of each other in the correct order (base, Morgan's skin, Morgan's eye, Morgan's eyebrow, Morgan's hair) through specific code-based instructions.

When we include character customisation we use a coding element called a "variable." A variable is just a value that can change or that has the potential to be different things.

So for all of Morgan's customisable features there is a corresponding variable. "haircolor", "skincolor", etc. We just define these in the code and set a default for them.  It looks like this in the code. It's literally just one line for each variable.

Then, when the player selects the features on the customisation page, each button you push will change the value of these variables. Basically you are telling the code that instead of haircolor = "hair7", maybe haircolor = "hair1".

This means that in other scenarios, we can associate specific values (like "hair1") with displaying specific images.

This is exactly how the CGs work.

In Morgan's CG code, we create a layered image for the CG. 

First we tell it to always use the base image. The base image includes any background elements - and, usually, the love interest is part of the base image as well. We obviously want this image to show up no matter what. So we "always" show that image.

Where the code gets interesting is in the next bit. Now, there's a little bit of variable shenanigans happening here because of the gallery where CGs are saved. I have to create new variables and do some variable magic elsewhere with them so that when you unlock a CG, it can show up properly in the gallery and won't get messed up even if you start a brand new game and pick a different appearance for Morgan.

That's a little complicated and I don't want to get into that in detail. I just wanted to explain why the CG has different variables than the ones I showed earlier.

So what the code is really doing in this red highlighted section is just telling the game "Hey, if this variable has a value of "skin1" then use this particular file. But if this variable has a value of "skin2" then use this other file. But if it has a value of "skin3" then use this other file.....and so on."

And each file listed for that conditional statement corresponds to the correct skin tone. 

The CG code will do this for every visible and customisable feature the MC has.

Then, when you encounter this image in the game, Renpy quickly runs through the list of statements until it finds the one that is true. And it uses the files the code tells it to use, layers them in the order they're listed...

And you see a nicely composited CG with the appearance you've selected for Morgan.

What you can see is that with the use of variables, I don't have to try to save hundreds of CG combinations. I just save the individual components and the code itself creates the composite image with the correct combination of files.

This code isn't even all that complicated - it probably is for an inexperienced coder, but for someone who is experienced, they would look at my code and come up with five better and easier ways to do it.

There are a lot of working parts to setting up this type of customisation. And it does take additional time. I spend several additional hours per CG that shows Morgan than I do for the ones that don't. 

If Morgan isn't in a CG the art is very straightforward to draw. I save one file and there's one line of code to set up the CG.

For CGs that do show Morgan, I have to be really careful about how I set up the art file. Everything has to be organised into clear layer groups that are designed carefully so they'll layer properly in the game. I have to take a lot of consideration when it comes to what is going to have to layer over what in the final composite image. Once I finish the drawing and rendering, I have to go back and make all the recolours, which doesn't take too long (maybe an extra hour or so of work?) but is still additional time spent on the CG.

Then I have to save all the files manually and make sure they're named in a logical way. CGs that have Morgan will need up to 30 individual files now that I've reduced the eyebrow options. These all have to be coded and take up to around 60 lines of code vs just 1.  I have to create new variables and do some extra things to have the CGs show up in the gallery properly as well.

I also have to do extra testing to make sure things are showing up okay because there's a lot more opportunity to make mistakes when you are doing that much code and then you have a CG where Morgan's eyebrows are missing or some other silliness.

So coding also takes a bit of extra time.

The more I do these CGs, the more I learn ways to streamline the process and make it faster for myself.

It would be especially manageable if I had a bigger team instead of being a solo dev but it's totally doable for me as a solo dev as well.

I think maybe I'll do another post where I show what the recolouring process is like. Maybe if I can find a way to do a speed paint or recording it would be more interesting than just screen shots? I don't know. I'll have to think of different ways I can show that process for those who are curious.

I hope you found this an interesting look at the "behind the scenes" of how customisation works in the CGs and the messy way the images look before the code makes them all pretty for you. LoL