Spine Animation JS Template (Spine-TS webgl runtime, with mesh deforms) WIP

Since I did not see the possibility of a Spine Animation plugin on the near horizon, I am experimenting with using the Spine-TS webgl runtime and integrating it with C3 through JS integration. I updated the Spine TS demo to load the Spine atlas and skeleton files from the local C3 project files. The runtime renders to a separate non-visible canvas each frame and the result is loaded into a C3 sprite animation frame to be displayed. The api provides control over the animation, mixing, animations, changing skeletons, skins, etc.

I currently have some simple controls to change the skeleton, change render resolution (the render canvas resolution), play/pause the animation.

It works fairly well, except for an occasional stutter (which seems to be the C3 execution stuttering due to movement of data into the spirte animation frame, in other threads and bug reports, I'm exploring that.)

Please feel free to test/extend/use/improve the project, please repost if you find some good improvements or extend it (or fix the stutter issue!)

Update 08/14/2019:

Updated the ElementQuad helper with the help of Ashley to use newly documented SDKs and released.

The Spine example is doing one Spine animation rendered to one separate canvas and the canvas is used for multiple ElementQuad instances (a light port of the Spine meshes demo.) For more Spine animations, this example may need another canvas per Spine animation and either a clone of ElementQuad or a new instance. Control of the animation will need to be done through JS calls to the Spine-TS API, movement, angle, size, effects, etc. on the resulting ElementQuad can be through C3 events.

ElementQuad Addon and Spine Example

Update 08/11/2019:

Created a plugin helper ElementQuad, which can use a canvas directly as a texture, which lowers memory usage and improves performance. There is now no stutter, one caveat is that it works best if the ElementQuad image size is the same as the Spine render canvas.

Older project with new ElementQuad plugin bundled in.

SpineJSEQTemplate.c3p

SpineAnimationTool

Older files

OutlineEffect

SpineJSTemplate.c3p

Thank you both. I added a pointer to the 'official' outline effect, thanks for pointing that out Eren .

I don't plan on making a plugin. When I use this in a game, I'm going to use the C3 JS scripting features and C3 JS files and C3 functions to access the Spine-TS API directly.

Eren if you want to make a C3 plugin for it, please use whatever you want/can from the project. I have seen comments in other threads that make me think if you make a Spine plugin, there will definitely be a few more folks joining your Patreon, just let them know before you start so they can gather people to join and support you!

Hello Mikal , when I export from Spine and import it into C3, it cannot display and it got error:

Do you have any experience in export option when export from Spine?

Thanks.

I am not the original author of the plugin, I did the simple JS template it was based on and I'm helping out with some of the WebGL coding to make it more effective in mobile, etc. At the minimum, I think an ACE needs to be added for On Animation Finished.

For me, it has fairly reasonable performance on mobile on an iPhone XR and a Moto G6 now with the latest version of the plugin.

Check if you are using the latest addon from the direct github link: github.com/gritsenko/c3_spine_plugin/tree/master/dist

v 1.3.0 is the latest as of 10/10/2019, try it out on mobile and let us know how it goes.

For the skin issue, try leaving the skeleton name parameter blank. There is some difference between a JSON w/ multiple skeletons and a JSON with just one. In your case is the export of just one skeleton? I am usually over in the Construct Community Discord, if you want you could upload/DM me the *.json and *.atlas and I could try. This plugin is compatible w/ the 3.8 version of Spine.