Asset management with Spine on the Web

[komali2]

We're making a game using Pixi and Spine, utilizing the pixi-spine library (which is built off the spine-ts library). 

Something we've been chewing on: asset management. Part of our game involves having a character that can have many hundreds if not thousands of different, say, hats. 

When we export a spine file, it gives us a asset_name.json, asset_name.atlas, and asset_name.png. We've been dealing with hats by making them a "slot" into which the many different hat "attachments" can fit. However, this means all "hats" are included in character.json, character.atlas, and character.png. Ideally, we could have character.json etc and hats.json etc, or even hat1, hat2 etc. This is because we want to slowly add more and more down the road, and while it's not the biggest problem to have to constantly have clients download new character.png (they may be doing so anyway with updates), ideally that would be longer-term cached, and also not filled to the brim with thousands of permutations of hats, shoes, whatever else. 

What can I start investigating as alternative options? I thought maybe some of the examples for spine-ts would guide me, but they all are just lumped together into massive atlas files and pngs (see their asset folder here).

 

[b10b]

Consider that at runtime pixi-spine is mostly dealing with DisplayObjects / Sprites / Textures.  So one option might be to interrogate the scene graph and swap them out as needed (after the Spine Skeleton has been loaded and put together).  Such a strategy could mean a fairly simple Spine export (a barebones skeleton with a single placeholder skin) which then has its textures replaced on-demand (from any of the thousands assets that may be available from alternative resources).  This does assume one "hat" works in the same way as another.  Performance optimisations and efficient texture packing would still need some thought - coupling with some server-side logic might be warranted.

[komali2]

Hmm interesting - so finding some way to make these different attachments "skeletons" instead? I.e., body skeleton, shoe skeleton, hat skeleton, and then stiching them together in code and hot-swapping textures as needed, as opposed to using slots+attachments? I'll look into it but it sounds fairly complicated, i.e. what if a given "body" animation does funky things to the foot + hat, would we need to program that animation in code-side? 

[komali2]

Disappointingly, reading through the spine docs on texture packing http://esotericsoftware.com/spine-texture-packer seems to indicate this won't be possible in the way I"m hoping. My designer colleague (that's learning the spine editor) says he hasn't seen anything like it... will keep exploring though and update here if I find anything

[b10b]

@komali2 it's possible, but perhaps not readily so via the Esoteric pipeline.  I don't think it needs to be so complicated as to weld different skeletons together (unless different hats do very different things)?  Just swapping the Texture should achieve your original ask.  e.g. crudely:

animations.skeleton.findSlot($YourSlot).sprites.$YourAttachment.texture = new Texture( ... );

 

[komali2]

3 hours ago, b10b said:

@komali2 it's possible, but perhaps not readily so via the Esoteric pipeline.  I don't think it needs to be so complicated as to weld different skeletons together (unless different hats do very different things)?  Just swapping the Texture should achieve your original ask.  e.g. crudely:

animations.skeleton.findSlot($YourSlot).sprites.$YourAttachment.texture = new Texture( ... );

 

Oh snaaaaaap this is glorious! I wish something like this had been documented. Maybe it is and I'm just not seeing it. Still a bit of tweaking to get it work, but this may be exactly what we're looking for, cheers!

[komali2]

Daaaaayum so this worked:

 

character.skeleton.findSlot('body').sprites['char/body'].texture = 
    PIXI.Texture.from('spine/object/test/body.png');

Arbitrary PNGs can be used, this is even better than we could have hoped for! Thanks very much

[bubamara]

@komali2 https://github.com/pixijs/pixi-spine/blob/master/examples/hack_texture.md