Render Spine animation in DOM with plain HTML/CSS/JS?

praneybehl

Hi there,

I am very new to spine and I am amazed to see what it can do. I found the Javascript runtime here: https://github.com/EsotericSoftware/spi ... r/spine-js , but I am wondering if there is a way to render a spine animation on plain DOM using HTML + CSS + Javascript and "No Canvas". Has someone tried doing it? Is it even possible? If so, it would be greatly appreciated if an example could be provided.

Thanks in advance for your time.

Cheers!

Its amazing 160+ views on the post but no replies. 🙁

jpoag

After looking through the JS spine source and from what I know about HTML/CSS I would say that it's possible to render using CSS3: http://www.w3schools.com/css/css3_intro.asp

Meshes are going to be harder to render. I'm not seeing anyway to render the triangles/mesh data in CSS3. I have found textured quads rendered with perspective: http://www.edankwan.com/lab/css3dEarth but unless you can degenerate the quad into a triangle I'm coming up short...

You don't need mesh support. Just don't use any meshes in your animations.

Nate

Aye, a number of Spine runtimes can't render meshes: Flash (without Starling), Corona, SpriteKit, etc. You can still do a lot without meshes, eg:
https://github.com/EsotericSoftware/spine-superspineboy

I know you said no Canvas, but there is a turbulenz example:
http://esotericsoftware.com/files/runti ... z/example/
This (somewhat dated) PR has a Canvas only example:
https://github.com/EsotericSoftware/spi ... s/pull/123
Other than that, I don't have example code I can show. You just need to extend spine-js to do the rendering using whatever you like. It's a bit tricky to get things positioned in exactly the right place, and your skeleton will generally look FUBAR until it works perfectly.

praneybehl

Thanks for the info guys. Appreciate it

I am still struggling to figure out how to render Spine animation JSON export via CSS + plain javascript (DOM).
Can someone please point me in the right direction?

It would be highly appreciated.

Thanks,
Praney

Nimai

Checking to see if anyone knows of a HTML DOM-only (no Canvas, no WebGL) runtime for Spine.

Mario

There is no such thing at the moment I'm afraid. If you want HTML DOM-only to compose it with the rest of your website, you could actually still use the canvas renderer. As long as you clear the canvas to be fully transparent, it should be easy to composite with the rest of your DOM.

What is your use case for a DOM renderer?

Nimai

I'd read conflicting reports on "sprite" rendering performance DOM vs. canvas. Also, a morbid pursuit of maximal browser support. It's likely that canvas is sufficient, but I wanted to know what the options were. Even Internet Explorer 9 supports canvas. Thanks for the reply!

truelion07

badlogic,
you stated: "As long as you clear the canvas to be fully transparent"

how can i make the spineboy canvas example have a transparent background?

Mario

That's done with plain old browser magic and not spine-canvas specific. Here's a couple of ways, ymmv as with all browser tech. https://stackoverflow.com/questions/4815166/how-do-i-make-a-transparent-canvas-in-html5

truelion07

actually, solution is just this:

this.gl.clearColor(0, 0, 0, 0);