Best way to organize modular character sprite sheets (SOLVED)

Questions
#1

Hi all! I have a question about the best way to structure a game object comprised of multiple modular sprites.

I have a base spritesheet that is animated frame-by-frame via a script. I also have several optional spritesheets, with the same animation frames, that should be drawn over the base sprite. Each is a different hairstyle or outfit that characters in my app might have. Because of the frame size of these animations, all these sprites cannot fit in one atlas (it’s not a pixel art style). Spine isn’t an option because the animations are drawn traditionally.

What would be the best way (for performance, ease of modification in the future, and general ‘best-practiceness’…) to unify all of these atlases into sprite objects inside a go or collection so that I could write a simple function – setAppearance(hair#, hairColor, outfit#, outfitColor, ...)– that will them toggle on or off?

The approaches I’ve considered so far are:

  1. Include a different sprite component for each atlas – hair1, hair2, hair3 etc – inside the main character go/collection, then enable or disable them in init()
  2. Make gameobjects for each individual hair and outfit style, then create a factory for each inside the main character go/collection. Use factory.create() on the appropriate hair and outfit factories for the desired hair, outfit, etc.
  3. Maybe there are other options I’m not experienced enough to know about!

I found a few old threads that have similar questions, but no definitive answer that fits my situation 100%. I’m a little hesitant to move forward since it will be a lot of setup work, so I want to make sure I’m headed down the right path first! Any advice will really be appreciated :blush:

2 Likes
#2

Hey Ced,

You shouldn’t need a separate sprite for each atlas. If you have 10 “hair” atlases, for example, you should be able to add 1 sprite to the game object and then use:

go.property("my_atlas", resource.atlas("/atlas.atlas"))
function init(self)
  go.set("#sprite", "image", self.my_atlas)
end

make a new property for each atlas you will need to use
if all the images/animations within the atlases are named the same, you can simply switch between them by go.set. I would likely make a table, something like:

self.hair_styles = {
hash("hair1"),
hash("hair2"),
hash("hair3")
}

for the animations names, and then call them up with

msg.post("#sprite", "play_animation", { id = self.hair_styles[1] } )

6 Likes
#3

Brilliant, that’s just the sort of thing I was hoping for! Thank you so much for your reply :grin:

I had seen that property in the sprite docs but didn’t really understand how it worked. Just did a quick test and I think it’s perfect for my situation! Thanks again.

3 Likes