Hi!
I’m looking for tutorial recs for doing 2D character customization. Stuff like having color sliders for the skin/hair/eyes, choices of features like hairstyles and eyes, and possibly clothes/weapons.
I haven’t done game dev in a while and the previous games I worked on did not have any level of character customization, so I’d really appreciate good examples/videos. I learn better when I am able to either pull it apart (which I can do with code) or when it’s laid out start to finish. While I understand the basic ideas behind how character customization should work, I’m not able to sort it out easily alone because my brain gets stuck on the fact that I don’t know what the first step(s) are. Like, if I just wanted to change the color of the eyes, how would that work? Do they need to be separate from the rest of the character? If they’re separate, how do I attach them? Do they need to be drawn grayscale? How do you save the new colored eyes, etc etc.
The game I’m currently planning is top-down perspective and I had planned on using Aseprite to draw everything.
Thanks!
There are several different approaches and it depends on your other requirements.
-
grayscale tint & separate sprites- this requires no special shader since SpriteRenderer allows you to change its .color property. Each piece, however, needs a different renderer and GameObject which could add up. Arrange are placed SpriteRenderers over one another. This is better if you want / need transform-centric keyframe animation like so Making animations with Unity 2D (1/2) — Pixelnest Studio Stylistically though if you go with this you probably want universally black eyes (and make other standardizing art choices) because otherwise you could have a complicated mess of renderers.
-
modify textures - this may be better if you’re using spritesheet animation or would have too many different SpriteRenderers to be practical but with the drawback of potentially different textures increasing memory and draw call requirements, if you plan to have many characters customized in this way. If it’s just a customizable player character then it won’t be a performance concern.
-
shader: hue shift - select one color w/in a range and shift its hue via shader. 1 color varies. Perhaps you have a texture with eyes that are magenta that you then shift to brown, blue, green etc. The whites and blacks of the eyes stay put, unlike for grayscale tint where the iris would need to be separated.
-
shader: RGB colorize - 3 colors of different values. It’s a simpler shader than hue shifting but requires source textures to be drawn in RGB only. Break your character into different sprites so you can cover customization 3 colors at a time.
-
combination: some combination of the above
-
others: this isn’t an complete list since even 2D projects vary widely. Some projects have very complicated characters which may require more care than slapping some SpriteRenderers together.
How to save? Well depends on which one you’re going with but you could conceivably just save the color of each customizable thing in a simple class. Then when you generate the character, whether it’s by modifying some texture or setting a .color property, you apply the various colors contained in that class onto the the texture or renderer. Your UI with sliders modifies the properties of that class, which you can serialize to disk or translate into showing a preview of the character.
There’s no obvious “this one is better always” - pick one that’s appropriate for your project.
1 Like
Since you wanted tutorials here are two.
Keyframe animation - just imagining tinting different character parts from grayscale to something else:
Spritesheet modification but uses a blended approach:
1 Like
