createjs支持spine骨骼的简单封装（更新，加入换装）

spine的官网上有一个链接，给了用easel写的支持spine 的js文件

这里把他的例子的代码整理了一下，封装成一个简单的类来用。

使用就像这样：

1、创建人物

var skeleton = new gameui.Skeleton(atlas,json,png);//参数分别为PreloadJS加载3个文件后返回的event.result

this.addChild(skeleton);
skeleton.playAnimation("animation");

//event
skeleton.addEventListener("footstep", onFootstep);
function onFootstep(){  
  //SoundManager.playFx("footstep");
}

2、在stage的update里加入update：

if(window.gameui && window.gameui.Skeleton)
    gameui.Skeleton.update(event);

需要引入官网的Github上提供的spine.js 文件

和

下面的代码

(function() {
    "use strict";
    function Skeleton(atlas, json, image) {
        this.Container_constructor();

        var _this = this;
        var containers;

        this.createComplete = false;

        createAtlas();

        function createAtlas()
        {
            atlas = new spine.Atlas(atlas);
            createImage();
        }

        function createImage() {
            _this.visible = false;

            containers = [];
            for (var i = 0; i < atlas.regions.length; i++) {
                var region = atlas.regions[i];

                var container = new createjs.Container();
                var rotationContainer = new createjs.Container();
                rotationContainer.name = "rotationContainer";
                container.addChild(rotationContainer);

                var bitmap = new createjs.Bitmap(image);
                bitmap.sourceRect = new createjs.Rectangle(region.x,region.y,region.width,region.height);
                bitmap.name = "bitmap";
                bitmap.x = region.width / -2;
                bitmap.y = region.height / -2;
                rotationContainer.addChild(bitmap);
                container.name = region.name;
                _this.addChild(container);
                containers.push(container);

                originAttachmentDict[region.name] = bitmap;
            }

            createSkeleton();
        }

        var skeletonData;
        var skeleton;
        var stateData;
        var state;
        function createSkeleton() {
            var jsonSkeleton = new spine.SkeletonJson(new spine.AtlasAttachmentLoader(atlas));
            skeletonData = jsonSkeleton.readSkeletonData(json);

            spine.Bone.yDown = true;

            skeleton = new spine.Skeleton(skeletonData);
            skeleton.updateWorldTransform();

            stateData = new spine.AnimationStateData(skeletonData);
            state = new spine.AnimationState(stateData);
            state.onEvent = animationCallback;
            if(currentAnimationName)
            {
                state.addAnimationByName(0, currentAnimationName, true, 0);
            }
            _this.createComplete = true;
            _this.visible = true;
        }

        

        this.update = function (event) {
            if(!_this.createComplete)
                return;

            state.update(event.delta * 0.001);
            state.apply(skeleton);
            skeleton.updateWorldTransform();
            var invisibleContainers = containers.slice();
            var drawOrder = skeleton.drawOrder;
            for (var i = 0, n = drawOrder.length; i < n; i++) {
                var slot = drawOrder[i];
                if(!slot.attachment)
                    continue;
                var attachment = slot.attachment;
                var name = attachment.name;
                var bone = slot.bone;
                var container = _this.getChildByName(name);
                if (container) {
                    var rotationContainer = container.getChildByName("rotationContainer");
                    var bitmap = rotationContainer.getChildByName("bitmap");
                    container.visible = true;
                    container.x = bone.worldX + attachment.x * bone.m00 + attachment.y * bone.m01;
                    container.y = bone.worldY + attachment.x * bone.m10 + attachment.y * bone.m11;
                    container.scaleX = bone.worldScaleX;
                    container.scaleY = bone.worldScaleY;
                    container.rotation = -slot.bone.worldRotation;
                    rotationContainer.rotation = -attachment.rotation;
                    _this.addChild(container);
                    invisibleContainers.splice(invisibleContainers.indexOf(container), 1);
                }
            }
            for (var k in invisibleContainers) {
                invisibleContainers[k].visible = false;
            }
        };

        var currentAnimationName;
        this.playAnimation = function(animationName)
        {
            if(currentAnimationName == animationName)
                return;
            currentAnimationName = animationName;
            if(state)
            {
                state.addAnimationByName(0, currentAnimationName, true, 0);
            }
        };

        var eventDict = {};
        this.addEventListener = function(eventName, callback)
        {
            eventDict[eventName] = callback;
        };

        this.removeEventListener = function(eventName)
        {
            if(eventDict.hasOwnProperty(eventName))
            {
                delete eventDict[eventName];
            }
        };

        function animationCallback(eventIndex, event)
        {
            console.log(event);
            if(eventDict.hasOwnProperty(event.data.name))
            {
                eventDict[event.data.name](event);
            }
        }

        this.dispose = function()
        {
            atlas.dispose();
        };

        gameui.Skeleton.allSkeletons.push(this);
    }

    createjs.extend(Skeleton, createjs.Container);
    Skeleton.prototype.constructor = Skeleton;
    gameui.Skeleton = createjs.promote(Skeleton, "Container");
}());

gameui.Skeleton.allSkeletons = [];
gameui.Skeleton.update = function(event)
{
    gameui.Skeleton.allSkeletons.forEach(function(skeleton)
    {
        if(skeleton.parent)
        {
            skeleton.update(event);
        }
    })
};

4月10日更新，加入换装

给Skeleton类增加代码

var originAttachmentDict = {};

this.replaceAttachment = function(attachmentName, replaceBitmap)
        {
            var rotationContainer = _this.getChildByName(attachmentName).getChildByName("rotationContainer");
            var bitmap = rotationContainer.getChildByName("bitmap");
            replaceBitmap.name = bitmap.name;
            replaceBitmap.x = bitmap.x;
            replaceBitmap.y = bitmap.y;
            rotationContainer.removeChild(bitmap);
            rotationContainer.addChild(replaceBitmap);
        };

        this.restoreAttachment = function(attachmentName)
        {
            var bitmap = originAttachmentDict[attachmentName];
            var rotationContainer = _this.getChildByName(attachmentName).getChildByName("rotationContainer");
            rotationContainer.removeAllChildren();
            rotationContainer.addChild(bitmap);
        };