Blog: spine-ts released - HTML5 for the masses

Mario

Blog: spine-ts - one runtime to serve all your HTML5 needs!

Please give it a try and spread the word!

Erika

For our final trick, we've created an extremely easy to use widget that allows you to embed Spine animations directly on your website, with zero coding. Just include the spine-widget.js script, add a div or any other element to your site, give it the class spine-widget and specify the .jsonand .atlas file and the animation you want to play.

OMG I LOVE YOU :heart:

This is awesome! I read the overall article and it's great 😃 I bet the modular jump will be loved by those who deal pure code, but on my side I'm really grateful for this last cherry you added (: (I was looking forward to it since the previews in the OT section Spinde WIP Adventures!)
Going to check all the magic tricks in the last link

EDIT
I bluntly rewrote "bunny" instead of the spineboy, then added a skin command and changed the animation, could only make one out of 3 work Q.Q (DUH) and that little guy has artifacts around its parts where there should be a little alpha. I bet the 1/3 working is completely my fault but the artifacts? are there any best practices for exporting the json?

Nate

Are you using premultiplied alpha for your texture atlas?

Mario

Erikari, please send me all the things so I can fix whatever is broken! Artefacts are likely due to premultiplied alpha atlas (which is supported but needs to be told to the widget).

Erika

Uhm I don't remember if I did, I exported that file quite some time ago S: sent the file to <removed>
(I forgot to add it's a 0.3 scaled version of the original if that influences anything in any way)

Mario

dshuta

great work esoteric! i just purchased spine pro a couple of days ago, and this is a wonderful little surprise after the 3.4 recent release. spine feels like it has so much enthusiasm and momentum to it, excited to be part of the spine horde.

nimbling

Woohoo! THANKS!

chrismweb

Was glad to see this on github!

Also glad to see Mario came to the conclusion that Typescript is probably the best "javascript version" to use for someone coming from Java.

I make a ton of small, stupid errors when I code, that in javascript can take forever to track down (a spelling mistake is valid, it just creates a new variable, 100 functions inside each other are valid "classes", the language seems almost completely unstructured, but then again it's still roughly the same from 1996).

But I had also been concerned that before, all the javascript runtimes didn't support any of the mesh animation, so had been hesitating using those features in Spine. Now I can experiment :rock:

Nate

If you haven't seen it, check out the new demos page:
Spine: Demos

Also see the spine-ts docs for the standalone demo files so you can easily experiment.

Erika

Nate escribió
If you haven't seen it, check out the new demos page:
Spine: Demos

Oh I missed those! They are so powerful! O:
Now I can finally make stretchyman into a fine ballerina:
Loading Image
I like the fact that one can play around with them in the browser 😃 it's so interesting!

Nate

😃 You used to be able to do this, but sadly we took it out to reduce the poses that deform incorrectly. We'll always have this GIF though!

Loading Image

Erika

That is SO good one could actually make the next pop music video with it. I hope someone will. (Mario posted it in the OT section XD) Working at Esoteric Software has its funny moments 😃

chrismweb

Very nice! Can't wait to experiment, thanks for the TS demos 😃 (and tell Mario thanks 😉 )

nimbling

Could the canvas version be extended to use SVG?

Html can natively render svg, but there are people converting svg to mesh, too - would that in-between step make it more feasible?
(like this one, for unity: https://www.assetstore.unity3d.com/en/#!/content/38258 )

Mario

The problem with SVG is that it's extremely slow to render actually (if you want 60FPS animation and not just a static image), plus it doesn't quite support the image/mesh rendering we require (textured meshes). So, I'm afraid it's very unlikely SVG rendering will happen.

nimbling

Yes, I understand that part, though my current hopes are on the conversion part:

SVG, in my mind, is "just another vector format" so I guess I should rephrase my question as
"can we import / convert some kind of vector format to mesh in Spine" ?

I'd love to see an import path for SVG's like the linked Unity asset provides, they support making meshes of the SVG.
These, I hope, could then be textured in Spine (if needed).

Nate

Currently the Spine editor only works with raster images. At runtime, you could use the skeleton data and draw SVG instead of images.