From 03b7467018b3873b6b7a47141d52b92a4848c0d2 Mon Sep 17 00:00:00 2001 From: Richard Davey Date: Tue, 28 May 2013 09:37:32 +0100 Subject: [PATCH] Tidying up before putting back together again --- Phaser/RenderManager.ts | 25 ++++ Phaser/cameras/Camera.ts | 153 +++-------------------- Phaser/components/sprite/Physics.ts | 147 ++++++++++++++++++++++ Phaser/components/sprite/Texture.ts | 15 +++ Phaser/{geom => math}/Vec2Utils.ts | 0 SpecialFX/Camera/Border.js | 19 +++ SpecialFX/Camera/Border.ts | 61 ++++++++++ SpecialFX/Camera/Shadow.js | 19 +++ SpecialFX/Camera/Shadow.ts | 89 ++++++++++++++ SpecialFX/SpecialFX.csproj | 10 +- build/phaser-fx.js | 126 +++++++++++++++++++ build/phaser.js | 181 ++++++++++++---------------- 12 files changed, 608 insertions(+), 237 deletions(-) create mode 100644 Phaser/RenderManager.ts create mode 100644 Phaser/components/sprite/Physics.ts create mode 100644 Phaser/components/sprite/Texture.ts rename Phaser/{geom => math}/Vec2Utils.ts (100%) create mode 100644 SpecialFX/Camera/Border.js create mode 100644 SpecialFX/Camera/Border.ts create mode 100644 SpecialFX/Camera/Shadow.js create mode 100644 SpecialFX/Camera/Shadow.ts diff --git a/Phaser/RenderManager.ts b/Phaser/RenderManager.ts new file mode 100644 index 00000000..319ec95a --- /dev/null +++ b/Phaser/RenderManager.ts @@ -0,0 +1,25 @@ +// Interface +interface IPoint { + getDist(): number; +} + +// Module +module Shapes { + + // Class + export class Point implements IPoint { + // Constructor + constructor (public x: number, public y: number) { } + + // Instance member + getDist() { return Math.sqrt(this.x * this.x + this.y * this.y); } + + // Static member + static origin = new Point(0, 0); + } + +} + +// Local variables +var p: IPoint = new Shapes.Point(3, 4); +var dist = p.getDist(); \ No newline at end of file diff --git a/Phaser/cameras/Camera.ts b/Phaser/cameras/Camera.ts index b037f163..46853963 100644 --- a/Phaser/cameras/Camera.ts +++ b/Phaser/cameras/Camera.ts @@ -1,3 +1,6 @@ +/// +/// +/// /// /// @@ -89,23 +92,17 @@ module Phaser { */ public worldView: Rectangle; - /** - * How many sprites will be rendered by this camera. - * @type {number} - */ - public totalSpritesRendered: number; - /** * Scale factor of the camera. - * @type {MicroPoint} + * @type {Vec2} */ - public scale: MicroPoint = new MicroPoint(1, 1); + public scale: Vec2 = new Vec2(1, 1); /** * Scrolling factor. * @type {MicroPoint} */ - public scroll: MicroPoint = new MicroPoint(0, 0); + public scroll: Vec2 = new Vec2(0, 0); /** * Camera bounds. @@ -119,79 +116,27 @@ module Phaser { */ public deadzone: Rectangle = null; - // Camera Border + /** + * Disable the automatic camera canvas clipping when Camera is non-Stage sized. + * @type {Boolean} + */ public disableClipping: bool = false; - /** - * Whether render border of this camera or not. (default is false) - * @type {boolean} - */ - public showBorder: bool = false; - - /** - * Color of border of this camera. (in css color string) - * @type {string} - */ - public borderColor: string = 'rgb(255,255,255)'; - /** * Whether the camera background is opaque or not. If set to true the Camera is filled with - * the value of Camera.backgroundColor every frame. + * the value of Camera.backgroundColor every frame. Normally you wouldn't enable this if the + * Camera is the full Stage size, as the Stage.backgroundColor has the same effect. But for + * multiple or mini cameras it can be very useful. * @type {boolean} */ public opaque: bool = false; /** - * Clears the camera every frame using a canvas clearRect call (default to true). - * Note that this erases anything below the camera as well, so do not use it in conjuction with a camera - * that uses alpha or that needs to be able to manage opacity. Equally if Camera.opaque is set to true - * then set Camera.clear to false to save rendering time. - * By default the Stage will clear itself every frame, so be sure not to double-up clear calls. - * @type {boolean} - */ - public clear: bool = false; - - /** - * Background color in css color string. + * The Background Color of the camera in css color string format, i.e. 'rgb(0,0,0)' or '#ff0000'. + * Not used if the Camera.opaque property is false. * @type {string} */ - private _bgColor: string = 'rgb(0,0,0)'; - - /** - * Background texture to be rendered if background is visible. - */ - private _bgTexture; - - /** - * Background texture repeat style. (default is 'repeat') - * @type {string} - */ - private _bgTextureRepeat: string = 'repeat'; - - // Camera Shadow - /** - * Render camera shadow or not. (default is false) - * @type {boolean} - */ - public showShadow: bool = false; - - /** - * Color of shadow, in css color string. - * @type {string} - */ - public shadowColor: string = 'rgb(0,0,0)'; - - /** - * Blur factor of shadow. - * @type {number} - */ - public shadowBlur: number = 10; - - /** - * Offset of the shadow from camera's position. - * @type {MicroPoint} - */ - public shadowOffset: MicroPoint = new MicroPoint(4, 4); + public backgroundColor: string = 'rgb(0,0,0)'; /** * Whether this camera visible or not. (default is true) @@ -418,15 +363,6 @@ module Phaser { this._sx = this._stageX; this._sy = this._stageY; - // Shadow - if (this.showShadow == true) - { - this._game.stage.context.shadowColor = this.shadowColor; - this._game.stage.context.shadowBlur = this.shadowBlur; - this._game.stage.context.shadowOffsetX = this.shadowOffset.x; - this._game.stage.context.shadowOffsetY = this.shadowOffset.y; - } - // Scale on if (this.scale.x !== 1 || this.scale.y !== 1) { @@ -445,32 +381,11 @@ module Phaser { this._game.stage.context.translate(-(this._sx + this.worldView.halfWidth), -(this._sy + this.worldView.halfHeight)); } - if (this.clear == true) - { - this._game.stage.context.clearRect(this._sx, this._sy, this.worldView.width, this.worldView.height); - } - // Background - if (this.opaque == true) + if (this.opaque) { - if (this._bgTexture) - { - this._game.stage.context.fillStyle = this._bgTexture; - this._game.stage.context.fillRect(this._sx, this._sy, this.worldView.width, this.worldView.height); - } - else - { - this._game.stage.context.fillStyle = this._bgColor; - this._game.stage.context.fillRect(this._sx, this._sy, this.worldView.width, this.worldView.height); - } - } - - // Shadow off - if (this.showShadow == true) - { - this._game.stage.context.shadowBlur = 0; - this._game.stage.context.shadowOffsetX = 0; - this._game.stage.context.shadowOffsetY = 0; + this._game.stage.context.fillStyle = this.backgroundColor; + this._game.stage.context.fillRect(this._sx, this._sy, this.worldView.width, this.worldView.height); } this.fx.render(this, this._stageX, this._stageY, this.worldView.width, this.worldView.height); @@ -487,14 +402,6 @@ module Phaser { // Render all the Sprites this._game.world.group.render(this, this._sx, this._sy); - if (this.showBorder == true) - { - this._game.stage.context.strokeStyle = this.borderColor; - this._game.stage.context.lineWidth = 1; - this._game.stage.context.rect(this._sx, this._sy, this.worldView.width, this.worldView.height); - this._game.stage.context.stroke(); - } - // Scale off if (this.scale.x !== 1 || this.scale.y !== 1) { @@ -520,28 +427,6 @@ module Phaser { } - public set backgroundColor(color: string) { - - this._bgColor = color; - - } - - public get backgroundColor(): string { - return this._bgColor; - } - - /** - * Set camera background texture. - * @param key {string} Asset key of the texture. - * @param [repeat] {string} what kind of repeat will this texture used for background. - */ - public setTexture(key: string, repeat?: string = 'repeat') { - - this._bgTexture = this._game.stage.context.createPattern(this._game.cache.getImage(key), repeat); - this._bgTextureRepeat = repeat; - - } - /** * Set position of this camera. * @param x {number} X position. diff --git a/Phaser/components/sprite/Physics.ts b/Phaser/components/sprite/Physics.ts new file mode 100644 index 00000000..37a5fa42 --- /dev/null +++ b/Phaser/components/sprite/Physics.ts @@ -0,0 +1,147 @@ +/** +* Phaser - Components - Physics +* +* +*/ + +module Phaser.Components { + + export class Physics { + + /** + * Whether this object will be moved by impacts with other objects or not. + * @type {boolean} + */ + public immovable: bool; + + /** + * Basic speed of this object. + * + * Velocity is given in pixels per second. Therefore a velocity of + * 100 will move at a rate of 100 pixels every 1000 ms (1sec). It's not balls-on + * accurate due to the way timers work, but it's pretty close. Expect tolerance + * of +- 10 px. Also that speed assumes no drag. + * + * @type {MicroPoint} + */ + public velocity: MicroPoint; + + /** + * The virtual mass of the object. + * @type {number} + */ + public mass: number; + + /** + * The bounciness of the object. + * @type {number} + */ + public elasticity: number; + + /** + * How fast the speed of this object is changing. + * @type {number} + */ + public acceleration: MicroPoint; + + /** + * This isn't drag exactly, more like deceleration that is only applied + * when acceleration is not affecting the sprite. + * @type {MicroPoint} + */ + public drag: MicroPoint; + + /** + * It will cap the speed automatically if you use the acceleration + * to change its velocity. + * @type {MicroPoint} + */ + public maxVelocity: MicroPoint; + + /** + * How fast this object is rotating. + * @type {number} + */ + public angularVelocity: number; + + /** + * How fast angularVelocity of this object is changing. + * @type {number} + */ + public angularAcceleration: number; + + /** + * Deacceleration of angularVelocity will be applied when it's rotating. + * @type {number} + */ + public angularDrag: number; + + /** + * It will cap the rotate speed automatically if you use the angularAcceleration + * to change its angularVelocity. + * @type {number} + */ + public maxAngular: number; + + /** + * Set this to false if you want to skip the automatic motion/movement stuff + * (see updateMotion()). + * @type {boolean} + */ + public moves: bool = true; + + /** + * Bit field of flags (use with UP, DOWN, LEFT, RIGHT, etc) indicating surface contacts. + * @type {number} + */ + public touching: number; + + /** + * Bit field of flags (use with UP, DOWN, LEFT, RIGHT, etc) indicating surface contacts from the previous game loop step. + * @type {number} + */ + public wasTouching: number; + + /** + * Bit field of flags (use with UP, DOWN, LEFT, RIGHT, etc) indicating collision directions. + * @type {number} + */ + public allowCollisions: number; + + /** + * Important variable for collision processing. + * @type {MicroPoint} + */ + public last: MicroPoint; + + /** + * Internal function for updating the position and speed of this object. + */ + public update() { + + var delta: number; + var velocityDelta: number; + + velocityDelta = (this._game.motion.computeVelocity(this.angularVelocity, this.angularAcceleration, this.angularDrag, this.maxAngular) - this.angularVelocity) / 2; + this.angularVelocity += velocityDelta; + this._angle += this.angularVelocity * this._game.time.elapsed; + this.angularVelocity += velocityDelta; + + velocityDelta = (this._game.motion.computeVelocity(this.velocity.x, this.acceleration.x, this.drag.x, this.maxVelocity.x) - this.velocity.x) / 2; + this.velocity.x += velocityDelta; + delta = this.velocity.x * this._game.time.elapsed; + this.velocity.x += velocityDelta; + this.frameBounds.x += delta; + + velocityDelta = (this._game.motion.computeVelocity(this.velocity.y, this.acceleration.y, this.drag.y, this.maxVelocity.y) - this.velocity.y) / 2; + this.velocity.y += velocityDelta; + delta = this.velocity.y * this._game.time.elapsed; + this.velocity.y += velocityDelta; + this.frameBounds.y += delta; + + } + + + } + +} \ No newline at end of file diff --git a/Phaser/components/sprite/Texture.ts b/Phaser/components/sprite/Texture.ts new file mode 100644 index 00000000..55563df5 --- /dev/null +++ b/Phaser/components/sprite/Texture.ts @@ -0,0 +1,15 @@ +/** +* Phaser - Components - Texture +* +* The Sprite GameObject is an extension of the core GameObject that includes support for animation and dynamic textures. +*/ + +module Phaser.Components { + + export class Texture { + + + + } + +} \ No newline at end of file diff --git a/Phaser/geom/Vec2Utils.ts b/Phaser/math/Vec2Utils.ts similarity index 100% rename from Phaser/geom/Vec2Utils.ts rename to Phaser/math/Vec2Utils.ts diff --git a/SpecialFX/Camera/Border.js b/SpecialFX/Camera/Border.js new file mode 100644 index 00000000..2f9b5688 --- /dev/null +++ b/SpecialFX/Camera/Border.js @@ -0,0 +1,19 @@ +var Shapes; +(function (Shapes) { + + var Point = Shapes.Point = (function () { + function Point(x, y) { + this.x = x; + this.y = y; + } + Point.prototype.getDist = function () { + return Math.sqrt((this.x * this.x) + (this.y * this.y)); + }; + Point.origin = new Point(0, 0); + return Point; + })(); + +})(Shapes || (Shapes = {})); + +var p = new Shapes.Point(3, 4); +var dist = p.getDist(); diff --git a/SpecialFX/Camera/Border.ts b/SpecialFX/Camera/Border.ts new file mode 100644 index 00000000..db2a0413 --- /dev/null +++ b/SpecialFX/Camera/Border.ts @@ -0,0 +1,61 @@ +/// +/// +/// + +/** +* Phaser - FX - Camera - Border +* +* Creates a border around a camera. +*/ + +module Phaser.FX.Camera { + + export class Border { + + constructor(game: Game, parent: Camera) { + + this._game = game; + this._parent = parent; + + } + + private _game: Game; + private _parent: Camera; + + /** + * Whether render border of this camera or not. (default is false) + * @type {boolean} + */ + public showBorder: bool = false; + + /** + * Color of border of this camera. (in css color string) + * @type {string} + */ + public borderColor: string = 'rgb(255,255,255)'; + + /** + * You can name the function that starts the effect whatever you like, but we used 'start' in our effects. + */ + public start() { + } + + /** + * Post-render is called during the objects render cycle, after the children/image data has been rendered. + * It happens directly BEFORE a canvas context.restore has happened if added to a Camera. + */ + public postRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number) { + + if (this.showBorder == true) + { + this._game.stage.context.strokeStyle = this.borderColor; + this._game.stage.context.lineWidth = 1; + this._game.stage.context.rect(this._sx, this._sy, this.worldView.width, this.worldView.height); + this._game.stage.context.stroke(); + } + + } + + } + +} diff --git a/SpecialFX/Camera/Shadow.js b/SpecialFX/Camera/Shadow.js new file mode 100644 index 00000000..2f9b5688 --- /dev/null +++ b/SpecialFX/Camera/Shadow.js @@ -0,0 +1,19 @@ +var Shapes; +(function (Shapes) { + + var Point = Shapes.Point = (function () { + function Point(x, y) { + this.x = x; + this.y = y; + } + Point.prototype.getDist = function () { + return Math.sqrt((this.x * this.x) + (this.y * this.y)); + }; + Point.origin = new Point(0, 0); + return Point; + })(); + +})(Shapes || (Shapes = {})); + +var p = new Shapes.Point(3, 4); +var dist = p.getDist(); diff --git a/SpecialFX/Camera/Shadow.ts b/SpecialFX/Camera/Shadow.ts new file mode 100644 index 00000000..89120bfa --- /dev/null +++ b/SpecialFX/Camera/Shadow.ts @@ -0,0 +1,89 @@ +/// +/// +/// + +/** +* Phaser - FX - Camera - Shadow +* +* Creates a drop-shadow effect on the camera window. +*/ + +module Phaser.FX.Camera { + + export class Shadow { + + constructor(game: Game, parent: Camera) { + + this._game = game; + this._parent = parent; + + } + + private _game: Game; + private _parent: Camera; + + /** + * Render camera shadow or not. (default is false) + * @type {boolean} + */ + public showShadow: bool = false; + + /** + * Color of shadow, in css color string. + * @type {string} + */ + public shadowColor: string = 'rgb(0,0,0)'; + + /** + * Blur factor of shadow. + * @type {number} + */ + public shadowBlur: number = 10; + + /** + * Offset of the shadow from camera's position. + * @type {MicroPoint} + */ + public shadowOffset: MicroPoint = new MicroPoint(4, 4); + + /** + * You can name the function that starts the effect whatever you like, but we used 'start' in our effects. + */ + public start() { + } + + /** + * Pre-render is called at the start of the object render cycle, before any transforms have taken place. + * It happens directly AFTER a canvas context.save has happened if added to a Camera. + */ + public preRender(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number) { + + // Shadow + if (this.showShadow == true) + { + this._game.stage.context.shadowColor = this.shadowColor; + this._game.stage.context.shadowBlur = this.shadowBlur; + this._game.stage.context.shadowOffsetX = this.shadowOffset.x; + this._game.stage.context.shadowOffsetY = this.shadowOffset.y; + } + + } + + /** + * render is called during the objects render cycle, right after all transforms have finished, but before any children/image data is rendered. + */ + public render(camera: Camera, cameraX: number, cameraY: number, cameraWidth: number, cameraHeight: number) { + + // Shadow off + if (this.showShadow == true) + { + this._game.stage.context.shadowBlur = 0; + this._game.stage.context.shadowOffsetX = 0; + this._game.stage.context.shadowOffsetY = 0; + } + + } + + } + +} diff --git a/SpecialFX/SpecialFX.csproj b/SpecialFX/SpecialFX.csproj index 8cc354e3..a4bcdf41 100644 --- a/SpecialFX/SpecialFX.csproj +++ b/SpecialFX/SpecialFX.csproj @@ -1,4 +1,4 @@ - + Debug @@ -62,6 +62,10 @@ + + + Border.ts + Fade.ts @@ -70,6 +74,10 @@ Mirror.ts + + + Shadow.ts + Template.ts diff --git a/build/phaser-fx.js b/build/phaser-fx.js index c784aa72..89db4137 100644 --- a/build/phaser-fx.js +++ b/build/phaser-fx.js @@ -71,6 +71,58 @@ var Phaser; var FX = Phaser.FX; })(Phaser || (Phaser = {})); var Phaser; +(function (Phaser) { + (function (FX) { + /// + /// + /// + /** + * Phaser - FX - Camera - Border + * + * Creates a border around a camera. + */ + (function (Camera) { + var Border = (function () { + function Border(game, parent) { + /** + * Whether render border of this camera or not. (default is false) + * @type {boolean} + */ + this.showBorder = false; + /** + * Color of border of this camera. (in css color string) + * @type {string} + */ + this.borderColor = 'rgb(255,255,255)'; + this._game = game; + this._parent = parent; + } + Border.prototype.start = /** + * You can name the function that starts the effect whatever you like, but we used 'start' in our effects. + */ + function () { + }; + Border.prototype.postRender = /** + * Post-render is called during the objects render cycle, after the children/image data has been rendered. + * It happens directly BEFORE a canvas context.restore has happened if added to a Camera. + */ + function (camera, cameraX, cameraY, cameraWidth, cameraHeight) { + if(this.showBorder == true) { + this._game.stage.context.strokeStyle = this.borderColor; + this._game.stage.context.lineWidth = 1; + this._game.stage.context.rect(this._sx, this._sy, this.worldView.width, this.worldView.height); + this._game.stage.context.stroke(); + } + }; + return Border; + })(); + Camera.Border = Border; + })(FX.Camera || (FX.Camera = {})); + var Camera = FX.Camera; + })(Phaser.FX || (Phaser.FX = {})); + var FX = Phaser.FX; +})(Phaser || (Phaser = {})); +var Phaser; (function (Phaser) { (function (FX) { /// @@ -219,6 +271,80 @@ var Phaser; var FX = Phaser.FX; })(Phaser || (Phaser = {})); var Phaser; +(function (Phaser) { + (function (FX) { + /// + /// + /// + /** + * Phaser - FX - Camera - Shadow + * + * Creates a drop-shadow effect on the camera window. + */ + (function (Camera) { + var Shadow = (function () { + function Shadow(game, parent) { + /** + * Render camera shadow or not. (default is false) + * @type {boolean} + */ + this.showShadow = false; + /** + * Color of shadow, in css color string. + * @type {string} + */ + this.shadowColor = 'rgb(0,0,0)'; + /** + * Blur factor of shadow. + * @type {number} + */ + this.shadowBlur = 10; + /** + * Offset of the shadow from camera's position. + * @type {MicroPoint} + */ + this.shadowOffset = new Phaser.MicroPoint(4, 4); + this._game = game; + this._parent = parent; + } + Shadow.prototype.start = /** + * You can name the function that starts the effect whatever you like, but we used 'start' in our effects. + */ + function () { + }; + Shadow.prototype.preRender = /** + * Pre-render is called at the start of the object render cycle, before any transforms have taken place. + * It happens directly AFTER a canvas context.save has happened if added to a Camera. + */ + function (camera, cameraX, cameraY, cameraWidth, cameraHeight) { + // Shadow + if(this.showShadow == true) { + this._game.stage.context.shadowColor = this.shadowColor; + this._game.stage.context.shadowBlur = this.shadowBlur; + this._game.stage.context.shadowOffsetX = this.shadowOffset.x; + this._game.stage.context.shadowOffsetY = this.shadowOffset.y; + } + }; + Shadow.prototype.render = /** + * render is called during the objects render cycle, right after all transforms have finished, but before any children/image data is rendered. + */ + function (camera, cameraX, cameraY, cameraWidth, cameraHeight) { + // Shadow off + if(this.showShadow == true) { + this._game.stage.context.shadowBlur = 0; + this._game.stage.context.shadowOffsetX = 0; + this._game.stage.context.shadowOffsetY = 0; + } + }; + return Shadow; + })(); + Camera.Shadow = Shadow; + })(FX.Camera || (FX.Camera = {})); + var Camera = FX.Camera; + })(Phaser.FX || (Phaser.FX = {})); + var FX = Phaser.FX; +})(Phaser || (Phaser = {})); +var Phaser; (function (Phaser) { (function (FX) { /// diff --git a/build/phaser.js b/build/phaser.js index 2068185f..7e3c9c17 100644 --- a/build/phaser.js +++ b/build/phaser.js @@ -10788,6 +10788,44 @@ var Phaser; })(); Phaser.Rectangle = Rectangle; })(Phaser || (Phaser = {})); +var Phaser; +(function (Phaser) { + /** + * Phaser - Components - Texture + * + * The Sprite GameObject is an extension of the core GameObject that includes support for animation and dynamic textures. + */ + (function (Components) { + var Texture = (function () { + function Texture() { } + return Texture; + })(); + Components.Texture = Texture; + })(Phaser.Components || (Phaser.Components = {})); + var Components = Phaser.Components; +})(Phaser || (Phaser = {})); +// Module +var Shapes; +(function (Shapes) { + // Class + var Point = (function () { + // Constructor + function Point(x, y) { + this.x = x; + this.y = y; + } + Point.prototype.getDist = // Instance member + function () { + return Math.sqrt(this.x * this.x + this.y * this.y); + }; + Point.origin = new Point(0, 0); + return Point; + })(); + Shapes.Point = Point; +})(Shapes || (Shapes = {})); +// Local variables +var p = new Shapes.Point(3, 4); +var dist = p.getDist(); /// /** * Phaser - Vec2 @@ -12445,6 +12483,28 @@ var Phaser; })(Phaser.Math || (Phaser.Math = {})); var Math = Phaser.Math; })(Phaser || (Phaser = {})); +// Module +var Shapes; +(function (Shapes) { + // Class + var Point = (function () { + // Constructor + function Point(x, y) { + this.x = x; + this.y = y; + } + Point.prototype.getDist = // Instance member + function () { + return Math.sqrt(this.x * this.x + this.y * this.y); + }; + Point.origin = new Shapes.Point(0, 0); + return Point; + })(); + Shapes.Point = Point; +})(Shapes || (Shapes = {})); +// Local variables +var p = new Shapes.Point(3, 4); +var dist = p.getDist(); /// /// /** @@ -13787,6 +13847,9 @@ var Phaser; })(); Phaser.Tween = Tween; })(Phaser || (Phaser = {})); +/// +/// +/// /// /// /** @@ -13819,14 +13882,14 @@ var Phaser; this._sy = 0; /** * Scale factor of the camera. - * @type {MicroPoint} + * @type {Vec2} */ - this.scale = new Phaser.MicroPoint(1, 1); + this.scale = new Phaser.Vec2(1, 1); /** * Scrolling factor. * @type {MicroPoint} */ - this.scroll = new Phaser.MicroPoint(0, 0); + this.scroll = new Phaser.Vec2(0, 0); /** * Camera bounds. * @type {Rectangle} @@ -13837,64 +13900,25 @@ var Phaser; * @type {Rectangle} */ this.deadzone = null; - // Camera Border + /** + * Disable the automatic camera canvas clipping when Camera is non-Stage sized. + * @type {Boolean} + */ this.disableClipping = false; /** - * Whether render border of this camera or not. (default is false) - * @type {boolean} - */ - this.showBorder = false; - /** - * Color of border of this camera. (in css color string) - * @type {string} - */ - this.borderColor = 'rgb(255,255,255)'; - /** * Whether the camera background is opaque or not. If set to true the Camera is filled with - * the value of Camera.backgroundColor every frame. + * the value of Camera.backgroundColor every frame. Normally you wouldn't enable this if the + * Camera is the full Stage size, as the Stage.backgroundColor has the same effect. But for + * multiple or mini cameras it can be very useful. * @type {boolean} */ this.opaque = false; /** - * Clears the camera every frame using a canvas clearRect call (default to true). - * Note that this erases anything below the camera as well, so do not use it in conjuction with a camera - * that uses alpha or that needs to be able to manage opacity. Equally if Camera.opaque is set to true - * then set Camera.clear to false to save rendering time. - * By default the Stage will clear itself every frame, so be sure not to double-up clear calls. - * @type {boolean} - */ - this.clear = false; - /** - * Background color in css color string. + * The Background Color of the camera in css color string format, i.e. 'rgb(0,0,0)' or '#ff0000'. + * Not used if the Camera.opaque property is false. * @type {string} */ - this._bgColor = 'rgb(0,0,0)'; - /** - * Background texture repeat style. (default is 'repeat') - * @type {string} - */ - this._bgTextureRepeat = 'repeat'; - // Camera Shadow - /** - * Render camera shadow or not. (default is false) - * @type {boolean} - */ - this.showShadow = false; - /** - * Color of shadow, in css color string. - * @type {string} - */ - this.shadowColor = 'rgb(0,0,0)'; - /** - * Blur factor of shadow. - * @type {number} - */ - this.shadowBlur = 10; - /** - * Offset of the shadow from camera's position. - * @type {MicroPoint} - */ - this.shadowOffset = new Phaser.MicroPoint(4, 4); + this.backgroundColor = 'rgb(0,0,0)'; /** * Whether this camera visible or not. (default is true) * @type {boolean} @@ -14066,13 +14090,6 @@ var Phaser; } this._sx = this._stageX; this._sy = this._stageY; - // Shadow - if(this.showShadow == true) { - this._game.stage.context.shadowColor = this.shadowColor; - this._game.stage.context.shadowBlur = this.shadowBlur; - this._game.stage.context.shadowOffsetX = this.shadowOffset.x; - this._game.stage.context.shadowOffsetY = this.shadowOffset.y; - } // Scale on if(this.scale.x !== 1 || this.scale.y !== 1) { this._game.stage.context.scale(this.scale.x, this.scale.y); @@ -14086,24 +14103,10 @@ var Phaser; // now shift back to where that should actually render this._game.stage.context.translate(-(this._sx + this.worldView.halfWidth), -(this._sy + this.worldView.halfHeight)); } - if(this.clear == true) { - this._game.stage.context.clearRect(this._sx, this._sy, this.worldView.width, this.worldView.height); - } // Background - if(this.opaque == true) { - if(this._bgTexture) { - this._game.stage.context.fillStyle = this._bgTexture; - this._game.stage.context.fillRect(this._sx, this._sy, this.worldView.width, this.worldView.height); - } else { - this._game.stage.context.fillStyle = this._bgColor; - this._game.stage.context.fillRect(this._sx, this._sy, this.worldView.width, this.worldView.height); - } - } - // Shadow off - if(this.showShadow == true) { - this._game.stage.context.shadowBlur = 0; - this._game.stage.context.shadowOffsetX = 0; - this._game.stage.context.shadowOffsetY = 0; + if(this.opaque) { + this._game.stage.context.fillStyle = this.backgroundColor; + this._game.stage.context.fillRect(this._sx, this._sy, this.worldView.width, this.worldView.height); } this.fx.render(this, this._stageX, this._stageY, this.worldView.width, this.worldView.height); // Clip the camera so we don't get sprites appearing outside the edges @@ -14115,12 +14118,6 @@ var Phaser; } // Render all the Sprites this._game.world.group.render(this, this._sx, this._sy); - if(this.showBorder == true) { - this._game.stage.context.strokeStyle = this.borderColor; - this._game.stage.context.lineWidth = 1; - this._game.stage.context.rect(this._sx, this._sy, this.worldView.width, this.worldView.height); - this._game.stage.context.stroke(); - } // Scale off if(this.scale.x !== 1 || this.scale.y !== 1) { this._game.stage.context.scale(1, 1); @@ -14136,26 +14133,6 @@ var Phaser; this._game.stage.context.globalAlpha = 1; } }; - Object.defineProperty(Camera.prototype, "backgroundColor", { - get: function () { - return this._bgColor; - }, - set: function (color) { - this._bgColor = color; - }, - enumerable: true, - configurable: true - }); - Camera.prototype.setTexture = /** - * Set camera background texture. - * @param key {string} Asset key of the texture. - * @param [repeat] {string} what kind of repeat will this texture used for background. - */ - function (key, repeat) { - if (typeof repeat === "undefined") { repeat = 'repeat'; } - this._bgTexture = this._game.stage.context.createPattern(this._game.cache.getImage(key), repeat); - this._bgTextureRepeat = repeat; - }; Camera.prototype.setPosition = /** * Set position of this camera. * @param x {number} X position.