Feels like it’s been a while since my last update. I’ve hit that stage in development where most of what still needs doing is adding the different sprite expressions to the script, writing the rest of the remaining route, and finishing extra bits for the sprites. So what have I done since the last update?

Sprites are the main thing. This time I tried a different approach that I hoped would drastically speed up development time - using RenPy’s LiveComposite. This means instead of having to put together and export a separate image for each different expression (which, as I found out in Metamorphoser v1, sometimes makes for images that aren’t quite the same size when scaled down) you let RenPy do it for you. You export each component of the image separately e.g. body, mouth, eyes, eyebrows, all the parts that you are going to want to edit to create different expressions, or even different outfits, then use LiveComposite to put them together in the game engine. The result is being able to combine the components in many different ways to define new expressions as and when you need to just by editing the code - no more switching back to your image editor and having to export multiple files. Because of this, Carter now has over 30 different expressions so far in v2 because it’s so easy to just copypaste the sprite code and tweak which images are displayed.

Here’s an example of the sprite code:

init:
    $ carter_height = 577 // using variables for these to avoid copypaste errors later
    $ carter_width = 358
    image carter normal = LiveComposite(
        (carter_width, carter_height),
        (0, 0), "assets/images/sprites/carter/uniform.png",
        (0, 0), "assets/images/sprites/carter/eyes_normal_colour.png",
        (0, 0), "assets/images/sprites/carter/eyebrows_normal_colour.png",
        (0, 0), "assets/images/sprites/carter/glasses_colour.png",
        (0, 0), "assets/images/sprites/carter/mouth_normal.png",
        (0, 0), "assets/images/sprites/carter/hair.png",
        (0, 0), "assets/images/sprites/carter/eyebrows_normal_lines.png",
        (0, 0), "assets/images/sprites/carter/eyes_normal_lines.png",
        (0, 0), "assets/images/sprites/carter/glasses_lines.png",
    )

Here are some of the component parts on their own:

Carter hair Carter eyes lines Carter mouth smile

You can see they all have a lot of space in the top left. This is so they align properly when stacked on top of each other, given the top left is at coords of (0,0).

“But supercircuit!” I hear you say, “Why did you separate the lines and the colours for Carter’s eyes and eyebrows?!”. That’s a very good question. Initially I wanted to have lines and colour for his eyes, eyebrows, and glasses on one layer but then I realised because so much of his face is covered by his hair, when I changed his expression, sometimes you couldn’t really see it very well! (Damn it Carter, get a haircut!!) So I decided a decent compromise would be to separate the lines and the colour and put the lines above the hair and the colour underneath it - problem solved! It creates a bit more work in terms of images and code but I think it’s worth it since Carter is a very expressive character so I didn’t want to sacrifice that just to make development faster.

Now, since I’d been making so many different expressions I kind of needed a way to keep track of how each one looks when assembled. This is one downside to using composite sprites - you can’t really tell which expression is which just from looking at the images or the code. So to solve this I made a bit of a hacky sprite gallery where I can cycle through each expression. I took the example gallery code and added this to it:

g.button("carter")
g.image("college_outside_day", "carter normal", "normal")
g.image("college_outside_day", "carter smile", "smile")
g.image("college_outside_day", "carter talk", "talk")
g.image("college_outside_day", "carter surprised1", "surprised1")
g.image("college_outside_day", "carter surprised2", "surprised2")
... etc

The gallery will display the image college_outside_day, then the sprite carter normal, and then when trying to find normal it will throw an error… which is exactly what I wanted. So when it tries to find the image normal that isn’t defined it will show the text “Image ‘normal’ not found” at the bottom of the screen… telling me which expression is currently displayed! Since this gallery screen is only for dev purposes having these errors doesn’t matter too much - all I wanted was a way of knowing which expression was displaying as I cycle through them, which works pretty well and isn’t too annoying to code.

And finally! I made another promo artwork - this time featuring the doc and his terrifying research. I might try to make one of these for each character. We’ll see.

Promo artwork ft. Hamzah