Fixing a few more Pixi issues.

examples/wip/bmd2.js

@@ -1,5 +1,5 @@
 
-var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
 
 function preload() {
 

examples/wip/gc1.js

@@ -0,0 +1,14 @@
+
+var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
+
+function preload() {
+}
+
+function create() {
+}
+
+function update() {
+}
+
+function render() {
+}

src/PixiPatch.js

@@ -1,116 +1,139 @@
 /**
- * We're replacing a couple of Pixi's methods here to fix or add some vital functionality:
+* We're replacing a couple of Pixi's methods here to fix or add some vital functionality:
+*
+* 1) Added support for Trimmed sprite sheets
+* 2) Skip display objects with an alpha of zero
+* 3) Avoid Style Recalculation from the incorrect bgcolor value
+*
+* Hopefully we can remove this once Pixi has been updated to support these things.
+*/
+
+/**
+ * Renders the stage to its canvas view
  *
- * 1) Added support for Trimmed sprite sheets
- * 2) Skip display objects with an alpha of zero
- *
- * Hopefully we can remove this once Pixi has been updated to support these things.
+ * @method render
+ * @param stage {Stage} the Stage element to be rendered
  */
+PIXI.CanvasRenderer.prototype.render = function(stage)
+{
+	PIXI.texturesToUpdate.length = 0;
+	PIXI.texturesToDestroy.length = 0;
+	
+	PIXI.visibleCount++;
+	stage.updateTransform();
+	
+	// update the background color
+	// if(this.view.style.backgroundColor!=stage.backgroundColorString && !this.transparent)this.view.style.backgroundColor = stage.backgroundColorString;
+
+	this.context.setTransform(1, 0, 0, 1, 0, 0); 
+	this.context.clearRect(0, 0, this.width, this.height)
+    this.renderDisplayObject(stage);
+   
+	//	Remove frame updates
+	if (PIXI.Texture.frameUpdates.length > 0)
+	{
+		PIXI.Texture.frameUpdates.length = 0;
+	}
+	
+}
 
 PIXI.CanvasRenderer.prototype.renderDisplayObject = function(displayObject)
 {
-	// no loger recurrsive!
-	var transform;
-	var context = this.context;
-	
-	context.globalCompositeOperation = 'source-over';
-	
-	// one the display object hits this. we can break the loop	
+	// Once the display object hits this we can break the loop	
 	var testObject = displayObject.last._iNext;
 	displayObject = displayObject.first;
 	
 	do	
 	{
-		transform = displayObject.worldTransform;
+		//transform = displayObject.worldTransform;
 		
-		if(!displayObject.visible)
+		if (!displayObject.visible)
 		{
 			displayObject = displayObject.last._iNext;
 			continue;
 		}
 		
-		if(!displayObject.renderable || displayObject.alpha == 0)
+		if (!displayObject.renderable || displayObject.alpha == 0)
 		{
 			displayObject = displayObject._iNext;
 			continue;
 		}
 		
-		if(displayObject instanceof PIXI.Sprite)
+		if (displayObject instanceof PIXI.Sprite)
 		{
-			var frame = displayObject.texture.frame;
+			// var frame = displayObject.texture.frame;
 			
-			if(frame)
+			if (displayObject.texture.frame)
 			{
-				context.globalAlpha = displayObject.worldAlpha;
+				this.context.globalAlpha = displayObject.worldAlpha;
 				
 				if (displayObject.texture.trimmed)
 				{
-					context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2] + displayObject.texture.trim.x, transform[5] + displayObject.texture.trim.y);
+					this.context.setTransform(displayObject.worldTransform[0], displayObject.worldTransform[3], displayObject.worldTransform[1], displayObject.worldTransform[4], displayObject.worldTransform[2] + displayObject.texture.trim.x, displayObject.worldTransform[5] + displayObject.texture.trim.y);
 				}
 				else
 				{
-					context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5]);
+					this.context.setTransform(displayObject.worldTransform[0], displayObject.worldTransform[3], displayObject.worldTransform[1], displayObject.worldTransform[4], displayObject.worldTransform[2], displayObject.worldTransform[5]);
 				}
 					
-				context.drawImage(displayObject.texture.baseTexture.source, 
-								   frame.x,
-								   frame.y,
-								   frame.width,
-								   frame.height,
-								   (displayObject.anchor.x) * -frame.width, 
-								   (displayObject.anchor.y) * -frame.height,
-								   frame.width,
-								   frame.height);
+				this.context.drawImage(
+					displayObject.texture.baseTexture.source, 
+					displayObject.texture.frame.x,
+					displayObject.texture.frame.y,
+					displayObject.texture.frame.width,
+					displayObject.texture.frame.height,
+					(displayObject.anchor.x) * -displayObject.texture.frame.width, 
+					(displayObject.anchor.y) * -displayObject.texture.frame.height,
+					displayObject.texture.frame.width,
+					displayObject.texture.frame.height);
 			}					   
 	   	}
