Spine support?

[Shadowstep33]

Any chance it will be added? :) It shouldn't be too hard since EZGUI is already well integrated with PIXI, I would guess it's mostly a matter of removing some of the Container class properties and method calls. Just a thought :)

[alaa-eddine]

Hi @Shadowstep33 What do you mean by Spine support ? if it's about animations, there is a Pixi plugin which work just fine :)

[Shadowstep33]

By Spine support I mean specifically saying an EZGUI component is or houses a Spine object (component: "Spine") because otherwise EZGUI is going to attempt to just drop a PIXI.Sprite down and call it a day correct? As it is right now I could probably add the Spine object to the EZGUI object manually but it would be cool if I could ue EZGUI params to control/place the spine object so for example something like:

{
component: 'Spine',
image: 'spineAtlasName',
animations: {
idle: 'idle',
move: 'run'
},
autoStart: true
...
}

With that and Spine support theoretically I would have just added a Spine animation to a menu that automatically plays idle animation and as soon as it's position changes starts playing run animation

[Shadowstep33]

and yes, I am referring to the same Spine as pixi-spine

[Shadowstep33]

I'm not sure your exact methodology/flow for getting from a texture reference to outputted image; I have gotten spine objects to appear using some config settings and modifying your code, but I can't seem to get them to animate. If you are taking a render texture of all EZGUI created things and pushing those to client, then that would probably be a possible reason. If there is a way to return a raw object to the client, that would be optimal but here is the code that atleast allows a Spine object to be placed. It will only sit at frame one though.

EZGUI.js 2213

                if(settings.spine && typeof PIXI.spine != "undefined"){
                    console.log("Spine ",settings,cfg,loader.resources)
                    var img = new PIXI.spine.Spine.fromAtlas(settings.image);   // Need to get image name directly
                    img.skeleton.setToSetupPose();
                    img.update(0);
                    img.autoUpdate = true;

                    var anims = [];
                    for(var v in img.spineData.animations){
                        anims.push(img.spineData.animations[v].name);
                    }   

                    if(anims.indexOf(settings.anim) >= 0){
                        img.state.setAnimationByName(0, settings.anim, true);
                        console.log("Set animation", img)
                    }

                    img.position.y = settings.height / 2;
                    img.position.x = settings.width / 2;
                    img.width = settings.width / 5;
                    img.scale.y = img.scale.x;
                }else

...

the json config to make this happen would look something like this

...
                        {
                            width: wW,
                            height: wH,
                            position: {x: 0, y: 0},
                            spine: true,
                            anim: "idle",
                            image: 'spineAtlasID'
                        }
...