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

  • great job.

    do you plan to do this as a plugin? or just for testing purposes?

    btw "outline effect" is required to open "c3p" file.

    here

    oyunkulturu.com/temp/file/outline.c3addon

  • Wow, this is superb! ✨👍

  • 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!

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

    An updated project with the new ElementQuad plugin bundled is in the original post.

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

    Link to addon and example in the original post.

  • wow super!

  • great! Please do it, you have my support :D

  • Hi, is there any new news?

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • This is still work in progress.

    Based on this and Spine-TS, Igor has created a nice plugin which works reasonably well on Desktop, but is slow on mobile (lots of CPU consumption), this is likely due to how textures are being updated on mobile vs desktop, investigating possible fixes.

    gritsenko.github.io/c3_spine_plugin

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

  • Please Mikal continue to work on this!! I beg you! This would be super awesome if it got to a stage where we could use it on mobile without performance issues.

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

  • Great. I haven't actually got a use case animation that I need to test yet. I was really going to wait until it was production ready before trying it out. Using Spriter is really my only other option but I much prefer to use Spine than Spriter in my workflow.

    What kind of fps are you getting on your device with multiple animated Spine objects? Is there maybe a test capx /apk I could try out on device?

    Cheers

  • There’s an example project on the github.io site. I can get 60 FPS on iPhone with a number of characters. However fewer characters at 60 FPS with my Moto G6 test phone. Use the latest plugin (1.3.0.)

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)