Jump to content
Search Community

Export from Spine, Animate with GreenSock? More Questions

Kinvert test
Moderator Tag

Recommended Posts

Hello,

 

Please excuse any stupid questions. I'm a Mechanical/Aerospace Engineer building a prototype myself and I have no formal training in this.

 

I am making a web app where users can create a custom avatar. They'll be able to pick from multiple heads, arms, bodies etc, and be able to set colors, positions, and scales. For example they may want their creature to have larger ears angled down like a floppy ear bunny.

 

The skeletons will basically have the same number of joints, but some bones could be moved/scaled.

 

The avatars will need to be animated, and since users can choose from many parts, I need to make sure there is a good workflow. Hopefully we animate this more or less once, and that animation can be applied regardless of which skin. Basic data can be brought in such as arm_scale=1.15.

 

The initial plan is to have everything in SVG. But that said to do everything I want I may need to get this to work in Canvas or WebGL.

 

I have no experience in animating, but I'll probably be the one making the first demo before we bring someone in. This being the case I probably need an easy interface with IK etc.

 

Currently looking at doing the animations with Spine. However it sounds like they don't handle SVGs well, and I don't see a great way to handle changing colors if everything is rasterized. For SVG users could choose any RGB they want and I can update Fill on the fly. Rasterized seems like they'll have fewer color choices, and I'll have to fill the database with many instances of the same leg with multiple colors etc.

 

How does your rigging system compare with Spine? Does your system have the ability to bring in Spine Exports to do the animations? I'm looking at their JSON https://github.com/EsotericSoftware/spine-runtimes/blob/3.8/spine-ts/canvas/example/assets/spineboy-ess.json and I'm hoping you guys have a way to parse this and apply those translations to SVGs.

 

I'm hoping to get this right the first time since at the moment I'm getting ready to set up the database to store what I need. In the long run I see a lot of man hours going in to this, so I'm hoping I make the right choice early on.

 

Also in the long run, we might want the users to be able to control their avatar in small games, or also program their avatars to do things and the avatar would carry out that program.

 

Since this is my first post, if this goes through I'll link to my conversation with Spin for reference in a reply. Don't want the post to vanish.

 

Again, apologies for any stupid questions. This isn't my area of expertise.

 

Thanks!

 

Keith

Link to comment
Share on other sites

Conversation with Spine:

 

http://esotericsoftware.com/forum/Questions-Considering-Buying-Spine-14543

 

I think this is animating multiple characters with more or less the same skeleton and animation:

 

http://esotericsoftware.com/spine-skins#Skin-bones

 

Hoping to do basically the same thing but hopefully with SVG so it's easy for users to assign colors to their animated avatar. I also doubt I can make something look that good manually manipulating bones. I think I need IK etc to help a newb like me. Not sure if you guys have tools to do this, or if there is a way to export from Spine and bring it in to your system to animate the SVG.

Link to comment
Share on other sites

Nah, we don't believe in "stupid" questions around here, @Kinvert. Welcome. 

 

I'm afraid you may not be quite clear on what GreenSock technology does. It's for scripted animation of basically anything that JavaScript can touch. It's typically in the browser, but it's also used in printers, Car UIs, spacecraft mission control systems, video game console UI's, etc. But it is NOT something with a GUI (graphical user interface), nor does it automatically parse JSON files, etc. At its heart, it's a high-speed property manipulator like "animate obj.x from 0 to 100 over the course of 2 seconds with an elastic ease" and it handles all the inbetween states (updating that property about 60 times per second). 

 

It's nothing like Spine. I actually hadn't heard of Spine until today and I had to Google it :) 

 

In short, if you're looking for something like Spine, this isn't a good fit. Sorry. 

  • Like 1
Link to comment
Share on other sites

How long do you think it would take you to take a file like this and turn it in to your tween commands?

 

https://github.com/EsotericSoftware/spine-runtimes/blob/3.8/spine-ts/canvas/example/assets/spineboy-ess.json

 

I can take your estimate, multiply it by 10 (because it will probably take me at least that long), and see if I can get it done before my 2 year old graduates high school.

 

In particular I am referencing the JSON.

 

Sorry I sort of maybe asked questions twice. I think you were responding while I was expanding on my question.

Link to comment
Share on other sites

Creating a script to translate that JSON into GSAP animation commands is probably quite doable, but I don't feel comfortable giving you a solid estimate because there's so much that I don't know about what you're expecting, like:

  1. Is the goal to run this in the browser?
  2. How exactly does the JSON data get linked up to actual DOM nodes? 
  3. Is there a basic demo you have where a minimal JSON file is translated into equivalent GSAP commands that could be used as a pattern? 

It'd take time to dig into #2 in particular to figure out all the mapping of data. It's simple to take the time, properties and values and get those into GSAP commands. 

 

Feel free to post in the "Jobs & Freelance" forums to see if someone is willing to help you out and estimate something. There are some sharp people hanging around in these forums who may be able/willing to help you out for a fee. 

 

Good luck with the project!

  • Like 1
Link to comment
Share on other sites

59 minutes ago, GreenSock said:

It's nothing like Spine. I actually hadn't heard of Spine until today and I had to Google it :) 

 

It's been brought up several times in the past. 😉

 

4 hours ago, Kinvert said:

Currently looking at doing the animations with Spine. However it sounds like they don't handle SVGs well, and I don't see a great way to handle changing colors if everything is rasterized. For SVG users could choose any RGB they want and I can update Fill on the fly. Rasterized seems like they'll have fewer color choices, and I'll have to fill the database with many instances of the same leg with multiple colors etc.

 

