Цей сайт найкраще переглядати в сучасному браузері з включеним JavaScript.

Problems with the spine-js

ypmits

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.

bp74

This is just a guess. Do you use the spine-js without another library? First of all i think that the renderer of spine-js only supports RegionAttachments but no MeshAttachments because they are hard to render with simple Canvas2D draw methods. So probably you are using a different library on top of spine-js which supports MeshAttachments. This library may use a different AttachmentLoader which does not support loading meshAttachments?

Btw. if you are coming from AS3 and you want to do some browser stuff, i highly recommand to take a look at this:
https://github.com/bp74/StageXL_Spine

Disclaimer: I'm the author of this runtime, haha. The Spine runtime for StageXL is a port of the AS3 runtime.

Nate

As bp74 mentioned, spine-js by itself doesn't render. spine-canvas.js does, but it does not support meshes because that is difficult with the canvas API. Even after updating to v3 this will remain true.

ypmits

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.

bp74

You are right, we need better tutorials to get started and i can understand how hard it is to make everything work if you don't have any experience with it. I will try to improve here. Btw. you don't have to use TexturePacker, you can actually use the texture atlas exported by Spine directly in StageXL. All you have to do is load the TextureAtlas with the LibGDX texture format. The samples contain this code so could give it a try (all examples have a "atlas1" and a "atlas2" texture atlas - the first one is the LibGDX texture atlas exported from Spine and the second one is the texture atlas from TexturePacker).