From 41d6b01e9636a64fdcef4ced5b588c6b51a62800 Mon Sep 17 00:00:00 2001
From: Mat Groves <mat@goodboydigital.com>
Date: Sun, 29 Dec 2013 12:14:34 +0000
Subject: [PATCH] Added canvas sprite tiniting

Currently only works with browsers that support the new canvas blend
modes
still need to add tiniting to tilingsprite and graphics
---
 Gruntfile.js                                  |   1 +
 bin/pixi.dev.js                               | 127 +++++++++++++++---
 examples/example 2 - SpriteSheet/index.html   |   4 +-
 src/pixi/display/DisplayObjectContainer.js    |   2 +-
 src/pixi/display/Sprite.js                    |  69 +++++++---
 .../renderers/canvas/utils/CanvasTinter.js    |  54 ++++++++
 6 files changed, 217 insertions(+), 40 deletions(-)
 create mode 100644 src/pixi/renderers/canvas/utils/CanvasTinter.js

diff --git a/Gruntfile.js b/Gruntfile.js
index 073ec34..aa18450 100644
--- a/Gruntfile.js
+++ b/Gruntfile.js
@@ -43,6 +43,7 @@ module.exports = function(grunt) {
             '<%= dirs.src %>/renderers/webgl/WebGLRenderGroup.js',
             '<%= dirs.src %>/renderers/webgl/utils/WebGLFilterManager.js',
             '<%= dirs.src %>/renderers/canvas/utils/CanvasMaskManager.js',
+            '<%= dirs.src %>/renderers/canvas/utils/CanvasTinter.js',
             '<%= dirs.src %>/renderers/canvas/CanvasRenderer.js',
             '<%= dirs.src %>/renderers/canvas/CanvasGraphics.js',
             '<%= dirs.src %>/primitives/Graphics.js',
diff --git a/bin/pixi.dev.js b/bin/pixi.dev.js
index a9f3ad0..fc89d8e 100644
--- a/bin/pixi.dev.js
+++ b/bin/pixi.dev.js
@@ -4,7 +4,7 @@
  * Copyright (c) 2012, Mat Groves
  * http://goodboydigital.com/
  *
- * Compiled: 2013-12-28
+ * Compiled: 2013-12-29
  *
  * Pixi.JS is licensed under the MIT License.
  * http://www.opensource.org/licenses/mit-license.php
@@ -1445,7 +1445,7 @@ PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
         child._renderCanvas(renderSession);
     }
 
-    if(this.mask)
+    if(this._mask)
     {
         renderSession.maskManager.popMask(renderSession.context);
     }
@@ -1692,38 +1692,44 @@ PIXI.Sprite.prototype.getBounds = function()
 
 PIXI.Sprite.prototype._renderWebGL = function(renderSession)
 {
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
     if(this.visible === false || this.alpha === 0)return;
     
+    // do a quick check to see if this element has a mask or a filter.
     if(this._mask || this._filters)
     {
+        var spriteBatch =  renderSession.spriteBatch;
+
         if(this._mask)
         {
-            renderSession.spriteBatch.stop();
+            spriteBatch.stop();
             renderSession.maskManager.pushMask(this.mask, renderSession.projection);
-            renderSession.spriteBatch.start();
+            spriteBatch.start();
         }
 
         if(this._filters)
         {    
-            renderSession.spriteBatch.flush();
+            spriteBatch.flush();
             renderSession.filterManager.pushFilter(this._filterBlock);
         }
 
-        renderSession.spriteBatch.render(this);
+        // add this sprite to the batch
+        spriteBatch.render(this);
 
-        // simple render children!
+        // now loop through the children and make sure they get rendered
         for(var i=0,j=this.children.length; i<j; i++)
         {
             var child = this.children[i];
             child._renderWebGL(renderSession);
         }
 
-        renderSession.spriteBatch.stop();
+        // time to stop the sprite batch as either a mask element or a filter draw will happen next
+        spriteBatch.stop();
 
         if(this._filters)renderSession.filterManager.popFilter();
         if(this._mask)renderSession.maskManager.popMask(renderSession.projection);
         
-        renderSession.spriteBatch.start();
+        spriteBatch.start();
     }
     else
     {
@@ -1743,11 +1749,11 @@ PIXI.Sprite.prototype._renderWebGL = function(renderSession)
 
 PIXI.Sprite.prototype._renderCanvas = function(renderSession)
 {
-     if(this._mask)
+    if(this._mask)
     {
         renderSession.maskManager.pushMask(this._mask, renderSession.context);
     }
-    
+
     var frame = this.texture.frame;
     var context = renderSession.context;
 
@@ -1767,21 +1773,43 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
             context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
         }
 
+
         //if smoothingEnabled is supported and we need to change the smoothing property for this texture
      //   if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) {
        //     this.scaleMode = displayObject.texture.baseTexture.scaleMode;
          //   context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
         //}
 
-        context.drawImage(this.texture.baseTexture.source,
-                           frame.x,
-                           frame.y,
-                           frame.width,
-                           frame.height,
-                           (this.anchor.x) * -frame.width,
-                           (this.anchor.y) * -frame.height,
-                           frame.width,
-                           frame.height);
+        if(this.tint != 0xFFFFFF)
+        {
+            if(this.cachedTint !== this.tint)
+            {
+                this.cachedTint = this.tint;
+                this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this.texture, this.tint);
+            }
+
+            context.drawImage(this.tintedTexture,
+                               0,
+                               0,
+                               frame.width,
+                               frame.height,
+                               (this.anchor.x) * -frame.width,
+                               (this.anchor.y) * -frame.height,
+                               frame.width,
+                               frame.height);
+        }
+        else
+        {
+            context.drawImage(this.texture.baseTexture.source,
+                               frame.x,
+                               frame.y,
+                               frame.width,
+                               frame.height,
+                               (this.anchor.x) * -frame.width,
+                               (this.anchor.y) * -frame.height,
+                               frame.width,
+                               frame.height); 
+        }
     }
 
     // OVERWRITE