Spine doesn't use SVG because they are slow and require more work to animate for bones and joints. If you need bones and joints, you're better off sticking to spine. To change the color, you can use canvas or WebGl to tint your textures.

 

And gsap can be used with spine to orchestrate all your animations. For example this fades in a character and then starts a spine walk animation (using PixiJS).

 

gsap.timeline()
  .from(character, { alpha: 0 })
  .add(() => character.state.setAnimation(0, "walk", true))

 

  • Like 3
Link to comment
Share on other sites

37 minutes ago, OSUblake said:

If you need bones and joints..

I mean to be honest I don't know if I need them. That's part of the problem I'm far enough out of my element here.

 

The current aim is to make something sort of like this, but less cartoony and including arms and legs etc:

 

monsters-avatar-pack-sketch.png

 

and animate them, at least at first, to play an animation when a student gets an answer correct, or another animation if they get the question wrong.

 

Later on, the goal will be to also have the character work in mini math games, and also the students should be able to program the characters similar to Scratch (Scratch characters are moving around in canvas, for reference).

 

37 minutes ago, OSUblake said:

...tint your textures

Would this potentially change the eye color from white, for example?

 

I mean for the very initial demo, I could swap one SVG mouth for another, and do some quick tweening to make the avatar look happy.

 

But one of the big issues, is I hope I can nail down how the data will be structured in the database.

 

It seems like Spine likes to have a big PNG which has each arm, hand, leg, the head, every part in it. Then an Atlas which is JSON describing more or less which pixels represent which part of that big image. Then the JSON containing the skeleton and animations.

 

But another way, more aligned with GreenSock (I think) might be storing SVG elements for each part. The animations might be a big script, with 'happy' being a function I can call which consists of a series of tweens aimed at #left_arm (which each left arm would have that ID).

 

After I go with a database structure it's a fair bit harder to switch back.

 

I can't see far enough down the road to know if I need bones and joints or not to be perfectly honest.

Link to comment
Share on other sites

8 minutes ago, Kinvert said:

I mean to be honest I don't know if I need them. That's part of the problem I'm far enough out of my element here.

 

I guess it depends on how you want it to look and animate. Some people just make "bendy" arms and legs, but it can look weird. 

 

Here's an example using of how bone and joints could work with svg. It would take some work figuring out the transform origins for something more complicated.

 

See the Pen ooYgWg by osublake (@osublake) on CodePen

 

A basic example of how that might look as JSON data. It could definitely end up a lot more complicated than this, probably looking more like the spine json.

 

See the Pen 4b284beb6cb2824918888251e944e4cf by osublake (@osublake) on CodePen

 

 

11 minutes ago, Kinvert said:

Would this potentially change the eye color from white, for example?

 

Depends on how you change the color. For example, it could be composite of several different layers with there own tint.

 

  • Like 3
Link to comment
Share on other sites

Holy crap dude. How many times have you earned that (Superhero) badge? Something tells me you wrote all this in less than half the time it will take me to read it and figure out how it works lol. This is amazing. Will get back after I wrap my head around your reply.

 

Thanks a ton!

  • Like 2
Link to comment
Share on other sites

I just made that format up to demonstrate how you COULD create animations from data. 

 

I'm sure you could just use the spine json and create gsap animations from it, it'd just take some time understanding the format to create your own parser/runtime.

 

Just took a quick sub-animation snippet from that json file.

 

"front-fist": {
  "rotate": [
    { "angle": -28.43 },
    { "time": 0.4333, "angle": -45.61 },
    { "time": 0.7333, "angle": -53.66 },
    { "time": 0.8667, "angle": 7.56 },
    { "time": 0.9333, "angle": 31.16 },
    { "time": 1.0333, "angle": -32.59 },
    { "time": 1.1333, "angle": 7.56 },
    { "time": 1.3333, "angle": -28.43 }
  ]
},

 

So I'm assuming that could be converted into a timeline like this.

const target = document.querySelector("#front-fist");

const rotateTimeline = gsap.timeline()
  .set(target, { rotation: -28.43 })
  .to(target, { duration: 0.4333, rotation: -45.61, ease: "none" })
  .to(target, { duration: 0.7333 - 0.4333, rotation: -53.66, ease: "none" })
  .to(target, { duration: 0.8667 - 0.7333, rotation: 7.56, ease: "none" })
  .to(target, { duration: 0.9333 - 0.8667, rotation: 31.16, ease: "none" })
  .to(target, { duration: 1.0333 - 0.9333, rotation: -32.59, ease: "none" })
  .to(target, { duration: 1.1333 - 1.0333, rotation: 7.56, ease: "none" })
  .to(target, { duration: 1.3333 - 1.1333, rotation: -28.43, ease: "none" })

 

The curve property in the animations appears to be the easing. I'm not exactly sure what the curve number and c2, c3, and c4 numbers are. Maybe just controls points on a cubic bezier curve, which gsap can do. It can definitely do a stepped ease, although it doesn't state how many steps there are. 🤷‍♂️

"rotate": [
  { "time": 0.2, "angle": -246.69 },
  { "time": 0.6, "angle": 11.28, "curve": 0.246, "c3": 0.633, "c4": 0.54 },
  { "time": 0.7333, "angle": -57.46, "curve": 0.38, "c2": 0.53, "c3": 0.745 },
],
  "translate": [
    { "time": 0.2, "x": 7.23, "y": -13.13, "curve": "stepped" },
  ]

 

Probably have to look at their source code to get a full understanding.

 

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...