diff --git a/README.md b/README.md index 378c8cbd..1a02af6d 100644 --- a/README.md +++ b/README.md @@ -83,6 +83,8 @@ Significant API changes: * Stage.scaleMode has been moved to StageScaleMode.scaleMode (so now game.scale.scaleMode) * Stage.fullScreenScaleMode has been moved to StageScaleMode.fullScreenScaleMode (so now game.scale.fullScreenScaleMode) * Stage.canvas has been moved to Game.canvas (which used to be a reference to Stage.canvas, but is now the actual object). +* BitmapData.addTo removed and enhanced BitmapData.add so it can accept either a single Sprite/Image or an Array of them. +* BitmapData has had all of the EaselJS functions removed. It was just taking up space and you can do it all via BitmapData.context directly. New features: diff --git a/examples/wip/camera follow.js b/examples/wip/camera follow.js new file mode 100644 index 00000000..74e4f8a2 --- /dev/null +++ b/examples/wip/camera follow.js @@ -0,0 +1,52 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('backdrop', 'assets/pics/remember-me.jpg'); + game.load.image('box', 'assets/sprites/block.png'); + +} + +var cursors; +var sprite; + +function create() { + + game.world.setBounds(0, 0, 1920, 1200); + game.add.image(0, 0, 'backdrop'); + + sprite = game.add.sprite(300, 300, 'box'); + + game.camera.follow(sprite); + + cursors = game.input.keyboard.createCursorKeys(); + +} + +function update() { + + if (cursors.left.isDown) + { + sprite.x -= 8; + } + else if (cursors.right.isDown) + { + sprite.x += 8; + } + + if (cursors.up.isDown) + { + sprite.y -= 8; + } + else if (cursors.down.isDown) + { + sprite.y += 8; + } + +} + +function render() { + + +} diff --git a/examples/wip/camera.js b/examples/wip/camera.js new file mode 100644 index 00000000..081abc74 --- /dev/null +++ b/examples/wip/camera.js @@ -0,0 +1,47 @@ + +var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); + +function preload() { + + game.load.image('backdrop', 'assets/pics/remember-me.jpg'); + game.load.image('box', 'assets/sprites/block.png'); + +} + +var cursors; + +function create() { + + game.world.setBounds(0, 0, 1920, 1200); + game.add.sprite(0, 0, 'backdrop'); + + cursors = game.input.keyboard.createCursorKeys(); + +} + +function update() { + + if (cursors.left.isDown) + { + game.camera.x -= 8; + } + else if (cursors.right.isDown) + { + game.camera.x += 8; + } + + if (cursors.up.isDown) + { + game.camera.y -= 8; + } + else if (cursors.down.isDown) + { + game.camera.y += 8; + } + +} + +function render() { + + +} diff --git a/examples/wip/p28.js b/examples/wip/p28.js index 12860ab2..2d5f09db 100644 --- a/examples/wip/p28.js +++ b/examples/wip/p28.js @@ -22,7 +22,7 @@ function px2p(v) { function create() { - // game.world.setBounds(0, 0, 1920, 1200); + game.world.setBounds(0, 0, 1920, 1200); game.add.sprite(0, 0, 'backdrop'); game.physics.onBodyAdded.add(addedToWorld, this); diff --git a/src/core/Stage.js b/src/core/Stage.js index b9e8dfda..c16feda1 100644 --- a/src/core/Stage.js +++ b/src/core/Stage.js @@ -23,19 +23,18 @@ Phaser.Stage = function (game, width, height) { this.game = game; /** - * @property {string} game - Background color of the stage (defaults to black). Set via the public backgroundColor property. - * @private - */ - this._backgroundColor = 'rgb(0,0,0)'; - - /** - * @property {Phaser.Point} offset - Get the offset values (for input and other things). + * @property {Phaser.Point} offset - Holds the offset coordinates of the Game.canvas from the top-left of the browser window (used by Input and other classes) */ this.offset = new Phaser.Point(); PIXI.Stage.call(this, 0x000000, false); + /** + * @property {string} name - The name of this object. + * @default + */ this.name = '_stage_root'; + this.interactive = false; /** @@ -44,18 +43,18 @@ Phaser.Stage = function (game, width, height) { */ this.disableVisibilityChange = false; - /** - * @property {number} _nextOffsetCheck - The time to run the next offset check. - * @private - */ - this._nextOffsetCheck = 0; - /** * @property {number|false} checkOffsetInterval - The time (in ms) between which the stage should check to see if it has moved. * @default */ this.checkOffsetInterval = 2500; + /** + * @property {number} _nextOffsetCheck - The time to run the next offset check. + * @private + */ + this._nextOffsetCheck = 0; + if (game.config) { this.parseConfig(game.config); diff --git a/src/gameobjects/BitmapData.js b/src/gameobjects/BitmapData.js index 38104592..576addcf 100644 --- a/src/gameobjects/BitmapData.js +++ b/src/gameobjects/BitmapData.js @@ -9,11 +9,8 @@ * * @class Phaser.BitmapData * -* @classdesc Note: This object is still experimental and likely to change. -* -* A BitmapData object can be thought of as a blank canvas onto which you can perform graphics operations as you would on a normal canvas, -* such as drawing lines, circles, arcs, fills and copying and setting blocks of pixel data. A single BitmapData can be used as the texture -* for multiple Sprites. So if you need to dynamically create a Sprite texture then they are a good choice. It supports the EaselJS Tiny API. +* @classdesc A BitmapData object contains a Canvas element to which you can draw anything you like via normal Canvas context operations. +* A single BitmapData can be used as the texture one or many Images/Sprites. So if you need to dynamically create a Sprite texture then they are a good choice. * * @constructor * @param {Phaser.Game} game - A reference to the currently running game. @@ -58,6 +55,11 @@ Phaser.BitmapData = function (game, key, width, height) { */ this.context = this.canvas.getContext('2d'); + /** + * @property {CanvasRenderingContext2D} ctx - A reference to BitmapData.context. + */ + this.ctx = this.context; + /** * @property {array} imageData - The canvas image data. */ @@ -106,30 +108,27 @@ Phaser.BitmapData = function (game, key, width, height) { Phaser.BitmapData.prototype = { /** - * Updates the given Sprite so that it uses this BitmapData as its texture. + * Updates the given objects so that they use this BitmapData as their texture. + * * @method Phaser.BitmapData#add - * @param {Phaser.Sprite} sprite - The sprite to apply this texture to. + * @param {Phaser.Sprite|Phaser.Sprite[]|Phaser.Image|Phaser.Image[]} object - Either a single Sprite/Image or an Array of Sprites/Images. */ - add: function (sprite) { + add: function (object) { - sprite.loadTexture(this); - - }, - - /** - * Given an array of Sprites it will update each of them so that their Textures reference this BitmapData. - * @method Phaser.BitmapData#addTo - * @param {Phaser.Sprite[]} sprites - An array of Sprites to apply this texture to. - */ - addTo: function (sprites) { - - for (var i = 0; i < sprites.length; i++) + if (Array.isArray(object)) { - if (sprites[i].texture) + for (var i = 0; i < object.length; i++) { - sprites[i].loadTexture(this); + if (object[i]['loadTexture']) + { + object[i].loadTexture(this); + } } } + else + { + object.loadTexture(this); + } }, @@ -247,697 +246,6 @@ Phaser.BitmapData.prototype = { }, - /** - * Adds an arc to the path which is centered at (x, y) position with radius r starting at startAngle and ending at endAngle - * going in the given direction by anticlockwise (defaulting to clockwise). - * @method Phaser.BitmapData#arc - * @param {number} x - The x axis of the coordinate for the arc's center - * @param {number} y - The y axis of the coordinate for the arc's center - * @param {number} radius - The arc's radius - * @param {number} startAngle - The starting point, measured from the x axis, from which it will be drawn, expressed in radians. - * @param {number} endAngle - The end arc's angle to which it will be drawn, expressed in radians. - * @param {boolean} [anticlockwise=true] - true draws the arc anticlockwise, otherwise in a clockwise direction. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - arc: function (x, y, radius, startAngle, endAngle, anticlockwise) { - - if (typeof anticlockwise === 'undefined') { anticlockwise = false; } - - this._dirty = true; - this.context.arc(x, y, radius, startAngle, endAngle, anticlockwise); - return this; - - }, - - /** - * Adds an arc with the given control points and radius, connected to the previous point by a straight line. - * @method Phaser.BitmapData#arcTo - * @param {number} x1 - * @param {number} y1 - * @param {number} x2 - * @param {number} y2 - * @param {number} radius - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - arcTo: function (x1, y1, x2, y2, radius) { - - this._dirty = true; - this.context.arcTo(x1, y1, x2, y2, radius); - return this; - - }, - - /** - * Begins a fill with the specified color. This ends the current sub-path. - * @method Phaser.BitmapData#beginFill - * @param {string} color - A CSS compatible color value (ex. "red", "#FF0000", or "rgba(255,0,0,0.5)"). Setting to null will result in no fill. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - beginFill: function (color) { - - this.fillStyle(color); - - return this; - - }, - - /** - * Begins a linear gradient fill defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For - * example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a square to display it: - * - * ```myGraphics.beginLinearGradientFill(["#000","#FFF"], [0, 1], 0, 20, 0, 120).rect(20, 20, 120, 120);``` - * - * @method Phaser.BitmapData#beginLinearGradientFill - * @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue. - * @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%. - * @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size. - * @param {number} y0 - The position of the first point defining the line that defines the gradient direction and size. - * @param {number} x1 - The position of the second point defining the line that defines the gradient direction and size. - * @param {number} y1 - The position of the second point defining the line that defines the gradient direction and size. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - beginLinearGradientFill: function (colors, ratios, x0, y0, x1, y1) { - - var gradient = this.createLinearGradient(x0, y0, x1, y1); - - for (var i = 0, len = colors.length; i < len; i++) - { - gradient.addColorStop(ratios[i], colors[i]); - } - - this.fillStyle(gradient); - - return this; - - }, - - /** - * Begins a linear gradient stroke defined by the line (x0, y0) to (x1, y1). This ends the current sub-path. For - * example, the following code defines a black to white vertical gradient ranging from 20px to 120px, and draws a - * square to display it: - * - * ```myGraphics.setStrokeStyle(10).beginLinearGradientStroke(["#000","#FFF"], [0, 1], 0, 20, 0, 120).drawRect(20, 20, 120, 120);``` - * - * @method Phaser.BitmapData#beginLinearGradientStroke - * @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue. - * @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%. - * @param {number} x0 - The position of the first point defining the line that defines the gradient direction and size. - * @param {number} y0 - The position of the first point defining the line that defines the gradient direction and size. - * @param {number} x1 - The position of the second point defining the line that defines the gradient direction and size. - * @param {number} y1 - The position of the second point defining the line that defines the gradient direction and size. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - beginLinearGradientStroke: function (colors, ratios, x0, y0, x1, y1) { - - var gradient = this.createLinearGradient(x0, y0, x1, y1); - - for (var i = 0, len = colors.length; i < len; i++) - { - gradient.addColorStop(ratios[i], colors[i]); - } - - this.strokeStyle(gradient); - - return this; - - }, - - /** - * Begins a radial gradient stroke. This ends the current sub-path. For example, the following code defines a red to - * blue radial gradient centered at (100, 100), with a radius of 50, and draws a rectangle to display it: - * - * myGraphics.setStrokeStyle(10) - * .beginRadialGradientStroke(["#F00","#00F"], [0, 1], 100, 100, 0, 100, 100, 50) - * .drawRect(50, 90, 150, 110); - * - * @method Phaser.BitmapData#beginRadialGradientStroke - * @param {Array} colors - An array of CSS compatible color values. For example, ["#F00","#00F"] would define a gradient drawing from red to blue. - * @param {Array} ratios - An array of gradient positions which correspond to the colors. For example, [0.1, 0.9] would draw the first color to 10% then interpolating to the second color at 90%. - * @param {number} x0 - Center position of the inner circle that defines the gradient. - * @param {number} y0 - Center position of the inner circle that defines the gradient. - * @param {number} r0 - Radius of the inner circle that defines the gradient. - * @param {number} x1 - Center position of the outer circle that defines the gradient. - * @param {number} y1 - Center position of the outer circle that defines the gradient. - * @param {number} r1 - Radius of the outer circle that defines the gradient. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - beginRadialGradientStroke: function (colors, ratios, x0, y0, r0, x1, y1, r1) { - - var gradient = this.createRadialGradient(x0, y0, r0, x1, y1, r1); - - for (var i = 0, len = colors.length; i < len; i++) - { - gradient.addColorStop(ratios[i], colors[i]); - } - - this.strokeStyle(gradient); - - return this; - - }, - - /** - * Starts a new path by resetting the list of sub-paths. Call this method when you want to create a new path. - * @method Phaser.BitmapData#beginPath - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - beginPath: function () { - - this.context.beginPath(); - return this; - - }, - - /** - * Begins a stroke with the specified color. This ends the current sub-path. - * @method Phaser.BitmapData#beginStroke - * @param {String} color A CSS compatible color value (ex. "#FF0000", "red", or "rgba(255,0,0,0.5)"). Setting to null will result in no stroke. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - beginStroke: function (color) { - - this.strokeStyle(color); - return this; - - }, - - /** - * Adds a bezier curve from the current context point to (x, y) using the control points (cp1x, cp1y) and (cp2x, cp2y). - * @method Phaser.BitmapData#bezierCurveTo - * @param {number} cp1x - The x axis of control point 1. - * @param {number} cp1y - The y axis of control point 1. - * @param {number} cp2x - The x axis of control point 2. - * @param {number} cp2y - The y axis of control point 2. - * @param {number} x - The x axis of the ending point. - * @param {number} y - The y axis of the ending point. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - bezierCurveTo: function (cp1x, cp1y, cp2x, cp2y, x, y) { - - this._dirty = true; - this.context.bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y); - return this; - - }, - - /** - * Draws a circle with the specified radius at (x, y). - * @method Phaser.BitmapData#circle - * @param {number} x - x coordinate center point of circle. - * @param {number} y - y coordinate center point of circle. - * @param {number} radius - Radius of circle in radians. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - circle: function (x, y, radius) { - - this.arc(x, y, radius, 0, Math.PI*2); - return this; - - }, - - /** - * Sets all pixels in the rectangle defined by starting point (x, y) and size (width, height) to transparent black. - * @method Phaser.BitmapData#clearRect - * @param {number} x - The x axis of the coordinate for the rectangle starting point. - * @param {number} y - The y axis of the coordinate for the rectangle starting point. - * @param {number} width - The rectangles width. - * @param {number} height - The rectangles height. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - clearRect: function (x, y, width, height) { - - this._dirty = true; - this.context.clearRect(x, y, width, height); - return this; - - }, - - /** - * Creates a clipping path from the current sub-paths. Everything drawn after clip() is called appears inside the clipping path only. - * @method Phaser.BitmapData#clip - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - clip: function () { - - this._dirty = true; - this.context.clip(); - return this; - - }, - - /** - * Tries to draw a straight line from the current point to the start. If the shape has already been closed or has only one point, this function does nothing. - * @method Phaser.BitmapData#closePath - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - closePath: function () { - - this._dirty = true; - this.context.closePath(); - return this; - - }, - - /** - * Creates a linear gradient with defined by an imaginary line which implies the direction of the gradient. - * Once the gradient is created colors can be inserted using the addColorStop method. - * @method Phaser.BitmapData#createLinearGradient - * @param {number} x - The x axis of the coordinate for the gradients starting point. - * @param {number} y - The y axis of the coordinate for the gradients starting point. - * @param {number} width - The width of the gradient. - * @param {number} height - The height of the gradient. - * @return {CanvasGradient} The Linear Gradient. - */ - createLinearGradient: function (x, y, width, height) { - - return this.context.createLinearGradient(x, y, width, height); - - }, - - // createPattern - - /** - * Creates a radial gradient. - * @method Phaser.BitmapData#createRadialGradient - * @param {number} x0 - * @param {number} y0 - * @param {number} r0 - * @param {number} x1 - * @param {number} y1 - * @param {number} r1 - * @return {CanvasGradient} The Radial Gradient. - */ - createRadialGradient: function (x0, y0, r0, x1, y1, r1) { - - return this.context.createRadialGradient(x0, y0, r0, x1, y1, r1); - - }, - - // drawImage - // drawSystemFocusRing (?) - - /** - * Draws an ellipse (oval) with a specified width (w) and height (h). - * @method Phaser.BitmapData#ellipse - * @param {number} x - x coordinate center point of ellipse. - * @param {number} y - y coordinate center point of ellipse. - * @param {number} w - height (horizontal diameter) of ellipse. The horizontal radius will be half of this number. - * @param {number} h - width (vertical diameter) of ellipse. The vertical radius will be half of this number. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - ellipse: function (x, y, w, h) { - - var k = 0.5522848; - var ox = (w / 2) * k; - var oy = (h / 2) * k; - var xe = x + w; - var ye = y + h; - var xm = x + w / 2; - var ym = y + h / 2; - - this.moveTo(x, ym); - this.bezierCurveTo(x, ym - oy, xm - ox, y, xm, y); - this.bezierCurveTo(xm + ox, y, xe, ym - oy, xe, ym); - this.bezierCurveTo(xe, ym + oy, xm + ox, ye, xm, ye); - this.bezierCurveTo(xm - ox, ye, x, ym + oy, x, ym); - - return this; - - }, - - /** - * Fills the subpaths with the current fill style. - * @method Phaser.BitmapData#fill - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - fill: function () { - - this._dirty = true; - this.context.fill(); - return this; - - }, - - /** - * Draws a filled rectangle at (x, y) position whose size is determined by width and height. - * @method Phaser.BitmapData#fillRect - * @param {number} x - The x axis of the coordinate for the rectangle starting point. - * @param {number} y - The y axis of the coordinate for the rectangle starting point. - * @param {number} width - The rectangles width. - * @param {number} height - The rectangles height. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - fillRect: function (x, y, width, height) { - - this._dirty = true; - this.context.fillRect(x, y, width, height); - return this; - - }, - - /** - * Sets the fill style. - * @method Phaser.BitmapData#fillStyle - * @param {string} color - The fill color value in CSS format: #RRGGBB or rgba(r,g,b,a) - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - fillStyle: function (color) { - - this.context.fillStyle = color; - return this; - - }, - - // fillText - - /** - * Sets the font. - * @method Phaser.BitmapData#font - * @param {DOMString} font - The font to be used for any text rendering. Default value 10px sans-serif. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - font: function (font) { - - this.context.font = font; - return this; - - }, - - /** - * Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque). - * @method Phaser.BitmapData#globalAlpha - * @param {number} alpha - Alpha value that is applied to shapes and images before they are composited onto the canvas. Default 1.0 (opaque). - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - globalAlpha: function (alpha) { - - this.context.globalAlpha = alpha; - return this; - - }, - - /** - * With globalAlpha applied this sets how shapes and images are drawn onto the existing bitmap. Possible values: source-atop, source-in, source-out, - * source-over (default), destination-atop, destination-in, destination-out, destination-over, lighter, darker, copy and xor. - * @method Phaser.BitmapData#globalCompositeOperation - * @param {DOMString} operation - The composite operation to apply. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - globalCompositeOperation: function (operation) { - - this.context.globalCompositeOperation = operation; - return this; - - }, - - /** - * Type of endings on the end of lines. Possible values: butt (default), round, square. - * @method Phaser.BitmapData#lineCap - * @param {DOMString} style - Possible values: butt (default), round, square - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - lineCap: function (style) { - - this.context.lineCap = style; - return this; - - }, - - /** - * Specifies where to start a dasharray on a line. - * @method Phaser.BitmapData#lineDashOffset - * @param {number} offset - Specifies where to start a dasharray on a line. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - lineDashOffset: function (offset) { - - this.context.lineDashOffset = offset; - return this; - - }, - - /** - * Defines the type of corners where two lines meet. Possible values: round, bevel, miter (default) - * @method Phaser.BitmapData#lineJoin - * @param {DOMString} join - Possible values: round, bevel, miter (default) - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - lineJoin: function (join) { - - this.context.lineJoin = join; - return this; - - }, - - /** - * Width of lines. Default 1.0 - * @method Phaser.BitmapData#lineWidth - * @param {number} width - Width of lines. Default 1.0 - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - lineWidth: function (width) { - - this.context.lineWidth = width; - return this; - - }, - - /** - * Default 10. - * @method Phaser.BitmapData#miterLimit - * @param {number} limit - Default 10. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - miterLimit: function (limit) { - - this.context.miterLimit = limit; - return this; - - }, - - // getImageData - // getLineDash - // isPointInPath - // isPointInStroke - - /** - * Connects the last point in the subpath to the x, y coordinates with a straight line. - * @method Phaser.BitmapData#lineTo - * @param {number} x - The x axis of the coordinate for the end of the line. - * @param {number} y - The y axis of the coordinate for the end of the line. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - lineTo: function (x, y) { - - this._dirty = true; - this.context.lineTo(x, y); - return this; - - }, - - // measureText - - /** - * Moves the starting point of a new subpath to the (x, y) coordinates. - * @method Phaser.BitmapData#moveTo - * @param {number} x - The x axis of the point. - * @param {number} y - The y axis of the point. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - moveTo: function (x, y) { - - this.context.moveTo(x, y); - return this; - - }, - - // putImageData - - /** - * Draws a quadratic curve from the current drawing point to (x, y) using the control point (cpx, cpy). - * @method Phaser.BitmapData#quadraticCurveTo - * @param {Number} cpx - The x axis of the control point. - * @param {Number} cpy - The y axis of the control point. - * @param {Number} x - The x axis of the ending point. - * @param {Number} y - The y axis of the ending point. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - quadraticCurveTo: function(cpx, cpy, x, y) { - - this._dirty = true; - this.context.quadraticCurveTo(cpx, cpy, x, y); - return this; - - }, - - /** - * Draws a rectangle at (x, y) position whose size is determined by width and height. - * @method Phaser.BitmapData#rect - * @param {number} x - The x axis of the coordinate for the rectangle starting point. - * @param {number} y - The y axis of the coordinate for the rectangle starting point. - * @param {number} width - The rectangles width. - * @param {number} height - The rectangles height. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - rect: function (x, y, width, height) { - - this._dirty = true; - this.context.rect(x, y, width, height); - return this; - - }, - - /** - * Restores the drawing style state to the last element on the 'state stack' saved by save(). - * @method Phaser.BitmapData#restore - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - restore: function () { - - this._dirty = true; - this.context.restore(); - return this; - - }, - - /** - * Rotates the drawing context values by r radians. - * @method Phaser.BitmapData#rotate - * @param {number} angle - The angle of rotation given in radians. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - rotate: function (angle) { - - this._dirty = true; - this.context.rotate(angle); - return this; - - }, - - /** - * Sets the stroke style for the current sub-path. Like all drawing methods, this can be chained, so you can define - * the stroke style and color in a single line of code like so: - * - * ```myGraphics.setStrokeStyle(8,"round").beginStroke("#F00");``` - * - * @method Phaser.BitmapData#setStrokeStyle - * @param {number} thickness - The width of the stroke. - * @param {string|number} [caps=0] - Indicates the type of caps to use at the end of lines. One of butt, round, or square. Defaults to "butt". Also accepts the values 0 (butt), 1 (round), and 2 (square) for use with he tiny API. - * @param {string|number} [joints=0] Specifies the type of joints that should be used where two lines meet. One of bevel, round, or miter. Defaults to "miter". Also accepts the values 0 (miter), 1 (round), and 2 (bevel) for use with the tiny API. - * @param {number} [miterLimit=10] - If joints is set to "miter", then you can specify a miter limit ratio which controls at what point a mitered joint will be clipped. - * @param {boolean} [ignoreScale=false] - If true, the stroke will be drawn at the specified thickness regardless of active transformations. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - setStrokeStyle: function (thickness, caps, joints, miterLimit, ignoreScale) { - - if (typeof thickness === 'undefined') { thickness = 1; } - if (typeof caps === 'undefined') { caps = 'butt'; } - if (typeof joints === 'undefined') { joints = 'miter'; } - if (typeof miterLimit === 'undefined') { miterLimit = 10; } - - // TODO - ignoreScale = false; - - this.lineWidth(thickness); - this.lineCap(caps); - this.lineJoin(joints); - this.miterLimit(miterLimit); - - return this; - - }, - - /** - * Saves the current drawing style state using a stack so you can revert any change you make to it using restore(). - * @method Phaser.BitmapData#save - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - save: function () { - - this._dirty = true; - this.context.save(); - return this; - - }, - - /** - * Scales the current drawing context. - * @method Phaser.BitmapData#scale - * @param {number} x - * @param {number} y - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - scale: function (x, y) { - - this._dirty = true; - this.context.scale(x, y); - return this; - - }, - - /** - * - * @method Phaser.BitmapData#scrollPathIntoView - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - scrollPathIntoView: function () { - - this._dirty = true; - this.context.scrollPathIntoView(); - return this; - - }, - - // setLineDash - // setTransform - - /** - * Strokes the subpaths with the current stroke style. - * @method Phaser.BitmapData#stroke - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - stroke: function () { - - this._dirty = true; - this.context.stroke(); - return this; - - }, - - /** - * Paints a rectangle which has a starting point at (x, y) and has a w width and an h height onto the canvas, using the current stroke style. - * @method Phaser.BitmapData#strokeRect - * @param {number} x - The x axis for the starting point of the rectangle. - * @param {number} y - The y axis for the starting point of the rectangle. - * @param {number} width - The rectangles width. - * @param {number} height - The rectangles height. - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - strokeRect: function (x, y, width, height) { - - this._dirty = true; - this.context.strokeRect(x, y, width, height); - return this; - - }, - - /** - * Color or style to use for the lines around shapes. Default #000 (black). - * @method Phaser.BitmapData#strokeStyle - * @param {string} style - Color or style to use for the lines around shapes. Default #000 (black). - * @return {Phaser.BitmapData} The BitmapData instance this method was called on. - */ - strokeStyle: function (style) { - - this.context.strokeStyle = style; - return this; - - }, - - // strokeText - // transform - // translate - /** * 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. @@ -961,161 +269,3 @@ Phaser.BitmapData.prototype = { }; Phaser.BitmapData.prototype.constructor = Phaser.BitmapData; - -// EaselJS Tiny API emulation - -/** -* Shortcut to moveTo. -* @method Phaser.BitmapData.prototype.mt -*/ -Phaser.BitmapData.prototype.mt = Phaser.BitmapData.prototype.moveTo; - -/** -* Shortcut to lineTo. -* @method Phaser.BitmapData.prototype.mt -*/ -Phaser.BitmapData.prototype.lt = Phaser.BitmapData.prototype.lineTo; - -/** -* Shortcut to arcTo. -* @method Phaser.BitmapData.prototype.at -*/ -Phaser.BitmapData.prototype.at = Phaser.BitmapData.prototype.arcTo; - -/** -* Shortcut to bezierCurveTo. -* @method Phaser.BitmapData.prototype.bt -*/ -Phaser.BitmapData.prototype.bt = Phaser.BitmapData.prototype.bezierCurveTo; - -/** -* Shortcut to quadraticCurveTo. -* @method Phaser.BitmapData.prototype.qt -*/ -Phaser.BitmapData.prototype.qt = Phaser.BitmapData.prototype.quadraticCurveTo; - -/** -* Shortcut to arc. -* @method Phaser.BitmapData.prototype.a -*/ -Phaser.BitmapData.prototype.a = Phaser.BitmapData.prototype.arc; - -/** -* Shortcut to rect. -* @method Phaser.BitmapData.prototype.r -*/ -Phaser.BitmapData.prototype.r = Phaser.BitmapData.prototype.rect; - -/** -* Shortcut to closePath. -* @method Phaser.BitmapData.prototype.cp -*/ -Phaser.BitmapData.prototype.cp = Phaser.BitmapData.prototype.closePath; - -/** -* Shortcut to clear. -* @method Phaser.BitmapData.prototype.c -*/ -Phaser.BitmapData.prototype.c = Phaser.BitmapData.prototype.clear; - -/** -* Shortcut to beginFill. -* @method Phaser.BitmapData.prototype.f -*/ -Phaser.BitmapData.prototype.f = Phaser.BitmapData.prototype.beginFill; - -/** -* Shortcut to beginLinearGradientFill. -* @method Phaser.BitmapData.prototype.lf -*/ -Phaser.BitmapData.prototype.lf = Phaser.BitmapData.prototype.beginLinearGradientFill; - -/** -* Shortcut to beginRadialGradientFill. -* @method Phaser.BitmapData.prototype.rf -*/ -// Phaser.BitmapData.prototype.rf = Phaser.BitmapData.prototype.beginRadialGradientFill; - -/** -* Shortcut to beginBitmapFill. -* @method Phaser.BitmapData.prototype.bf -*/ -//Phaser.BitmapData.prototype.bf = Phaser.BitmapData.prototype.beginBitmapFill; - -/** -* Shortcut to endFill. -* @method Phaser.BitmapData.prototype.ef -*/ -// Phaser.BitmapData.prototype.ef = Phaser.BitmapData.prototype.endFill; - -/** -* Shortcut to setStrokeStyle. -* @method Phaser.BitmapData.prototype.ss -*/ -Phaser.BitmapData.prototype.ss = Phaser.BitmapData.prototype.setStrokeStyle; - -/** -* Shortcut to beginStroke. -* @method Phaser.BitmapData.prototype.s -*/ -Phaser.BitmapData.prototype.s = Phaser.BitmapData.prototype.beginStroke; - -/** -* Shortcut to beginLinearGradientStroke. -* @method Phaser.BitmapData.prototype.ls -*/ -Phaser.BitmapData.prototype.ls = Phaser.BitmapData.prototype.beginLinearGradientStroke; - -/** -* Shortcut to beginRadialGradientStroke. -* @method Phaser.BitmapData.prototype.rs -*/ -Phaser.BitmapData.prototype.rs = Phaser.BitmapData.prototype.beginRadialGradientStroke; - -/** -* Shortcut to beginBitmapStroke. -* @method Phaser.BitmapData.prototype.bs -*/ -// Phaser.BitmapData.prototype.bs = Phaser.BitmapData.prototype.beginBitmapStroke; - -/** -* Shortcut to endStroke. -* @method Phaser.BitmapData.prototype.es -*/ -// Phaser.BitmapData.prototype.es = Phaser.BitmapData.prototype.endStroke; - -/** -* Shortcut to rect. -* @method Phaser.BitmapData.prototype.dr -*/ -Phaser.BitmapData.prototype.dr = Phaser.BitmapData.prototype.rect; - -/** -* Shortcut to drawRoundRect. -* @method Phaser.BitmapData.prototype.rr -*/ -// Phaser.BitmapData.prototype.rr = Phaser.BitmapData.prototype.drawRoundRect; - -/** -* Shortcut to drawRoundRectComplex. -* @method Phaser.BitmapData.prototype.rc -*/ -// Phaser.BitmapData.prototype.rc = Phaser.BitmapData.prototype.drawRoundRectComplex; - -/** -* Shortcut to drawCircle. -* @method Phaser.BitmapData.prototype.dc -*/ -Phaser.BitmapData.prototype.dc = Phaser.BitmapData.prototype.circle; - -/** -* Shortcut to drawEllipse. -* @method Phaser.BitmapData.prototype.de -*/ -Phaser.BitmapData.prototype.de = Phaser.BitmapData.prototype.ellipse; - -/** -* Shortcut to drawPolyStar. -* @method Phaser.BitmapData.prototype.dp -*/ -// Phaser.BitmapData.prototype.dp = Phaser.BitmapData.prototype.drawPolyStar; diff --git a/src/gameobjects/DOMSprite.js b/src/gameobjects/DOMSprite.js deleted file mode 100644 index 1ec45e2f..00000000 --- a/src/gameobjects/DOMSprite.js +++ /dev/null @@ -1,88 +0,0 @@ -/** -* @author Richard Davey -* @copyright 2014 Photon Storm Ltd. -* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License} -*/ - -/** -* Create a new DOMSprite. -* @class Phaser.DOMSprite -* @constructor -* @param {Phaser.Game} game - Current game instance. -* @param {string} id - DOM ID. -* @param {number} x - X position of the new text object. -* @param {number} y - Y position of the new text object. -* @param {string} text - The actual text that will be written. -* @param {object} style - The style object containing style attributes like font, font size , -*/ -Phaser.DOMSprite = function (game, element, x, y, style) { - - x = x || 0; - y = y || 0; - style = style || ''; - - /** - * @property {Phaser.Game} game - A reference to the currently running Game. - */ - this.game = game; - - /** - * @property {boolean} exists - If exists = false then the Text isn't updated by the core game loop. - * @default - */ - this.exists = true; - - /** - * @property {boolean} alive - This is a handy little var your game can use to determine if an object is alive or not, it doesn't effect rendering. - * @default - */ - this.alive = true; - - /** - * @property {Phaser.Group} group - The parent Group of this Text object. - */ - this.group = null; - - /** - * @property {string} name - The user defined name given to this object. - * @default - */ - this.name = ''; - - /** - * @property {number} type - The const type of this object. - * @default - */ - this.type = Phaser.DOMSPRITE; - - /** - * @property {boolean} visible - Sets the visible state of this DOMSprite. - * @default - */ - this.visible = true; - - /* - if (parent) - { - if (typeof parent === 'string') - { - // hopefully an element ID - target = document.getElementById(parent); - } - else if (typeof parent === 'object' && parent.nodeType === 1) - { - // quick test for a HTMLelement - target = parent; - } - - if (overflowHidden) - { - target.style.overflow = 'hidden'; - } - } - */ - -}; - -// Phaser.DOMSprite.prototype = Object.create(PIXI.DOMSprite.prototype); -// Phaser.DOMSprite.prototype.constructor = Phaser.DOMSprite;