Hi there,

So I've got a problem converting my existing animations to the browser.
The animations I made for several AS3 and Unity projects. They all work fine in their own runtimes.
But now I want to use these animations inside my website. So I thought I'd use the 'spine-js' runtime for that. The example of superspineboy works good on my browsers. The problem I have is when I export my animations from 2.1.27 (Launcher: 3.0.05) to JSON, I get a type-error in the browser(s):

[Error] TypeError: this.attachmentLoader.newMeshAttachment is not a function. (In 'this.attachmentLoader.newMeshAttachment(skin, name, path)', 'this.attachmentLoader.newMeshAttachment' is undefined)
   readAttachment
   readSkeletonData
   load
   initSpineKrab
   init
   (anonymous function)
   dispatch
   handle

I don't have a clue where the error lies. The code looks good.
My export-settings are: Extension: .json / Format: JSON
I can sent you an example if you want.

With kind regards,
Dave Lenz - Ypmits Design

So I found out something. I made a small test-skeleton. If I don't use meshes it works fine, but when I do use meshes I get the crash again. Even just clicking the 'Mesh' boolean to 'true' in Setup will cause the 'this.attachmentLoader.newMeshAttachment' error.

Here is the error again, but this time with the important info

1859TypeError: this.attachmentLoader.newMeshAttachment is not a function. (In 'this.attachmentLoader.newMeshAttachment(skin, name, path)', 'this.attachmentLoader.newMeshAttachment' is undefined)
readAttachmentspine.js:1858
readSkeletonDataspine.js:1799
loadspine-canvas.js:57
baseInitSpineItemmain.js:167
buildSpineKrabmain.js:151
initmain.js:17
(anonieme functie)index.html:48
dispatchjquery-1.11.1.min.js:2:8441
handlejquery-1.11.1.min.js:2:5144

And the two JSON-skeletons ("skeletonNoMesh" works, "skeletonMesh" doesn't):

var skeletonNoMesh = '{"skeleton":{"hash":"mz2YSgEtmasULUxjVtRUgpzC13I","spine":"2.1.27","width":429.05,"height":331.12},"bones":[{"name":"root"},{"name":"pelvis","parent":"root","x":0.43,"y":164.63,"rotation":4.2},{"name":"pelvis2","parent":"pelvis","x":-0.43,"y":0.02}],"slots":[{"name":"krab_lichaam","bone":"pelvis2","attachment":"krab_lichaam"}],"skins":{"default":{"krab_lichaam":{"krab_lichaam":{"x":0.99,"y":96.33,"width":408,"height":302}}}},"animations":{"idle":{"bones":{"pelvis2":{"rotate":[{"time":0,"angle":0,"curve":[0.542,0,0.47,0.98]},{"time":0.8333,"angle":6.9,"curve":[0.542,0,0.47,0.98]},{"time":1.6666,"angle":0,"curve":[0.542,0,0.47,0.98]},{"time":2.5,"angle":-12,"curve":[0.542,0,0.47,0.98]},{"time":3.3333,"angle":0}],"translate":[{"time":0,"x":0,"y":0,"curve":[0.542,0,0.47,0.98]},{"time":0.8333,"x":0,"y":-36.2,"curve":[0.542,0,0.47,0.98]},{"time":1.6666,"x":0,"y":8.03,"curve":[0.542,0,0.47,0.98]},{"time":2.5,"x":0,"y":-36.2,"curve":[0.542,0,0.47,0.98]},{"time":3.3333,"x":0,"y":0}]}}}}}';
var skeletonMesh = '{"skeleton":{"hash":"04QHhcxdiAvh6+aRV8IYRiUeRHQ","spine":"2.1.27","width":429.05,"height":331.12},"bones":[{"name":"root"},{"name":"pelvis","parent":"root","x":0.43,"y":164.63,"rotation":4.2},{"name":"pelvis2","parent":"pelvis","x":-0.43,"y":0.02}],"slots":[{"name":"krab_lichaam","bone":"pelvis2","attachment":"krab_lichaam"}],"skins":{"default":{"krab_lichaam":{"krab_lichaam":{"type":"mesh","uvs":[1,1,0,1,0,0,1,0],"triangles":[1,2,3,1,3,0],"vertices":[204.99,-54.66,-203,-54.66,-203,247.33,204.99,247.33],"hull":4}}}},"animations":{"idle":{"bones":{"pelvis2":{"rotate":[{"time":0,"angle":0,"curve":[0.542,0,0.47,0.98]},{"time":0.8333,"angle":6.9,"curve":[0.542,0,0.47,0.98]},{"time":1.6666,"angle":0,"curve":[0.542,0,0.47,0.98]},{"time":2.5,"angle":-12,"curve":[0.542,0,0.47,0.98]},{"time":3.3333,"angle":0}],"translate":[{"time":0,"x":0,"y":0,"curve":[0.542,0,0.47,0.98]},{"time":0.8333,"x":0,"y":-36.2,"curve":[0.542,0,0.47,0.98]},{"time":1.6666,"x":0,"y":8.03,"curve":[0.542,0,0.47,0.98]},{"time":2.5,"x":0,"y":-36.2,"curve":[0.542,0,0.47,0.98]},{"time":3.3333,"x":0,"y":0}]}}}}}';

I really hope someone can help me.

With kind regards,
Dave Lenz - Ypmits Design

Anybody? I know it's somewhere next on the list (https://trello.com/c/tF8UykBM) but It would be nice to have an answer that it will be looked at or something.

Hi there,

Thank you for all the advise. I've used StageXL and it works like a charm. It's awesome to see your animation work on the browsers and even on mobile. I've got a nice writeup planned to show people how to do this.
But here's the thing... it's probably very easy to do all this Dart/StageXL if you are experienced in Dart and web-development in general. I'm wasn't (and am still not)... so I had to find out about a lot of stuff that was pretty boilerplate.. I think StageXL and Dart can do with a few good newbie-tutorials right on the github-page (or linked to it). I know there's some great examples on the StageXL github page but it's not enough to get started. A tutorial which shows a newbie step-by-step what/why and how to do stuff would be really nice. I had a hard time finding out about exporting from Spine wasn't enough and I needed to export from Texturepacker etc. but also how to use this 'pubspec.yaml' if you want to use StageXL and what to deploy and what not. It easy once you know it but with a better step-by-step it could save people lots of time.

But it's working and I'm very happy to see my site come to life. Even on mobile. So lots of thanks for pointing me in the right direction.