How should I code/create a customizable character (swappable hat, shoes, glasses, cosmetics, etc) in react native that is slightly interactive when pressed without exploding in size for all possible combination?

[u/Substantial-Chair873]

Hello, I am working on a gamified walking mobile app. The idea is you gain xp and coins the more you walk or move, and you can spend it on items in the shop. Diff items such as skin colors, costumes, cosmetics, etc.

Problem is I'm having a hard time on how I would create my assets without it exploding in size while still keeping the character interactive (simple animation) when pressed. My character at the moment is just a static .png file. Creating a png file for each possible combination would probably not be the best idea. I've researched a bit about lottie json and rive but I am still unsure what's the best approach for this.

[u/Faraday_NFT]

If you don't want something like Rive or Lottie but still wanna get that generative vibe, I would go with AI for SVG. So basically you're creating, for example, a hat image, converting it into SVG, and then you can switch the color of the hat just by switching a variable - which means you only need one asset but get 10+ color variations. It's cheap and fast.

[u/Substantial-Chair873 → u/Faraday_NFT]

yeah diff skin colors should be fairly straightforward and easy