Spine Animation Software

[Geneva Andreotti]

Thanksbut I still cant get this working. Nothing happens with your code (my full code below). Admittedly I am very new to Playcanvas but this all seems very convoluted just to be able to trigger a single animation.

For example, open this on the Chrome on the PC:

And then in Chrome go to Settings menu (3 dots on the top right), and select More Tools -> Developer Tools. And you can debug the application right there.

I believe Grimmy is using 8th Wall so it needs to ran on device at the moment. @Grimmy you may need to install Android USB drivers to debug over USB. Otherwise you can try vConsole and remote.js in the meantime or make the project work without 8th Wall if need be.

I still have a small issue with this in that when my AR image target loses focus and then I focus it again, there is a single frame of the previous animation that plays before the initial fade in animation begins again. See here:

_20210420_113918_1.mp4?dl=0

Only minor annoyance is Spine export almost always names the animation and atlas with the same name and then the monogame pipeline compiles to everything to the same suffix. I have to do some minor renaming.

Yea, correct

Default animation, as i know, start to play after node init. So it is seems like the CASE1 from the code.

If I play animations in the first second after init (with default animation), there is will be glitch too

I've been searching a lot for a guide on how to implement 2D animations exported from Spine to Libgdx, but all I could find was outdated tutorials and source codes. I can handle basic Libgdx but Spine seems to be completely different.I was there, there, and also on lots of other sites (low reputation level won't let me post more links) but still I've got no idea how to do it.Does anyone know how to add those animations properly? (doesn't matter if it's json or binary)Preferably paste some code showing how to display something like spineboy so that I can see exactly what needs to be done. Any other suggestions appreciated..

So I got "pick up" animation and it's played in fixed direction that it was animated. I checked the box "Flip custom animations" and set frame flipping to "Left Mirrors Right" and nothing changed. If I understand correctly this is for different types of animation is there work around for Spine?

You need to check Add directional suffix?, so that the animation becomes "pick up_L" / "pick up_R" depending on their direction. The frame-flipping settings will then be able to kick in.

I want to have custom flip animation when the Player turns left and right, is this possible?

Now the Player instantly turns left and right (by Left mirroring the Right), I just wanted to make it more juicy by having a custom flipping animation, to actually show the Player turns.

I'm also using Spine animations without any issue, everything works fine using this (Sprites Unity as Animation engine), I will create a full tutorial later, it's really easy and handy, I can even use Timeline which is very useful.

This mode relies on Animator parameters, e.g. "Move speed" float, "Facing angle" float etc, which AC will set automatically based on the character's motion. It's then a case of using these parameter values to create transitions to suit your needs.

For example, if the character's "Direction integer" is 1 (i.e, left-facing) and this changes to 2 (i.e. right-facing), you could have this change result in a transition to a "turn right" animation before playing the right-facing idle/walk animations.

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 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.

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 -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.

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.

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).

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:

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.

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.

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).

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).

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.

A " track" is a numbered placeholder for a track entry. A track entry stores information about an animation, such as which animation, if it should loop, what track entry to play when it is done, etc. Every frame, the animation for each track is applied one after another, lowest track number to highest. By applying multiple animations each frame, you can eg have a shoot animation that is played on top of idle, walk, run, swim, etc.

I had the same or similar issue a while back and managed to get AnimationState working good enough for me, but never really managed to get a grasp on how to implement it properly. I had another look now and I think I found the issue. Please check my reasoning.

It seems like the AnimationState implementation mixes what self.trackCount and trackIndex really hold. It seems that self.trackCount actually hold the maximum track index and not the number of tracks added. Therefore I think the wanted behavior should happen when the lines below in clearTrack ( EDIT: See link at bottom for proper fix )

3a8082e126