Ren'Py Tutorial: Tint your game sprites

So, how’s this for a hypothetical situation: you’re writing your visual novel, and have reached a scene in which multiple characters are on-screen, having a discussion. Since they’re all present in the scene, you’re showing character A (Alice) to the left of the screen, character B (Bob) in the middle of the screen, and character C (Charlie) to the right of the screen. All three characters have roughly the same number of lines, and it’s a fairly casual conversation, so the three of them have sprites showing that they’re smiling. Nothing wrong with this, right?

Well, not technically, but in terms of presentation, it’s a bit bland - you’ve essentially got a static picture of three people standing next to each other, with nothing to change it up too often. In other words, players will just be reading the dialogue, with no reason to look up and take in the visuals. This raises the question: why is this a visual novel, then, instead of a novel?

There are several ways to address this issue and make the scene more dynamic, but the method we’re focusing on is a fairly simple one for now. Namely, when somebody is speaking, they will be in full colour, while non-speakers will be given a dark tint. Aside from making the visuals a bit more interesting, it will also help your players keep track of who is speaking at the moment, without having to constantly check the dialogue box.

Thankfully, this is a fairly simple affair to implement! Firstly, we’ll create a transform that adds a tint.

transform dark_tint:

    matrixcolor TintMatrix("#6d6d6d")

Next, we’ll define an image that implements this tint - in this case, Alice smiling.

image alice_smiling_tint:

    "images/sprites/alice_smiling.png"

    dark_tint

Only one more step to go! We simply need to define an alice_smiling image that uses a ConditionSwitch to determine whether to show the tinted image or not:

image alice_smiling = ConditionSwitch(

    "_last_say_who == 'alice'",

    "images/sprites/alice_smiling.png",

    "True",

    "alice_smiling_tint"

)

All done! As a hypothetical example, let’s assume that you have some code along the lines of the following:

show alice_smiling

alice "I'm so happy that you're here!"

bob "Me too - it's great to catch up!"

Because we’re using show alice_smiling, the sprite will automatically darken and lighten itself based upon who is speaking. No further changes needed!

While the need for tinted sprites isn’t the biggest challenge that you’ll likely face when developing a visual novel, adding them in is nevertheless one of the small changes that can add up to a large difference in the look and feel of your game. If you haven’t tried implementing them before, why not give it a go to see how it feels? And if you’re having difficulty with the tutorial, or have improvements to suggest, then you can feel free to contact me, and let me know your thoughts are.