Fixed cocos2d#2806: fixed a bug of cc.SkeletonAnimation that its canvas renderCmd doesn't work

Author: dingpinglv

extensions/spine/CCSkeleton.js

@@ -105,7 +105,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
      */
     init: function () {
         cc.Node.prototype.init.call(this);
-        this.setOpacityModifyRGB(true);
+        //this.setOpacityModifyRGB(true);
         this._blendFunc.src = cc.ONE;
         this._blendFunc.dst = cc.ONE_MINUS_SRC_ALPHA;
         this.scheduleUpdate();
@@ -345,6 +345,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
             this.setContentSize(skeletonData.width / cc.director.getContentScaleFactor(), skeletonData.height / cc.director.getContentScaleFactor());
 
         this._skeleton = new spine.Skeleton(skeletonData);
+        this._skeleton.updateWorldTransform();
         this._rootBone = this._skeleton.getRootBone();
         this._ownsSkeletonData = ownsSkeletonData;
 
@@ -390,7 +391,6 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
      */
     update: function (dt) {
         this._skeleton.update(dt);
-        this._renderCmd._updateChild();
     }
 });
 

extensions/spine/CCSkeletonAnimation.js

@@ -222,6 +222,7 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
         this._state.update(dt);
         this._state.apply(this._skeleton);
         this._skeleton.updateWorldTransform();
