[Javascript] Using direct images instead of Atlas sprites

Ddelzz · 24 Şub 2015

Hey,

First of all, great tool - since I bought it cant stop playing with it, great job!

Basiclly, I'm trying to run the Spineboy animation on a pure Javascript canvas without any frameworks (without pixi / turbulenz etc) - The only lib used is Spine.js v2.1 - latest from your github runtimes.
I would like to do so using all the 27 images of Spineboy without the Atlas nor sprite. Which gets really frustrating and I think would be great help to have it as an example.

My current issue is with spine.SkeletonJson() which expect the first arg to be an Instance Atlas.

So I went ahead and created a mock with all the data required:

// @see: running demo http://jsfiddle.net/delz/veddo2sb/
//based on other spine-runtime examples.

With the fake fakeAtlas I see some progress, but now i'm facing new issue as I'm failing to get the proper position to render on the canvas, I see all the images being rendered in wrong positions (but moving around! - rotation seems to be ok!)

Is there a way to automatically calculate translate+scale via the existing lib?

I've search all around, tried almost every example out there and posting this is my last resort.

Thanks for your time and effort,
Delz

Søren · 24 Şub 2015

I'm sure Nate or one of the other resident coders on the forum will be able to help you out. Sadly I'm no programmer so it's mostly greek to me.

Ddelzz · 25 Şub 2015

Thanks for the response.

EDIT: I've managed to make few more changes and not use computeVertics, it's more or less placed but not perfect. It now takes the bone.worldX and Y + general offset in the big canvas but some object are missplaced.
fiddle: http://jsfiddle.net/delz/veddo2sb/

Thanks,
Delz

Nate · 25 Şub 2015

Hey this is cool! Being able to render like this, with just canvas and without any libs, would be great.

When you need to draw as rectangles instead of computing vertices it becomes limited, specifically you can't support non-uniform scaling, which can distort attached images to be a rhomboid shape. This isn't typically a huge problem though.

Jumbled mass of images that animate but not quite in the right place? Welcome to skeletal animation! This always happens because if it isn't exactly right, it's completely wrong. I've rewritten it:
http://jsfiddle.net/veddo2sb/1/
Not bad for 100 lines of code!

I made a spine-canvas.js file:
https://github.com/EsotericSoftware/spi ... r/spine-js
And an official demo:
http://esotericsoftware.com/files/runti ... s/example/
Using it looks like this:

var renderer = new spine.SkeletonRenderer("images/");
renderer.scale = 0.6;
renderer.load(spineboy);
renderer.state.data.defaultMix = 0.4;
renderer.state.setAnimationByName(0, "walk", true);
renderer.state.addAnimationByName(0, "jump", false, 3);
renderer.state.addAnimationByName(0, "run", true, 0);
renderer.skeleton.x = 320;
renderer.skeleton.y = 450;
renderer.animate("canvas");

Ddelzz · 25 Şub 2015

Ha, Nate - great job!

Looks amazing.. thank you very much, I'll go over this now and find what went wrong there.

Btw, is there a reason you use this odd Atlas thing instead of a generic JSON?

Thanks again, saved me a lot of headache and time

Delz

Nate · 26 Şub 2015

While JSON is generally easy to parse in most langauges, parsing it isn't generally the most efficient thing in the world, as the result is an object graph that you then need to translate to the actual object graph for the atlas. There's nothing evil about a simple line based format.