From 266f993f62102b2fa839eca1077d2baf76dad7c0 Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Fri, 7 Sep 2018 12:43:49 +0100 Subject: [PATCH] Added Line Shape --- src/gameobjects/index.js | 2 + src/gameobjects/shape/line/Line.js | 95 +++++++++++++++++++ .../shape/line/LineCanvasRenderer.js | 26 +++++ src/gameobjects/shape/line/LineFactory.js | 32 +++++++ src/gameobjects/shape/line/LineRender.js | 25 +++++ .../shape/line/LineWebGLRenderer.js | 85 +++++++++++++++++ .../shape/triangle/TriangleCanvasRenderer.js | 4 +- 7 files changed, 267 insertions(+), 2 deletions(-) create mode 100644 src/gameobjects/shape/line/Line.js create mode 100644 src/gameobjects/shape/line/LineCanvasRenderer.js create mode 100644 src/gameobjects/shape/line/LineFactory.js create mode 100644 src/gameobjects/shape/line/LineRender.js create mode 100644 src/gameobjects/shape/line/LineWebGLRenderer.js diff --git a/src/gameobjects/index.js b/src/gameobjects/index.js index b2212c053..ea8e51903 100644 --- a/src/gameobjects/index.js +++ b/src/gameobjects/index.js @@ -42,6 +42,7 @@ var GameObjects = { Arc: require('./shape/arc/Arc'), Ellipse: require('./shape/ellipse/Ellipse'), IsoBox: require('./shape/isobox/IsoBox'), + Line: require('./shape/line/Line'), Polygon: require('./shape/polygon/Polygon'), Rectangle: require('./shape/rectangle/Rectangle'), Star: require('./shape/star/Star'), @@ -69,6 +70,7 @@ var GameObjects = { Arc: require('./shape/arc/ArcFactory'), Ellipse: require('./shape/ellipse/EllipseFactory'), IsoBox: require('./shape/isobox/IsoBoxFactory'), + Line: require('./shape/line/LineFactory'), Polygon: require('./shape/polygon/PolygonFactory'), Rectangle: require('./shape/rectangle/RectangleFactory'), Star: require('./shape/star/StarFactory'), diff --git a/src/gameobjects/shape/line/Line.js b/src/gameobjects/shape/line/Line.js new file mode 100644 index 000000000..f57e6c12e --- /dev/null +++ b/src/gameobjects/shape/line/Line.js @@ -0,0 +1,95 @@ +/** + * @author Richard Davey + * @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 GeomLine = require('../../../geom/line/Line'); +var LineRender = require('./LineRender'); + +/** + * @classdesc + * + * @class Line + * @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 Line = new Class({ + + Extends: Shape, + + Mixins: [ + LineRender + ], + + initialize: + + function Line (scene, x, y, x1, y1, x2, y2, fillColor, fillAlpha) + { + if (x === undefined) { x = 0; } + if (y === undefined) { y = 0; } + if (x1 === undefined) { x1 = 0; } + if (y1 === undefined) { y1 = 0; } + if (x2 === undefined) { x2 = 128; } + if (y2 === undefined) { y2 = 0; } + + Shape.call(this, scene, 'Line', new GeomLine(x1, y1, x2, y2)); + + var width = this.data.right - this.data.left; + var height = this.data.bottom - this.data.top; + + this._startWidth = 1; + this._endWidth = 1; + + this.setPosition(x, y); + this.setSize(width, height); + + if (fillColor !== undefined) + { + this.setFillStyle(fillColor, fillAlpha); + } + + this.updateDisplayOrigin(); + }, + + setLineWidth: function (startWidth, endWidth) + { + if (endWidth === undefined) { endWidth = startWidth; } + + this._startWidth = startWidth; + this._endWidth = endWidth; + + return this; + }, + + /** + * [description] + * + * @method Phaser.Geom.Line#setTo + * @since 3.13.0 + * + * @param {number} [x1=0] - [description] + * @param {number} [y1=0] - [description] + * @param {number} [x2=0] - [description] + * @param {number} [y2=0] - [description] + * + * @return {Phaser.Geom.Line} This Line object. + */ + setTo: function (x1, y1, x2, y2) + { + this.data.setTo(x1, y1, x2, y2); + + return this; + } + +}); + +module.exports = Line; diff --git a/src/gameobjects/shape/line/LineCanvasRenderer.js b/src/gameobjects/shape/line/LineCanvasRenderer.js new file mode 100644 index 000000000..a7c03fda7 --- /dev/null +++ b/src/gameobjects/shape/line/LineCanvasRenderer.js @@ -0,0 +1,26 @@ +/** + * @author Richard Davey + * @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.Line#renderCanvas + * @since 3.13.0 + * @private + * + * @param {Phaser.Renderer.Canvas.CanvasRenderer} renderer - A reference to the current active Canvas renderer. + * @param {Phaser.GameObjects.Line} 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 LineCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix) +{ +}; + +module.exports = LineCanvasRenderer; diff --git a/src/gameobjects/shape/line/LineFactory.js b/src/gameobjects/shape/line/LineFactory.js new file mode 100644 index 000000000..43c210eba --- /dev/null +++ b/src/gameobjects/shape/line/LineFactory.js @@ -0,0 +1,32 @@ +/** + * @author Richard Davey + * @copyright 2018 Photon Storm Ltd. + * @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} + */ + +var GameObjectFactory = require('../../GameObjectFactory'); +var Line = require('./Line'); + +/** + * Creates a new Line Shape Game Object and adds it to the Scene. + * + * Note: This method will only be available if the Line Game Object has been built into Phaser. + * + * @method Phaser.GameObjects.GameObjectFactory#line + * @since 3.13.0 + * + * @param {number} [x=0] - The horizontal position of this Game Object in the world. + * @param {number} [y=0] - The vertical position of this Game Object in the world. + * @param {number} [x1=0] - The horizontal position of the first point in the triangle. + * @param {number} [y1=0] - The horizontal position of the first point in the triangle. + * @param {number} [x2=128] - The horizontal position of the second point in the triangle. + * @param {number} [y2=0] - The horizontal position of the second point in the triangle. + * @param {number} [fillColor] - The color the triangle will be filled with, i.e. 0xff0000 for red. + * @param {number} [fillAlpha] - The alpha the triangle will be filled with. You can also set the alpha of the overall Shape using its `alpha` property. + * + * @return {Phaser.GameObjects.Line} The Game Object that was created. + */ +GameObjectFactory.register('line', function (x, y, x1, y1, x2, y2, fillColor, fillAlpha) +{ + return this.displayList.add(new Line(this.scene, x, y, x1, y1, x2, y2, fillColor, fillAlpha)); +}); diff --git a/src/gameobjects/shape/line/LineRender.js b/src/gameobjects/shape/line/LineRender.js new file mode 100644 index 000000000..38051e196 --- /dev/null +++ b/src/gameobjects/shape/line/LineRender.js @@ -0,0 +1,25 @@ +/** + * @author Richard Davey + * @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('./LineWebGLRenderer'); +} + +if (typeof CANVAS_RENDERER) +{ + renderCanvas = require('./LineCanvasRenderer'); +} + +module.exports = { + + renderWebGL: renderWebGL, + renderCanvas: renderCanvas + +}; diff --git a/src/gameobjects/shape/line/LineWebGLRenderer.js b/src/gameobjects/shape/line/LineWebGLRenderer.js new file mode 100644 index 000000000..68f9c28b1 --- /dev/null +++ b/src/gameobjects/shape/line/LineWebGLRenderer.js @@ -0,0 +1,85 @@ +/** + * @author Richard Davey + * @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.Line#renderWebGL + * @since 3.13.0 + * @private + * + * @param {Phaser.Renderer.WebGL.WebGLRenderer} renderer - A reference to the current active WebGL renderer. + * @param {Phaser.GameObjects.Line} 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 LineWebGLRenderer = 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; + } + else + { + shapeMatrix.e -= camera.scrollX * src.scrollFactorX; + shapeMatrix.f -= camera.scrollY * src.scrollFactorY; + } + + var dx = src._displayOriginX; + var dy = src._displayOriginY; + var alpha = camera.alpha * src.alpha; + + if (src.isFilled) + { + var strokeTint = pipeline.strokeTint; + var color = Utils.getTintAppendFloatAlphaAndSwap(src.fillColor, src.fillAlpha * alpha); + + strokeTint.TL = color; + strokeTint.TR = color; + strokeTint.BL = color; + strokeTint.BR = color; + + var startWidth = src._startWidth; + var endWidth = src._endWidth; + + pipeline.batchLine( + src.data.x1 - dx, + src.data.y1 - dy, + src.data.x2 - dx, + src.data.y2 - dy, + startWidth, + endWidth, + 1, + 0, + false, + shapeMatrix, + camMatrix + ); + } +}; + +module.exports = LineWebGLRenderer; diff --git a/src/gameobjects/shape/triangle/TriangleCanvasRenderer.js b/src/gameobjects/shape/triangle/TriangleCanvasRenderer.js index ada9a6521..41cd38294 100644 --- a/src/gameobjects/shape/triangle/TriangleCanvasRenderer.js +++ b/src/gameobjects/shape/triangle/TriangleCanvasRenderer.js @@ -19,8 +19,8 @@ * @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) +var TriangleCanvasRenderer = function (renderer, src, interpolationPercentage, camera, parentMatrix) { }; -module.exports = RectangleCanvasRenderer; +module.exports = TriangleCanvasRenderer;