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

2 favourites
From the Asset Store
Fruit Slicer Template & Quality fruit and slice graphics (capx,c3p,png,illustrator files)
  • On my project, I fixed the Android APK issue. It seems that for some reason, the initialization process for the Spine plugin takes longer on apk than when done with the web version.

    The longer initialization exposed a bug in the plugin which caused multiple initializations. I fixed this bug in the plugin and now in my simple apk, the Spine character renders properly.

    Please try out the new version of the plugin: 1.4.5

    It's available here:


    Please let us know your results.

  • Also, I wanted to check that my other comment about the bug in your project with the wrong animation name helped fix your 'restart layout' problem on the PC. - Yes, I'm sorry, I forgot to answer right away, the problem disappeared.

    I am using USB and Mac to do the debug, it's very helpful to enable this. See the post above about how to do this. - I'm trying to figure it out, but so far it’s not working out.

    Mikal, are you planning to make a full-fledged plugin or a minimal set of actions? If I can’t figure out how to debug USB, I could describe the problems for you on the forum and attach the game source.

    plugin: 1.4.5 - work, good!

  • I am not the plugin's original author, I am mostly helping out with the webgl rendering side and fixing bugs. So, generally, I will not be doing work to add a lot more ACEs. I think the original author has moved on from using this plugin themselves, so I think it will likely stay with a minimal number of ACEs to support playing animations.

    That being said if you have a few critical ACEs required, you can make a request up on the github website in the issue list:


    Also, since this is all done in JS, you can also use JS script in events to access the Spine API directly in C3.

  • Strange, I have a device - "Samsung Galaxy Tab A 10.1 (2016)". The game has one scene and one spine file, but the FPS counter shows 30-36, until I destroy the spine-file on the scene. Is my device so weak? ... :) Power Save Mode - Disabled. Someone did tests, what indicators of FPS do you have in Android device?

  • Using your Spine project on a Moto G6 and remote preview:

    1 Spine Object: 60 fps

    2 Spine Objects: 40 fps

    3 Spine Objects: 30 fps

    On iPhone XR:

    30 Spine Objects: 60 fps (and starts to slowly fall off after that.)

    In the plugin, we are updating a texture for each Spine object on each draw call. Some mobile GPUs may have low performance on texture updates.

  • Try Construct 3

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

    Try Now Construct 3 users don't see these ads
  • Hello. The problem with Scale. I don’t understand what to do. If I reduce the scale to 0.3 (the leftmost example), then the fish animation is completely visible, but if I do scale 1 (the rightmost example), a small part of the animation is visible

    File .c3p - cloud.mail.ru/public/2f3P/5H6L15iRB

  • I think the scale parameter should just be adjusting the spine rendered texture, not the rendered quad size in the C3 canvas (which it seems to be doing.)

    I'll take a look at it.

    Overall, what scale is used for is to reduce the rendered image size so that it fits in the texture. So, in this case, I do expect that you will need to use a smaller scale (like 0.3), but you can then scale the size up of the Spine object to make it larger when displayed.

  • Sorry, using Google translator I most likely did not understand what you meant. I need any animation to play at the scale specified when saving from spines. I asked my animator to export the animation in an empty square of 256-256 pixels, but the animation seems to be shifted to the right and does not fit. Sensation, Image Point is not in the center

  • That's seriously impressive!

    Might have to try that out. I use Spriter a lot and would LOVE mesh deform if they do it on that.


  • Sorry, a little hard to understand across Google translator. In the case of other spine animations that we tested, it works well and is centered and scaled properly with a scale setting of 1.

    Some ideas to try:

    - Adding a bounding box to your spine animation.

    - Make sure animation is centered around 0,0 in Spine.

  • Example project with atlas, json, png here:


  • sTARKi

    I played with your animation in Spine, I have two suggestions:

    - Center your animation around the Spine origin

    - Create small, barely visible objects in Spine to create a bounding box.

    Below is an example using very visible objects (other fish) in Spine. Having them there will create larger bounds for the animation to play out in C3. In your final replace the other fish w/ small objects with a transparent image.



  • Another better solution suggested by Buko-Studios:

    Add a transparent png which covers the required animation space in Spine, this works well with the C3 Spine plugin.

    For example, I added a semi-transparent object as an example so you can see how it works, you can change it so the object is completely transparent (using a fully transparent png.)



  • Hi, when I want to create more spine object with System Create object like this, how can I set .json m atlas and .png paths?

  • Right now that's not possible. For now, create a different object for each Spine character and set the specific json and atlas for each object/character. Post a request on the plugin github for this feature and it may get implemented.

    In your code, it will just create a SpineCharacter with properties that are defined for the object (you may need to create a dummy layout sheet with an instance of the Spine object to set the default values - if you are not placing it on the game layout in the editor.)

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