-	   	else if(displayObject instanceof PIXI.Strip)
+	   	else if (displayObject instanceof PIXI.Strip)
 		{
-			context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
+			this.context.setTransform(displayObject.worldTransform[0], displayObject.worldTransform[3], displayObject.worldTransform[1], displayObject.worldTransform[4], displayObject.worldTransform[2], displayObject.worldTransform[5])
 			this.renderStrip(displayObject);
 		}
-		else if(displayObject instanceof PIXI.TilingSprite)
+		else if (displayObject instanceof PIXI.TilingSprite)
 		{
-			context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
+			this.context.setTransform(displayObject.worldTransform[0], displayObject.worldTransform[3], displayObject.worldTransform[1], displayObject.worldTransform[4], displayObject.worldTransform[2], displayObject.worldTransform[5])
 			this.renderTilingSprite(displayObject);
 		}
-		else if(displayObject instanceof PIXI.CustomRenderable)
+		else if (displayObject instanceof PIXI.CustomRenderable)
 		{
 			displayObject.renderCanvas(this);
 		}
-		else if(displayObject instanceof PIXI.Graphics)
+		else if (displayObject instanceof PIXI.Graphics)
 		{
-			context.setTransform(transform[0], transform[3], transform[1], transform[4], transform[2], transform[5])
-			PIXI.CanvasGraphics.renderGraphics(displayObject, context);
+			this.context.setTransform(displayObject.worldTransform[0], displayObject.worldTransform[3], displayObject.worldTransform[1], displayObject.worldTransform[4], displayObject.worldTransform[2], displayObject.worldTransform[5])
+			PIXI.CanvasGraphics.renderGraphics(displayObject, this.context);
 		}
-		else if(displayObject instanceof PIXI.FilterBlock)
+		else if (displayObject instanceof PIXI.FilterBlock)
 		{
-			if(displayObject.open)
+			if (displayObject.open)
 			{
-				context.save();
+				this.context.save();
 				
 				var cacheAlpha = displayObject.mask.alpha;
 				var maskTransform = displayObject.mask.worldTransform;
 				
-				context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
+				this.context.setTransform(maskTransform[0], maskTransform[3], maskTransform[1], maskTransform[4], maskTransform[2], maskTransform[5])
 				
 				displayObject.mask.worldAlpha = 0.5;
 				
-				context.worldAlpha = 0;
+				this.context.worldAlpha = 0;
 				
-				PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, context);
-				context.clip();
+				PIXI.CanvasGraphics.renderGraphicsMask(displayObject.mask, this.context);
+				this.context.clip();
 				
 				displayObject.mask.worldAlpha = cacheAlpha;
 			}
 			else
 			{
-				context.restore();
+				this.context.restore();
 			}
 		}
-	//	count++
+		//	count++
 		displayObject = displayObject._iNext;
-		
-		
 	}
 	while(displayObject != testObject)
 	

src/gameobjects/BitmapData.js

