Improve spine rendering

Author: pandamicro

cocos2d/core/textures/CCTexture2D.js

@@ -190,7 +190,6 @@ cc.game.addEventListener(cc.game.EVENT_RENDERER_INITED, function () {
              */
             handleLoadedTexture: function () {
                 var self = this;
-                if (self._textureLoaded) return;
                 if (!self._htmlElementObj) {
                     return;
                 }

extensions/spine/CCSkeleton.js

@@ -59,6 +59,8 @@ sp.ATTACHMENT_TYPE = {
     SKINNED_MESH:3
 };
 
+var spine = sp.spine;
+
 /**
  * <p>
  *     The skeleton of Spine.                                                                          <br/>
@@ -78,7 +80,6 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
     _premultipliedAlpha: false,
     _ownsSkeletonData: null,
     _atlas: null,
-    _blendFunc: null,
 
     /**
      * The constructor of sp.Skeleton. override it to extend the construction behavior, remember to call "this._super()" in the extended "ctor" function.
@@ -105,7 +106,6 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
     init: function () {
         cc.Node.prototype.init.call(this);
         this._premultipliedAlpha = (cc._renderType === cc.game.RENDER_TYPE_WEBGL && cc.OPTIMIZE_BLEND_FUNC_FOR_PREMULTIPLIED_ALPHA);
-        this._blendFunc = {src: cc.BLEND_SRC, dst: cc.BLEND_DST};
         this.scheduleUpdate();
     },
 
@@ -171,7 +171,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
 
     /**
      * Initializes sp.Skeleton with Data.
-     * @param {spine.SkeletonData|String} skeletonDataFile
+     * @param {sp.spine.SkeletonData|String} skeletonDataFile
      * @param {String|spine.Atlas|spine.SkeletonData} atlasFile atlas filename or atlas data or owns SkeletonData
      * @param {Number} [scale] scale can be specified on the JSON or binary loader which will scale the bone positions, image sizes, and animation translations.
      */
@@ -211,13 +211,13 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
      */
     getBoundingBox: function () {
         var minX = cc.FLT_MAX, minY = cc.FLT_MAX, maxX = cc.FLT_MIN, maxY = cc.FLT_MIN;
-        var scaleX = this.getScaleX(), scaleY = this.getScaleY(), vertices = [],
+        var scaleX = this.getScaleX(), scaleY = this.getScaleY(), vertices,
             slots = this._skeleton.slots, VERTEX = spine.RegionAttachment;
 
         for (var i = 0, slotCount = slots.length; i < slotCount; ++i) {
             var slot = slots[i];
             var attachment = slot.attachment;
-            if (!attachment || ! (attachment instanceof spine.RegionAttachment))
+            if (!attachment || !(attachment instanceof spine.RegionAttachment))
                 continue;
             vertices = attachment.updateWorldVertices(slot, false);
             minX = Math.min(minX, vertices[VERTEX.X1] * scaleX, vertices[VERTEX.X4] * scaleX, vertices[VERTEX.X2] * scaleX, vertices[VERTEX.X3] * scaleX);
@@ -260,7 +260,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
     /**
      * Finds a bone by name. This does a string comparison for every bone.
      * @param {String} boneName
-     * @returns {spine.Bone}
+     * @returns {sp.spine.Bone}
      */
     findBone: function (boneName) {
         return this._skeleton.findBone(boneName);
@@ -269,7 +269,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
     /**
      * Finds a slot by name. This does a string comparison for every slot.
      * @param {String} slotName
-     * @returns {spine.Slot}
+     * @returns {sp.spine.Slot}
      */
     findSlot: function (slotName) {
         return this._skeleton.findSlot(slotName);
@@ -278,7 +278,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
     /**
      * Finds a skin by name and makes it the active skin. This does a string comparison for every skin. Note that setting the skin does not change which attachments are visible.
      * @param {string} skinName
-     * @returns {spine.Skin}
+     * @returns {sp.spine.Skin}
      */
     setSkin: function (skinName) {
         return this._skeleton.setSkinByName(skinName);
@@ -288,7 +288,7 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
      * Returns the attachment for the slot and attachment name. The skeleton looks first in its skin, then in the skeleton data’s default skin.
      * @param {String} slotName
      * @param {String} attachmentName
-     * @returns {spine.RegionAttachment|spine.BoundingBoxAttachment}
+     * @returns {sp.spine.Attachment}
      */
     getAttachment: function (slotName, attachmentName) {
         return this._skeleton.getAttachmentByName(slotName, attachmentName);
@@ -321,8 +321,8 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
 
     /**
      * Sets skeleton data to sp.Skeleton.
-     * @param {spine.SkeletonData} skeletonData
-     * @param {spine.SkeletonData} ownsSkeletonData
+     * @param {sp.spine.SkeletonData} skeletonData
+     * @param {sp.spine.SkeletonData} ownsSkeletonData
      */
     setSkeletonData: function (skeletonData, ownsSkeletonData) {
         if(skeletonData.width != null && skeletonData.height != null)
@@ -338,8 +338,8 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
 
     /**
      * Return the renderer of attachment.
-     * @param {spine.RegionAttachment|spine.BoundingBoxAttachment} regionAttachment
-     * @returns {cc.Node}
+     * @param {sp.spine.RegionAttachment|sp.spine.BoundingBoxAttachment} regionAttachment
+     * @returns {sp.spine.TextureAtlasRegion}
      */
     getTextureAtlas: function (regionAttachment) {
         return regionAttachment.region;
@@ -350,23 +350,23 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
      * @returns {cc.BlendFunc}
      */
     getBlendFunc: function () {
-        return this._blendFunc;
+        var slot = this._skeleton.drawOrder[0];
+        if (slot) {
+            var blend = this._renderCmd._getBlendFunc(slot.data.blendMode, this._premultipliedAlpha);
+            return blend;
+        }
+        else {
+            return {};
+        }
     },
 
     /**
-     * Sets the blendFunc of sp.Skeleton.
+     * Sets the blendFunc of sp.Skeleton, it won't have any effect for skeleton, skeleton is using slot's data to determine the blend function.
      * @param {cc.BlendFunc|Number} src
      * @param {Number} [dst]
      */
     setBlendFunc: function (src, dst) {
-        var locBlendFunc = this._blendFunc;
-        if (dst === undefined) {
-            locBlendFunc.src = src.src;
-            locBlendFunc.dst = src.dst;
-        } else {
-            locBlendFunc.src = src;
-            locBlendFunc.dst = dst;
-        }
+        return;
     },
 
     /**
@@ -378,6 +378,14 @@ sp.Skeleton = cc.Node.extend(/** @lends sp.Skeleton# */{
     }
 });
 
+cc.defineGetterSetter(sp.Skeleton.prototype, "opacityModifyRGB", sp.Skeleton.prototype.isOpacityModifyRGB);
+
+// For renderer webgl to identify skeleton's default texture and blend function
+cc.defineGetterSetter(sp.Skeleton.prototype, "_blendFunc", sp.Skeleton.prototype.getBlendFunc);
+cc.defineGetterSetter(sp.Skeleton.prototype, '_texture', function () {
+    return this._renderCmd._currTexture;
+});
+
 /**
  * Creates a skeleton object.
  * @deprecated since v3.0, please use new sp.Skeleton(skeletonDataFile, atlasFile, scale) instead.

extensions/spine/CCSkeletonAnimation.js

@@ -32,8 +32,7 @@ sp._atlasLoader = {
     load:function(line){
         var texturePath = cc.path.join(cc.path.dirname(this.spAtlasFile), line);
         var texture = cc.textureCache.addImage(texturePath);
-        var tex = new sp.SkeletonTexture();
-        tex._image = { width: texture.getPixelsWide(), height: texture.getPixelsHigh() };
+        var tex = new sp.SkeletonTexture({ width: texture.getPixelsWide(), height: texture.getPixelsHigh() });
         tex.setRealTexture(texture);
         return tex;
     },
@@ -55,7 +54,7 @@ sp.ANIMATION_EVENT_TYPE = {
     EVENT: 5
 };
 
-sp.TrackEntryListeners = function(startListener, endListener, completeListener, eventListener, interruptListener, disposeListener){
+sp.TrackEntryListeners = function (startListener, endListener, completeListener, eventListener, interruptListener, disposeListener) {
     this.startListener = startListener || null;
     this.endListener = endListener || null;
     this.completeListener = completeListener || null;
@@ -156,7 +155,7 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
 
     /**
      * Sets animation state data to sp.SkeletonAnimation.
-     * @param {spine.AnimationStateData} stateData
+     * @param {sp.spine.AnimationStateData} stateData
      */
     setAnimationStateData: function (stateData) {
         var state = new spine.AnimationState(stateData);
@@ -192,7 +191,7 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
      * @param {Number} trackIndex
      * @param {String} name
      * @param {Boolean} loop
-     * @returns {spine.TrackEntry|null}
+     * @returns {sp.spine.TrackEntry|null}
      */
     setAnimation: function (trackIndex, name, loop) {
         var animation = this._skeleton.data.findAnimation(name);
@@ -209,7 +208,7 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
      * @param {String} name
      * @param {Boolean} loop
      * @param {Number} [delay=0]
-     * @returns {spine.TrackEntry|null}
+     * @returns {sp.spine.TrackEntry|null}
      */
     addAnimation: function (trackIndex, name, loop, delay) {
         delay = delay == null ? 0 : delay;
@@ -221,10 +220,19 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
         return this._state.addAnimationWith(trackIndex, animation, loop, delay);
     },
 
+    /**
+     * Find animation with specified name
+     * @param {String} name
+     * @returns {sp.spine.Animation|null}
+     */
+    findAnimation: function (name) {
+        return this._skeleton.data.findAnimation(name);
+    },
+
     /**
      * Returns track entry by trackIndex.
      * @param trackIndex
-     * @returns {spine.TrackEntry|null}
+     * @returns {sp.spine.TrackEntry|null}
      */
     getCurrent: function (trackIndex) {
         return this._state.getCurrent(trackIndex);
@@ -254,6 +262,7 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
     update: function (dt) {
         this._super(dt);
         dt *= this._timeScale;
+        this._renderCmd.setDirtyFlag(cc.Node._dirtyFlags.contentDirty);
         this._state.update(dt);
         this._state.apply(this._skeleton);
         this._skeleton.updateWorldTransform();
@@ -339,4 +348,4 @@ sp.SkeletonAnimation = sp.Skeleton.extend(/** @lends sp.SkeletonAnimation# */{
  */
 sp.SkeletonAnimation.createWithJsonFile = sp.SkeletonAnimation.create = function (skeletonDataFile, atlasFile/* or atlas*/, scale) {
     return new sp.SkeletonAnimation(skeletonDataFile, atlasFile, scale);
-};
+};