Asynchronous loading texture

cocos2d/core/event-manager/CCEventHelper.js

@@ -71,7 +71,25 @@ cc.EventHelper.prototype = {
         return false;
     },
 
-    removeEventListener: function( type, target){
+    removeEventListener: function( type, listener, target){
+        if ( this._listeners === undefined )
+            return;
+
+        var listeners = this._listeners;
+        var listenerArray = listeners[ type ];
+
+        if ( listenerArray !== undefined ) {
+            for(var i = 0; i < listenerArray.length ; ){
+                var selListener = listenerArray[i];
+                if(selListener.eventTarget === target && selListener.callback === listener)
+                    listenerArray.splice( i, 1 );
+                else
+                    i++
+            }
+        }
+    },
+
+    removeEventTarget: function( type, listener, target){
         if ( this._listeners === undefined )
             return;
 

cocos2d/core/sprites/CCSprite.js

@@ -123,6 +123,7 @@ cc.Sprite = cc.Node.extend(/** @lends cc.Sprite# */{
     ctor: function (fileName, rect, rotated) {
         var self = this;
         cc.Node.prototype.ctor.call(self);
+        self._loader = new cc.Sprite.LoadManager();
         self._shouldBeHidden = false;
         self._offsetPosition = cc.p(0, 0);
         self._unflippedOffsetPositionFromCenter = cc.p(0, 0);
@@ -246,19 +247,7 @@ cc.Sprite = cc.Node.extend(/** @lends cc.Sprite# */{
      */
     initWithSpriteFrame:function (spriteFrame) {
         cc.assert(spriteFrame, cc._LogInfos.Sprite_initWithSpriteFrame);
-
-        if(!spriteFrame.textureLoaded()){
-            //add event listener
-            this._textureLoaded = false;
-            spriteFrame.addEventListener("load", this._renderCmd._spriteFrameLoadedCallback, this);
-        }
-
-        //TODO
-        var rotated = cc._renderType === cc.game.RENDER_TYPE_CANVAS ? false : spriteFrame._rotated;
-        var ret = this.initWithTexture(spriteFrame.getTexture(), spriteFrame.getRect(), rotated);
-        this.setSpriteFrame(spriteFrame);
-
-        return ret;
+        return this.setSpriteFrame(spriteFrame);
     },
 
     /**
@@ -645,14 +634,21 @@ cc.Sprite = cc.Node.extend(/** @lends cc.Sprite# */{
         var tex = cc.textureCache.getTextureForKey(filename);
         if (!tex) {
             tex = cc.textureCache.addImage(filename);
-            return this.initWithTexture(tex, rect || cc.rect(0, 0, tex._contentSize.width, tex._contentSize.height));
-        } else {
-            if (!rect) {
-                var size = tex.getContentSize();
-                rect = cc.rect(0, 0, size.width, size.height);
-            }
-            return this.initWithTexture(tex, rect);
         }
+        this._loader.clear();
+        if (!tex.isLoaded()) {
+            this._loader.add(tex, function () {
+                this.initWithFile(filename, rect);
+                this.dispatchEvent("load");
+            }, this);
+            return false;
+        }
+
+        if (!rect) {
+            var size = tex.getContentSize();
+            rect = cc.rect(0, 0, size.width, size.height);
+        }
+        return this.initWithTexture(tex, rect);
     },
 
     /**
@@ -669,6 +665,16 @@ cc.Sprite = cc.Node.extend(/** @lends cc.Sprite# */{
     initWithTexture: function (texture, rect, rotated, counterclockwise) {
         var _t = this;
         cc.assert(arguments.length !== 0, cc._LogInfos.CCSpriteBatchNode_initWithTexture);
+        this._loader.clear();
+
+        _t._textureLoaded = texture.isLoaded();
+        if (!_t._textureLoaded) {
+            this._loader.add(texture, function () {
+                this.initWithTexture(texture, rect, rotated, counterclockwise);
+                this.dispatchEvent("load");
+            }, this);
+            return false;
+        }
 
         rotated = rotated || false;
         texture = this._renderCmd._handleTextureForRotatedTexture(texture, rect, rotated, counterclockwise);
@@ -694,22 +700,12 @@ cc.Sprite = cc.Node.extend(/** @lends cc.Sprite# */{
         _t._offsetPosition.y = 0;
         _t._hasChildren = false;
 
-        var locTextureLoaded = texture.isLoaded();
-        _t._textureLoaded = locTextureLoaded;
-
-        if (!locTextureLoaded) {
-            _t._rectRotated = rotated;
-            if (rect) {
-                _t._rect.x = rect.x;
-                _t._rect.y = rect.y;
-                _t._rect.width = rect.width;
-                _t._rect.height = rect.height;
-            }
-            if(_t.texture)
-                _t.texture.removeEventListener("load", _t);
-            texture.addEventListener("load", _t._renderCmd._textureLoadedCallback, _t);
-            _t.setTexture(texture);
-            return true;
+        _t._rectRotated = rotated;
+        if (rect) {
+            _t._rect.x = rect.x;
+            _t._rect.y = rect.y;
+            _t._rect.width = rect.width;
+            _t._rect.height = rect.height;
         }
 
         if (!rect)
@@ -789,6 +785,7 @@ cc.Sprite = cc.Node.extend(/** @lends cc.Sprite# */{
             newFrame = cc.spriteFrameCache.getSpriteFrame(newFrame);
             cc.assert(newFrame, cc._LogInfos.Sprite_setSpriteFrame)
         }
+        this._loader.clear();
 
         this.setNodeDirty(true);
 
@@ -798,29 +795,20 @@ cc.Sprite = cc.Node.extend(/** @lends cc.Sprite# */{
 
         // update rect
         var pNewTexture = newFrame.getTexture();
-        var locTextureLoaded = newFrame.textureLoaded();
-        if (!locTextureLoaded) {
-            _t._textureLoaded = false;
-            newFrame.addEventListener("load", function (sender) {
-                _t.setNodeDirty(true);
-                _t._textureLoaded = true;
-                var locNewTexture = sender.getTexture();
-                if (locNewTexture !== _t._texture)
-                    _t._setTexture(locNewTexture);
-                _t.setTextureRect(sender.getRect(), sender.isRotated(), sender.getOriginalSize());
-                _t.dispatchEvent("load");
-                _t.setColor(_t._realColor);
-            }, _t);
-        } else {
-            _t._textureLoaded = true;
-            // update texture before updating texture rect
-            if (pNewTexture !== _t._texture) {
-                _t._setTexture(pNewTexture);
-                _t.setColor(_t._realColor);
-            }
-            _t.setTextureRect(newFrame.getRect(), newFrame.isRotated(), newFrame.getOriginalSize());
+        _t._textureLoaded = newFrame.textureLoaded();
+        this._loader.clear();
+        if (!_t._textureLoaded) {
+            this._loader.add(pNewTexture, function () {
+                this.setSpriteFrame(newFrame);
+                this.dispatchEvent("load");
+            }, this);
+            return false;
+        }
+        if (pNewTexture !== _t._texture) {
+            this._renderCmd._setTexture(pNewTexture);
+            _t.setColor(_t._realColor);
         }
-        this._renderCmd._updateForSetSpriteFrame(pNewTexture);
+        _t.setTextureRect(newFrame.getRect(), newFrame.isRotated(), newFrame.getOriginalSize());
     },
 
     /**
@@ -907,33 +895,28 @@ cc.Sprite = cc.Node.extend(/** @lends cc.Sprite# */{
         if(isFileName)
             texture = cc.textureCache.addImage(texture);
 
-        if(texture._textureLoaded){
-            this._setTexture(texture, isFileName);
-            this.setColor(this._realColor);
-            this._textureLoaded = true;
-        }else{
-            this._renderCmd._setTexture(null);
-            texture.addEventListener("load", function(){
-                this.setNodeDirty(true);
-                this._setTexture(texture, isFileName);
-                this.setColor(this._realColor);
-                this._textureLoaded = true;
+        this._loader.clear();
+        if (!texture._textureLoaded) {
+            // wait for the load to be set again
+            this._loader.add(texture, function () {
+                this.setTexture(texture);
+                this.dispatchEvent("load");
             }, this);
+            return false;
         }
-    },
 
-    _setTexture: function(texture, change){
         this._renderCmd._setTexture(texture);
-        if(change)
-            this._changeRectWithTexture(texture);
+        this._changeRectWithTexture(texture);
+        this.setColor(this._realColor);
+        this._textureLoaded = true;
     },
 
     _changeRectWithTexture: function(texture){
         var contentSize = texture._contentSize;
         var rect = cc.rect(
-                0, 0,
-                contentSize.width, contentSize.height
-            );
+            0, 0,
+            contentSize.width, contentSize.height
+        );
         this.setTextureRect(rect);
     },
 
@@ -990,3 +973,24 @@ cc.EventHelper.prototype.apply(cc.Sprite.prototype);
 cc.assert(cc.isFunction(cc._tmp.PrototypeSprite), cc._LogInfos.MissingFile, "SpritesPropertyDefine.js");
 cc._tmp.PrototypeSprite();
 delete cc._tmp.PrototypeSprite;
+
+(function () {
+    var manager = cc.Sprite.LoadManager = function () {
+        this.list = [];
+    };
+
+    manager.prototype.add = function (source, callback, target) {
+        source.addEventListener('load', callback, target);
+        this.list.push({
+            source: source,
+            listener: callback,
+            target: target
+        });
+    };
+    manager.prototype.clear = function () {
+        while (this.list.length > 0) {
+            var item = this.list.pop();
+            item.source.removeEventListener('load', item.listener, item.target);
+        }
+    };
+})();

cocos2d/core/sprites/CCSpriteCanvasRenderCmd.js

@@ -185,26 +185,6 @@
         }
     };
 
-    proto._updateForSetSpriteFrame = function (pNewTexture, textureLoaded){
-        this._colorized = false;
-        this._textureCoord.renderX = this._textureCoord.x;
-        this._textureCoord.renderY = this._textureCoord.y;
-        textureLoaded = textureLoaded || pNewTexture._textureLoaded;
-        if (textureLoaded) {
-            var curColor = this._node.getColor();
-            if (curColor.r !== 255 || curColor.g !== 255 || curColor.b !== 255)
-                this._updateColor();
-        }
-    };
-
-    proto._spriteFrameLoadedCallback = function (spriteFrame) {
-        var node = this;
-        node.setTextureRect(spriteFrame.getRect(), spriteFrame.isRotated(), spriteFrame.getOriginalSize());
-
-        node._renderCmd._updateColor();
-        node.dispatchEvent("load");
-    };
-
     proto._textureLoadedCallback = function (sender) {
         var node = this;
         if (node._textureLoaded)

cocos2d/core/sprites/CCSpriteWebGLRenderCmd.js

@@ -88,14 +88,7 @@
     proto.isFrameDisplayed = function (frame) {
         var node = this._node;
         return (cc.rectEqualToRect(frame.getRect(), node._rect) && frame.getTexture().getName() === node._texture.getName()
-            && cc.pointEqualToPoint(frame.getOffset(), node._unflippedOffsetPositionFromCenter));
-    };
-
-    proto._updateForSetSpriteFrame = function () {};
-
-    proto._spriteFrameLoadedCallback = function (spriteFrame) {
-        this.setTextureRect(spriteFrame.getRect(), spriteFrame.isRotated(), spriteFrame.getOriginalSize());
-        this.dispatchEvent("load");
+        && cc.pointEqualToPoint(frame.getOffset(), node._unflippedOffsetPositionFromCenter));
     };
 
     proto._textureLoadedCallback = function (sender) {

cocos2d/core/textures/CCTexture2D.js

@@ -380,7 +380,7 @@ cc.game.addEventListener(cc.game.EVENT_RENDERER_INITED, function () {
              * @param {cc.Node} target
              */
             removeLoadedEventListener: function (target) {
-                this.removeEventListener("load", target);
+                this.removeEventTarget("load", target);
             },
 
             _generateColorTexture: function(){/*overide*/},

cocos2d/core/textures/TexturesWebGL.js

@@ -773,7 +773,7 @@ cc._tmp.WebGLTexture2D = function () {
          * @param {cc.Node} target
          */
         removeLoadedEventListener: function (target) {
-            this.removeEventListener("load", target);
+            this.removeEventTarget("load", target);
         }
     });
 };