Esoteric Software

[MikalDev]

For construct 3 users, we updated the basic Construct 3 runtime plugin with a few more features it's as good a time as any to release and for C3 devs to work with it. It's based on the Spine-TS runtime and rendering the Spine animation to a texture which C3 can then use to integrate into a C3 Spine object with Z ordering, position, scaling, rotation, etc.

Here's the C3 forum post with more details (also copied below)
https://www.construct.net/en/forum/construct-3/general-discussion-7/spine-plugin-update-153892

The C3 Spine plugin we (Igor and Mikal) developed has been updated with some new features (default animation mix and animation speed). For simple animation playback, pause, switch, it works and looks pretty good with a default mix. Performance is reasonable on the desktop systems I have tested on and recent iPhones (50+ Spine characters with 60fps). Android performance is more of a challenge, only a few characters at 60fps, something to review. Some examples are below. It includes skin changing and mesh deforms. For more details see the plugin webpage:

If you try it out on Construct, let us know, post your results.

https://gritsenko.github.io/c3_spine_plugin/

If you run into bugs, please leave issues on the github site here:
https://gritsenko.github.io/c3_spine_plugin/

Simple C3 example:

[Nate]

It looks great, thanks for sharing! I've added it to the runtimes page:
Spine: Runtimes: Construct 3

Cheers!

[MikalDev]

Updated plugin:

