#Coloring 2D sprite parts

1 messages · Page 1 of 1 (latest)

sour sluice
#

We might've gone a bit overboard for our first game and decided it would be necessary to be able to change every part of character sprites during runtime for maximum customization. Think grid-based, side-view sprites with different body parts and equipment that can be mixed and matched into different types of humans and creatures.

I eventually came up with a "functional" pipeline involving a customized PSD Import script and assigning many many sprites to different sprite part SOs. Each part goes into a body slot and contain a list of animation poses which in turn contain a list of sprites that are bound to a render layer. During rendering, those body parts are sorted out, placed onto SpriteRenderers, then collapsed into a RenderTexture I can manipulate with tint and opacity.

This has been going well so far, but now we hit a new wall when it comes to coloring those different parts (e.g. skin, hair, outfit). I'm not sure how to proceed from here on out and which solution would be easiest. I know it probably involves color masks/maps and shaders but I'm lost.

I tried a quick shader test but I'm either not doing it properly or it's not going to fit well with the painterly-style of our sprites.

Any advice welcomed.

#

I feel color masks (e.g. a mask for each color part on each sprite part) might work, but I feel like that would add even more sprites to assign to an already huge list.

#

Tinting the SpriteRenderers or importing different colored sprites also aren't viable solutions

onyx narwhal
#

Well there's secondary textures
which are associated to the sprite in meta data and which can be directly read by the shader

#

With the help of those or alternatively to those you can also do color lookup or "palette swap" shaders in which one texture's color map is used as coordinates to look up colors on a palette texture

#

Just using a secondary texture as a mask using the available color channels is likely easier

#

Palette swapping is somewhat tricky to do quirklessly

sour sluice
#

Thanks for the tip 👍

I went to look up how to setup secondary textures with PSD Importer and it seems the best way to implement that into our pipeline would be duplicating the PSD and converting that one into a color map. As long as both get updated at the same time, we should be able to make a new texture that uses the main imported texture with the color map texture as secondary for the color map

#

I hope that won't be too much problem for our artist...

#

Hmmm, but wouldn't an RGB color map have the same issue as a greyscale map when it comes to shading? Then the only real solution would be palette swap with cell shading...

onyx narwhal
sour sluice
#

Like, unnatural shading e.g. not yellow/blue tinted... I'm not much of an artist so not very good at explaining it lol

#

From what I understand, RGB color mapping is the same as combining 1-3 greyscale masks on the same sprite to color each individually... Might just be simpler to split each colored area into its own layer (and therefore sprite) and use greyscale

#

Since my script already combines sprite parts in the SO

onyx narwhal
#

I don't know what kind of color blending you're thinking of but if you have a color mask texture, meaning each color channel is its own greyscale mask denoting the area to color in

#

The coloring in part you can do using blend mode or any method you want

#

But because the mask only indicates the area to color, you're not locked into any one method

#

Which you can use together with color lookup / palette swapping, which is an alternative to color blend modes because it recolors the texture in a very specific way

#

It doesn't sound simpler to produce a whole new stack of sprites instead of just one mask you can use in multiple ways
But with a stack of sprites you can (and have to) color each of them manually

#

Cel shading as far as I know refers to a style of light shading and outlines, I don't see the connection here

sour sluice
#

We were watching a shader tutorial for pixel art so it gave our artist the idea to use cel shading for palette swapping instead of using painterly style where colors and mixed together and not as easily replaceable as pixel art...

I'm a bit lost when it comes to blending... I'll have to take a look into it more

onyx narwhal
#

In the end you've got a few different ways to recolor sprites, and a few different technical methods to go about it
Some technical methods are less suited for some types of recoloring and some are more, and it takes a bit of experience or trial and error to know which one's which

#

Also, the associated workflow ease/burden with what you choose to go with

#

Recoloring sprites by hand and juggling them all at runtime sounds like a lot of friction in the workflow

#

A color mask for lerping or blending colors over specific parts of a sprite gives you a huge range of color options just by tweaking shader poperties and authoring a mask per sprite
But it's not easy to do complex or precise recolors, you're mostly stuck to using the blend modes you choose to support in your shader

#

Color lookup / palette swapping is extremely easy for asset authoring as you can freely recolor any sprite that uses a generic palette
But it's not easy to implement in a way that's accurate and doesn't result in visual artefacts

sour sluice
# onyx narwhal What does using cel shading here mean?

from what I understand her explaining, the sprite would be made with a 5, 7 or 9 color palette with sharp edges like pixel art, so it should be easy to palette swap to different skin/hair tones... but then I'm worried about how anti-aliasing would be handled (visual artefacts like you mentioned?) and I'm honestly not sure that's the art direction we should go in anyways so... 🤷‍♂️

#

on the other hand there's full render / painterly style that I understand would have to use the different blend modes... clearly I must've been using the wrong one in my shader test 😅

#

lots of different technical ways to go about it indeed... talking about it helps untangle that mess and split them apart though

onyx narwhal
#

Palette swapping is wonderful but I'd test it out to see if you run into those artefacts, or find them difficult to solve
As shaders don't really ever deal with individual texture pixels directly
Or see if there's some asset for your render pipeline that does it properly out of the box

sour sluice
#

I guess my main concern with the blending approach is that I have no idea how coloring the shading would work so that it's not just a darker/lighter color than the flat color given to tint that part... because then that just sounds like using the color field on a SpriteRenderer which definitely looks way off

#

it would need a shader blend that turns the darker parts of the greyscale into being more blue-shifted and the lighter parts into yellow-shifted

onyx narwhal
#

The color field is multiply blend mode, which is just one of many
And in the shader many blend modes can be used at once and controlled using material properties

onyx narwhal
sour sluice
#

gotcha

#

side tangent... it feels like I'm completely out of my league here 😅 I'm not even sure under which responsibility this would fall under. The programmer's? the artist's? another group?

#

I guess a bit of both