Implemented texture caching for fromCanvas method

bin/pixi.dev.js

@@ -1873,11 +1873,10 @@ PIXI.Sprite.prototype._renderCanvas = function(renderSession)
         context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
 
         //if smoothingEnabled is supported and we need to change the smoothing property for this texture
-     //   if(this.smoothProperty && this.scaleMode !== displayObject.texture.baseTexture.scaleMode) {
+        if(renderSession.smoothProperty && renderSession.scaleMode !== this.texture.baseTexture.scaleMode) {
-       //     this.scaleMode = displayObject.texture.baseTexture.scaleMode;
+            renderSession.scaleMode = this.texture.baseTexture.scaleMode;
-         //   context[this.smoothProperty] = (this.scaleMode === PIXI.BaseTexture.SCALE_MODE.LINEAR);
+            context[renderSession.smoothProperty] = (renderSession.scaleMode === PIXI.scaleModes.LINEAR);
-        //}
+        }
-
 
         if(this.tint !== 0xFFFFFF)
         {
@@ -7375,19 +7374,6 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
      * @type Canvas 2d Context
      */
     this.context = this.view.getContext( "2d", { alpha: this.transparent } );
-    //some filter variables
-    this.smoothProperty = null;
-
-    if("imageSmoothingEnabled" in this.context)
-        this.smoothProperty = "imageSmoothingEnabled";
-    else if("webkitImageSmoothingEnabled" in this.context)
-        this.smoothProperty = "webkitImageSmoothingEnabled";
-    else if("mozImageSmoothingEnabled" in this.context)
-        this.smoothProperty = "mozImageSmoothingEnabled";
-    else if("oImageSmoothingEnabled" in this.context)
-        this.smoothProperty = "oImageSmoothingEnabled";
-
-    this.scaleMode = null;
 
     this.refresh = true;
     // hack to enable some hardware acceleration!
@@ -7399,10 +7385,21 @@ PIXI.CanvasRenderer = function(width, height, view, transparent)
 
     this.maskManager = new PIXI.CanvasMaskManager();
 
-    this.renderSession = {};
+    this.renderSession = {
-    this.renderSession.context = this.context;
+        context: this.context,
-    this.renderSession.maskManager = this.maskManager;
+        maskManager: this.maskManager,
-    
+        scaleMode: null,
+        smoothProperty: null
+    };
+
+    if("imageSmoothingEnabled" in this.context)
+        this.renderSession.smoothProperty = "imageSmoothingEnabled";
+    else if("webkitImageSmoothingEnabled" in this.context)
+        this.renderSession.smoothProperty = "webkitImageSmoothingEnabled";
+    else if("mozImageSmoothingEnabled" in this.context)
+        this.renderSession.smoothProperty = "mozImageSmoothingEnabled";
+    else if("oImageSmoothingEnabled" in this.context)
+        this.renderSession.smoothProperty = "oImageSmoothingEnabled";
 };
 
 // constructor
@@ -10510,8 +10507,8 @@ PIXI.BaseTexture = function(source, scaleMode)
     /**
      * The scale mode to apply when scaling this texture
      * @property scaleMode
-     * @type PIXI.BaseTexture.SCALE_MODE
+     * @type PIXI.scaleModes
-     * @default PIXI.BaseTexture.SCALE_MODE.LINEAR
+     * @default PIXI.scaleModes.LINEAR
      */
     this.scaleMode = scaleMode || PIXI.scaleModes.DEFAULT;
 
@@ -10649,6 +10646,8 @@ PIXI.BaseTexture.fromImage = function(imageUrl, crossorigin, scaleMode)
 PIXI.TextureCache = {};
 PIXI.FrameCache = {};
 
+PIXI.TextureCacheIdGenerator = 0;
+
 /**
  * A texture stores the information that represents an image or part of an image. It cannot be added
  * to the display list directly. To do this use PIXI.Sprite. If no frame is provided then the whole image is used
@@ -10837,8 +10836,21 @@ PIXI.Texture.fromFrame = function(frameId)
  */
 PIXI.Texture.fromCanvas = function(canvas, scaleMode)
 {
-    var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
+    if(!canvas._pixiId)
-    return new PIXI.Texture(baseTexture);
+    {
+        canvas._pixiId = "canvas_" + PIXI.TextureCacheIdGenerator++;
+    }
+
+    var texture = PIXI.TextureCache[canvas._pixiId];
+
+    if(!texture)
+    {
+        var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
+        texture = new PIXI.Texture(baseTexture);
+        PIXI.TextureCache[canvas._pixiId] = texture;
+    }
+
+    return texture;
 };
 
 
@@ -10873,8 +10885,6 @@ PIXI.Texture.removeTextureFromCache = function(id)
 // this is more for webGL.. it contains updated frames..
 PIXI.Texture.frameUpdates = [];
 
-PIXI.Texture.SCALE_MODE = PIXI.BaseTexture.SCALE_MODE;
-
 /**
  * @author Mat Groves http://matgroves.com/ @Doormat23
  */

examples/example 1 - Basics/indexTest.html

@@ -0,0 +1,85 @@
+<!DOCTYPE HTML>
+<html>
+<head>
+	<title>pixi.js example 1</title>
+	<style>
+		body {
+			margin: 0;
+			padding: 0;
+			background-color: #000000;
+		}
+	</style>
+	<script src="../../bin/pixi.dev.js"></script>
+
+</head>
+<body>
+	<script>
+
+	// create an new instance of a pixi stage
+	var stage = new PIXI.Stage(0x66FF99);
+
+	// create a renderer instance
+	var renderer = PIXI.autoDetectRenderer(400, 300);
+
+	// add the renderer view element to the DOM
+	document.body.appendChild(renderer.view);
+
+	requestAnimFrame( animate );
+
+	// create a texture from an image path
+	var texture = PIXI.Texture.fromImage("bunny.png");
+	// create a new Sprite using the texture
+	var bunny = new PIXI.Sprite(texture);
+
+	// center the sprites anchor point
+	bunny.anchor.x = 0.5;
+	bunny.anchor.y = 0.5;
+
+	// move the sprite t the center of the screen
+	bunny.position.x = 200;
+	bunny.position.y = 150;
+
+	stage.addChild(bunny);
+
+
+	source = {};
+
+        source.Canvas = document.createElement("canvas")// $('<canvas></canvas>')[0];
+        source.Canvas.width = 256; source.Canvas.height = 256;
+        source.Canvas.context = source.Canvas.getContext('2d');
+        source.Canvas.context.fillStyle = "#FF0000";
+        source.Canvas.context.fillRect(0,0,256,256)
+        //Split Canvas into multiple textures
+        source.Frames = [];
+
+
+        for(i=0;i<4;i++)
+            for(ii=0;ii<4;ii++) {
+                var tex = PIXI.Texture.fromCanvas(source.Canvas);
+                tex.setFrame({x:ii*32,y:i*32,width:32,height:32});
+                source.Frames[(ii+(i*4))] = tex;
+            }
+        source.Sprite = new PIXI.MovieClip(source.Frames);
+        source.Sprite.animationSpeed = 0.1;
+        source.Sprite.currentFrame = 0;
+        source.Sprite.play();
+        stage.addChild(source.Sprite);
+    
+   
+
+	function animate() {
+
+	    requestAnimFrame( animate );
+
+	    // just for fun, lets rotate mr rabbit a little
+	    bunny.rotation += 0.1;
+
+//	    console.log(stage.getBounds().width);
+	    // render the stage
+	    renderer.render(stage);
+	}
+
+	</script>
+
+	</body>
+</html>

src/pixi/textures/Texture.js

@@ -5,6 +5,8 @@
 PIXI.TextureCache = {};
 PIXI.FrameCache = {};
 
+PIXI.TextureCacheIdGenerator = 0;
+
 /**
  * A texture stores the information that represents an image or part of an image. It cannot be added
  * to the display list directly. To do this use PIXI.Sprite. If no frame is provided then the whole image is used
@@ -193,8 +195,21 @@ PIXI.Texture.fromFrame = function(frameId)
  */
 PIXI.Texture.fromCanvas = function(canvas, scaleMode)
 {
-    var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
+    if(!canvas._pixiId)
-    return new PIXI.Texture(baseTexture);
+    {
+        canvas._pixiId = "canvas_" + PIXI.TextureCacheIdGenerator++;
+    }
+
+    var texture = PIXI.TextureCache[canvas._pixiId];
+
+    if(!texture)
+    {
+        var baseTexture = new PIXI.BaseTexture(canvas, scaleMode);
+        texture = new PIXI.Texture(baseTexture);
+        PIXI.TextureCache[canvas._pixiId] = texture;
+    }
+
+    return texture;
 };