1.7.0: Add event trigger ACE (trigger when animation event occurs.)
1.6.0: Add Set region action (change region(texture) of an attachment in a slot on the current skin. Useful for character customization.

[Sebastien]

Thanks Mikal and Igor for all the work done so far!

What can we do to help make official and support further this plugin?

[starki]

Thanks Mikal and Igor!

[MikalDev]

Update to version 1.8.0 to add options for better pixel art renders for the aboves examples and faster/more efficient skeleton instances.
Changes:

• Add expressions TextureWidth, TextureHeight (texture size used to display Spine)

• Add property RenderQuality (1-0), amount to downsample original Spine size (reduces texture size used also reduces GPU performance requirement, which is usually less of an issue.)

• Load skeleton only once per Spine object, other instances of the same object are instances of the skeleton, saves a lot of texture memory to have only one skeleton texture atlas in GPU memory.

• Move on skelton loaded to after texture has been created for the Spine object and initial animation bounds and other state is set.

Also, you are welcome starki!

---

Update to version 1.9.0:

08/14/2020 1.9.0: Fix export issues (change spine-webgl.js to an external runtime script).

---

Update to version 1.10.0:

08/17/2020 1.10.0: Add Keep Aspect Ratio checkbox.

---

Update to version 1.11.1:
09/05/2020 1.11.1 Remove spine instance from batcher when C3 Spine instance calls Release() (e.g. C3 object destroyed.)
09/05/2020 1.11.0 Implement batch render for improved performance with multiple Spine objects and instances.

---

A number of new updates. The batch render improves desktop performance of multiple instances by roughly 4X on my example system (1.11.x). The support for multiple atlas pages allows for multiple pngs to be loaded for a single skeleton (this can help with multiple skins with different textures per skin or attachment.)

09/11/2020 1.12.1 Change to comma separated instead of space separated for png paths.
09/10/2020 1.12.0 Add support for Atlas pages (multiple png, comma separated), finish implementation of Set Attachment action, fix webgl1 support (revealed on iOS w/o weblg2 enabled.)
09/05/2020 1.11.2 Move spineBatcher.init() to prevent race condition (seen on iOS)

[Mario]

Super cool!

[MikalDev]

Thanks Mario.

Added runtime custom skin support per instance (Create custom skin, Add to custom skin, Set custom skin). Can have multiple runtime created custom skins per instance.

Release 1.13.0



---

Release 1.14.0 Added C3 web worker support.
Release 1.14.1 Fix PMA bug regression (introduced in 1.11.0)

Thanks to Erikari for noticing the PMA issue in the last gif (now fixed.)

---

Release 1.15.0 Set Slot Color (temporary until new skin set), Set Custom Color Attachment (set color of attachment of a custom skin and set to the custom skin.) Fix one frame animation bug.

Example:


---

Release 1.16.2 Set Slot Color, Set Slot Dark Color. Apply Slot Color, Reset Slot Color. Set animation start (beginning, current time, current ratio). Set animation time/current ratio. Deprecate Set custom color attachment.

For Dark Color to take effect, the slot must have 'Tint Black' enabled.

---

- 1.17.0 Add debug property, SpineBBoxCenterX,Y expressions. UpdateBBoxes action.
Bounding Box Attachment
- SpineBBoxCenterX, SpineBBoxCenterY espressions give the average of the named slot/bbox polygon points. Useful for attaching C3 Sprite object / collision box to the center of the Bounding Box.
- The UpdateBBoxes updates the bounding box to the current point in the animation. It should be done just once per tick per instance, before the SpineBBoxCenterX/Y expressions are used.



---

1.18.0 Add SpineBBoxGetPoly expression returns poly points in JSON format of named slot/bounding box attachment. Use with C3 Spine Mesh to create a very accurate Bounding Box in C3.

[Nate]

Super cool to be able to use the bounding box for physics! Many physics engines disallow making changes to physics bodies (or it is slow).

[Harald]

This is very cool!

[MikalDev]

Thanks folks! In this case the physics property for the bounding box is marked as 'immovable', which seems to make it work ok (even though I am moving it ). With the new C3 mesh, could make a much more complicated poly to match all the points in the sword also.

---

- 1.20.0 Add support for C3 R226 module mode, add Set Object Render Rate ACE.
- 1.19.0 Add Set animation mix {fromName} to {toName} with duration {seconds}.

Added a new render mode, since we are rendering to texture, we do not need to have spine-ts render every 60Hz frame to display the Spine object in C3, since we can just use the texture that was last rendered. So added a new Render Rate ACE that spreads out the rendering of the objects between a number of frames, dropping the perf needed on average. For example setting to 2 effectively renders at 30 fps (1/2 on even frame, 1/2 on odd frame), similar for 3 (20 fps) and 4 (15fps). The animations will be staggered by a number of frames, but generally looks fine. Now I get ~250 Spine characters at 60fps render (60 Hz display) and ~500 characters at 30 fps animation (60Hz display.)

Screen Shot 2020-12-02 at 7.21.05 PM.png

[porcupine]

Is that mesh deformation I see? Not even Gamemaker 2 has that. Amazing work O_O

[MikalDev]

Thanks and yup, it includes Mesh Deformation:



This is a Spine Object w/ a C3 Outline Effect applied to the object.

---

Release 1.22.2 Add animation track support. Default to track 0 for set, play, stop animation for backward compatibility, add isSekeltonLoaded ACE. Add track alpha control to blend animation between tracks. (Feature commissioned by Adrian - thank you!)

Example:



---

Release 1.23.0 Disable render to texture when offscreen (saves perf), animation continues for events, etc.

[porcupine]

Here's a stress test I did. You might notice that I have no idea what I'm doing, so that's the reason for most weird things such as the slight overkill with bones and vertices




Object's size is 672x465 but I shrunk the "Scale" in Spine properties to 0.5 because some animations went over the line. I'm guessing the default Animation should be the one that takes up most of the room.

So, here's the test:
http://porcupine-parkour.hr/spinetest/

Most modern home computers that aren't state of the line rtx beasts handle 100-300 of these tricorn dragongoats (also called goacorns) animating at once without dropping under 60fps. Phones seem to handle 1-20 of them

In conclusio, it works beautifully for the things I will need when we start the actual development, I just need to prepare a bit better and I will chip in a donation for this lovely plugin, as soon as I bother to leave the house and visit my bank.

[MikalDev]

porcupine - thanks for sharing, what a fun 'dragongoat' model, also nice smooth animations.

I do suggest for 'clipping' of the character to create a transparent image in Spine at the size of the 'area' you want to animate (e.g. the range of movement), then you can keep the scale at 1. The transparent image can be a a simple 10x10 image that you stretch in Spine to cover the area (so it does not take up much room in the texture pack / atlas.) The transparent image won't move / be animated.

From the doc page:
'Alternatively create a large transparent image in the Spine project behind your Spine character, this will can be used to set the bounding box size for the C3 spine render.'

Also for 'big' movement like jumping, I would animate it 'in place' on Spine and use C3 ACEs to move the player/Spine object for the jump (they can pinned together or use an ACE to match the positions.)

If you want to get more perf, you can also try playing with render rate (setting to '2' for 30 fps render is a pretty good tradeoff.)

---

Release 1.25.3 Bug fix: animation complete hang, export module fix
Release 1.25.1 Advance animation 1s after applying set animation, apply color, set skin, so they will take effect when an animation mix value is present.
Release 1.25.0 Advance animation one tick after applying set animation, apply color, set skin, so they will take effect, fix Set and Apply color C3 module mode bugs.
Release 1.24.0 Disable render when animation is complete (end of animation) or animation is stopped (perf optimization).

---

Release 1.26.1 Return w/o JS error from Expression/Conditions if skeleton not loaded.
Release 1.26.0 Add per instance debug enable ACE, return w/o JS error from Actions if skeleton not loaded.

---

Recent updates:

Release 1.36.1 setTracksListner guard clause (do not crash if skeleton is not initialized or removed.)
Release 1.36.0 Init refactor (internal clean up)
Release 1.35.0 Fix current time event regression, no apply() in setAnimation (save some CPU)
Release 1.34.2 Fix bbox ACEs w/ flipped animation
Release 1.34.1 bone control optimization, repeated init bug fix.
Release 1.34.0 Add ACE for render quality control
Release 1.33.1 Add render once for Bone control actions
Release 1.33.0 Bone control Conditions and Expressions
Release 1.32.0 Bone control Actions
Release 1.31.0 Add gl parameter cache for future optimization to not get gl state parameters every tick.
Release 1.30.1 Disable idle animation updates (via debug variable control, set 'reduceAnimation' to 'enable'.
Release 1.27.3 Correct idle and offscreen detection
Release 1.27.3 Correct idle and offscreen detection
Release 1.27.2 Advance animation/slot render while off screen.
Release 1.27.1 Add updateCurrentAnimation check if animatioName exists and warn if not.
Release 1.27.0 Add parameters and UID to Action console warnings for debug.
Release 1.26.1 Return w/o JS error from Expression/Conditions if skeleton not loaded.

---

[porcupine]

Here's another test. I wanted Vuvo the Cave Hiker to be a character for streaming over OBS. It requires microphone privileges to work properly:
https://studiospektar.hr/cavehikers/facetalk_vuvo/

When you talk, Vuvo talks. When you're loud, Vuvo starts hopping and talking angerly. When you are quiet, it has five different idle animations to entertain the crowd. Unfortunately, OBS won't display it as a web page in the corner. Oh well. I can always use it as an external program that is forced to be always on top

[Nate]

Haha, I love it!

[chasegrisby56]

This is very cool!
Thanks for all the work done so far!
How can the development of this plugin be supported?

[MikalDev]

Here's another test. I wanted Vuvo the Cave Hiker to be a character for streaming over OBS. It requires microphone privileges to work properly:
https://studiospektar.hr/cavehikers/facetalk_vuvo/

When you talk, Vuvo talks. When you're loud, Vuvo starts hopping and talking angerly. When you are quiet, it has five different idle animations to entertain the crowd. Unfortunately, OBS won't display it as a web page in the corner. Oh well. I can always use it as an external program that is forced to be always on top

Haha, that's great! If you have a problem with OBS (does it not show the C3 application?) Try running chrome with this switch: --disable-direct-composition. OBS should now be able to capture the the C3 app running on chrome.

---

This is very cool!
Thanks for all the work done so far!
How can the development of this plugin be supported?

There's a donation button on the https://gritsenko.github.io/c3_spine_plugin/ (Paypal).

[Harald]

When you talk, Vuvo talks. When you're loud, Vuvo starts hopping and talking angerly. When you are quiet, it has five different idle animations to entertain the crowd.

Nicely done, and so funny! Good job!

[porcupine]

As just discovered, support for Spine 4 is still being worked on, but that's not a problem. Just in case someone is a blind and stupid person, such as myself, here's a helpful tip. You don't need to search the internet and use weird commands with skeletonviewer.jar, you can just pick an export version in the export screen

[Nate]

Yep! Glad you found that, but please be warned that going from 4.0 to an earlier version will lose the Bezier curves in your animations.

[porcupine]

Yes, the exporter warned me about that. During development it's gonna be fine, I can easily change it later. But I am looking forward to having pretty pathways again, such as the smoke in this test

https://studiospektar.hr/cavehikers/bigcity_test/

---

I might be missing something, so I better ask. Is there a way for me to know where the character at it's default animation will be positioned? The position looks weirdly arbitrary. I would expect the root bone to be in the center or something. Is there a way for me to define the center in Spine, maybe?

[Mario]

Spine doesn't do any repositioning of your skeleton during export if you pick the .json or .skel format. The root bone position inside your Spine project relative to the origin will be the position that's applied when importing into the runtime.

[porcupine]

Maybe I turn out to be dumb but... Spine object in construct doesn't have an origin. Is there some sort of origin within Spine that I'm unaware of?

**edit: I'm guessing it's the center of the graph... but it's so weird and doesn't make sense or I'm doing something dumb.

This is what it looks like in Spine. Root is in the absolute center, everything is above and left of it


This is the setup in Construct. It is huge


This is in-game. Mostly above ant to the right of the center


This object is not a problem since it doesn't go anywhere. But some characters should run around later and it might pose problems if I have to just splatter huge objects everywhere :/

**edit: Found out that's directly related to "scale" and "render quality" inside construct. If I put both to exactly 1 and "keep aspect", everything starts from the bottom-right of the furthest points of animation...