@@ -1790,6 +1818,11 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
         var child = this.children[i];
         child._renderCanvas(renderSession);
     }
+
+    if(this._mask)
+    {
+        renderSession.maskManager.popMask(renderSession.context);
+    }
 }
 
 // some helper functions..
@@ -6132,6 +6165,60 @@ PIXI.CanvasMaskManager.prototype.popMask = function(context)
 { 
     context.restore();
 }
+/**
+ * @author Mat Groves
+ * 
+ * 
+ */
+
+PIXI.CanvasTinter = function()
+{
+   /// this.textureCach
+}
+
+PIXI.CanvasTinter.getTintedTexture = function(texture, color)
+{ 
+    var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
+    
+     // clone texture..
+    var canvas = document.createElement("canvas");
+    var context = canvas.getContext( '2d' );
+
+    var frame = texture.frame;
+
+    context.width = frame.width;
+    context.height = frame.height;
+
+    context.fillStyle = stringColor;
+    
+    context.fillRect(0, 0, frame.width, frame.height);
+    
+    context.globalCompositeOperation = 'multiply';
+
+    context.drawImage(texture.baseTexture.source,
+                           frame.x,
+                           frame.y,
+                           frame.width,
+                           frame.height,
+                           0,
+                           0,
+                           frame.width,
+                           frame.height);
+
+    context.globalCompositeOperation = 'destination-in';
+    
+    context.drawImage(texture.baseTexture.source,
+                           frame.x,
+                           frame.y,
+                           frame.width,
+                           frame.height,
+                           0,
+                           0,
+                           frame.width,
+                           frame.height);
+
+    return canvas;
+}
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */
diff --git a/examples/example 2 - SpriteSheet/index.html b/examples/example 2 - SpriteSheet/index.html
index 3d2521a..1cd8b34 100644
--- a/examples/example 2 - SpriteSheet/index.html	
+++ b/examples/example 2 - SpriteSheet/index.html	
@@ -36,7 +36,8 @@
 	var stage = new PIXI.Stage(0xFFFFFF);
 
 	// create a renderer instance.
-	renderer = PIXI.autoDetectRenderer(800, 600);
+	//renderer = PIXI.autoDetectRenderer(800, 600);
+	renderer = new PIXI.CanvasRenderer(800, 600);
 
 	// add the renderer view element to the DOM
 	document.body.appendChild(renderer.view);
@@ -58,6 +59,7 @@
 
 			// create an alien using the frame name..
 			var alien = PIXI.Sprite.fromFrame(frameName);
