/** * @author Richard Davey * @copyright 2016 Photon Storm Ltd. * @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} */ /** * A Graphics object is a way to draw primitives to your game. Primitives include forms of geometry, such as Rectangles, * Circles and Polygons. They also include lines, arcs and curves. When you initially create a Graphics object it will * be empty. To 'draw' to it you first specify a lineStyle or fillStyle (or both), and then draw a shape. For example: * * ``` * graphics.beginFill(0xff0000); * graphics.drawCircle(50, 50, 100); * graphics.endFill(); * ``` * * This will draw a circle shape to the Graphics object, with a diameter of 100, located at x: 50, y: 50. * * When a Graphics object is rendered it will render differently based on if the game is running under Canvas or * WebGL. Under Canvas it will use the HTML Canvas context drawing operations to draw the path. Under WebGL the * graphics data is decomposed into polygons. Both of these are expensive processes, especially with complex shapes. * * If your Graphics object doesn't change much (or at all) once you've drawn your shape to it, then you will help * performance by calling `Graphics.generateTexture`. This will 'bake' the Graphics object into a Texture, and return it. * You can then use this Texture for Sprites or other display objects. If your Graphics object updates frequently then * you should avoid doing this, as it will constantly generate new textures, which will consume memory. * * As you can tell, Graphics objects are a bit of a trade-off. While they are extremely useful, you need to be careful * in their complexity and quantity of them in your game. * * @class Phaser.GameObject.Graphics * @constructor * @extends PIXI.DisplayObjectContainer * @extends Phaser.Component.Core * @extends Phaser.Component.Angle * @extends Phaser.Component.AutoCull * @extends Phaser.Component.Bounds * @extends Phaser.Component.Destroy * @extends Phaser.Component.FixedToCamera * @extends Phaser.Component.InputEnabled * @extends Phaser.Component.InWorld * @extends Phaser.Component.LifeSpan * @extends Phaser.Component.PhysicsBody * @extends Phaser.Component.Reset * @param {Phaser.Game} game - Current game instance. * @param {number} [x=0] - X position of the new graphics object. * @param {number} [y=0] - Y position of the new graphics object. */ Phaser.GameObject.Graphics = function (game, x, y) { if (x === undefined) { x = 0; } if (y === undefined) { y = 0; } /** * @property {number} type - The const type of this object. * @default */ this.type = Phaser.GRAPHICS; /** * @property {number} physicsType - The const physics body type of this object. * @readonly */ this.physicsType = Phaser.SPRITE; /** * @property {Phaser.Point} anchor - Required for a Graphics shape to work as a Physics body, do not modify this value. * @private */ this.anchor = new Phaser.Point(); PIXI.DisplayObjectContainer.call(this); this.renderable = true; /** * The alpha value used when filling the Graphics object. * * @property fillAlpha * @type Number */ this.fillAlpha = 1; /** * The width (thickness) of any lines drawn. * * @property lineWidth * @type Number */ this.lineWidth = 0; /** * The color of any lines drawn. * * @property lineColor * @type String * @default 0 */ this.lineColor = 0; /** * Graphics data * * @property graphicsData * @type Array * @private */ this.graphicsData = []; /** * The tint applied to the graphic shape. This is a hex value. Apply a value of 0xFFFFFF to reset the tint. * * @property tint * @type Number * @default 0xFFFFFF */ this.tint = 0xFFFFFF; /** * The blend mode to be applied to the graphic shape. Apply a value of PIXI.blendModes.NORMAL to reset the blend mode. * * @property blendMode * @type Number * @default PIXI.blendModes.NORMAL; */ this.blendMode = Phaser.blendModes.NORMAL; /** * Current path * * @property currentPath * @type Object * @private */ this.currentPath = null; /** * Array containing some WebGL-related properties used by the WebGL renderer. * * @property _webGL * @type Array * @private */ this._webGL = null; /** * Whether this shape is being used as a mask. * * @property isMask * @type Boolean */ this.isMask = false; /** * The bounds' padding used for bounds calculation. * * @property boundsPadding * @type Number */ this.boundsPadding = 0; this._localBounds = new Phaser.Rectangle(0, 0, 1, 1); /** * Used to detect if the graphics object has changed. If this is set to true then the graphics object will be recalculated. * * @property dirty * @type Boolean * @private */ this.dirty = true; /** * Used to detect if the bounds have been invalidated, by this Graphics being cleared or drawn to. * If this is set to true then the updateLocalBounds is called once in the postUpdate method. * * @property _boundsDirty * @type Boolean * @private */ this._boundsDirty = false; /** * Used to detect if the webgl graphics object has changed. If this is set to true then the graphics object will be recalculated. * * @property webGLDirty * @type Boolean * @private */ this.webGLDirty = false; /** * Used to detect if the cached sprite object needs to be updated. * * @property cachedSpriteDirty * @type Boolean * @private */ this.cachedSpriteDirty = false; Phaser.Component.Core.init.call(this, game, x, y, '', null); }; Phaser.GameObject.Graphics.prototype = Object.create(PIXI.DisplayObjectContainer.prototype); Phaser.GameObject.Graphics.prototype.constructor = Phaser.GameObject.Graphics; Phaser.Component.Core.install.call(Phaser.GameObject.Graphics.prototype, [ 'Angle', 'AutoCull', 'Bounds', 'Destroy', 'FixedToCamera', 'InputEnabled', 'InWorld', 'LifeSpan', 'PhysicsBody', 'Reset' ]); Phaser.GameObject.Graphics.prototype.preUpdatePhysics = Phaser.Component.PhysicsBody.preUpdate; Phaser.GameObject.Graphics.prototype.preUpdateLifeSpan = Phaser.Component.LifeSpan.preUpdate; Phaser.GameObject.Graphics.prototype.preUpdateInWorld = Phaser.Component.InWorld.preUpdate; Phaser.GameObject.Graphics.prototype.preUpdateCore = Phaser.Component.Core.preUpdate; /** * Automatically called by World.preUpdate. * * @method * @memberof Phaser.GameObject.Graphics */ Phaser.GameObject.Graphics.prototype.preUpdate = function () { if (!this.preUpdatePhysics() || !this.preUpdateLifeSpan() || !this.preUpdateInWorld()) { return false; } return this.preUpdateCore(); }; /** * Automatically called by World * @method Phaser.GameObject.Graphics.prototype.postUpdate */ Phaser.GameObject.Graphics.prototype.postUpdate = function () { Phaser.Component.PhysicsBody.postUpdate.call(this); Phaser.Component.FixedToCamera.postUpdate.call(this); if (this._boundsDirty) { this.updateLocalBounds(); this._boundsDirty = false; } for (var i = 0; i < this.children.length; i++) { this.children[i].postUpdate(); } }; /** * Destroy this Graphics instance. * * @method Phaser.GameObject.Graphics.prototype.destroy * @param {boolean} [destroyChildren=true] - Should every child of this object have its destroy method called? */ Phaser.GameObject.Graphics.prototype.destroy = function (destroyChildren) { this.clear(); Phaser.Component.Destroy.prototype.destroy.call(this, destroyChildren); }; /* * Draws a single {Phaser.Polygon} triangle from a {Phaser.Point} array * * @method Phaser.GameObject.Graphics.prototype.drawTriangle * @param {Array} points - An array of Phaser.Points that make up the three vertices of this triangle * @param {boolean} [cull=false] - Should we check if the triangle is back-facing */ Phaser.GameObject.Graphics.prototype.drawTriangle = function (points, cull) { if (cull === undefined) { cull = false; } var triangle = new Phaser.Polygon(points); if (cull) { var cameraToFace = new Phaser.Point(this.game.camera.x - points[0].x, this.game.camera.y - points[0].y); var ab = new Phaser.Point(points[1].x - points[0].x, points[1].y - points[0].y); var cb = new Phaser.Point(points[1].x - points[2].x, points[1].y - points[2].y); var faceNormal = cb.cross(ab); if (cameraToFace.dot(faceNormal) > 0) { this.drawPolygon(triangle); } } else { this.drawPolygon(triangle); } }; /* * Draws {Phaser.Polygon} triangles * * @method Phaser.GameObject.Graphics.prototype.drawTriangles * @param {Array|Array} vertices - An array of Phaser.Points or numbers that make up the vertices of the triangles * @param {Array} {indices=null} - An array of numbers that describe what order to draw the vertices in * @param {boolean} [cull=false] - Should we check if the triangle is back-facing */ Phaser.GameObject.Graphics.prototype.drawTriangles = function (vertices, indices, cull) { if (cull === undefined) { cull = false; } var point1 = new Phaser.Point(); var point2 = new Phaser.Point(); var point3 = new Phaser.Point(); var points = []; var i; if (!indices) { if (vertices[0] instanceof Phaser.Point) { for (i = 0; i < vertices.length / 3; i++) { this.drawTriangle([vertices[i * 3], vertices[i * 3 + 1], vertices[i * 3 + 2]], cull); } } else { for (i = 0; i < vertices.length / 6; i++) { point1.x = vertices[i * 6 + 0]; point1.y = vertices[i * 6 + 1]; point2.x = vertices[i * 6 + 2]; point2.y = vertices[i * 6 + 3]; point3.x = vertices[i * 6 + 4]; point3.y = vertices[i * 6 + 5]; this.drawTriangle([point1, point2, point3], cull); } } } else { if (vertices[0] instanceof Phaser.Point) { for (i = 0; i < indices.length /3; i++) { points.push(vertices[indices[i * 3 ]]); points.push(vertices[indices[i * 3 + 1]]); points.push(vertices[indices[i * 3 + 2]]); if (points.length === 3) { this.drawTriangle(points, cull); points = []; } } } else { for (i = 0; i < indices.length; i++) { point1.x = vertices[indices[i] * 2]; point1.y = vertices[indices[i] * 2 + 1]; points.push(point1.copyTo({})); if (points.length === 3) { this.drawTriangle(points, cull); points = []; } } } } }; /** * Specifies the line style used for subsequent calls to Graphics methods such as the lineTo() method or the drawCircle() method. * * @method lineStyle * @param lineWidth {Number} width of the line to draw, will update the objects stored style * @param color {Number} color of the line to draw, will update the objects stored style * @param alpha {Number} alpha of the line to draw, will update the objects stored style * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.lineStyle = function (lineWidth, color, alpha) { this.lineWidth = lineWidth || 0; this.lineColor = color || 0; this.lineAlpha = (alpha === undefined) ? 1 : alpha; if (this.currentPath) { if (this.currentPath.shape.points.length) { // halfway through a line? start a new one! this.drawShape(new Phaser.Polygon(this.currentPath.shape.points.slice(-2))); } else { // otherwise its empty so lets just set the line properties this.currentPath.lineWidth = this.lineWidth; this.currentPath.lineColor = this.lineColor; this.currentPath.lineAlpha = this.lineAlpha; } } return this; }; /** * Moves the current drawing position to x, y. * * @method moveTo * @param x {Number} the X coordinate to move to * @param y {Number} the Y coordinate to move to * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.moveTo = function (x, y) { this.drawShape(new Phaser.Polygon([ x, y ])); return this; }; /** * Draws a line using the current line style from the current drawing position to (x, y); * The current drawing position is then set to (x, y). * * @method lineTo * @param x {Number} the X coordinate to draw to * @param y {Number} the Y coordinate to draw to * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.lineTo = function (x, y) { if (!this.currentPath) { this.moveTo(0, 0); } this.currentPath.shape.points.push(x, y); this.dirty = true; this._boundsDirty = true; return this; }; /** * Calculate the points for a quadratic bezier curve and then draws it. * Based on: https://stackoverflow.com/questions/785097/how-do-i-implement-a-bezier-curve-in-c * * @method quadraticCurveTo * @param cpX {Number} Control point x * @param cpY {Number} Control point y * @param toX {Number} Destination point x * @param toY {Number} Destination point y * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.quadraticCurveTo = function (cpX, cpY, toX, toY) { if (this.currentPath) { if (this.currentPath.shape.points.length === 0) { this.currentPath.shape.points = [ 0, 0 ]; } } else { this.moveTo(0,0); } var xa, ya, n = 20, points = this.currentPath.shape.points; if (points.length === 0) { this.moveTo(0, 0); } var fromX = points[points.length - 2]; var fromY = points[points.length - 1]; var j = 0; for (var i = 1; i <= n; ++i) { j = i / n; xa = fromX + ((cpX - fromX) * j); ya = fromY + ((cpY - fromY) * j); points.push( xa + ( ((cpX + ( (toX - cpX) * j )) - xa) * j ), ya + ( ((cpY + ( (toY - cpY) * j )) - ya) * j ) ); } this.dirty = true; this._boundsDirty = true; return this; }; /** * Calculate the points for a bezier curve and then draws it. * * @method bezierCurveTo * @param cpX {Number} Control point x * @param cpY {Number} Control point y * @param cpX2 {Number} Second Control point x * @param cpY2 {Number} Second Control point y * @param toX {Number} Destination point x * @param toY {Number} Destination point y * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.bezierCurveTo = function (cpX, cpY, cpX2, cpY2, toX, toY) { if (this.currentPath) { if (this.currentPath.shape.points.length === 0) { this.currentPath.shape.points = [0, 0]; } } else { this.moveTo(0,0); } var n = 20, dt, dt2, dt3, t2, t3, points = this.currentPath.shape.points; var fromX = points[points.length-2]; var fromY = points[points.length-1]; var j = 0; for (var i = 1; i <= n; ++i) { j = i / n; dt = (1 - j); dt2 = dt * dt; dt3 = dt2 * dt; t2 = j * j; t3 = t2 * j; points.push( dt3 * fromX + 3 * dt2 * j * cpX + 3 * dt * t2 * cpX2 + t3 * toX, dt3 * fromY + 3 * dt2 * j * cpY + 3 * dt * t2 * cpY2 + t3 * toY); } this.dirty = true; this._boundsDirty = true; return this; }; /* * The arcTo() method creates an arc/curve between two tangents on the canvas. * * "borrowed" from https://code.google.com/p/fxcanvas/ - thanks google! * * @method arcTo * @param x1 {Number} The x-coordinate of the beginning of the arc * @param y1 {Number} The y-coordinate of the beginning of the arc * @param x2 {Number} The x-coordinate of the end of the arc * @param y2 {Number} The y-coordinate of the end of the arc * @param radius {Number} The radius of the arc * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.arcTo = function (x1, y1, x2, y2, radius) { if (this.currentPath) { if (this.currentPath.shape.points.length === 0) { this.currentPath.shape.points.push(x1, y1); } } else { this.moveTo(x1, y1); } var points = this.currentPath.shape.points, fromX = points[points.length-2], fromY = points[points.length-1], a1 = fromY - y1, b1 = fromX - x1, a2 = y2 - y1, b2 = x2 - x1, mm = Math.abs(a1 * b2 - b1 * a2); if (mm < 1.0e-8 || radius === 0) { if (points[points.length-2] !== x1 || points[points.length-1] !== y1) { points.push(x1, y1); } } else { var dd = a1 * a1 + b1 * b1, cc = a2 * a2 + b2 * b2, tt = a1 * a2 + b1 * b2, k1 = radius * Math.sqrt(dd) / mm, k2 = radius * Math.sqrt(cc) / mm, j1 = k1 * tt / dd, j2 = k2 * tt / cc, cx = k1 * b2 + k2 * b1, cy = k1 * a2 + k2 * a1, px = b1 * (k2 + j1), py = a1 * (k2 + j1), qx = b2 * (k1 + j2), qy = a2 * (k1 + j2), startAngle = Math.atan2(py - cy, px - cx), endAngle = Math.atan2(qy - cy, qx - cx); this.arc(cx + x1, cy + y1, radius, startAngle, endAngle, b1 * a2 > b2 * a1); } this.dirty = true; this._boundsDirty = true; return this; }; /** * The arc method creates an arc/curve (used to create circles, or parts of circles). * * @method arc * @param cx {Number} The x-coordinate of the center of the circle * @param cy {Number} The y-coordinate of the center of the circle * @param radius {Number} The radius of the circle * @param startAngle {Number} The starting angle, in radians (0 is at the 3 o'clock position of the arc's circle) * @param endAngle {Number} The ending angle, in radians * @param anticlockwise {Boolean} Optional. Specifies whether the drawing should be counterclockwise or clockwise. False is default, and indicates clockwise, while true indicates counter-clockwise. * @param segments {Number} Optional. The number of segments to use when calculating the arc. The default is 40. If you need more fidelity use a higher number. * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.arc = function (cx, cy, radius, startAngle, endAngle, anticlockwise, segments) { // If we do this we can never draw a full circle if (startAngle === endAngle) { return this; } if (anticlockwise === undefined) { anticlockwise = false; } if (segments === undefined) { segments = 40; } if (!anticlockwise && endAngle <= startAngle) { endAngle += Math.PI * 2; } else if (anticlockwise && startAngle <= endAngle) { startAngle += Math.PI * 2; } var sweep = anticlockwise ? (startAngle - endAngle) * -1 : (endAngle - startAngle); var segs = Math.ceil(Math.abs(sweep) / (Math.PI * 2)) * segments; // Sweep check - moved here because we don't want to do the moveTo below if the arc fails if (sweep === 0) { return this; } var startX = cx + Math.cos(startAngle) * radius; var startY = cy + Math.sin(startAngle) * radius; if (anticlockwise && this.filling) { this.moveTo(cx, cy); } else { this.moveTo(startX, startY); } // currentPath will always exist after calling a moveTo var points = this.currentPath.shape.points; var theta = sweep / (segs * 2); var theta2 = theta * 2; var cTheta = Math.cos(theta); var sTheta = Math.sin(theta); var segMinus = segs - 1; var remainder = (segMinus % 1) / segMinus; for (var i = 0; i <= segMinus; i++) { var real = i + remainder * i; var angle = ((theta) + startAngle + (theta2 * real)); var c = Math.cos(angle); var s = -Math.sin(angle); points.push(( (cTheta * c) + (sTheta * s) ) * radius + cx, ( (cTheta * -s) + (sTheta * c) ) * radius + cy); } this.dirty = true; this._boundsDirty = true; return this; }; /** * Specifies a simple one-color fill that subsequent calls to other Graphics methods * (such as lineTo() or drawCircle()) use when drawing. * * @method beginFill * @param color {Number} the color of the fill * @param alpha {Number} the alpha of the fill * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.beginFill = function (color, alpha) { this.filling = true; this.fillColor = color || 0; this.fillAlpha = (alpha === undefined) ? 1 : alpha; if (this.currentPath) { if (this.currentPath.shape.points.length <= 2) { this.currentPath.fill = this.filling; this.currentPath.fillColor = this.fillColor; this.currentPath.fillAlpha = this.fillAlpha; } } return this; }; /** * Applies a fill to the lines and shapes that were added since the last call to the beginFill() method. * * @method endFill * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.endFill = function () { this.filling = false; this.fillColor = null; this.fillAlpha = 1; return this; }; /** * @method drawRect * * @param x {Number} The X coord of the top-left of the rectangle * @param y {Number} The Y coord of the top-left of the rectangle * @param width {Number} The width of the rectangle * @param height {Number} The height of the rectangle * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.drawRect = function (x, y, width, height) { this.drawShape(new Phaser.Rectangle(x, y, width, height)); return this; }; /** * @method drawRoundedRect * @param x {Number} The X coord of the top-left of the rectangle * @param y {Number} The Y coord of the top-left of the rectangle * @param width {Number} The width of the rectangle * @param height {Number} The height of the rectangle * @param radius {Number} Radius of the rectangle corners. In WebGL this must be a value between 0 and 9. */ Phaser.GameObject.Graphics.prototype.drawRoundedRect = function (x, y, width, height, radius) { this.drawShape(new Phaser.RoundedRectangle(x, y, width, height, radius)); return this; }; /** * Draws a circle. * * @method drawCircle * @param x {Number} The X coordinate of the center of the circle * @param y {Number} The Y coordinate of the center of the circle * @param diameter {Number} The diameter of the circle * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.drawCircle = function (x, y, diameter) { this.drawShape(new Phaser.Circle(x, y, diameter)); return this; }; /** * Draws an ellipse. * * @method drawEllipse * @param x {Number} The X coordinate of the center of the ellipse * @param y {Number} The Y coordinate of the center of the ellipse * @param width {Number} The half width of the ellipse * @param height {Number} The half height of the ellipse * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.drawEllipse = function (x, y, width, height) { this.drawShape(new Phaser.Ellipse(x, y, width, height)); return this; }; /** * Draws a polygon using the given path. * * @method drawPolygon * @param path {Array|Phaser.Polygon} The path data used to construct the polygon. Can either be an array of points or a Phaser.Polygon object. * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.drawPolygon = function (path) { if (path instanceof Phaser.Polygon) { path = path.points; } // prevents an argument assignment deopt // see section 3.1: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments var points = path; if (!Array.isArray(points)) { // prevents an argument leak deopt // see section 3.2: https://github.com/petkaantonov/bluebird/wiki/Optimization-killers#3-managing-arguments points = new Array(arguments.length); for (var i = 0; i < points.length; ++i) { points[i] = arguments[i]; } } this.drawShape(new Phaser.Polygon(points)); return this; }; /** * Clears the graphics that were drawn to this Graphics object, and resets fill and line style settings. * * @method clear * @return {Graphics} */ Phaser.GameObject.Graphics.prototype.clear = function () { this.lineWidth = 0; this.filling = false; this.dirty = true; this._boundsDirty = true; this.clearDirty = true; this.graphicsData = []; this.updateLocalBounds(); return this; }; /** * Useful function that returns a texture of the graphics object that can then be used to create sprites * This can be quite useful if your geometry is complicated and needs to be reused multiple times. * * @method generateTexture * @param [resolution=1] {Number} The resolution of the texture being generated * @param [scaleMode=0] {Number} Should be one of the PIXI.scaleMode consts * @param [padding=0] {Number} Add optional extra padding to the generated texture (default 0) * @return {Texture} a texture of the graphics object */ Phaser.GameObject.Graphics.prototype.generateTexture = function (resolution, scaleMode, padding) { if (resolution === undefined) { resolution = 1; } if (scaleMode === undefined) { scaleMode = Phaser.scaleModes.DEFAULT; } if (padding === undefined) { padding = 0; } var bounds = this.getBounds(); bounds.width += padding; bounds.height += padding; var canvasBuffer = new PIXI.CanvasBuffer(bounds.width * resolution, bounds.height * resolution); var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas, scaleMode); texture.baseTexture.resolution = resolution; canvasBuffer.context.scale(resolution, resolution); canvasBuffer.context.translate(-bounds.x, -bounds.y); PIXI.CanvasGraphics.renderGraphics(this, canvasBuffer.context); return texture; }; /** * Retrieves the bounds of the graphic shape as a rectangle object * * @method getBounds * @return {Rectangle} the rectangular bounding area */ Phaser.GameObject.Graphics.prototype.getBounds = function (matrix) { if (this._currentBounds) { return this._currentBounds; } // Return an empty object if the item is a mask! if (!this.renderable) { return Phaser.EmptyRectangle; } if (this.dirty) { this.updateLocalBounds(); this.webGLDirty = true; this.cachedSpriteDirty = true; this.dirty = false; } var bounds = this._localBounds; var w0 = bounds.x; var w1 = bounds.width + bounds.x; var h0 = bounds.y; var h1 = bounds.height + bounds.y; var worldTransform = matrix || this.worldTransform; var a = worldTransform.a; var b = worldTransform.b; var c = worldTransform.c; var d = worldTransform.d; var tx = worldTransform.tx; var ty = worldTransform.ty; var x1 = a * w1 + c * h1 + tx; var y1 = d * h1 + b * w1 + ty; var x2 = a * w0 + c * h1 + tx; var y2 = d * h1 + b * w0 + ty; var x3 = a * w0 + c * h0 + tx; var y3 = d * h0 + b * w0 + ty; var x4 = a * w1 + c * h0 + tx; var y4 = d * h0 + b * w1 + ty; var maxX = x1; var maxY = y1; var minX = x1; var minY = y1; minX = x2 < minX ? x2 : minX; minX = x3 < minX ? x3 : minX; minX = x4 < minX ? x4 : minX; minY = y2 < minY ? y2 : minY; minY = y3 < minY ? y3 : minY; minY = y4 < minY ? y4 : minY; maxX = x2 > maxX ? x2 : maxX; maxX = x3 > maxX ? x3 : maxX; maxX = x4 > maxX ? x4 : maxX; maxY = y2 > maxY ? y2 : maxY; maxY = y3 > maxY ? y3 : maxY; maxY = y4 > maxY ? y4 : maxY; this._bounds.x = minX; this._bounds.width = maxX - minX; this._bounds.y = minY; this._bounds.height = maxY - minY; this._currentBounds = this._bounds; return this._currentBounds; }; /** * Retrieves the non-global local bounds of the graphic shape as a rectangle. The calculation takes all visible children into consideration. * * @method getLocalBounds * @return {Rectangle} The rectangular bounding area */ Phaser.GameObject.Graphics.prototype.getLocalBounds = function () { var matrixCache = this.worldTransform; this.worldTransform = Phaser.identityMatrix; for (var i = 0; i < this.children.length; i++) { this.children[i].updateTransform(); } var bounds = this.getBounds(); this.worldTransform = matrixCache; for (i = 0; i < this.children.length; i++) { this.children[i].updateTransform(); } return bounds; }; /** * Tests if a point is inside this graphics object * * @param point {Point} the point to test * @return {boolean} the result of the test */ Phaser.GameObject.Graphics.prototype.containsPoint = function (point) { this.worldTransform.applyInverse(point, tempPoint); var graphicsData = this.graphicsData; for (var i = 0; i < graphicsData.length; i++) { var data = graphicsData[i]; if (!data.fill) { continue; } // only deal with fills.. if (data.shape) { if (data.shape.contains(tempPoint.x, tempPoint.y)) { return true; } } } return false; }; /** * Update the bounds of the object * * @method updateLocalBounds */ Phaser.GameObject.Graphics.prototype.updateLocalBounds = function () { var minX = Infinity; var maxX = -Infinity; var minY = Infinity; var maxY = -Infinity; if (this.graphicsData.length) { var shape, points, x, y, w, h; for (var i = 0; i < this.graphicsData.length; i++) { var data = this.graphicsData[i]; var type = data.type; var lineWidth = data.lineWidth; shape = data.shape; if (type === Phaser.RECTANGLE || type === Phaser.ROUNDEDRECTANGLE) { x = shape.x - lineWidth / 2; y = shape.y - lineWidth / 2; w = shape.width + lineWidth; h = shape.height + lineWidth; minX = x < minX ? x : minX; maxX = x + w > maxX ? x + w : maxX; minY = y < minY ? y : minY; maxY = y + h > maxY ? y + h : maxY; } else if (type === Phaser.CIRCLE) { x = shape.x; y = shape.y; w = shape.radius + lineWidth / 2; h = shape.radius + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; minY = y - h < minY ? y - h : minY; maxY = y + h > maxY ? y + h : maxY; } else if (type === Phaser.ELLIPSE) { x = shape.x; y = shape.y; w = shape.width + lineWidth / 2; h = shape.height + lineWidth / 2; minX = x - w < minX ? x - w : minX; maxX = x + w > maxX ? x + w : maxX; minY = y - h < minY ? y - h : minY; maxY = y + h > maxY ? y + h : maxY; } else { // POLY - assumes points are sequential, not Point objects points = shape.points; for (var j = 0; j < points.length; j++) { if (points[j] instanceof Phaser.Point) { x = points[j].x; y = points[j].y; } else { x = points[j]; y = points[j + 1]; if (j < points.length - 1) { j++; } } minX = x - lineWidth < minX ? x - lineWidth : minX; maxX = x + lineWidth > maxX ? x + lineWidth : maxX; minY = y - lineWidth < minY ? y - lineWidth : minY; maxY = y + lineWidth > maxY ? y + lineWidth : maxY; } } } } else { minX = 0; maxX = 0; minY = 0; maxY = 0; } var padding = this.boundsPadding; this._localBounds.x = minX - padding; this._localBounds.width = (maxX - minX) + padding * 2; this._localBounds.y = minY - padding; this._localBounds.height = (maxY - minY) + padding * 2; }; /** * Generates the cached sprite when the sprite has cacheAsBitmap = true * * @method _generateCachedSprite * @private */ Phaser.GameObject.Graphics.prototype._generateCachedSprite = function () { var bounds = this.getLocalBounds(); if (!this._cachedSprite) { var canvasBuffer = new PIXI.CanvasBuffer(bounds.width, bounds.height); var texture = PIXI.Texture.fromCanvas(canvasBuffer.canvas); this._cachedSprite = new PIXI.Sprite(texture); this._cachedSprite.buffer = canvasBuffer; this._cachedSprite.worldTransform = this.worldTransform; } else { this._cachedSprite.buffer.resize(bounds.width, bounds.height); } // leverage the anchor to account for the offset of the element this._cachedSprite.anchor.x = -(bounds.x / bounds.width); this._cachedSprite.anchor.y = -(bounds.y / bounds.height); // this._cachedSprite.buffer.context.save(); this._cachedSprite.buffer.context.translate(-bounds.x, -bounds.y); // make sure we set the alpha of the graphics to 1 for the render.. this.worldAlpha = 1; // now render the graphic.. PIXI.CanvasGraphics.renderGraphics(this, this._cachedSprite.buffer.context); this._cachedSprite.alpha = this.alpha; }; /** * Updates texture size based on canvas size * * @method updateCachedSpriteTexture * @private */ Phaser.GameObject.Graphics.prototype.updateCachedSpriteTexture = function () { var cachedSprite = this._cachedSprite; var texture = cachedSprite.texture; var canvas = cachedSprite.buffer.canvas; texture.baseTexture.width = canvas.width; texture.baseTexture.height = canvas.height; texture.crop.width = texture.frame.width = canvas.width; texture.crop.height = texture.frame.height = canvas.height; cachedSprite._width = canvas.width; cachedSprite._height = canvas.height; // update the dirty base textures texture.baseTexture.dirty(); }; /** * Destroys a previous cached sprite. * * @method destroyCachedSprite */ Phaser.GameObject.Graphics.prototype.destroyCachedSprite = function () { this._cachedSprite.texture.destroy(true); this._cachedSprite = null; }; /** * Draws the given shape to this Graphics object. Can be any of Circle, Rectangle, Ellipse, Line or Polygon. * * @method drawShape * @param {Circle|Rectangle|Ellipse|Line|Polygon} shape The Shape object to draw. * @return {GraphicsData} The generated GraphicsData object. */ Phaser.GameObject.Graphics.prototype.drawShape = function (shape) { if (this.currentPath) { // check current path! if (this.currentPath.shape.points.length <= 2) { this.graphicsData.pop(); } } this.currentPath = null; // Handle mixed-type polygons if (shape instanceof Phaser.Polygon) { shape = shape.clone(); shape.flatten(); } var data = new Phaser.GameObject.GraphicsData(this.lineWidth, this.lineColor, this.lineAlpha, this.fillColor, this.fillAlpha, this.filling, shape); this.graphicsData.push(data); if (data.type === Phaser.POLYGON) { data.shape.closed = this.filling; this.currentPath = data; } this.dirty = true; this._boundsDirty = true; return data; }; Phaser.GameObject.Graphics.prototype.updateGraphicsTint = function () { if (this.tint === 0xFFFFFF) { return; } var tintR = (this.tint >> 16 & 0xFF) / 255; var tintG = (this.tint >> 8 & 0xFF) / 255; var tintB = (this.tint & 0xFF) / 255; for (var i = 0; i < this.graphicsData.length; i++) { var data = this.graphicsData[i]; var fillColor = data.fillColor | 0; var lineColor = data.lineColor | 0; data._fillTint = (((fillColor >> 16 & 0xFF) / 255 * tintR * 255 << 16) + ((fillColor >> 8 & 0xFF) / 255 * tintG * 255 << 8) + (fillColor & 0xFF) / 255 * tintB * 255); data._lineTint = (((lineColor >> 16 & 0xFF) / 255 * tintR * 255 << 16) + ((lineColor >> 8 & 0xFF) / 255 * tintG * 255 << 8) + (lineColor & 0xFF) / 255 * tintB * 255); } }; /** * When cacheAsBitmap is set to true the graphics object will be rendered as if it was a sprite. * This is useful if your graphics element does not change often, as it will speed up the rendering of the object in exchange for taking up texture memory. * It is also useful if you need the graphics object to be anti-aliased, because it will be rendered using canvas. * This is not recommended if you are constantly redrawing the graphics element. * * @property cacheAsBitmap * @type Boolean * @default false * @private */ Object.defineProperty(Phaser.GameObject.Graphics.prototype, 'cacheAsBitmap', { get: function () { return this._cacheAsBitmap; }, set: function (value) { this._cacheAsBitmap = value; if (this._cacheAsBitmap) { this._generateCachedSprite(); } else { this.destroyCachedSprite(); } this.dirty = true; this.webGLDirty = true; } });