+        this._renderCmd._updateChild();
     },
 
     /**

extensions/spine/CCSkeletonCanvasRenderCmd.js

@@ -26,97 +26,39 @@
     sp.Skeleton.CanvasRenderCmd = function(renderableObject){
         cc.Node.CanvasRenderCmd.call(this, renderableObject);
         this._needDraw = true;
-
-        this._skeletonSprites = [];
     };
 
     var proto = sp.Skeleton.CanvasRenderCmd.prototype = Object.create(cc.Node.CanvasRenderCmd.prototype);
     proto.constructor = sp.Skeleton.CanvasRenderCmd;
 
     proto.rendering = function (wrapper, scaleX, scaleY) {
-        var node = this._node, i, n;
+        var node = this._node, i, n, slot, slotNode;
         wrapper = wrapper || cc._renderContext;
-        var context = wrapper.getContext();
-
-        var locSkeleton = node._skeleton,color = node.getColor();
-        locSkeleton.r = color.r / 255;
-        locSkeleton.g = color.g / 255;
-        locSkeleton.b = color.b / 255;
-        locSkeleton.a = this.getDisplayedOpacity() / 255;
-        if (node._premultipliedAlpha) {
-            locSkeleton.r *= locSkeleton.a;
-            locSkeleton.g *= locSkeleton.a;
-            locSkeleton.b *= locSkeleton.a;
-        }
-
-        /*wrapper.setTransform(this._worldTransform, scaleX, scaleY);
-        context.save();
-        //draw skeleton by itself.
-        var slot, attachment, selTexture, selBone, rendererObject;
-        for (i = 0, n = locSkeleton.drawOrder.length; i < n; i++) {
-            slot = locSkeleton.drawOrder[i];
-            if (!slot.attachment)
-                continue;
 
-            attachment = slot.attachment;
-            rendererObject = attachment.rendererObject;
-            selTexture = rendererObject.page._texture;
-            if(!selTexture || !selTexture._textureLoaded || !slot.bone)
-                continue;
-
-            selBone = slot.bone;
-            //context.transform(selBone.m00, selBone.m01, selBone.m10, selBone.m11, selBone.worldX, selBone.worldY);
-            context.translate(selBone.worldX, selBone.worldY);
-            context.scale(selBone.worldScaleX, selBone.worldScaleY);
-            console.log(selBone);
-            context.rotate(selBone.worldRotation);
-            context.drawImage(selTexture._htmlElementObj,
-                rendererObject.x, rendererObject.y, rendererObject.width, rendererObject.height,
-                //locX * scaleX, locY * scaleY, locWidth * scaleX, locHeight * scaleY);
-                0, 0, rendererObject.width * scaleX, rendererObject.height * scaleY);
-
-        }
-        context.restore();*/
-
-        //draw skeleton sprite by it self
-/*        wrapper.save();
-        //set to armature mode (spine need same way to draw)
-        wrapper._switchToArmatureMode(true, this._worldTransform, scaleX, scaleY);
-        var sprites = this._skeletonSprites, slot, selSpriteCmd,attachment;
-        for (i = 0, n = sprites.length; i < n; i++) {
-            selSpriteCmd = sprites[i]._renderCmd;
-            if (sprites[i]._visible && selSpriteCmd && selSpriteCmd.rendering) {
-                selSpriteCmd.rendering(wrapper, scaleX, scaleY);
-                selSpriteCmd._dirtyFlag = 0;
-            }
-        }
-        wrapper._switchToArmatureMode(false);
-        wrapper.restore();*/
-
-        //set to armature mode (spine need same way to draw)
-        var sprites = this._skeletonSprites, slot, selSpriteCmd,attachment;
-        for (i = 0, n = sprites.length; i < n; i++) {
-            selSpriteCmd = sprites[i]._renderCmd;
-            if (sprites[i]._visible && selSpriteCmd && selSpriteCmd.rendering) {
-                selSpriteCmd.transform(this, false);
-                selSpriteCmd.rendering(wrapper, scaleX, scaleY);
-                selSpriteCmd._dirtyFlag = 0;
+        var locSkeleton = node._skeleton, drawOrder = locSkeleton.drawOrder;
+        for(i = 0, n = drawOrder.length; i < n; i++){
+            slot = drawOrder[i];
+            slotNode = slot._slotNode;
+            if(slotNode._visible && slotNode._renderCmd && slot.currentSprite){
+                slotNode._renderCmd.transform(this, true);
+                slot.currentSprite._renderCmd.rendering(wrapper, scaleX, scaleY);
+                slotNode._renderCmd._dirtyFlag = slot.currentSprite._renderCmd._dirtyFlag = 0;
             }
         }
 
         if (!node._debugSlots && !node._debugBones)
             return;
+
         wrapper.setTransform(this._worldTransform, scaleX, scaleY);
-        var drawingUtil = cc._drawingUtil;
+        wrapper.setGlobalAlpha(1);
+        var attachment, drawingUtil = cc._drawingUtil;
         if (node._debugSlots) {
             // Slots.
             drawingUtil.setDrawColor(0, 0, 255, 255);
             drawingUtil.setLineWidth(1);
 
             var points = [];
-            var drawOrder = node._skeleton.drawOrder;
-            for (i = 0, n = drawOrder.length; i < n; i++) {
-            //for (i = 0, n = locSkeleton.slots.length; i < n; i++) {
+            for (i = 0, n = locSkeleton.slots.length; i < n; i++) {
                 slot = locSkeleton.drawOrder[i];
                 if (!slot.attachment || slot.attachment.type != sp.ATTACHMENT_TYPE.REGION)
                     continue;
@@ -169,68 +111,103 @@
 
     proto._createChildFormSkeletonData = function(){
         var node = this._node;
-        var locSkeleton = node._skeleton, rendererObject, rect;
-        for (var i = 0, n = locSkeleton.drawOrder.length; i < n; i++) {
-            var slot = locSkeleton.drawOrder[i];
-            var attachment = slot.attachment;
-            if (!(attachment instanceof spine.RegionAttachment))
-                continue;
-            rendererObject = attachment.rendererObject;
-            rect = cc.rect(rendererObject.x, rendererObject.y, rendererObject.width,rendererObject.height);
-            var sprite = new cc.Sprite();
-            sprite.initWithTexture(rendererObject.page._texture, rect, rendererObject.rotate, false);
-            sprite._rect.width = attachment.width;
-            sprite._rect.height = attachment.height;
-            sprite.setContentSize(attachment.width, attachment.height);
-            sprite.setRotation(-(slot.bone.worldRotation + attachment.rotation));
-            this._skeletonSprites.push(sprite);
-            slot.currentSprite = sprite;
+        var locSkeleton = node._skeleton, spriteName, sprite;
+        for (var i = 0, n = locSkeleton.slots.length; i < n; i++) {
+            var slot = locSkeleton.slots[i], attachment = slot.attachment;
+            var slotNode = new cc.Node();
+            slot._slotNode = slotNode;
+
+            if(attachment instanceof spine.RegionAttachment){
+                spriteName = attachment.rendererObject.name;
+                sprite = this._createSprite(slot, attachment);
+                slot.currentSprite = sprite;
+                slot.currentSpriteName = spriteName;
+                slotNode.addChild(sprite);
+            } else if(attachment instanceof spine.MeshAttachment){
+                //todo for mesh
+            }
         }
     };
 
+    proto._createSprite = function(slot, attachment){
+        var rendererObject = attachment.rendererObject;
+        var texture = rendererObject.page._texture;
+        var rect = new cc.Rect(rendererObject.x, rendererObject.y, rendererObject.width, rendererObject.height);
+        var sprite = new cc.Sprite();
+        sprite.initWithTexture(rendererObject.page._texture, rect, rendererObject.rotate, false);
+        sprite._rect.width = attachment.width;
+        sprite._rect.height = attachment.height;
+        sprite.setContentSize(attachment.width, attachment.height);
+        sprite.setRotation(-attachment.rotation);
+        sprite.setScale(rendererObject.width / rendererObject.originalWidth * attachment.scaleX,
+            rendererObject.height / rendererObject.originalHeight * attachment.scaleY);
+
+        slot.sprites = slot.sprites || {};
+        slot.sprites[rendererObject.name] = sprite;
+
+        return sprite;
+    };
+
     proto._updateChild = function(){
-        var node = this._node;
-        var locSkeleton = node._skeleton, locSkeletonSprites = this._skeletonSprites;
-        locSkeleton.updateWorldTransform();
-        locSkeletonSprites.length = 0;
-        var drawOrder = node._skeleton.drawOrder;
-        for (var i = 0, n = drawOrder.length; i < n; i++) {
-            var slot = drawOrder[i];
-            var attachment = slot.attachment, selSprite = slot.currentSprite;
-            if (!(attachment instanceof spine.RegionAttachment)) {
-                if(selSprite)
-                    selSprite.setVisible(false);
+        var locSkeleton = this._node._skeleton, slots = locSkeleton.slots;
+        var i, n, selSprite;
+
+        var slot, attachment, slotNode;
+        for(i = 0, n = slots.length; i < n; i++){
+            slot = slots[i];
+            attachment = slot.attachment;
+            slotNode = slot._slotNode;
+            if(!attachment){
+                slotNode.setVisible(false);
+                continue;
+            }
+            var type = attachment.type;
+            if (type === spine.AttachmentType.region){
+                if(attachment.rendererObject){
+                    if(!slot.currentSpriteName || slot.currentSpriteName !== attachment.name){
+                         var spriteName = attachment.rendererObject.name;
+                        if(slot.currentSprite !== undefined)
+                            slot.currentSprite.setVisible(false);
+                        slot.sprites = slot.sprites ||{};
+                        if(slot.sprites[spriteName] !== undefined)
+                            slot.sprites[spriteName].setVisible(true);
+                        else{
+                            var sprite = this._createSprite(slot, attachment);
+                            slotNode.addChild(sprite);
+                        }
+                        slot.currentSprite = slot.sprites[spriteName];
+                        slot.currentSpriteName = spriteName;
+                    }
+                }
+                var bone = slot.bone;
+                slotNode.setPosition(bone.worldX + attachment.x * bone.m00 + attachment.y * bone.m01,
+                    bone.worldY + attachment.x * bone.m10 + attachment.y * bone.m11);
+                slotNode.setScale(bone.worldScaleX, bone.worldScaleY);
+
+                //set the color and opacity
+                selSprite = slot.currentSprite;
+                selSprite._flippedX = bone.worldFlipX;
+                selSprite._flippedY = bone.worldFlipY;
+                if(selSprite._flippedY || selSprite._flippedX){
+                    slotNode.setRotation(bone.worldRotation);
+                    selSprite.setRotation(attachment.rotation);
+                }else{
+                    slotNode.setRotation(-bone.worldRotation);
+                    selSprite.setRotation(-attachment.rotation);
+                }
+
+                //hack for sprite
+                selSprite._renderCmd._displayedOpacity = 0 | (locSkeleton.a * slot.a * 255);
+                var r = 0 | (locSkeleton.r * slot.r * 255), g = 0 | (locSkeleton.g * slot.g * 255), b = 0 | (locSkeleton.b * slot.b * 255);
+                selSprite.setColor(cc.color(r,g,b));
+                selSprite._renderCmd._updateColor();
+            } else if (type === spine.AttachmentType.skinnedmesh) {
+                //todo for mesh
+            } else {
+                slotNode.setVisible(false);
                 continue;
             }
-            var rendererObject = attachment.rendererObject;
-            var rect = cc.rect(rendererObject.x, rendererObject.y, rendererObject.width,rendererObject.height);
-            if(!selSprite){
-                var sprite = new cc.Sprite();
-                locSkeletonSprites.push(sprite);
-                selSprite = slot.currentSprite = sprite;
-            }else
-                locSkeletonSprites.push(selSprite);
-            selSprite.initWithTexture(rendererObject.page._texture, rect, rendererObject.rotate, false);
-            selSprite.setContentSize(attachment.width, attachment.height);
-            selSprite._rect.width = attachment.width;
-            selSprite._rect.height = attachment.height;
-
-            selSprite.setVisible(true);
-            //update color and blendFunc
-            selSprite.setBlendFunc(cc.BLEND_SRC, slot.data.additiveBlending ? cc.ONE : cc.BLEND_DST);
-
-            var bone = slot.bone;
-            selSprite.setPosition(bone.worldX, bone.worldY);
-            selSprite.setScale(bone.worldScaleX, bone.worldScaleY);
-            //selSprite.setRotation(-(slot.bone.worldRotation + attachment.rotation));
-            selSprite.setRotation(-bone.worldRotation);
-            selSprite.setOpacity(0 | (node._skeleton.a * slot.a * 255));
-            selSprite.setFlippedX(bone.flipX);
-            selSprite.setFlippedY(bone.flipY);
-            var r = 0 | (node._skeleton.r * slot.r * 255);
-            var g = 0 | (node._skeleton.g * slot.g * 255);
-            var b = 0 | (node._skeleton.b * slot.b * 255);
-            selSprite.setColor(cc.color(r,g,b));
+            slotNode.setVisible(true);
         }
     };
 })();

template/project.json

@@ -4,7 +4,7 @@
     "showFPS" : true,
     "frameRate" : 60,
     "id" : "gameCanvas",
-    "renderMode" : 1,
+    "renderMode" : 0,
     "engineDir":"../",
 
     "modules" : ["cocos2d", "extensions"],

template/src/myApp.js

@@ -44,15 +44,6 @@ var MyLayer = cc.Layer.extend({
         this.sprite.setPosition(size.width / 2, size.height / 2);
         this.sprite.setScale(size.height / this.sprite.getContentSize().height);
         this.addChild(this.sprite, 0);
-
-        var spineBoy = new sp.SkeletonAnimation('skeleton.json', 'skeleton.atlas');
-        spineBoy.setPosition(cc.p(size.width / 2, size.height / 2 - 150));
-        this.addChild(spineBoy, 10);
-        spineBoy.setAnimation(0, 'attack5', true);
-        spineBoy.setTimeScale(0.1);
-        //spineBoy.setDebugBonesEnabled(true);
-        spineBoy.setDebugSlotsEnabled(true);
-        window.spineBoy = spineBoy;
     }
 });
 

template/src/resource.js

@@ -6,9 +6,6 @@ var g_resources = [
     //image
     s_HelloWorld,
     s_CloseNormal,
-    "skeleton.png",
-    "skeleton.atlas",
-    "skeleton.json",
     s_CloseSelected
 
     //plist