+			///alien.tint = 0xFF0000;
 
 			/*
 			 * fun fact for the day :)
diff --git a/src/pixi/display/DisplayObjectContainer.js b/src/pixi/display/DisplayObjectContainer.js
index 982cf9e..0a8441b 100644
--- a/src/pixi/display/DisplayObjectContainer.js
+++ b/src/pixi/display/DisplayObjectContainer.js
@@ -329,7 +329,7 @@ PIXI.DisplayObjectContainer.prototype._renderCanvas = function(renderSession)
         child._renderCanvas(renderSession);
     }
 
-    if(this.mask)
+    if(this._mask)
     {
         renderSession.maskManager.popMask(renderSession.context);
     }
diff --git a/src/pixi/display/Sprite.js b/src/pixi/display/Sprite.js
index 5f78cbe..7986702 100644
--- a/src/pixi/display/Sprite.js
+++ b/src/pixi/display/Sprite.js
@@ -239,38 +239,44 @@ PIXI.Sprite.prototype.getBounds = function()
 
 PIXI.Sprite.prototype._renderWebGL = function(renderSession)
 {
+    // if the sprite is not visible or the alpha is 0 then no need to render this element
     if(this.visible === false || this.alpha === 0)return;
     
+    // do a quick check to see if this element has a mask or a filter.
     if(this._mask || this._filters)
     {
+        var spriteBatch =  renderSession.spriteBatch;
+
         if(this._mask)
         {
-            renderSession.spriteBatch.stop();
+            spriteBatch.stop();
             renderSession.maskManager.pushMask(this.mask, renderSession.projection);
-            renderSession.spriteBatch.start();
+            spriteBatch.start();
         }
 
         if(this._filters)
         {    
-            renderSession.spriteBatch.flush();
+            spriteBatch.flush();
             renderSession.filterManager.pushFilter(this._filterBlock);
         }
 
-        renderSession.spriteBatch.render(this);
+        // add this sprite to the batch
+        spriteBatch.render(this);
 
-        // simple render children!
+        // now loop through the children and make sure they get rendered
         for(var i=0,j=this.children.length; i<j; i++)
         {
             var child = this.children[i];
             child._renderWebGL(renderSession);
         }
 
-        renderSession.spriteBatch.stop();
+        // time to stop the sprite batch as either a mask element or a filter draw will happen next
+        spriteBatch.stop();
 
         if(this._filters)renderSession.filterManager.popFilter();
         if(this._mask)renderSession.maskManager.popMask(renderSession.projection);
         
-        renderSession.spriteBatch.start();
+        spriteBatch.start();
     }
     else
     {
@@ -290,11 +296,11 @@ PIXI.Sprite.prototype._renderWebGL = function(renderSession)
 
 PIXI.Sprite.prototype._renderCanvas = function(renderSession)
 {
-     if(this._mask)
+    if(this._mask)
     {
         renderSession.maskManager.pushMask(this._mask, renderSession.context);
     }
-    
+
     var frame = this.texture.frame;
     var context = renderSession.context;
 
@@ -314,21 +320,43 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
             context.globalCompositeOperation = PIXI.blendModesCanvas[renderSession.currentBlendMode];
         }
 
+
         //if smoothingEnabled is supported and we need to change the smoothing property for this texture
      //   if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) {
        //     this.scaleMode = displayObject.texture.baseTexture.scaleMode;
          //   context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
         //}
 
-        context.drawImage(this.texture.baseTexture.source,
-                           frame.x,
-                           frame.y,
-                           frame.width,
-                           frame.height,
-                           (this.anchor.x) * -frame.width,
-                           (this.anchor.y) * -frame.height,
-                           frame.width,
-                           frame.height);
+        if(this.tint != 0xFFFFFF)
+        {
+            if(this.cachedTint !== this.tint)
+            {
+                this.cachedTint = this.tint;
+                this.tintedTexture = PIXI.CanvasTinter.getTintedTexture(this.texture, this.tint);
+            }
+
+            context.drawImage(this.tintedTexture,
+                               0,
+                               0,
+                               frame.width,
+                               frame.height,
+                               (this.anchor.x) * -frame.width,
+                               (this.anchor.y) * -frame.height,
+                               frame.width,
+                               frame.height);
+        }
+        else
+        {
+            context.drawImage(this.texture.baseTexture.source,
+                               frame.x,
+                               frame.y,
+                               frame.width,
+                               frame.height,
+                               (this.anchor.x) * -frame.width,
+                               (this.anchor.y) * -frame.height,
+                               frame.width,
+                               frame.height); 
+        }
     }
 
     // OVERWRITE
@@ -337,6 +365,11 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
         var child = this.children[i];
         child._renderCanvas(renderSession);
     }
+
+    if(this._mask)
+    {
+        renderSession.maskManager.popMask(renderSession.context);
+    }
 }
 
 // some helper functions..
diff --git a/src/pixi/renderers/canvas/utils/CanvasTinter.js b/src/pixi/renderers/canvas/utils/CanvasTinter.js
new file mode 100644
index 0000000..e966614
--- /dev/null
+++ b/src/pixi/renderers/canvas/utils/CanvasTinter.js
@@ -0,0 +1,54 @@
+/**
+ * @author Mat Groves
+ * 
+ * 
+ */
+
+PIXI.CanvasTinter = function()
+{
+   /// this.textureCach
+}
+
+PIXI.CanvasTinter.getTintedTexture = function(texture, color)
+{ 
+    var stringColor = '#' + ('00000' + ( color | 0).toString(16)).substr(-6);
+    
+     // clone texture..
+    var canvas = document.createElement("canvas");
+    var context = canvas.getContext( '2d' );
+
+    var frame = texture.frame;
+
+    context.width = frame.width;
+    context.height = frame.height;
+
+    context.fillStyle = stringColor;
+    
+    context.fillRect(0, 0, frame.width, frame.height);
+    
+    context.globalCompositeOperation = 'multiply';
+
+    context.drawImage(texture.baseTexture.source,
+                           frame.x,
+                           frame.y,
+                           frame.width,
+                           frame.height,
+                           0,
+                           0,
+                           frame.width,
+                           frame.height);
+
+    context.globalCompositeOperation = 'destination-in';
+    
+    context.drawImage(texture.baseTexture.source,
+                           frame.x,
+                           frame.y,
+                           frame.width,
+                           frame.height,
+                           0,
+                           0,
+                           frame.width,
+                           frame.height);
+
+    return canvas;
+}
\ No newline at end of file