Nested sprites/images ...


I’m sketching out a new mobile app to replace an aging (1990s!) Windows program… I’m new to Solar2d, indeed to any front-end UI - my skills and experience are in back end server code, so any advice would be appreciated. Solar looked easy to use, and I’m working my way through the tutorials, and I think I can do most of what I need to.

However… my issues are to do with the graphics. Each “scene” is made up from between 5 and of individual graphical elements. The old code uses a bespoke image format, which contains multiple frames that might be selected as different orientations, moods, etc., or as components of an animation sequence… or both! I’m familiar with the format, though, so can access what I need from them.

My question, problem maybe, is this - each frame can be made up from multiple individual bitmaps, so, e.g., an avatar might use a bitmap for the torso, two for arms, two for legs, etc, applied in layers. This saves space as each bitmap might be used by multiple frames, only swapping out say legs in different positions for the walking animation. I can flatten these into a PNG, say, if necessary, BUT they also can have anchor points between the bitmaps, so that that avatar might hold an object, and the arm passes in front of the held item, which is in turn in front of the torso… The held object might, in turn, have other objects somewhere in it’s layers, ad-infinitum…

I have working code (in PHP) that can assemble a scene by running through the objects and plotting the bitmaps, back to front, recursing into other objects as necessary. This currently involves me reading the original image files, locating the individual bitmaps and structure details, and calling plotBitMap with the relevant sequence of bytes plucked out of the file. I was assuming I could do something similar, but I’m running into the age old problem of not knowing what to search for, or if it’s even possible. Can I use an image in the form of data in a string, or do I have to read from a file? Do sprites support layers and nested sprites? Or do I have to ignore them and construct things myself at a low level?

Thanks in advance for any advice, pointers to documentation, etc…

It depends on how complex your animations are.

Probably the simplest way to accomplish this would be to create a new display group and then add all those images to that group. This way, you can position the objects fairly easily and they’ll all move in tandem when you move the display group itself.

If you have still images, then you could use either sprites or newRect with custom bitmap fill. If you have animations, then you’ll probably want to use sprites with sprite animation.

Now, if you have more complex skeletal animations, then you might want to take a look at Spine’s Solar2D runtime.

Not sure if this helps, but please have a look at the attached project … i don’t really remember where i got it from, perhaps from gethub … it is based on Spine Exported sprites…

i was amazed when i saw it … you can create really cool graphics using it as long as you have someone who knows how to use spine properly which exports to Solar2D seamlessly

just run the simulator and using the mouse click each sprite it will immediately show the next animation (2.4 MB)

@XeduR …didn’t notice that you already mentioned it :slight_smile:

Thank you both; that’s given me something to look at and some tactics to try :slight_smile: