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

@@ -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',

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
     {
@@ -1767,12 +1773,33 @@ 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);
         //}
 
+        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,
@@ -1783,6 +1810,7 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
                                frame.width,
                                frame.height); 
         }
+    }
 
     // OVERWRITE
     for(var i=0,j=this.children.length; i<j; i++)
@@ -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
  */

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 :)

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);
     }

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
     {
@@ -314,12 +320,33 @@ 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);
         //}
 
+        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,
@@ -330,6 +357,7 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
                                frame.width,
                                frame.height); 
         }
+    }
 
     // OVERWRITE
     for(var i=0,j=this.children.length; i<j; i++)
@@ -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..

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;
+}