Recolouring assets with lazy unwrapping!
Hey it's me, Rebecca!

I thought I'd show off a bit of a behind-the-scenes look at how I'm handling runtime asset recolouring with lazy unwrapping!

If that sounds boring to you, well I suppose you can just look at the gifs. For everyone else, here's some things!

If you're unfamiliar with lazy unwrapping, it's the system we use to texture about 90% of the assets in ooblets. It involves quickly placing UVs on a series of gradients or solid colours without needing to actually unwrap the asset. It works great for simple art styles and it's SUPER fast and easy and saves us a lot of time.

I even use the exact same system to generate recoloured variations of assets at runtime in the game! An example is this is... HAIRDOS!

Here's the swatch I use for all hair-styles:

Any UVs in the upper section of the swatch are hair, and anything in the lower section is not hair (so hats, hair clips, hair ties, etc).

The hair shapes are all stored in the game data as black hairstyles, and at runtime if the player chooses to have red hair or green hair, we just move any UVs in the upper segment across the swatch so that they're in the correct segment.

And here's how that's handled in code:

Why not just use a shader? A couple reasons:

  • A complicated shader is more expensive for the GPU every time the hair is rendered, whereas creating a new mesh is only (additionally) expensive for the CPU for a few milliseconds
  • I didn't want to have to handle multiple meshes and/or submeshes for the hair and hair accessories
  • Swatches and gradients give me better control over the colours on the hairs, and allow me to do things like fadey-dye-colours and rainbow effects!

I also use this same system in a few other player-customization systems. e.g. house-paint!

Thanks for checking this out and lemme know what you think!