Using layered/"paperdoll" sprites?

[Snowbadger]

Hey, everyone! First post here.

I've been tinkering with Love for just a few weeks, and I'd like to eventually implement character customization while still using sprite sheets (i.e., keeping the body, clothing, hair, etc. on separate layers to be able to mix and match them).

Any suggestions as to how to go about this? I'm liking anim8 so far and I've started looking into using STI as well, so is there a way to do this using those libraries?

[Jasoco]

You could either use Canvases or Image Data I guess to composite the finished customized sprite and then use that as your sprite sheet.

[zorg]

I actually implemented this once before; i took the following approach:
1. Had an image file containing a spritesheet; x axis contained the frames, y axis contained the various parts that made up the sprite (head, torso, pom-pom, etc.), and all of it was grayscale.
2. after the player customized their appearance, the game "baked" together the spritesheet they would be using ingame, so it wouldn't have to composite and color all 12 different parts each frame. (drawing the whole character once is faster than drawing the parts 12 times, naturally)
One thing you might keep in mind is what blendmode you want to use to mix the color in with the parts; additive might work, but that will never darken to black when the chosen colour would be 000000 (black); also, you could implement transparency this way as well, though only if it makes sense to you; i personally find it funny to see floating heads on the gamefield

[bobbyjones]

It might be easier to just color code the sprite before hand. Like the shirt is black and everything else is red. So you take the imagedata and when you want to change shirt color you just change every black pixel to the shirt color. And the same can be done for all the components. It wouldn't be the fastest but it could be done using threads and it could actually be pretty cool. Oh wait the point isn't color. Yeah just animate every shirt and every pants style and etc you have

[Snowbadger]

Wow, it didn't even occur to me that it's possible to generate a custom spritesheet like this. I was dreading having to juggle spritesheets of every component for every frame. Yikes.

I'd prefer to avoid canvases due to reading about their limited compatibility, but that does seem like the easiest way to go about it. Especially since I guess I'm running into this same issue here with trying to combine image data: viewtopic.php?f=4&t=12583

Thanks for pointing me in the right direction, guys! (Those coloring suggestions may come in handy too.)

[T-Bone]

I think current (or future? I forget) versions of Löve guarantee Canvas support. It's safe to assume they will work.

[bobbyjones]

The next version.

[FLÖRGEN]

If you are worried about canvas not being compatible then you could use

Code: Select all

love.graphics.isSupported("canvas")

and if it's false do another method else use the canvas method.

[Snowbadger]

I think current (or future? I forget) versions of Löve guarantee Canvas support. It's safe to assume they will work.

The next version.

Well that is awesome news. Thanks for the heads-up!

If you are worried about canvas not being compatible then you could use

Code: Select all

love.graphics.isSupported("canvas")

and if it's false do another method else use the canvas method.

True. I doubt I'll have my project finished before the next version of Löve rolls around, but I'll keep this in mind!