Swatch Magic
Several weeks ago we shared a couple of blog-posts looking at the process we take, from initial design through to game art. (Read it here if you missed it) As part of that, we touched upon the swatch texture system we use, but in hindsight, I don't think we did it justice. Without doubt, it's one of the most liberating aspects of our art creation process, so we thought we'd dive a little deeper and give it its own blog-post. OK, buckle up!
Firstly, what is it exactly? Well, it's our method for texturing everything in the game, which basically means it's how all the characters and the environments get their 'colour'. Those of you familiar with texturing will know that UV-ing (the process of applying textures to polygons) can be very time consuming, particularly for complicated objects. This is because textures normally have a lot of detail in them, like this:
A texture from Ghosthunter, a game we worked on a long time ago. Modern games actually have more textures, with specific information in each one; Normal/Specular/Roughness/Albedo/AO... you get the idea :/
So typically the UVs need to be done in a such a way that the texture isn't stretched or distorted when applied. Doing this properly and efficiently, so that there is no wasted texture information is a dark art and something that our system neatly sidesteps.
Instead of a lot of texture information, we rely on block colours. By this I mean a colour without any variation or graduation - literally just one RGB value. When you have enough of these it's possible to give the appearance of detail, whilst retaining a very clean and graphical look. For example, this suitcase uses 8 colour blocks for the case, and six for the stickers on top:
This approach also applies to larger environments as well, you just need more swatches. Typically though, we still only need one texture per environment. As you'll see, a lot of the swatches are subtle value shifts of the same colour. We do this to maintain a harmonious palette, whilst also giving us enough variation to apply lighting information to shapes.
Because the colour blocks are only one colour value, it is impossible for the UVs to show distortion. This means they can be mapped incredibly quickly. The UV layout doesn't look as pretty, but the time savings make it well worth it.
Another big win is that it also allows us to do large scale colour shifts for whole environments by applying filters, so we can quickly test out warmer or cooler colour palettes. In certain instance this can be effective enough to change a setting to a whole different time of day. Or, if more colour precision is required, as was the case with the exterior, it's still very quick to go in and edit the swatches once they're all in one texture. You can see how similar the two textures are here:
The characters use this swatch approach for 90% of their texturing as well. The only difference is that we add some larger 'detail swatches' for any specific patterns, like Tove's hoodie, or her badges:
Tove's character model actually has a lot of intersections. Traditionally this would make texturing very hard, but once again, our system does us a massive favour. The lack of texture detail combined with flat shaded lighting means it's impossible to spot the joins. Result!
Pretty impressive huh? Here's a summary of the 4 big wins;
- Quick to author (no complicated UV-ing)
- Very memory efficient - typically one environment texture per scene
- Quick to make global colour changes to a scene or character
- Allows us to intersect geometry more liberally, which saves a lot of time
So all in all, we're very happy with this approach. Hopefully you like the visuals it produces as well!!
Until next time,
Tom & Alex