From ab78710daad9687ee84535e2573fb4a69f2ef82e Mon Sep 17 00:00:00 2001 From: photonstorm Date: Fri, 3 Oct 2014 02:21:09 +0100 Subject: [PATCH] BitmapData.textureLine takes a Phaser.Line object and an image in the image cache. It then accurately draws the image as a repeating texture for the full length of the line. --- README.md | 1 + src/gameobjects/BitmapData.js | 34 ++++++++++++++++++++++++++++++++++ src/geom/Circle.js | 2 +- 3 files changed, 36 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 6b6c2948c..0ad3eab73 100644 --- a/README.md +++ b/README.md @@ -92,6 +92,7 @@ Version 2.1.2 - "Whitebridge" - in development * Cache.addBitmapData has a new parameter: `frameData` allowing you to pass a `Phaser.FrameData` object along with the BitmapData. * Cache.getFrameData has a new parameter: `map` which allows you to specify which cache to get the FrameData from, i.e. `Phaser.Cache.IMAGE` or `Phaser.Cache.BITMAPDATA`. * Sprite.loadTexture if given a BitmapData as the texture will now query the cache to see if it has any associated FrameData, and if so it will load that into the AnimationManager. +* BitmapData.textureLine takes a Phaser.Line object and an image in the image cache. It then accurately draws the image as a repeating texture for the full length of the line. diff --git a/src/gameobjects/BitmapData.js b/src/gameobjects/BitmapData.js index 044d0619a..5ed1dd7d2 100644 --- a/src/gameobjects/BitmapData.js +++ b/src/gameobjects/BitmapData.js @@ -193,6 +193,12 @@ Phaser.BitmapData = function (game, key, width, height) { */ this._tempB = 0; + /** + * @property {Phaser.Circle} _circle - Internal cache var. + * @private + */ + this._circle = new Phaser.Circle(); + }; Phaser.BitmapData.prototype = { @@ -1237,6 +1243,34 @@ Phaser.BitmapData.prototype = { }, + /** + * Takes the given Line object and image and renders it to this BitmapData as a repeating texture line. + * + * @method Phaser.BitmapData#textureLine + * @param {Phaser.Line} line - A Phaser.Line object that will be used to plot the start and end of the line. + * @param {string} key - The key of an image in the Phaser.Cache to use as the texture for this line. + * @return {Phaser.BitmapData} This BitmapData object for method chaining. + */ + textureLine: function (line, key) { + + var image = this.game.cache.getImage(key); + + this._circle = new Phaser.Circle(line.start.x, line.start.y, image.height); + + circle.circumferencePoint(line.angle - 1.5707963267948966, false, this._pos); + + this.context.save(); + this.context.translate(this._pos.x, this._pos.y); + this.context.rotate(line.angle); + this.context.fillRect(0, 0, line.length, image.height); + this.context.restore(); + + this.dirty = true; + + return this; + + }, + /** * If the game is running in WebGL this will push the texture up to the GPU if it's dirty. * This is called automatically if the BitmapData is being used by a Sprite, otherwise you need to remember to call it in your render function. diff --git a/src/geom/Circle.js b/src/geom/Circle.js index 9b98ef524..9a80d4f8f 100644 --- a/src/geom/Circle.js +++ b/src/geom/Circle.js @@ -67,7 +67,7 @@ Phaser.Circle.prototype = { * @method Phaser.Circle#setTo * @param {number} x - The x coordinate of the center of the circle. * @param {number} y - The y coordinate of the center of the circle. - * @param {number} diameter - The diameter of the circle in pixels. + * @param {number} diameter - The diameter of the circle. * @return {Circle} This circle object. */ setTo: function (x, y, diameter) {