Sign in to follow this  
komali2

Asset management with Spine on the Web

Recommended Posts

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).

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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? 

Share this post


Link to post
Share on other sites

@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( ... );

 

Share this post


Link to post
Share on other sites
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!

Share this post


Link to post
Share on other sites

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 :)

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.