@@ -54,29 +54,31 @@ Phaser.BitmapData = function (game, width, height) {
 	* @property {array} imageData - The canvas image data.
 	*/
 	this.imageData = this.context.getImageData(0, 0, width, height);
-    
+
+	this.pixels = new Int32Array(this.imageData.data.buffer);
+
 	/**
 	* @property {Uint8ClampedArray} data8 - A uint8 clamped view on the buffer.
 	*/
-	this.data8 = new Uint8ClampedArray(this.imageData.buffer);
+	// this.data8 = new Uint8ClampedArray(this.imageData.buffer);
 
 	/**
 	* @property {Uint32Array} data32 - A Uint32 view on the buffer.
 	*/
-	this.data32 = new Uint32Array(this.imageData.buffer);
+	// this.data32 = new Uint32Array(this.imageData.buffer);
 
 	// Little or big-endian?
-	this.data32[1] = 0x0a0b0c0d;
+	// this.data32[1] = 0x0a0b0c0d;
     
 	/**
 	* @property {boolean} isLittleEndian - .
 	*/
 	this.isLittleEndian = true;
 
-	if (this.data32[4] === 0x0a && this.data32[5] === 0x0b && this.data32[6] === 0x0c && this.data32[7] === 0x0d)
-	{
-    	this.isLittleEndian = false;
-	}
+	// if (this.data32[4] === 0x0a && this.data32[5] === 0x0b && this.data32[6] === 0x0c && this.data32[7] === 0x0d)
+	// {
+ //    	this.isLittleEndian = false;
+	// }
     
 	/**
 	* @property {PIXI.BaseTexture} baseTexture - The PIXI.BaseTexture.
@@ -150,8 +152,10 @@ Phaser.BitmapData.prototype = {
 	refreshBuffer: function () {
 
 		this.imageData = this.context.getImageData(0, 0, this.width, this.height);
-		this.data8 = new Uint8ClampedArray(this.imageData.buffer);
-		this.data32 = new Uint32Array(this.imageData.buffer);
+		this.pixels = new Int32Array(this.imageData.data.buffer);
+
+		// this.data8 = new Uint8ClampedArray(this.imageData.buffer);
+		// this.data32 = new Uint32Array(this.imageData.buffer);
 
 	},
 
@@ -169,6 +173,9 @@ Phaser.BitmapData.prototype = {
 
     	if (x >= 0 && x <= this.width && y >= 0 && y <= this.height)
     	{
+			this.pixels[y * this.width + x] = (alpha << 24) | (blue << 16) | (green << 8) | red;
+
+    		/*
     		if (this.isLittleEndian)
     		{
 				this.data32[y * this.width + x] = (alpha << 24) | (blue << 16) | (green << 8) | red;
@@ -177,8 +184,9 @@ Phaser.BitmapData.prototype = {
     		{
 				this.data32[y * this.width + x] = (red << 24) | (green << 16) | (blue << 8) | alpha;
     		}
+    		*/
 
-    		this.imageData.data.set(this.data8);
+    		// this.imageData.data.set(this.data8);
 
     		this.context.putImageData(this.imageData, 0, 0);
 

src/input/Mouse.js

@@ -69,6 +69,30 @@ Phaser.Mouse = function (game) {
     */
     this.pointerLock = new Phaser.Signal;
 
+    /**
+    * The browser mouse event.
+    * @property {MouseEvent} event
+    */
+    this.event;
+
+    /**
+    * @property {function} _onMouseDown
+    * @private
+    */
+    this._onMouseDown;
+
+    /**
+    * @property {function} _onMouseMove
+    * @private
+    */
+    this._onMouseMove;
+
+    /**
+    * @property {function} _onMouseUp
+    * @private
+    */
+    this._onMouseUp;
+
 };
 
 /**
@@ -122,9 +146,13 @@ Phaser.Mouse.prototype = {
             return _this.onMouseUp(event);
         };
 
-        this.game.renderer.view.addEventListener('mousedown', this._onMouseDown, true);
-        this.game.renderer.view.addEventListener('mousemove', this._onMouseMove, true);
-        this.game.renderer.view.addEventListener('mouseup', this._onMouseUp, true);
+        // this.game.renderer.view.addEventListener('mousedown', this._onMouseDown, true);
+        // this.game.renderer.view.addEventListener('mousemove', this._onMouseMove, true);
+        // this.game.renderer.view.addEventListener('mouseup', this._onMouseUp, true);
+
+        document.addEventListener('mousedown', this._onMouseDown, true);
+        document.addEventListener('mousemove', this._onMouseMove, true);
+        document.addEventListener('mouseup', this._onMouseUp, true);
 
     },
 
@@ -135,20 +163,11 @@ Phaser.Mouse.prototype = {
     */
     onMouseDown: function (event) {
 
+        this.event = event;
+
         event.preventDefault();
 
-        if (event.which === 1)
-        {
-            this.button = Phaser.Mouse.LEFT_BUTTON;
-        } 
-        else if (event.which === 2)
-        {
-            this.button = Phaser.Mouse.MIDDLE_BUTTON;
-        } 
-        else if (event.which === 3)
-        {
-            this.button = Phaser.Mouse.RIGHT_BUTTON;
-        }
+        this.button = event.which;
 
         if (this.mouseDownCallback)
         {
@@ -173,6 +192,8 @@ Phaser.Mouse.prototype = {
     */
     onMouseMove: function (event) {
 
+        this.event = event;
+
         event.preventDefault();
 
         if (this.mouseMoveCallback)
@@ -198,6 +219,8 @@ Phaser.Mouse.prototype = {
     */
     onMouseUp: function (event) {
 
+        this.event = event;
+
         event.preventDefault();
 
     	this.button = Phaser.Mouse.NO_BUTTON;
@@ -293,9 +316,13 @@ Phaser.Mouse.prototype = {
     */
     stop: function () {
 
-        this.game.stage.canvas.removeEventListener('mousedown', this._onMouseDown, true);
-        this.game.stage.canvas.removeEventListener('mousemove', this._onMouseMove, true);
-        this.game.stage.canvas.removeEventListener('mouseup', this._onMouseUp, true);
+        // this.game.stage.canvas.removeEventListener('mousedown', this._onMouseDown, true);
+        // this.game.stage.canvas.removeEventListener('mousemove', this._onMouseMove, true);
+        // this.game.stage.canvas.removeEventListener('mouseup', this._onMouseUp, true);
+
+        document.removeEventListener('mousedown', this._onMouseDown, true);
+        document.removeEventListener('mousemove', this._onMouseMove, true);
+        document.removeEventListener('mouseup', this._onMouseUp, true);
 
     }
 

src/system/RequestAnimationFrame.js

@@ -13,21 +13,15 @@
 */
 Phaser.RequestAnimationFrame = function(game) {
 	
-     /**
-     * @property {Phaser.Game} game - The currently running game.
-     */
+	/**
+	* @property {Phaser.Game} game - The currently running game.
+	*/
 	this.game = game;
 
-     /**
-     * @property {boolean} _isSetTimeOut  - Description.
-     * @private
-     */
-	this._isSetTimeOut = false;
-     
-     /**
-     * @property {boolean} isRunning - Description.
-     * @default
-     */
+	/**
+	* @property {boolean} isRunning - true if RequestAnimationFrame is running, otherwise false.
+	* @default
+	*/
 	this.isRunning = false;
 
 	var vendors = [
@@ -44,15 +38,19 @@ Phaser.RequestAnimationFrame = function(game) {
 	}
 
 	/**
-	* The function called by the update
-	* @property _onLoop
+	* @property {boolean} _isSetTimeOut  - true if the browser is using setTimeout instead of raf.
+	* @private
+	*/
+	this._isSetTimeOut = false;
+
+	/**
+	* @property {function} _onLoop - The function called by the update.
 	* @private
 	*/
 	this._onLoop = null;
 
 	/**
-	* The callback ID used when calling cancel
-	* @property _timeOutID
+	* @property {number} _timeOutID - The callback ID used when calling cancel.
 	* @private
 	*/
 	this._timeOutID = null;
@@ -61,7 +59,6 @@ Phaser.RequestAnimationFrame = function(game) {
 
 Phaser.RequestAnimationFrame.prototype = {
 
-
 	/**
 	* Starts the requestAnimatioFrame running or setTimeout if unavailable in browser
 	* @method Phaser.RequestAnimationFrame#start