Separate data from view in HTML?

richy

My application is a game built entirely from HTML - it's just a set of screens (i.e. divs) with buttons, text and static characters as images. It's a 'single page' app where these screen divs are shown/hidden to move around the app.

I'd like to add animation to my characters - Spine seems like a good choice, but the API tightly ties data to the component that's going to display it. I.e. you have a div and pass that into a constructor, so you can only show an animation in that one div.

I have lots of divs spread across lots of 'screens' (i.e. top-level DIVs which represent a whole screen) - I'd like to associated players with all this divs, and then say 'play this', passing in a pre-loaded animation.

Is that an option here? Or is Spine just the wrong choice for my application?

I know I could just move one div around by reparenting it but that would be a bit of a nightmare to manage.

Nate

Are you looking at using spine-player? It uses spine-webgl. Browsers have limits to how many WebGL contexts you can have on one page. I don't know if that is published or how it varies across browsers or on mobile. Probably it's 8 or 16, but 4 is probably a safe number.

The only workaround is to add/remove canvases to ensure the eg 4 you are allowed are the only ones you need. We do that on this page:
http://esotericsoftware.com/spine-demos
As you scroll, the canvases for off screen demos are reused for other demos. If you zoom out an extreme amount you can see them being juggled around (the black demos, where there aren't enough WebGL canvases).

Each WebGL context has its own resources (textures, etc) and they cannot be shared with other contexts. This could mean loading the same data multiple times.

spine-player can at least avoid downloading and parsing the same resources multiple times. Here's an example:
http://esotericsoftware.com/files/blog/4.0-released/blog.js
The page using that code:
http://esotericsoftware.com/blog/Spine-4.0-is-here

These complications come from browsers, so not using Spine isn't a workaround if you want to use WebGL, which gives you a huge amount of accelerated graphics power. Otherwise you can use spine-canvas which uses HTML5 canvas (not to be confused with WebGL canvas, which both use the <canvas> tag, yeah I didn't invent it!), but this isn't as powerful and has some limitations described here:
EsotericSoftware/spine-runtimesblob/4.1/spine-ts/README.md#spine-version
Feel free to test if our experimental mesh rendering works well enough for your use cases. Otherwise, not being able to render meshes with spine-canvas is a pretty big drawback. Done carefully you can still make great looking animations. Here are some examples done with Spine Essential, which doesn't have meshes (or constraints or physics):
http://esotericsoftware.com/files/Gamasutra-Carlos-Cavalcante-Tips-to-create-funny-and-juicy-character-animations-with-Spine-basics/

richy

Nate Thanks for the reply!

I really don't care if I'm using WebGL or HTML5 canvas - I just want it to work! 😅 Sounds like that means WebGL.

So it sounds like my best option is to use a Downloader to cache my data, then immediately before showing a screen I need to create a canvas and a spine-player configured using the character I want to show. Then when that screen is left I need to delete the canvas so the player is collected.

Nate

Yep, that can work! You can also keep the canvas around to reuse, especially if you can reuse the textures that it loaded.

richy

Nate That would only make sense if I was showing the same character twice in a row, right? Typically I'll be showing a different character each time.

I guess ideally I'd have all animations for all characters in a single file, but my artist has already said that would be a pain to manage in the editor.

Nate

The data for each skeleton is exported to a single file. It is common to use a single skeleton for multiple characters using skins. In that case you could use the same data and possibly atlas that are already loaded. If not, then reusing the canvas may still make sense, as a WebGL canvas is pretty heavyweight. I'd start without reuse and see if the canvas initializes quickly enough.

richy

Just to close this thread - I got this working by destroying/recreating players within my app and that's working fine for the three places I need players. Fortunately in my app I am able to preload the players while they are still offscreen (most of the time), so it's pretty seamless. Thanks for the help!