Issue cocos2d#1267: implemented ccui.Scale9Sprite's setState

Author: dingpinglv

cocos2d/core/textures/CCTexture2D.js

@@ -399,9 +399,47 @@ if (cc._renderType === cc._RENDER_TYPE_CANVAS) {
          */
         removeLoadedEventListener: function (target) {
             this.removeEventListener("load", target);
+        },
+
+        //hack for gray effect
+        _grayElementObj: null,
+        _backupElement: null,
+        _isGray: false,
+        _switchToGray: function(toGray){
+            if(!this._textureLoaded || this._isGray == toGray)
+                return;
+            this._isGray = toGray;
+            if(this._isGray){
+                this._backupElement = this._htmlElementObj;
+                if(!this._grayElementObj)
+                     this._grayElementObj = cc.Texture2D._generateGrayTexture(this._htmlElementObj);
+                this._htmlElementObj = this._grayElementObj;
+            } else {
+                if(this._backupElement != null)
+                    this._htmlElementObj = this._backupElement;
+            }
         }
     });
 
+    cc.Texture2D._generateGrayTexture = function(texture, rect, renderCanvas){
+        if (texture === null)
+            return null;
+        renderCanvas = renderCanvas || cc.newElement("canvas");
+        rect = rect || cc.rect(0, 0, texture.width, texture.height);
+        renderCanvas.width = rect.width;
+        renderCanvas.height = rect.height;
+
+        var context = renderCanvas.getContext("2d");
+        context.drawImage(texture, rect.x, rect.y, rect.width, rect.height, 0, 0, rect.width, rect.height);
+        var imgData = context.getImageData(0, 0, rect.width, rect.height);
+        var data = imgData.data;
+        for (var i = 0, len = data.length; i < len; i += 4) {
+            data[i] = data[i + 1] = data[i + 2] = 0.34 * data[i] + 0.5 * data[i + 1] + 0.16 * data[i + 2];
+        }
+        context.putImageData(imgData, 0, 0);
+        return renderCanvas;
+    };
+
 } else {
     cc.assert(cc.isFunction(cc._tmp.WebGLTexture2D), cc._LogInfos.MissingFile, "TexturesWebGL.js");
     cc._tmp.WebGLTexture2D();

extensions/ccui/base-classes/UIScale9Sprite.js

@@ -67,11 +67,6 @@ ccui.Scale9Sprite = cc.Node.extend(/** @lends ccui.Scale9Sprite# */{
     _bottom: null,
     _bottomRight: null,
 
-    //cache in canvas on Canvas mode
-    _cacheSprite: null,
-    _cacheCanvas: null,
-    _cacheContext: null,
-    _cacheTexture: null,
     _scale9Dirty: true,
 
     _opacityModifyRGB: false,
@@ -923,8 +918,13 @@ ccui.Scale9Sprite = cc.Node.extend(/** @lends ccui.Scale9Sprite# */{
     },
 
     //v3.3
+    /**
+     * Sets ccui.Scale9Sprite's state
+     * @since v3.3
+     * @param {Number} state
+     */
     setState: function(state){
-        //
+        this._renderCmd.setState(state);
     },
 
     //setScale9Enabled implement late
@@ -1099,4 +1099,6 @@ ccui.Scale9Sprite.POSITIONS_RIGHT = 3;
 ccui.Scale9Sprite.POSITIONS_BOTTOM = 4;
 ccui.Scale9Sprite.POSITIONS_TOPRIGHT = 5;
 ccui.Scale9Sprite.POSITIONS_TOPLEFT = 6;
-ccui.Scale9Sprite.POSITIONS_BOTTOMRIGHT = 7;
+ccui.Scale9Sprite.POSITIONS_BOTTOMRIGHT = 7;
+
+ccui.Scale9Sprite.state = {NORMAL: 0, GRAY: 1};

extensions/ccui/base-classes/UIScale9SpriteCanvasRenderCmd.js

@@ -120,4 +120,17 @@
         if(!this._cacheSprite.getParent())
             node.addChild(this._cacheSprite, -1);
     };
+
+    proto.setState = function(state){
+        var locScale9Image = this._node._scale9Image;
+        if(!locScale9Image)
+            return;
+        var selTexture = locScale9Image.getTexture();
+        if(state === ccui.Scale9Sprite.state.NORMAL){
+            selTexture._switchToGray(false);
+        } else if( state === ccui.Scale9Sprite.state.GRAY){
+            selTexture._switchToGray(true);
+        }
+        this._cacheScale9Sprite();
+    };
 })();

extensions/ccui/base-classes/UIScale9SpriteWebGLRenderCmd.js

@@ -34,9 +34,8 @@
 
     proto.visit = function(parentCmd){
         var node = this._node;
-        if(!node._visible){
+        if(!node._visible)
             return;
-        }
 
         if (node._positionsAreDirty) {
             node._updatePositions();
@@ -60,7 +59,6 @@
                 }
             }
         }
-
     };
 
     proto._updateDisplayOpacity = function(parentColor){
@@ -77,7 +75,43 @@
                 }
             }
         }
+    };
+
+    proto.setState = function (state) {
+        var scale9Image = this._node._scale9Image;
+        if (state === ccui.Scale9Sprite.state.NORMAL) {
+            scale9Image.setShaderProgram(cc.shaderCache.programForKey(cc.SHADER_POSITION_TEXTURECOLOR));
+        } else if (state === ccui.Scale9Sprite.state.GRAY) {
+            scale9Image.setShaderProgram(ccui.Scale9Sprite.WebGLRenderCmd._getGrayShaderProgram());
+        }
+    };
+
+    ccui.Scale9Sprite.WebGLRenderCmd._grayShaderProgram = null;
+    ccui.Scale9Sprite.WebGLRenderCmd._getGrayShaderProgram = function(){
+        var grayShader = ccui.Scale9Sprite.WebGLRenderCmd._grayShaderProgram;
+        if(grayShader)
+            return grayShader;
+
+        grayShader = new cc.GLProgram();
+        grayShader.initWithVertexShaderByteArray(cc.SHADER_POSITION_TEXTURE_COLOR_VERT, ccui.Scale9Sprite.WebGLRenderCmd._grayShaderFragment);
+        grayShader.addAttribute(cc.ATTRIBUTE_NAME_POSITION, cc.VERTEX_ATTRIB_POSITION);
+        grayShader.addAttribute(cc.ATTRIBUTE_NAME_COLOR, cc.VERTEX_ATTRIB_COLOR);
+        grayShader.addAttribute(cc.ATTRIBUTE_NAME_TEX_COORD, cc.VERTEX_ATTRIB_TEX_COORDS);
+        grayShader.link();
+        grayShader.updateUniforms();
 
+        ccui.Scale9Sprite.WebGLRenderCmd._grayShaderProgram = grayShader;
+        return grayShader;
     };
 
+    ccui.Scale9Sprite.WebGLRenderCmd._grayShaderFragment =
+        "precision lowp float;\n"
+        + "varying vec4 v_fragmentColor; \n"
+        + "varying vec2 v_texCoord; \n"
+        + "void main() \n"
+        + "{ \n"
+        + "    vec4 c = texture2D(CC_Texture0, v_texCoord); \n"
+        + "    gl_FragColor.xyz = vec3(0.2126*c.r + 0.7152*c.g + 0.0722*c.b); \n"
+        +"     gl_FragColor.w = c.w ; \n"
+        + "}";
 })();