playcanvas/playcanvas-spine

Plugin component for PlayCanvas which enables support for Spine animations.

PlayCanvas Spine

A Spine plugin for the PlayCanvas Engine.

Examples such as the Hero above can be found in the examples folder. To run them, start a local web server and go to http://localhost/path/to/examples/hero.html (the path will depend on your file serving root directory).

Usage

Versions

The following plugins are available:

Spine Editor	PlayCanvas Engine
3.6	Up to 1.65
3.8	Up to 1.65
4.0	1.27 and later
4.1	1.27 and later

Each plugin provides both a Component System to PlayCanvas Engine and the corresponding spine-core runtime to your scripts as global variable called spine. This allows developers to leverage the full spine library.

Editor

Add the plugin matching the Spine version used to export the animations, i.e build/playcanvas-spine.X.X.min.js and the PlayCanvas script build/spine.js to your project.

Create an entity with a script component and add the script spine to it. Upload your exported spine resources (atlas, skeleton json file, textures) and attach them to the spine script on your entity.

Ensure the plugin file is listed before the PlayCanvas script in the Scripts Loading Order.

Engine-only

Load the required library script, i.e. build/playcanvas-spine.X.X.min.js. Then, add spine components to your entities as follows:

var entity = new pc.Entity();
entity.addComponent("spine", {
    atlasAsset: atlas,       // atlas text asset id
    textureAssets: textures, // array of texture asset ids
    skeletonAsset: skeleton  // skeleton json asset id
});

Building

Prebuilt versions of the PlayCanvas Spine library can be found in the lib folder. However, to build them yourself, first install the NPM package dependencies:

npm install

Then, to build do:

npm run build

playcanvas-spine's Issues

Basis compressed textures for the atlas throws code errors

Example: https://playcanvas.com/project/826377/overview/spine-basis-compression

Thread: https://forum.playcanvas.com/t/playcanvas-1-46-1-playcanvas-spine-console-error/21679

Runtime Error in Internet Explorer 11

Launch
https://launch.playcanvas.com/581347
in Internet Explorer 11

Observe
Error: Object doesn't support property or method 'map'
File: playcanvas-spine.min.js, Line: 3, Column: 17925

Notes
This is a minimal example project with the most current version of the playcanvas-spine library, which works in Chrome and Edge. But i think the issue is that IE 11 has a different implementation of Float32Array and uses a object type instead of a float type.

3.8 Clipping bug where sprites are not clipped properly

From a customer

Project: https://playcanvas.com/project/1038754/

The numbers should render like this:

But appear like this (ignore spineboy):

Minor Issue: Mesh constructor takes a GraphicsDevice as a parameter

Description

Engine Build: 1.6.5

Deprecation warning:

DEPRECATED: Mesh constructor takes a GraphicsDevice as a parameter, and it was not provided.

From the following line:

https://github.com/playcanvas/playcanvas-spine/blob/71ec3c5d9a534cf05e6b5a20db6aa55198aad842/src/spine.js#L543C38-L543C38

Resolution

Should be changed to the following or similar:

var mesh = new pc.Mesh(pc.graphicsDevice);

Deprecated 10 months ago.

Memory leak: Spine component not fully removed on destroy (Fix included)

Description

I noticed a performance issue after creating and deleting a large number of spine entities and using chrome memory snapshot tool realized that a lot of spine related data remained in memory after deleting all spines. (Spine, SpineComponent, SpineComponentData, SineTextureWrapper)

Investigating the code I noticed that the SpineComponentSystem overwrite the removeComponent function without calling the original breaking the component deletion flow.

Fix

This issue can be fixed by adding a call to the base removeComponent
pc.ComponentSystem.prototype.removeComponent.call(entity.spine.system, entity);
or a cleaner fix would be to register for the "beforeremove" event and move the spine removeComponent code into the callback.

this.on('beforeremove', this.onBeforeRemove, this);

...

onBeforeRemove: function(entity, component) {
        var data = entity.spine.data;
        if (data.spine) {
            data.spine.destroy();
        }

        entity.spine.removeComponent();
    },

Test project:

https://playcanvas.com/project/780176/overview/spine-leak

Steps to reproduce:

1. launch application.
2. Press load to load assets.
3. Take memory snapshot with chrome developer tools ans search for spine objects.
4. Press spawn to create a new spine entity.
5. Pres delete to delete it.
6. Wait a few second, take another memory snapshot and search for spine objects again.
7. Notice the issue.
   If you uncomment one of the two fixed in playcanvas-spine.3.8.js around lines 7740 to 8870 all the extra spine data will be removed from memory.

Allow optional material configuration for the plugin

Hey team,

while using the Spine plugin on one of our projects we've noticed that the Spine animations were white. We discovered that that was due to the ambient light that was set to white. We fixed that issue by patching the plugin and inside createMaterial method we disabled the diffuse color

material.diffuse = new pc.Color(0, 0, 0, 0); // include diffuse component, this allows lights contribution

I think this is kind of "hacky" on our part and was wondering if there could be a way of setting this as an option on the SpineComponent?

Thanks!

Unable to disable or destroy entity in the complete callback

When trying to disable or destroy an entity at the end of an animation. I either throws an error saying the skeleton cannot be null or keeps rendering the last frame of the animation.

SpineAnim.prototype.LoadSpine = function(entityName)
{
        this.entity.spine.spine.skeleton.setSkinByName("default");
        this.entity.spine.spine.skeleton.setSlotsToSetupPose();
        
        this.entity.spine.states[1] = new spine.AnimationState(this.entity.spine.spine.stateData);

        this.delegateObj = {
            complete: this.onComplete.bind(this),
            interrupt: this.onComplete.bind(this)
        };

        this.entity.spine.state.addListener(this.delegateObj);
            this.entity.spine.state.defaultMix = 0.2;
           this.entity.spine.state.addAnimation(0, "Idle", false);
};

SpineAnim.prototype.onComplete = function(track){

//this.entity.enabled = false <- doesnt work.  continues to render last frame.
//this.entity.destroy();  <- throws an error saying skeleton cannot be null.

  setTimeout(function(){this.entity.enabled = false;}.bind(this), 10); // <- works because it is outside of the on complete function.
        
};

Meshinstance memory leak in render

Repo project: https://playcanvas.com/project/704630/overview/spine-test

https://github.com/playcanvas/playcanvas-spine/blob/master/src/spine.js#L453

meshinstances are removed in the render loop but the materials that they referenced still have a reference to the meshinstance.

A temp fix that was used:

Spine.prototype.render = function () {
    // FIX: clear materials before dropping mesh instances:
    this._meshInstances.forEach(function(instance) {
        instance.material = null;
    });
    // END FIX
    this.removeFromLayers();
    this._meshes = [];
    this._meshInstances.length = 0;
  etc...

I found that there was a performance problem!

I found that there was a performance problem, spine. js 'rebuildMeshes' method was frequently called.

Mesh will be created and released frequently

Spine animations don't work with engine 1.48.0+

Example: https://playcanvas.com/project/783555/overview/spine-example-38

Thread: https://forum.playcanvas.com/t/spine-animations-no-longer-displaying/22770

Would we be able to change to use asset.filename instead of deriving from the URL?

playcanvas-spine/src/component/spine-component.js

Line 26 in 7b61377

var path = pc.path.getBasename(asset.file.url);

Or is asset.filename not guaranteed to be used/populated or same as the actual URL?

Spine clipping mask problem

I created animation in spine with clipping mask. After import to playcanvas these files and tried to run animation, I’m getting this error;

TypeError: Cannot read property ‘texture’ of undefined
at t.initAttachment (http://launch.playcanvas.com/api/assets/files/Scripts/Library/playcanvas-spine.min.js?id=27919451&branchId=a171ac64-c8db-441f-8ca3-219148ce95ba:3:147858 1)
at t.updateSlot (http://launch.playcanvas.com/api/assets/files/Scripts/Library/playcanvas-spine.min.js?id=27919451&branchId=a171ac64-c8db-441f-8ca3-219148ce95ba:3:152063)
at t.update (http://launch.playcanvas.com/api/assets/files/Scripts/Library/playcanvas-spine.min.js?id=27919451&branchId=a171ac64-c8db-441f-8ca3-219148ce95ba:3:153211)
at t.onUpdate (http://launch.playcanvas.com/api/assets/files/Scripts/Library/playcanvas-spine.min.js?id=27919451&branchId=a171ac64-c8db-441f-8ca3-219148ce95ba:3:155360)
at Function._helper (https://code.playcanvas.com/playcanvas-stable.dbg.js:24546:14)
at Function.update (https://code.playcanvas.com/playcanvas-stable.dbg.js:24554:10 1)
at Application.update (https://code.playcanvas.com/playcanvas-stable.dbg.js:23988:24)
at Application.tick (https://code.playcanvas.com/playcanvas-stable.dbg.js:24343:11 1)
at Application.start (https://code.playcanvas.com/playcanvas-stable.dbg.js:23977:10)
at http://launch.playcanvas.com/editor/scene/js/launch.js:7250:25 1

Example project:
https://playcanvas.com/project/665578/overview/spine_mask_sample

Any idea?

Awesome!!!

Do you have a version of Super SpineBoy for mobile? (safari and mobile chrome)

Your version apparently only works on desktop browsers.

Regards

ES6 Compatibility

Current implementation modifies the global "pc" variable to store its data. In the more modern and performant builds of pc engine, this does not work.

The current implementation of spine needs to store data and make features available to every app instance that the global "pc" instance might create. It needs to persist it even when those app instances, scenes, or root nodes are destroyed. At the time, a clever and graceful solution was to tuck things neatly into the "pc" variable to make sure its available no matter what happens.

While the chances for conflict are low, modern language features have been introduced to solve conflicts between vendor libraries. Unfortunately, the current approach is what a conflicting vendor library would do. If the spine plugin implementation took a different approach to meet those goals, this issue goes away.

It seems a small refactor is required.

This issue was first raised on the engine project here:
playcanvas/engine#5399

I found that he couldn't complete my attack animation.

I think the wait animation is played before the attack animation is complete, causing the gun to drop directly.
how to solve this problem?

Support modification of material properties

Currently this plugin just creates a material with properties defined by the plugin. It is useful to choose some of these properties. For example:

• should the texture be the diffusemap or emissivemap
• if emissive, diffuse color should be (0,0,0)
• user may wish to disable lighting/fog/tonemapping on material.

Data export from Spine 3.8.xx

Hello,

I use spine 3.8.xx version.. When I export data from spine to playcanvas it's not working because of version. In contrib/spine-ts there is a warning: Spine-ts works with data exported from Spine 3.6.xx.
What can I do to upgrade to 3.8.xx version(how can I create a compatible playcanvas-spine.js) or do you have a plan to create a new playcanvas-spine.min.js for 3.8.xx?

Thank you

Does this reference frame render in screen space? It can't integrate well with UI system.

TypeError: Cannot set property state of # which has only a getter

I'm having a problem using the 3.6 library which appears to be trying to set this.state = null in Spine.destroy(), even though Spine.state is just a getter. Should this line be removed?

Attaching listeners to AnimationState

Hi, I'm not sure where to ask questions regarding the PC runtime for Spine so I'm asking here.

Can you provide an example of how to use addListener()? The Spine User Guide wasn't able to help me in this regard.

Disable rendered spine model when Entity is disabled

When the Entity that displays a spine model is disabled we should also hide the rendered spine model.

Support for Spine 4.x now that it's stable?

Just wondering if there's any plans to support 4.x now that it's been promoted to stable.

Mention required "Power Of Two" export option.

This took a fair bit of head-scratching, so I'll post it here to avoid that problem in the future.
Since PlayCanvas resizes the textures to nearest power of two by default, this "Power of two" Spine export option has to be used.

(otherwise, image resizing has to be disabled in PlayCanvas Asset Task settings)

Spine Layer is set to UI Layer

The layer for spine rendering gets set to UI layer with this code in spine.js:

this._layers = [pc.LAYERID_UI];

Since one also wants to have UI rendererd over the spine characters, please consider to make this changeable via attributes.

Best,
Rene

Memory Leaks

I noticed that spine entities don't get freed in the memory. I used this project to reproduce this issue by having two scenes with one spine object each and you can switch between them. After each scene change, the previous spine entity can't get fully deleted. You can check this out by using the Memory Allocation Timeline of the chrome debugging tools. I explain it in further detail in this forum post.

Can you add virtual joystick and attack example to hero.html?

Thanks for your hard work

Port to render component

Now that the RenderComponent is public API, this codebase should adopt it.

Import playcanvas-spine to Scripts 2.0

Thinking it is time! :)

Now that PlayCanvas has a 2D api, Spine complements well as a 2D animation solution.