Added the new Shape base class and the Arc, Rectangle and Triangle primitives

src/gameobjects/index.js

@@ -36,6 +36,11 @@ var GameObjects = {
     TileSprite: require('./tilesprite/TileSprite'),
     Zone: require('./zone/Zone'),
 
+    //  Shapes
+
+    Shape: require('./shape/Shape'),
+    Rectangle: require('./shape/Rectangle'),
+
     //  Game Object Factories
 
     Factories: {
@@ -48,6 +53,7 @@ var GameObjects = {
         Particles: require('./particles/ParticleManagerFactory'),
         PathFollower: require('./pathfollower/PathFollowerFactory'),
         RenderTexture: require('./rendertexture/RenderTextureFactory'),
+        Shape: require('./shape/ShapeFactory'),
         Sprite: require('./sprite/SpriteFactory'),
         StaticBitmapText: require('./bitmaptext/static/BitmapTextFactory'),
         Text: require('./text/static/TextFactory'),
@@ -64,6 +70,7 @@ var GameObjects = {
         Image: require('./image/ImageCreator'),
         Particles: require('./particles/ParticleManagerCreator'),
         RenderTexture: require('./rendertexture/RenderTextureCreator'),
+        Shape: require('./shape/ShapeCreator'),
         Sprite: require('./sprite/SpriteCreator'),
         StaticBitmapText: require('./bitmaptext/static/BitmapTextCreator'),
         Text: require('./text/static/TextCreator'),

src/gameobjects/shape/Arc.js

@@ -0,0 +1,162 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var ArcRender = require('./ArcRender');
+var Class = require('../../utils/Class');
+var DegToRad = require('../../math/DegToRad');
+var Earcut = require('../../geom/polygon/Earcut');
+var GeomCircle = require('../../geom/circle/Circle');
+var Shape = require('./Shape');
+var MATH_CONST = require('../../math/const');
+
+/**
+ * @classdesc
+ *
+ * @class Arc
+ * @extends Phaser.GameObjects.Shape
+ * @memberOf Phaser.GameObjects
+ * @constructor
+ * @since 3.13.0
+ *
+ * @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
+ * @param {number} x - The horizontal position of this Game Object in the world.
+ * @param {number} y - The vertical position of this Game Object in the world.
+ */
+var Arc = new Class({
+
+    Extends: Shape,
+
+    Mixins: [
+        ArcRender
+    ],
+
+    initialize:
+
+    function Arc (scene, x, y, radius, fillColor, fillAlpha, startAngle, endAngle, anticlockwise)
+    {
+        if (startAngle === undefined) { startAngle = 0; }
+        if (endAngle === undefined) { endAngle = 360; }
+        if (anticlockwise === undefined) { anticlockwise = false; }
+
+        Shape.call(this, scene, 'Arc', new GeomCircle(x, y, radius));
+
+        this.pathData = [];
+        this.pathIndexes = [];
+
+        this.startAngle = DegToRad(startAngle);
+        this.endAngle = DegToRad(endAngle);
+        this.anticlockwise = anticlockwise;
+        this.iterations = 0.01;
+
+        this.setPosition(x, y);
+        this.setSize(this.data.radius, this.data.radius);
+
+        this.updateDisplayOrigin();
+
+        if (fillColor !== undefined)
+        {
+            this.setFillStyle(fillColor, fillAlpha);
+        }
+
+        this.updateData();
+    },
+
+    setSmoothing: function (value)
+    {
+        if (value === undefined) { value = 0.01; }
+
+        this.iterations = value;
+
+        return this.updateData();
+    },
+
+    setStartAngle: function (angle, anticlockwise)
+    {
+        this.startAngle = DegToRad(angle);
+
+        if (anticlockwise !== undefined)
+        {
+            this.anticlockwise = anticlockwise;
+        }
+
+        return this.updateData();
+    },
+
+    setEndAngle: function (angle, anticlockwise)
+    {
+        this.endAngle = DegToRad(angle);
+
+        if (anticlockwise !== undefined)
+        {
+            this.anticlockwise = anticlockwise;
+        }
+
+        return this.updateData();
+    },
+
+    updateData: function ()
+    {
+        var step = this.iterations;
+        var iteration = step;
+
+        var x = 0;
+        var y = 0;
+
+        var radius = this.data.radius;
+        var startAngle = this.startAngle;
+        var endAngle = this.endAngle;
+        var anticlockwise = this.anticlockwise;
+
+        endAngle -= startAngle;
+
+        if (anticlockwise)
+        {
+            if (endAngle < -MATH_CONST.PI2)
+            {
+                endAngle = -MATH_CONST.PI2;
+            }
+            else if (endAngle > 0)
+            {
+                endAngle = -MATH_CONST.PI2 + endAngle % MATH_CONST.PI2;
+            }
+        }
+        else if (endAngle > MATH_CONST.PI2)
+        {
+            endAngle = MATH_CONST.PI2;
+        }
+        else if (endAngle < 0)
+        {
+            endAngle = MATH_CONST.PI2 + endAngle % MATH_CONST.PI2;
+        }
+
+        var path = [ x + Math.cos(startAngle) * radius, y + Math.sin(startAngle) * radius ];
+
+        var ta;
+
+        while (iteration < 1)
+        {
+            ta = endAngle * iteration + startAngle;
+
+            path.push(x + Math.cos(ta) * radius);
+            path.push(y + Math.sin(ta) * radius);
+
+            iteration += step;
+        }
+
+        ta = endAngle + startAngle;
+
+        path.push(x + Math.cos(ta) * radius);
+        path.push(y + Math.sin(ta) * radius);
+
+        this.pathIndexes = Earcut(path);
+        this.pathData = path;
+
+        return this;
+    }
+
+});
+
+module.exports = Arc;

src/gameobjects/shape/ArcRender.js

@@ -0,0 +1,25 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var renderWebGL = require('../../utils/NOOP');
+var renderCanvas = require('../../utils/NOOP');
+
+if (typeof WEBGL_RENDERER)
+{
+    renderWebGL = require('./ArcWebGLRenderer');
+}
+
+if (typeof CANVAS_RENDERER)
+{
+    // renderCanvas = require('./RectangleCanvasRenderer');
+}
+
+module.exports = {
+
+    renderWebGL: renderWebGL,
+    renderCanvas: renderCanvas
+
+};

src/gameobjects/shape/ArcWebGLRenderer.js

@@ -0,0 +1,90 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Utils = require('../../renderer/webgl/Utils');
+
+/**
+ * Renders this Game Object with the WebGL Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method Phaser.GameObjects.Arc#renderWebGL
+ * @since 3.13.0
+ * @private
+ *
+ * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
+ * @param {Phaser.GameObjects.Arc} src - The Game Object being rendered in this call.
+ * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ */
+var ArcWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+{
+    var pipeline = this.pipeline;
+
+    var camMatrix = pipeline._tempMatrix1;
+    var shapeMatrix = pipeline._tempMatrix2;
+    var calcMatrix = pipeline._tempMatrix3;
+
+    renderer.setPipeline(pipeline);
+
+    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
+
+    camMatrix.copyFrom(camera.matrix);
+
+    if (parentMatrix)
+    {
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
+
+        //  Undo the camera scroll
+        shapeMatrix.e = src.x;
+        shapeMatrix.f = src.y;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(shapeMatrix, calcMatrix);
+    }
+    else
+    {
+        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
+        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        camMatrix.multiply(shapeMatrix, calcMatrix);
+    }
+
+    var fillTintColor = Utils.getTintAppendFloatAlphaAndSwap(src.fillColor, src.fillAlpha * (camera.alpha * src.alpha));
+
+    var pathData = src.pathData;
+    var pathIndexes = src.pathIndexes;
+
+    for (var i = 0; i < pathIndexes.length; i += 3)
+    {
+        var p0 = pathIndexes[i] * 2;
+        var p1 = pathIndexes[i + 1] * 2;
+        var p2 = pathIndexes[i + 2] * 2;
+
+        var x0 = pathData[p0 + 0];
+        var y0 = pathData[p0 + 1];
+        var x1 = pathData[p1 + 0];
+        var y1 = pathData[p1 + 1];
+        var x2 = pathData[p2 + 0];
+        var y2 = pathData[p2 + 1];
+
+        var tx0 = calcMatrix.getX(x0, y0);
+        var ty0 = calcMatrix.getY(x0, y0);
+
+        var tx1 = calcMatrix.getX(x1, y1);
+        var ty1 = calcMatrix.getY(x1, y1);
+
+        var tx2 = calcMatrix.getX(x2, y2);
+        var ty2 = calcMatrix.getY(x2, y2);
+    
+        pipeline.batchTri(tx0, ty0, tx1, ty1, tx2, ty2, 0, 0, 1, 1, fillTintColor, fillTintColor, fillTintColor, pipeline.tintEffect);
+    }
+};
+
+module.exports = ArcWebGLRenderer;

src/gameobjects/shape/Rectangle.js

@@ -0,0 +1,52 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../utils/Class');
+var GeomRectangle = require('../../geom/rectangle/Rectangle');
+var Shape = require('./Shape');
+var RectangleRender = require('./RectangleRender');
+
+/**
+ * @classdesc
+ *
+ * @class Rectangle
+ * @extends Phaser.GameObjects.Shape
+ * @memberOf Phaser.GameObjects
+ * @constructor
+ * @since 3.13.0
+ *
+ * @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
+ * @param {number} x - The horizontal position of this Game Object in the world.
+ * @param {number} y - The vertical position of this Game Object in the world.
+ */
+var Rectangle = new Class({
+
+    Extends: Shape,
+
+    Mixins: [
+        RectangleRender
+    ],
+
+    initialize:
+
+    function Rectangle (scene, x, y, width, height, fillColor, fillAlpha)
+    {
+        Shape.call(this, scene, 'Rectangle', new GeomRectangle(x, y, width, height));
+
+        this.setPosition(x, y);
+        this.setSize(width, height);
+
+        this.updateDisplayOrigin();
+
+        if (fillColor !== undefined)
+        {
+            this.setFillStyle(fillColor, fillAlpha);
+        }
+    }
+
+});
+
+module.exports = Rectangle;

src/gameobjects/shape/RectangleCanvasRenderer.js

@@ -0,0 +1,27 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+/**
+ * Renders this Game Object with the Canvas Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method Phaser.GameObjects.Image#renderCanvas
+ * @since 3.0.0
+ * @private
+ *
+ * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
+ * @param {Phaser.GameObjects.Image} src - The Game Object being rendered in this call.
+ * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ */
+var RectangleCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+{
+    renderer.batchSprite(src, src.frame, camera, parentMatrix);
+};
+
+module.exports = RectangleCanvasRenderer;

src/gameobjects/shape/RectangleRender.js

@@ -0,0 +1,25 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var renderWebGL = require('../../utils/NOOP');
+var renderCanvas = require('../../utils/NOOP');
+
+if (typeof WEBGL_RENDERER)
+{
+    renderWebGL = require('./RectangleWebGLRenderer');
+}
+
+if (typeof CANVAS_RENDERER)
+{
+    renderCanvas = require('./RectangleCanvasRenderer');
+}
+
+module.exports = {
+
+    renderWebGL: renderWebGL,
+    renderCanvas: renderCanvas
+
+};

src/gameobjects/shape/RectangleWebGLRenderer.js

@@ -0,0 +1,81 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Utils = require('../../renderer/webgl/Utils');
+
+/**
+ * Renders this Game Object with the WebGL Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method Phaser.GameObjects.Rectangle#renderWebGL
+ * @since 3.13.0
+ * @private
+ *
+ * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
+ * @param {Phaser.GameObjects.Rectangle} src - The Game Object being rendered in this call.
+ * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ */
+var RectangleWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+{
+    var pipeline = this.pipeline;
+
+    var camMatrix = pipeline._tempMatrix1;
+    var shapeMatrix = pipeline._tempMatrix2;
+
+    renderer.setPipeline(pipeline);
+
+    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
+
+    camMatrix.copyFrom(camera.matrix);
+
+    if (parentMatrix)
+    {
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
+
+        //  Undo the camera scroll
+        shapeMatrix.e = src.x;
+        shapeMatrix.f = src.y;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        // camMatrix.multiply(shapeMatrix);
+    }
+    else
+    {
+        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
+        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        // camMatrix.multiply(shapeMatrix);
+    }
+
+    var alpha = camera.alpha * src.alpha;
+
+    var fillTint = pipeline.fillTint;
+    var fillTintColor = Utils.getTintAppendFloatAlphaAndSwap(src.fillColor, src.fillAlpha * alpha);
+
+    fillTint.TL = fillTintColor;
+    fillTint.TR = fillTintColor;
+    fillTint.BL = fillTintColor;
+    fillTint.BR = fillTintColor;
+
+    var x = -src._displayOriginX;
+    var y = -src._displayOriginY;
+
+    pipeline.batchFillRect(
+        x,
+        y,
+        src.width,
+        src.height,
+        shapeMatrix,
+        camMatrix
+    );
+};
+
+module.exports = RectangleWebGLRenderer;

src/gameobjects/shape/Shape.js

@@ -0,0 +1,117 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../utils/Class');
+var Components = require('../components');
+var GameObject = require('../GameObject');
+
+/**
+ * @classdesc
+ * A Shape Game Object.
+ *
+ * @class Shape
+ * @extends Phaser.GameObjects.GameObject
+ * @memberOf Phaser.GameObjects
+ * @constructor
+ * @since 3.13.0
+ *
+ * @extends Phaser.GameObjects.Components.Alpha
+ * @extends Phaser.GameObjects.Components.BlendMode
+ * @extends Phaser.GameObjects.Components.ComputedSize
+ * @extends Phaser.GameObjects.Components.Depth
+ * @extends Phaser.GameObjects.Components.GetBounds
+ * @extends Phaser.GameObjects.Components.Mask
+ * @extends Phaser.GameObjects.Components.Origin
+ * @extends Phaser.GameObjects.Components.Pipeline
+ * @extends Phaser.GameObjects.Components.ScaleMode
+ * @extends Phaser.GameObjects.Components.ScrollFactor
+ * @extends Phaser.GameObjects.Components.Tint
+ * @extends Phaser.GameObjects.Components.Transform
+ * @extends Phaser.GameObjects.Components.Visible
+ *
+ * @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
+ * @param {number} x - The horizontal position of this Game Object in the world.
+ * @param {number} y - The vertical position of this Game Object in the world.
+ */
+var Shape = new Class({
+
+    Extends: GameObject,
+
+    Mixins: [
+        Components.Alpha,
+        Components.BlendMode,
+        Components.ComputedSize,
+        Components.Depth,
+        Components.GetBounds,
+        Components.Mask,
+        Components.Origin,
+        Components.Pipeline,
+        Components.ScaleMode,
+        Components.ScrollFactor,
+        Components.Tint,
+        Components.Transform,
+        Components.Visible
+    ],
+
+    initialize:
+
+    function Shape (scene, type, data)
+    {
+        if (type === undefined) { type = 'Shape'; }
+
+        GameObject.call(this, scene, type);
+
+        this.data = data;
+
+        this.fillColor = 0xffffff;
+        this.fillAlpha = 1;
+
+        this.isStroked = false;
+        this.isFilled = true;
+
+        this.initPipeline();
+    },
+
+    setFillStyle: function (color, alpha)
+    {
+        if (alpha === undefined) { alpha = 1; }
+
+        if (color === undefined)
+        {
+            this.isFilled = false;
+        }
+        else
+        {
+            this.fillColor = color;
+            this.fillAlpha = alpha;
+            this.isFilled = true;
+        }
+
+        return this;
+    },
+
+    setStrokeStyle: function (lineWidth, color, alpha)
+    {
+        if (alpha === undefined) { alpha = 1; }
+
+        if (lineWidth === undefined)
+        {
+            this.isStroked = false;
+        }
+        else
+        {
+            this.lineWidth = lineWidth;
+            this.strokeColor = color;
+            this.strokeAlpha = alpha;
+            this.isStroked = true;
+        }
+
+        return this;
+    }
+
+});
+
+module.exports = Shape;

src/gameobjects/shape/ShapeCreator.js

@@ -0,0 +1,33 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var GameObjectCreator = require('../GameObjectCreator');
+var GetAdvancedValue = require('../../utils/object/GetAdvancedValue');
+var Rectangle = require('./Rectangle');
+
+/**
+ * Creates a new Zone Game Object and returns it.
+ *
+ * Note: This method will only be available if the Zone Game Object has been built into Phaser.
+ *
+ * @method Phaser.GameObjects.GameObjectCreator#zone
+ * @since 3.0.0
+ *
+ * @param {object} config - The configuration object this Game Object will use to create itself.
+ *
+ * @return {Phaser.GameObjects.Zone} The Game Object that was created.
+ */
+GameObjectCreator.register('rectangle', function (config)
+{
+    var x = GetAdvancedValue(config, 'x', 0);
+    var y = GetAdvancedValue(config, 'y', 0);
+    var width = GetAdvancedValue(config, 'width', 1);
+    var height = GetAdvancedValue(config, 'height', width);
+
+    return new Rectangle(this.scene, x, y, width, height);
+});
+
+//  When registering a factory function 'this' refers to the GameObjectCreator context.

src/gameobjects/shape/ShapeFactory.js

@@ -0,0 +1,53 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Arc = require('./Arc');
+var Rectangle = require('./Rectangle');
+var Triangle = require('./Triangle');
+var GameObjectFactory = require('../GameObjectFactory');
+
+/**
+ * Creates a new Image Game Object and adds it to the Scene.
+ *
+ * Note: This method will only be available if the Image Game Object has been built into Phaser.
+ *
+ * @method Phaser.GameObjects.GameObjectFactory#rectangle
+ * @since 3.13.0
+ *
+ * @param {number} x - The horizontal position of this Game Object in the world.
+ * @param {number} y - The vertical position of this Game Object in the world.
+ * @param {string} texture - The key of the Texture this Game Object will use to render with, as stored in the Texture Manager.
+ * @param {(string|integer)} [frame] - An optional frame from the Texture this Game Object is rendering with.
+ *
+ * @return {Phaser.GameObjects.Image} The Game Object that was created.
+ */
+GameObjectFactory.register('rectangle', function (x, y, width, height, fillColor, fillAlpha)
+{
+    return this.displayList.add(new Rectangle(this.scene, x, y, width, height, fillColor, fillAlpha));
+});
+
+GameObjectFactory.register('triangle', function (x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha)
+{
+    return this.displayList.add(new Triangle(this.scene, x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha));
+});
+
+GameObjectFactory.register('arc', function (x, y, radius, fillColor, fillAlpha, startAngle, endAngle, anticlockwise)
+{
+    return this.displayList.add(new Arc(this.scene, x, y, radius, fillColor, fillAlpha, startAngle, endAngle, anticlockwise));
+});
+
+GameObjectFactory.register('circle', function (x, y, radius, fillColor, fillAlpha)
+{
+    return this.displayList.add(new Arc(this.scene, x, y, radius, fillColor, fillAlpha));
+});
+
+//  When registering a factory Rectangle 'this' refers to the GameObjectFactory context.
+//
+//  There are several properties available to use:
+//
+//  this.scene - a reference to the Scene that owns the GameObjectFactory
+//  this.displayList - a reference to the Display List the Scene owns
+//  this.updateList - a reference to the Update List the Scene owns

src/gameobjects/shape/Triangle.js

@@ -0,0 +1,55 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Class = require('../../utils/Class');
+var Shape = require('./Shape');
+var GeomTriangle = require('../../geom/triangle/Triangle');
+var TriangleRender = require('./TriangleRender');
+
+/**
+ * @classdesc
+ *
+ * @class Triangle
+ * @extends Phaser.GameObjects.Shape
+ * @memberOf Phaser.GameObjects
+ * @constructor
+ * @since 3.13.0
+ *
+ * @param {Phaser.Scene} scene - The Scene to which this Game Object belongs. A Game Object can only belong to one Scene at a time.
+ * @param {number} x - The horizontal position of this Game Object in the world.
+ * @param {number} y - The vertical position of this Game Object in the world.
+ */
+var Triangle = new Class({
+
+    Extends: Shape,
+
+    Mixins: [
+        TriangleRender
+    ],
+
+    initialize:
+
+    function Triangle (scene, x, y, x1, y1, x2, y2, x3, y3, fillColor, fillAlpha)
+    {
+        Shape.call(this, scene, 'Triangle', new GeomTriangle(x1, y1, x2, y2, x3, y3));
+
+        var width = this.data.right - this.data.left;
+        var height = this.data.bottom - this.data.top;
+
+        this.setPosition(x, y);
+        this.setSize(width, height);
+
+        this.updateDisplayOrigin();
+
+        if (fillColor !== undefined)
+        {
+            this.setFillStyle(fillColor, fillAlpha);
+        }
+    }
+
+});
+
+module.exports = Triangle;

src/gameobjects/shape/TriangleCanvasRenderer.js

@@ -0,0 +1,27 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+/**
+ * Renders this Game Object with the Canvas Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method Phaser.GameObjects.Image#renderCanvas
+ * @since 3.0.0
+ * @private
+ *
+ * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer.
+ * @param {Phaser.GameObjects.Image} src - The Game Object being rendered in this call.
+ * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ */
+var RectangleCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+{
+    renderer.batchSprite(src, src.frame, camera, parentMatrix);
+};
+
+module.exports = RectangleCanvasRenderer;

src/gameobjects/shape/TriangleRender.js

@@ -0,0 +1,25 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var renderWebGL = require('../../utils/NOOP');
+var renderCanvas = require('../../utils/NOOP');
+
+if (typeof WEBGL_RENDERER)
+{
+    renderWebGL = require('./TriangleWebGLRenderer');
+}
+
+if (typeof CANVAS_RENDERER)
+{
+    renderCanvas = require('./TriangleCanvasRenderer');
+}
+
+module.exports = {
+
+    renderWebGL: renderWebGL,
+    renderCanvas: renderCanvas
+
+};

src/gameobjects/shape/TriangleWebGLRenderer.js

@@ -0,0 +1,87 @@
+/**
+ * @author       Richard Davey <rich@photonstorm.com>
+ * @copyright    2018 Photon Storm Ltd.
+ * @license      {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
+ */
+
+var Utils = require('../../renderer/webgl/Utils');
+
+/**
+ * Renders this Game Object with the WebGL Renderer to the given Camera.
+ * The object will not render if any of its renderFlags are set or it is being actively filtered out by the Camera.
+ * This method should not be called directly. It is a utility function of the Render module.
+ *
+ * @method Phaser.GameObjects.Triangle#renderWebGL
+ * @since 3.13.0
+ * @private
+ *
+ * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer.
+ * @param {Phaser.GameObjects.Triangle} src - The Game Object being rendered in this call.
+ * @param {number} interpolationPercentage - Reserved for future use and custom pipelines.
+ * @param {Phaser.Cameras.Scene2D.Camera} camera - The Camera that is rendering the Game Object.
+ * @param {Phaser.GameObjects.Components.TransformMatrix} parentMatrix - This transform matrix is defined if the game object is nested
+ */
+var TriangleWebGLRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix)
+{
+    var pipeline = this.pipeline;
+
+    var camMatrix = pipeline._tempMatrix1;
+    var shapeMatrix = pipeline._tempMatrix2;
+
+    renderer.setPipeline(pipeline);
+
+    shapeMatrix.applyITRS(src.x, src.y, src.rotation, src.scaleX, src.scaleY);
+
+    camMatrix.copyFrom(camera.matrix);
+
+    if (parentMatrix)
+    {
+        //  Multiply the camera by the parent matrix
+        camMatrix.multiplyWithOffset(parentMatrix, -camera.scrollX * src.scrollFactorX, -camera.scrollY * src.scrollFactorY);
+
+        //  Undo the camera scroll
+        shapeMatrix.e = src.x;
+        shapeMatrix.f = src.y;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        // camMatrix.multiply(shapeMatrix);
+    }
+    else
+    {
+        shapeMatrix.e -= camera.scrollX * src.scrollFactorX;
+        shapeMatrix.f -= camera.scrollY * src.scrollFactorY;
+
+        //  Multiply by the Sprite matrix, store result in calcMatrix
+        // camMatrix.multiply(shapeMatrix);
+    }
+
+    var alpha = camera.alpha * src.alpha;
+
+    var fillTint = pipeline.fillTint;
+    var fillTintColor = Utils.getTintAppendFloatAlphaAndSwap(src.fillColor, src.fillAlpha * alpha);
+
+    fillTint.TL = fillTintColor;
+    fillTint.TR = fillTintColor;
+    fillTint.BL = fillTintColor;
+    fillTint.BR = fillTintColor;
+
+    var x1 = src.data.x1 - src._displayOriginX;
+    var y1 = src.data.y1 - src._displayOriginY;
+    var x2 = src.data.x2 - src._displayOriginX;
+    var y2 = src.data.y2 - src._displayOriginY;
+    var x3 = src.data.x3 - src._displayOriginX;
+    var y3 = src.data.y3 - src._displayOriginY;
+
+    pipeline.batchFillTriangle(
+        x1,
+        y1,
+        x2,
+        y2,
+        x3,
+        y3,
+        shapeMatrix,
+        camMatrix
+    );
+};
+
+module.exports = TriangleWebGLRenderer;