create graphics asset, that can be used for different team colors

Question

I'm making a 2D game, where some graphics assets must be used with 2 user-selected team colors. What workflow do game developers use, so that the graphics artist only need to draw each asset once, and the code allows the end-user to choose two team colors, that the asset will be rendered in.

Notice, that each color may be draw with antialias to the background (transparent), or to another color.

Rendering is done with OpenGL

Answer 1

If you only want solid colors, you can pass in colors alongside each vertex, pass the color from the vertex to fragment shader, then simply setting the fragment color in the fragment shader to that value.

If you want to use textures that can be colored or some other more complex scenario, you need to use mix with the vertex color and the texture color.

Answer 2

The most common/simple approaches would be:

1. Use a shader and a second alpha channel, apply the team colour (in varying amounts based on alpha channel) at draw time. This extra channel is wasteful however, and depending on your use case shaders may not be appropriate
2. There presumedly aren't thousands of teams, so you could just precalculate sprite sheets per-team using the same method as #1 but - eg. - at application/level startup. The memory overhead for this is negligible, and the performance impact is nil

NB: In your source sprite you likely want a neutral colour wherever team colours will be so that the blending works correctly.

Example of #1 / #2 in shadertoy: https://www.shadertoy.com/view/ssc3WM

Notes re. example:

1. This example generates a "team alpha" in the Buffer A tab, but this could just as easily be authored manually.
2. I added a colour cycle just to more clearly demonstrate that the team colour is dynamic

Whether you choose to do it in realtime, or precalculated - the method is the same:

// Team color (eg. RED)
vec3 teamColor = vec3(1.0, 0., 0.);

// Pixel color of the original sprite
vec3 spriteColor = texture(/* your sprite texture */, uv).xyz;
// Get just the red component of our black and white mask input
float teamAlpha = texture(/* your team mask texture */, uv).x;

// blend the original sprite with the team colour, based on the team alpha 
// and (optional) "intensity" of 0..1 (allowing you to turn down the blend)
vec3 col = mix(spriteColor, teamColor, teamAlpha * teamColorIntensity);

EDIT: adding screenshots from the shadertoy example since it was questioned whether blending and antialiasing works (it does).

Note that the team mask has varying alpha, so is doing blending - shadertoy doesn't allow uploading images so we're stuck with nyan cat

Here's the same shadertoy with linear interpolation active, note that the blended crumbs' edges and body receive varying amounts of the "team" colour

---

Visual example in case the shadertoy eventually vanishes:

Inputs:

Result:

(*forgive my cruddy pixel art, look at the Shadertoy example for a better demo)