Fixed Graphics not working correctly.

examples/display/graphics.php

@@ -0,0 +1,83 @@
+<?php
+    $title = "Canvas Smoothing";
+    require('../head.php');
+?>
+
+<script type="text/javascript">
+
+    var graphics;
+
+(function () {
+
+    var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });
+
+    function preload() {
+
+        game.load.image('atari1', 'assets/sprites/atari130xe.png');
+
+    }
+
+
+    function create() {
+
+        graphics = game.add.graphics(0, 0);
+
+        // set a fill and line style
+        graphics.beginFill(0xFF3300);
+        graphics.lineStyle(10, 0xffd900, 1);
+
+        // draw a shape
+        graphics.moveTo(50,50);
+        graphics.lineTo(250, 50);
+        graphics.lineTo(100, 100);
+        graphics.lineTo(250, 220);
+        graphics.lineTo(50, 220);
+        graphics.lineTo(50, 50);
+        graphics.endFill();
+
+        // set a fill and line style again
+        graphics.lineStyle(10, 0xFF0000, 0.8);
+        graphics.beginFill(0xFF700B, 1);
+
+        // draw a second shape
+        graphics.moveTo(210,300);
+        graphics.lineTo(450,320);
+        graphics.lineTo(570,350);
+        graphics.lineTo(580,20);
+        graphics.lineTo(330,120);
+        graphics.lineTo(410,200);
+        graphics.lineTo(210,300);
+        graphics.endFill();
+
+        // draw a rectangel
+        graphics.lineStyle(2, 0x0000FF, 1);
+        graphics.drawRect(50, 250, 100, 100);
+
+        // draw a circle
+        graphics.lineStyle(0);
+        graphics.beginFill(0xFFFF0B, 0.5);
+        graphics.drawCircle(470, 200,100);
+
+        graphics.lineStyle(20, 0x33FF00);
+        graphics.moveTo(30,30);
+        graphics.lineTo(600, 300);
+
+        game.add.tween(graphics).to({ x: 200 }, 2000, Phaser.Easing.Linear.None, true, 0, 1000, true);
+
+        // graphics.rotation = 1.2;
+        // graphics.angle = 10;
+
+    }
+
+    function update() {
+    }
+
+    function render() {
+    }
+
+})();
+</script>
+
+<?php
+    require('../foot.php');
+?>

src/gameobjects/Graphics.js

@@ -1,124 +1,45 @@
 Phaser.Graphics = function (game, x, y) {
 
-    //  If exists = false then the Sprite isn't updated by the core game loop or physics subsystem at all
-    this.exists = true;
+    PIXI.Graphics.call(this);
 
-    //  This is a handy little var your game can use to determine if a sprite is alive or not, it doesn't effect rendering
-    this.alive = true;
-
-    this.group = null;
-
-    this.name = '';
-
-	this.game = game;
-
-	PIXI.DisplayObjectContainer.call(this);
+	Phaser.Sprite.call(this, game, x, y);
 
     this.type = Phaser.GRAPHICS;
 
-	this.position.x = x;
-	this.position.y = y;
-
-    //  Replaces the PIXI.Point with a slightly more flexible one
-    this.scale = new Phaser.Point(1, 1);
-
-    //  Influence of camera movement upon the position
-    this.scrollFactor = new Phaser.Point(1, 1);
-
-    //  A mini cache for storing all of the calculated values
-    this._cache = { 
-
-        dirty: false,
-
-        //  Transform cache
-        a00: 1, a01: 0, a02: x, a10: 0, a11: 1, a12: y, id: 1, 
-
-        //  The previous calculated position inc. camera x/y and scrollFactor
-        x: -1, y: -1,
-
-        //  The actual scale values based on the worldTransform
-        scaleX: 1, scaleY: 1
-
-    };
-
-    this._cache.x = this.x - (this.game.world.camera.x * this.scrollFactor.x);
-    this._cache.y = this.y - (this.game.world.camera.y * this.scrollFactor.y);
-
-	this.renderable = true;
-
-    /**
-     * The alpha of the fill of this graphics object
-     *
-     * @property fillAlpha
-     * @type Number
-     */
-	this.fillAlpha = 1;
-
-    /**
-     * The width of any lines drawn
-     *
-     * @property lineWidth
-     * @type Number
-     */
-	this.lineWidth = 0;
-
-    /**
-     * The color of any lines drawn
-     *
-     * @property lineColor
-     * @type String
-     */
-	this.lineColor = "black";
-
-    /**
-     * Graphics data
-     *
-     * @property graphicsData
-     * @type Array
-     * @private
-     */
-	this.graphicsData = [];
-
-    /**
-     * Current path
-     *
-     * @property currentPath
-     * @type Object
-     * @private
-     */
-	this.currentPath = {points:[]};
-
 };
 
-Phaser.Graphics.prototype = Phaser.Utils.extend(true, PIXI.Graphics.prototype, PIXI.DisplayObjectContainer.prototype, Phaser.Sprite.prototype);
+Phaser.Graphics.prototype = Object.create( PIXI.Graphics.prototype );
 Phaser.Graphics.prototype.constructor = Phaser.Graphics;
 
+Phaser.Graphics.prototype = Phaser.Utils.extend(true, Phaser.Graphics.prototype, Phaser.Sprite.prototype);
+
 //  Add our own custom methods
 
 /**
  * Automatically called by World.update
  */
-Phaser.Graphics.prototype.update = function() {
+Phaser.Graphics.prototype.OLDupdate = function() {
 
-    if (!this.exists)
-    {
-        return;
-    }
+    // if (!this.exists)
+    // {
+    //     return;
+    // }
 
-    this._cache.dirty = false;
+    // this._cache.dirty = false;
 
-    this._cache.x = this.x - (this.game.world.camera.x * this.scrollFactor.x);
-    this._cache.y = this.y - (this.game.world.camera.y * this.scrollFactor.y);
+    // this._cache.x = this.x - (this.game.world.camera.x * this.scrollFactor.x);
+    // this._cache.y = this.y - (this.game.world.camera.y * this.scrollFactor.y);
 
-    if (this.position.x != this._cache.x || this.position.y != this._cache.y)
-    {
-        this.position.x = this._cache.x;
-        this.position.y = this._cache.y;
-        this._cache.dirty = true;
-    }
+    // if (this.position.x != this._cache.x || this.position.y != this._cache.y)
+    // {
+    //     this.position.x = this._cache.x;
+    //     this.position.y = this._cache.y;
+    //     this._cache.dirty = true;
+    // }
 
 }
 
+/*
 Object.defineProperty(Phaser.Graphics.prototype, 'angle', {
 
     get: function() {
@@ -154,3 +75,5 @@ Object.defineProperty(Phaser.Graphics.prototype, 'y', {
     }
 
 });
+
+*/

src/utils/Utils.js

@@ -87,13 +87,6 @@ Phaser.Utils = {
 		return true;
 	},
 
-
-	//	deep, target, objects to copy to the target object
-	//	This is a slightly modified version of jQuery.extend (http://api.jquery.com/jQuery.extend/)
-	//	deep (boolean)
-	//	target (object to add to)
-	//	objects ... (objects to recurse and copy from)
-
 	/**
     * This is a slightly modified version of jQuery.extend (http://api.jquery.com/jQuery.extend/)
     * @method extend
@@ -156,7 +149,7 @@ Phaser.Utils = {
 						}
 
 						// Never move original objects, clone them
-						target[name] = extend(deep, clone, copy);
+						target[name] = Phaser.Utils.extend(deep, clone, copy);
 
 					// Don't bring in undefined values
 					}