playcanvas/playcanvas-spine

Plugin component for PlayCanvas which enables support for Spine animations.

playcanvas-spine's Issues

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.

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.

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.

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!

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

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?

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

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.

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

Awesome!!!

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

Your version apparently only works on desktop browsers.

Regards

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.
        
};

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)

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.

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

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

Port to render component

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

Mask problem in Spine

Dear Mr. mvaligursky

Here's my conclusion: you are using an outdated Spine library.
Now for the details.
In the provided example, there are 2 objects drawn, a circle and a square, along with a mask.
The code that iterates through the Spine slots:
for (let i = 0; i < count; i++) {
const slot = drawOrder[i];
follows the logic of the original (https://github.com/EsotericSoftware/spine-runtimes/blob/3.7/spine-ts/webgl/src/SkeletonRenderer.ts) except for:

if (!this._spine_3_7_99) {
if (!slot.bone.active) {
clipper.clipEndWithSlot(slot);
continue;
}
}
However, even if I comment out this code, the situation remains unchanged.
Tracing this code, I see 3 objects in this loop:

1. Set mask
2. Draw circle
3. Draw square

But it should:

1. Set mask
2. draw the circle
3. remove mask
4. draw the square
   Please update the spine library and rebuild playcanvas-spine.4.1.js.

You can check:
https://playcanvas.com/editor/scene/2001633
https://www.youtube.com/shorts/BnI2MctLFNg
https://github.com/eugene1kolombet/public/blob/main/moving_mask_spine_test.zip
Thank You!

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):

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.

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

Thanks for your hard work

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.

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.

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

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?

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?

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.

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