How to adjust character editor to separate male/female sprites based on the selected gender

Recently I’ve implemented a simple character editor. Currently, I am able to select sprites of different body parts (for now those are body colour and hair). But these body parts include sprites of the male character. I also have female sprites. All sprites’ names have this structure: bodyPart_colour_gender.

And here is what I want to do and where I need your help:

  • I want to add another selector above the others where I would select the gender of my character. Once female (for example) gender is selected - all other selectors should display only female sprites and vice versa.
  • I want to add additional colour selectors where it’s applicable (hair for example). For example, I have sprites of the same haircut in different colours and instead of showing all of these options in one selector I want to make it work like this: I select a hair type and below it, I select a colour value which automatically changes the currently selected sprite (particular haircut) to the sprite with the selected colour.

Here is my code.

CustomizableElement

public class CustomizableElement : MonoBehaviour
{
    [SerializeField]
    private SpriteRenderer spriteRenderer;

    [SerializeField]
    private List<PositionedSprite> spriteOptions;

    [field: SerializeField]
    public int SpriteIndex {  get; set; }

    [ContextMenu("Next Sprite")]
    public PositionedSprite NextSprite()
    {
        SpriteIndex = Mathf.Min(SpriteIndex + 1, spriteOptions.Count - 1);
        UpdateSprite();
        return spriteOptions[SpriteIndex];
    }

    [ContextMenu("Previous Sprite")]
    public PositionedSprite PreviousSprite()
    {
        SpriteIndex = Mathf.Max(SpriteIndex - 1, 0);
        UpdateSprite();
        return spriteOptions[SpriteIndex];
    }

    /**
     * <summary>
     * Context Option that updates the sprite position if it was set manually.
     * </summary>
     */
    [ContextMenu("Update Position Modifier")]
    public void UpdateSpritePositionModifier()
    {
        spriteOptions[SpriteIndex].PositionModifier = transform.localPosition;
    }

    [ContextMenu("Randomize")]
    public void Randomize()
    {
        SpriteIndex = Random.Range(0, spriteOptions.Count - 1);
        UpdateSprite();
    }

    private void UpdateSprite()
    {
        SpriteIndex = Mathf.Clamp(SpriteIndex, 0, spriteOptions.Count - 1);
        var positionedSprite = spriteOptions[SpriteIndex];
        spriteRenderer.sprite = positionedSprite.Sprite;
        transform.localPosition = positionedSprite.PositionModifier;
    }
}

UI_CustomizationPicker

public class UI_CustomizationPicker : MonoBehaviour
{
    [SerializeField]
    private CustomizableElement customizableElement;

    [SerializeField]
    private Button previousSpriteBtn;

    [SerializeField]
    private Button nextSpriteBtn;

    [SerializeField]
    private TMP_Text spriteId;

    private void Start()
    {
        SetStartSpriteIndex();
        UpdateSpriteId();

        previousSpriteBtn.onClick.AddListener(() =>
        {
            customizableElement.PreviousSprite();
            UpdateSpriteId();
        });
        nextSpriteBtn.onClick.AddListener(() =>
        {
            customizableElement.NextSprite();
            UpdateSpriteId();
        });
    }

    private void SetStartSpriteIndex()
    {
        if (customizableElement.SpriteIndex > 0)
        {
            customizableElement.SpriteIndex = 0;
        }
    }

    private void UpdateSpriteId()
    {
        spriteId.SetText(customizableElement.SpriteIndex.ToString().PadLeft(2, '0'));
    }
}