cocos2d-html5 Using Spriter animations in Cocos2d-JS

[qertis]

Hi everyone,

I have ported the Spriter to Cocos2d-HTML5 (JS).

Based on spriter.js by: Jason Andersen, Isaac Burnds and PIXI port by Sean Bohan.

---

GitHub Link: https://github.com/tewst/cc_spriter

Basic example: tewst.github.io/cc_spriter

[gmalone]

That's exciting, qertis.  Good work.  Cocos2d-x-JS needs the Spriter option.  I'm curious, do you develop in CC2DX-JS and use skeletal animation?  If so, in your experience, is that combo ready-for-production use, or still a bit early in dev, i.e. not mature yet?  I'm trying to sort out the options, but sometimes the information is incomplete or out of date.

Thanks for your work on the Spriter port.

[qertis]

cc_spriter updated 

Features:

• Remove goog and spriter from window object
• Basic animations
• Bone animations
• All curve types (Instant, Linear, Quadratic, Cubic, Quartic, Quintic, Bezier)
• Points
• Collision Rectangles
• SubEntities
• Events
• Variables
• Tags
• Character maps
• Animation Blending
• Minified size ~63kB

https://github.com/qertis/cc_spriter/releases/tag/1.0.0

[qertis]

On 11/23/2015, 7:56:11, gmalone said:

That's exciting, qertis.  Good work.  Cocos2d-x-JS needs the Spriter option.  I'm curious, do you develop in CC2DX-JS and use skeletal animation?  If so, in your experience, is that combo ready-for-production use, or still a bit early in dev, i.e. not mature yet?  I'm trying to sort out the options, but sometimes the information is incomplete or out of date.

Thanks for your work on the Spriter port.

Yes, it's a mature and ready for production.

[qertis]

New version: 1.0.1 

Works in firefox, chrome. Supports webgl and canvas2d.

[lucid]

On 11/28/2015, 5:12:17, qertis said:

cc_spriter updated 

Features:

• Remove goog and spriter from window object
• Basic animations
• Bone animations
• All curve types (Instant, Linear, Quadratic, Cubic, Quartic, Quintic, Bezier)
• Points
• Collision Rectangles
• SubEntities
• Events
• Variables
• Tags
• Character maps
• Animation Blending
• Minified size ~63kB

https://github.com/qertis/cc_spriter/releases/tag/1.0.0

excellent job!

[qertis]

Version updated!

Features: Cocos2d-JS 3.10 Supported

Download from Github

[qertis]

New version: 1.1.3  

• Optimized structure
• Demo updated

[vox]

I'm having issues with this.. I cant create multiple instances of cc.Spriter. For example, if I create a cc.Spriter object give it a entity and anim that is OK. As soon as I create another cc.Spriter instance it seems to be that the new cc.Spriter instance is tied to the previous one changing the entity and the anim of the first cc.Spriter object rather than the one I just created.

[vox]

I'm having issues with this.. I cant create multiple instances of cc.Spriter. For example, if I create a cc.Spriter object give it a entitiy and anim that is OK. As soon as I create another cc.Spriter instance it seems to be that the new cc.Spriter instance is tied to the previous one changing the entity and the anim of the first cc.Spriter object rather than the one one I just created.

 

Ok I've sort of figured it out.. _hideAllSprites() is hiding sprites from every sprite even from different instances. If i remove hide all sprites I can now see both animations playing.

 

EDIT(SOLUTION): I changed the class a bit.. I made it so that sprites is now an array inside of the class defined as:

sprites: []

but you also have to define it in the constructor like:

ctor:function (sconLink) {
this._super();

    this.sprites = [];

so that it is not a shared array among your instances

 

Edited April 10, 2016 by vox

[qertis]

On 10.04.2016 at 8:13 AM, vox said:

I'm having issues with this.. I cant create multiple instances of cc.Spriter. For example, if I create a cc.Spriter object give it a entitiy and anim that is OK. As soon as I create another cc.Spriter instance it seems to be that the new cc.Spriter instance is tied to the previous one changing the entity and the anim of the first cc.Spriter object rather than the one one I just created.

 

Ok I've sort of figured it out.. _hideAllSprites() is hiding sprites from every sprite even from different instances. If i remove hide all sprites I can now see both animations playing.

 

EDIT(SOLUTION): I changed the class a bit.. I made it so that sprites is now an array inside of the class defined as:

sprites: []

but you also have to define it in the constructor like:

ctor:function (sconLink) {
this._super();

    this.sprites = [];

so that it is not a shared array among your instances

 

Thank you!

Merged: https://github.com/tewst/cc_spriter/commit/f11f000da29e8e7d27e90833bd16fe9110926f3a

[vox]

[deleted]

[b1ackbird]

Feature description mentions CharacterMaps - are they supported? Can't seem to find a way to use them.