From deb37e9a90fab0c71a21bceea23bf19853bf3466 Mon Sep 17 00:00:00 2001 From: Sean Date: Sat, 4 May 2013 20:02:12 +0800 Subject: [PATCH] Finish document for DynamicTexture, Loader, GeomSprite, Sprite, Camera. --- Phaser/DynamicTexture.ts | 119 +++++++++++++++++---- Phaser/Loader.ts | 110 ++++++++++++++++++- Phaser/gameobjects/GeomSprite.ts | 147 +++++++++++++++++++++++++- Phaser/gameobjects/Sprite.ts | 85 ++++++++++++++- Phaser/system/Camera.ts | 175 ++++++++++++++++++++++++++++--- 5 files changed, 592 insertions(+), 44 deletions(-) diff --git a/Phaser/DynamicTexture.ts b/Phaser/DynamicTexture.ts index eba84688..8a3635e0 100644 --- a/Phaser/DynamicTexture.ts +++ b/Phaser/DynamicTexture.ts @@ -13,6 +13,14 @@ module Phaser { export class DynamicTexture { + /** + * DynamicTexture constructor + * Create a new DynamicTexture. + * + * @param game {Phaser.Game} Current game instance. + * @param width {number} Init width of this texture. + * @param height {number} Init height of this texture. + */ constructor(game: Game, width: number, height: number) { this._game = game; @@ -26,6 +34,9 @@ module Phaser { } + /** + * Local private reference to game. + */ private _game: Game; private _sx: number = 0; @@ -39,10 +50,28 @@ module Phaser { // Input / Output nodes? + /** + * Bound of this texture with width and height info. + * @type {Rectangle} + */ public bounds: Rectangle; + /** + * This class is actually a wrapper of canvas. + * @type {HTMLCanvasElement} + */ public canvas: HTMLCanvasElement; + /** + * Canvas context of this object. + * @type {CanvasRenderingContext2D} + */ public context: CanvasRenderingContext2D; + /** + * Get a color of a specific pixel. + * @param x {number} X position of the pixel in this texture. + * @param y {number} Y position of the pixel in this texture. + * @return {number} A native color value integer (format: 0xRRGGBB) + */ public getPixel(x: number, y: number): number { //r = imageData.data[0]; @@ -55,6 +84,12 @@ module Phaser { } + /** + * Get a color of a specific pixel (including alpha value). + * @param x {number} X position of the pixel in this texture. + * @param y {number} Y position of the pixel in this texture. + * @return A native color value integer (format: 0xAARRGGBB) + */ public getPixel32(x: number, y: number) { var imageData = this.context.getImageData(x, y, 1, 1); @@ -63,13 +98,23 @@ module Phaser { } - // Returns a CanvasPixelArray + /** + * Get pixels in array in a specific rectangle. + * @param rect {Rectangle} The specific rectangle. + * @returns {array} CanvasPixelArray. + */ public getPixels(rect: Rectangle) { return this.context.getImageData(rect.x, rect.y, rect.width, rect.height); } + /** + * Set color of a specific pixel. + * @param x {number} X position of the target pixel. + * @param y {number} Y position of the target pixel. + * @param color {number} Native integer with color value. (format: 0xRRGGBB) + */ public setPixel(x: number, y: number, color: number) { this.context.fillStyle = color; @@ -77,6 +122,12 @@ module Phaser { } + /** + * Set color (with alpha) of a specific pixel. + * @param x {number} X position of the target pixel. + * @param y {number} Y position of the target pixel. + * @param color {number} Native integer with color value. (format: 0xAARRGGBB) + */ public setPixel32(x: number, y: number, color: number) { this.context.fillStyle = color; @@ -84,12 +135,22 @@ module Phaser { } + /** + * Set image data to a specific rectangle. + * @param rect {Rectangle} Target rectangle. + * @param input {object} Source image data. + */ public setPixels(rect: Rectangle, input) { this.context.putImageData(input, rect.x, rect.y); } + /** + * Fill a given rectangle with specific color. + * @param rect {Rectangle} Target rectangle you want to fill. + * @param color {number} A native number with color value. (format: 0xRRGGBB) + */ public fillRect(rect: Rectangle, color: number) { this.context.fillStyle = color; @@ -97,6 +158,9 @@ module Phaser { } + /** + * + */ public pasteImage(key: string, frame?: number = -1, destX?: number = 0, destY?: number = 0, destWidth?: number = null, destHeight?: number = null) { var texture = null; @@ -138,21 +202,27 @@ module Phaser { if (texture != null) { this.context.drawImage( - texture, // Source Image - this._sx, // Source X (location within the source image) - this._sy, // Source Y - this._sw, // Source Width - this._sh, // Source Height - this._dx, // Destination X (where on the canvas it'll be drawn) - this._dy, // Destination Y - this._dw, // Destination Width (always same as Source Width unless scaled) - this._dh // Destination Height (always same as Source Height unless scaled) + texture, // Source Image + this._sx, // Source X (location within the source image) + this._sy, // Source Y + this._sw, // Source Width + this._sh, // Source Height + this._dx, // Destination X (where on the canvas it'll be drawn) + this._dy, // Destination Y + this._dw, // Destination Width (always same as Source Width unless scaled) + this._dh // Destination Height (always same as Source Height unless scaled) ); } } // TODO - Add in support for: alphaBitmapData: BitmapData = null, alphaPoint: Point = null, mergeAlpha: bool = false + /** + * Copy pixel from another DynamicTexture to this texture. + * @param sourceTexture {DynamicTexture} Source texture object. + * @param sourceRect {Rectangle} The specific region rectangle to be copied to this in the source. + * @param destPoint {Point} Top-left point the target image data will be paste at. + */ public copyPixels(sourceTexture: DynamicTexture, sourceRect: Rectangle, destPoint: Point) { // Swap for drawImage if the sourceRect is the same size as the sourceTexture to avoid a costly getImageData call @@ -167,6 +237,9 @@ module Phaser { } + /** + * Clear the whole canvas. + */ public clear() { this.context.clearRect(0, 0, this.bounds.width, this.bounds.height); @@ -183,13 +256,13 @@ module Phaser { /** * Given an alpha and 3 color values this will return an integer representation of it - * - * @param alpha The Alpha value (between 0 and 255) - * @param red The Red channel value (between 0 and 255) - * @param green The Green channel value (between 0 and 255) - * @param blue The Blue channel value (between 0 and 255) - * - * @return A native color value integer (format: 0xAARRGGBB) + * + * @param alpha {number} The Alpha value (between 0 and 255) + * @param red {number} The Red channel value (between 0 and 255) + * @param green {number} The Green channel value (between 0 and 255) + * @param blue {number} The Blue channel value (between 0 and 255) + * + * @return A native color value integer (format: 0xAARRGGBB) */ private getColor32(alpha: number, red: number, green: number, blue: number): number { @@ -199,12 +272,12 @@ module Phaser { /** * Given 3 color values this will return an integer representation of it - * - * @param red The Red channel value (between 0 and 255) - * @param green The Green channel value (between 0 and 255) - * @param blue The Blue channel value (between 0 and 255) - * - * @return A native color value integer (format: 0xRRGGBB) + * + * @param red {number} The Red channel value (between 0 and 255) + * @param green {number} The Green channel value (between 0 and 255) + * @param blue {number} The Blue channel value (between 0 and 255) + * + * @return A native color value integer (format: 0xRRGGBB) */ private getColor(red: number, green: number, blue: number): number { diff --git a/Phaser/Loader.ts b/Phaser/Loader.ts index ab152fb3..3380278b 100644 --- a/Phaser/Loader.ts +++ b/Phaser/Loader.ts @@ -11,6 +11,12 @@ module Phaser { export class Loader { + /** + * Loader constructor + * + * @param game {Phaser.Game} Current game instance. + * @param callback {function} This will be called when assets completely loaded. + */ constructor(game: Game, callback) { this._game = game; @@ -22,19 +28,50 @@ module Phaser { } + /** + * Local private reference to game. + */ private _game: Game; + /** + * Array stors assets keys. So you can get that asset by its unique key. + */ private _keys: string[]; + /** + * Contains all the assets file infos. + */ private _fileList; + /** + * Game initialial assets loading callback. + */ private _gameCreateComplete; private _onComplete; private _onFileLoad; + /** + * Indicates assets loading progress. (from 0 to 100) + * @type {number} + */ private _progressChunk: number; private _xhr: XMLHttpRequest; + /** + * Length of assets queue. + * @type {number} + */ private _queueSize: number; + /** + * True if game is completely loaded. + * @type {boolean} + */ public hasLoaded: bool; + /** + * Loading progress (from 0 to 1) + * @type {number} + */ public progress: number; + /** + * Reset loader, this will remove all loaded assets. + */ public reset() { this._queueSize = 0; } @@ -45,6 +82,11 @@ module Phaser { } + /** + * Add a new image asset loading request with key and url. + * @param key {string} Unique asset key of this image file. + * @param url {string} URL of image file. + */ public addImageFile(key: string, url: string) { if (this.checkKeyExists(key) === false) @@ -56,6 +98,14 @@ module Phaser { } + /** + * Add a new sprite sheet loading request. + * @param key {string} Unique asset key of the sheet file. + * @param url {string} URL of sheet file. + * @param frameWidth {number} Width of each single frame. + * @param frameHeight {number} Height of each single frame. + * @param frameMax {number} How many frames in this sprite sheet. + */ public addSpriteSheet(key: string, url: string, frameWidth: number, frameHeight: number, frameMax?: number = -1) { if (this.checkKeyExists(key) === false) @@ -67,6 +117,13 @@ module Phaser { } + /** + * Add a new texture atlas loading request. + * @param key {string} Unique asset key of the texture atlas file. + * @param url {string} URL of texture atlas file. + * @param jsonURL {string} Optional, url of JSON data file. + * @param jsonData {object} Optional, JSON data object. + */ public addTextureAtlas(key: string, url: string, jsonURL?: string = null, jsonData? = null) { if (this.checkKeyExists(key) === false) @@ -109,6 +166,11 @@ module Phaser { } + /** + * Add a new audio file loading request. + * @param key {string} Unique asset key of the audio file. + * @param url {string} URL of audio file. + */ public addAudioFile(key: string, url: string) { if (this.checkKeyExists(key) === false) @@ -120,6 +182,11 @@ module Phaser { } + /** + * Add a new text file loading request. + * @param key {string} Unique asset key of the text file. + * @param url {string} URL of text file. + */ public addTextFile(key: string, url: string) { if (this.checkKeyExists(key) === false) @@ -131,18 +198,30 @@ module Phaser { } + /** + * Remove loading request of a file. + * @param key {string} Key of the file you want to remove. + */ public removeFile(key: string) { delete this._fileList[key]; } + /** + * Remove all file loading requests. + */ public removeAll() { this._fileList = {}; } + /** + * Load assets. + * @param onFileLoadCallback {function} Called when each file loaded successfully. + * @param onCompleteCallback {function} Called when all assets completely loaded. + */ public load(onFileLoadCallback = null, onCompleteCallback = null) { this.progress = 0; @@ -176,6 +255,9 @@ module Phaser { } + /** + * Load files. Private method ONLY used by loader. + */ private loadFile() { var file = this._fileList[this._keys.pop()]; @@ -213,6 +295,10 @@ module Phaser { } + /** + * Error occured when load a file. + * @param key {string} Key of the error loading file. + */ private fileError(key: string) { this._fileList[key].loaded = true; @@ -222,6 +308,10 @@ module Phaser { } + /** + * Called when a file is successfully loaded. + * @param key {string} Key of the successfully loaded file. + */ private fileComplete(key: string) { this._fileList[key].loaded = true; @@ -274,6 +364,10 @@ module Phaser { } + /** + * Successfully loaded a JSON file. + * @param key {string} Key of the loaded JSON file. + */ private jsonLoadComplete(key: string) { var data = JSON.parse(this._xhr.response); @@ -289,6 +383,10 @@ module Phaser { } + /** + * Error occured when load a JSON. + * @param key {string} Key of the error loading JSON file. + */ private jsonLoadError(key: string) { var file = this._fileList[key]; @@ -297,10 +395,15 @@ module Phaser { } + /** + * Handle loading next file. + * @param previousKey {string} Key of previous loaded asset. + * @param success {boolean} Whether the previous asset loaded successfully or not. + */ private nextFile(previousKey: string, success: bool) { this.progress = Math.round(this.progress + this._progressChunk); - + if (this.progress > 1) { this.progress = 1; @@ -329,6 +432,11 @@ module Phaser { } + /** + * Check whether asset exists with a specific key. + * @param key {string} Key of the asset you want to check. + * @return {boolean} Return true if exists, otherwise return false. + */ private checkKeyExists(key: string): bool { if (this._fileList[key]) diff --git a/Phaser/gameobjects/GeomSprite.ts b/Phaser/gameobjects/GeomSprite.ts index 589d4302..2a56eb7c 100644 --- a/Phaser/gameobjects/GeomSprite.ts +++ b/Phaser/gameobjects/GeomSprite.ts @@ -12,6 +12,14 @@ module Phaser { export class GeomSprite extends GameObject { + /** + * GeomSprite constructor + * Create a new GeomSprite. + * + * @param game {Phaser.Game} Current game instance. + * @param x {number} Optional, the initial x position of the sprite. + * @param y {number} Optional, the initial y position of the sprite. + */ constructor(game: Game, x?: number = 0, y?: number = 0) { super(game, x, y); @@ -28,26 +36,90 @@ module Phaser { private _dw: number = 0; private _dh: number = 0; + /** + * Geom type of this sprite. (available: UNASSIGNED, CIRCLE, LINE, POINT, RECTANGLE) + * @type {number} + */ public type: number = 0; + /** + * Not completely set yet. (the default type) + */ public static UNASSIGNED: number = 0; + /** + * Circle. + * @type {number} + */ public static CIRCLE: number = 1; + /** + * Line. + * @type {number} + */ public static LINE: number = 2; + /** + * Point. + * @type {number} + */ public static POINT: number = 3; + /** + * Rectangle. + * @type {number} + */ public static RECTANGLE: number = 4; + /** + * Circle shape container. A Circle instance. + * @type {Circle} + */ public circle: Circle; + /** + * Line shape container. A Line instance. + * @type {Line} + */ public line: Line; + /** + * Point shape container. A Point instance. + * @type {Point} + */ public point: Point; + /** + * Rectangle shape container. A Rectangle instance. + * @type {Rectangle} + */ public rect: Rectangle; + /** + * Render outline of this sprite or not. (default is true) + * @type {boolean} + */ public renderOutline: bool = true; + /** + * Fill the shape or not. (default is true) + * @type {boolean} + */ public renderFill: bool = true; + /** + * Width of outline. (default is 1) + * @type {number} + */ public lineWidth: number = 1; + /** + * Width of outline. (default is 1) + * @type {number} + */ public lineColor: string = 'rgb(0,255,0)'; + /** + * Width of outline. (default is 1) + * @type {number} + */ public fillColor: string = 'rgb(0,100,0)'; + /** + * Just like Sprite.loadGraphic(), this will load a circle and set its shape to Circle. + * @param circle {Circle} Circle geometry define. + * @return {GeomSprite} GeomSprite instance itself. + */ loadCircle(circle:Circle): GeomSprite { this.refresh(); @@ -57,7 +129,11 @@ module Phaser { } - + /** + * Just like Sprite.loadGraphic(), this will load a line and set its shape to Line. + * @param line {Line} Line geometry define. + * @return {GeomSprite} GeomSprite instance itself. + */ loadLine(line:Line): GeomSprite { this.refresh(); @@ -67,6 +143,11 @@ module Phaser { } + /** + * Just like Sprite.loadGraphic(), this will load a point and set its shape to Point. + * @param point {Point} Point geometry define. + * @return {GeomSprite} GeomSprite instance itself. + */ loadPoint(point:Point): GeomSprite { this.refresh(); @@ -76,6 +157,11 @@ module Phaser { } + /** + * Just like Sprite.loadGraphic(), this will load a rect and set its shape to Rectangle. + * @param rect {Rectangle} Rectangle geometry define. + * @return {GeomSprite} GeomSprite instance itself. + */ loadRectangle(rect:Rectangle): GeomSprite { this.refresh(); @@ -85,6 +171,11 @@ module Phaser { } + /** + * Create a circle shape with specific diameter. + * @param diameter {number} Diameter of the circle. + * @return {GeomSprite} GeomSprite instance itself. + */ createCircle(diameter: number): GeomSprite { this.refresh(); @@ -95,6 +186,12 @@ module Phaser { } + /** + * Create a line shape with specific end point. + * @param x {number} X position of the end point. + * @param y {number} Y position of the end point. + * @return {GeomSprite} GeomSprite instance itself. + */ createLine(x: number, y: number): GeomSprite { this.refresh(); @@ -105,6 +202,10 @@ module Phaser { } + /** + * Create a point shape at spriter's position. + * @return {GeomSprite} GeomSprite instance itself. + */ createPoint(): GeomSprite { this.refresh(); @@ -116,6 +217,11 @@ module Phaser { } + /** + * Create a circle shape with specific diameter. + * @param diameter {number} Diameter of the circle. + * @return {GeomSprite} GeomSprite instance itself. + */ createRectangle(width: number, height: number): GeomSprite { this.refresh(); @@ -126,6 +232,9 @@ module Phaser { } + /** + * Destroy all geom shapes of this sprite. + */ refresh() { this.circle = null; @@ -135,6 +244,9 @@ module Phaser { } + /** + * Update bounds. + */ update() { // Update bounds and position? @@ -169,6 +281,11 @@ module Phaser { } + /** + * Check whether this object is visible in a specific camera rectangle. + * @param camera {Rectangle} The rectangle you want to check. + * @return {boolean} Return true if bounds of this sprite intersects the given rectangle, otherwise return false. + */ public inCamera(camera: Rectangle): bool { if (this.scrollFactor.x !== 1.0 || this.scrollFactor.y !== 1.0) @@ -187,6 +304,13 @@ module Phaser { } + /** + * Render this sprite to specific camera. Called by game loop after update(). + * @param camera {Camera} Camera this sprite will be rendered to. + * @cameraOffsetX {number} X offset to the camera. + * @cameraOffsetY {number} Y offset to the camera. + * @return {boolean} Return false if not rendered, otherwise return true. + */ public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number): bool { // Render checks @@ -339,12 +463,25 @@ module Phaser { } + /** + * Render a point of geometry. + * @param point {Point} Position of the point. + * @param offsetX {number} X offset to its position. + * @param offsetY {number} Y offset to its position. + * @param size {number} Optional, point size. + */ public renderPoint(point, offsetX?: number = 0, offsetY?: number = 0, size?: number = 1) { this._game.stage.context.fillRect(offsetX + point.x, offsetY + point.y, size, size); } + /** + * Render debug infos. (this method does not work now) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param color {number} Optional, color of the debug info to be rendered. (format is css color string) + */ public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { //this._game.stage.context.fillStyle = color; @@ -355,8 +492,12 @@ module Phaser { } - // Gives a basic boolean response to a geometric collision. - // If you need the details of the collision use the Collision functions instead and inspect the IntersectResult object. + /** + * Gives a basic boolean response to a geometric collision. + * If you need the details of the collision use the Collision functions instead and inspect the IntersectResult object. + * @param source {GeomSprite} Sprite you want to check. + * @return {boolean} Whether they overlaps or not. + */ public collide(source: GeomSprite): bool { // Circle vs. Circle diff --git a/Phaser/gameobjects/Sprite.ts b/Phaser/gameobjects/Sprite.ts index 106226b4..bed6abd1 100644 --- a/Phaser/gameobjects/Sprite.ts +++ b/Phaser/gameobjects/Sprite.ts @@ -14,6 +14,15 @@ module Phaser { export class Sprite extends GameObject { + /** + * Sprite constructor + * Create a new Sprite. + * + * @param game {Phaser.Game} Current game instance. + * @param x {number} Optional, the initial x position of the sprite. + * @param y {number} Optional, the initial y position of the sprite. + * @param key {string} Optional, Key of the graphic you want to load for this sprite. + */ constructor(game: Game, x?: number = 0, y?: number = 0, key?: string = null) { super(game, x, y); @@ -34,7 +43,14 @@ module Phaser { } + /** + * Texture of this sprite to be rendered. + */ private _texture; + /** + * Texture of this sprite is DynamicTexture? (default to false) + * @type {boolean} + */ private _dynamicTexture: bool = false; // local rendering related temp vars to help avoid gc spikes @@ -47,13 +63,38 @@ module Phaser { private _dw: number = 0; private _dh: number = 0; + /** + * This manages animations of the sprite. You can modify animations though it. (see AnimationManager) + * @type AnimationManager + */ public animations: AnimationManager; + /** + * Render bound of this sprite for debugging? (default to false) + * @type {boolean} + */ public renderDebug: bool = false; + /** + * Color of bound when render debug. (see renderDebug) Format is a css color string. + * @type {string} + */ public renderDebugColor: string = 'rgba(0,255,0,0.5)'; + /** + * Color of points when render debug. (see renderDebug) Format is a css color string. + * @type {string} + */ public renderDebugPointColor: string = 'rgba(255,255,255,1)'; + /** + * Flip the graphic vertically? (default to false) + * @type {boolean} + */ public flipped: bool = false; + /** + * Load graphic for this sprite. (graphic can be SpriteSheet of Texture) + * @param key {string} Key of the graphic you want to load for this sprite. + * @return {Sprite} Sprite instance itself. + */ public loadGraphic(key: string): Sprite { if (this._game.cache.getImage(key) !== null) @@ -77,6 +118,11 @@ module Phaser { } + /** + * Load a DynamicTexture as its texture. + * @param texture {DynamicTexture} The texture object to be used by this sprite. + * @return {Sprite} Sprite instance itself. + */ public loadDynamicTexture(texture: DynamicTexture): Sprite { this._texture = texture; @@ -90,6 +136,13 @@ module Phaser { } + /** + * This function creates a flat colored square image dynamically. + * @param width {number} The width of the sprite you want to generate. + * @param height {number} The height of the sprite you want to generate. + * @param color {number} Optional, specifies the color of the generated block. (format is 0xAARRGGBB) + * @return {Sprite} Sprite instance itself. + */ public makeGraphic(width: number, height: number, color: number = 0xffffffff): Sprite { this._texture = null; @@ -101,8 +154,13 @@ module Phaser { return this; } + /** + * Check whether this object is visible in a specific camera rectangle. + * @param camera {Rectangle} The rectangle you want to check. + * @return {boolean} Return true if bounds of this sprite intersects the given rectangle, otherwise return false. + */ public inCamera(camera: Rectangle): bool { - + if (this.scrollFactor.x !== 1.0 || this.scrollFactor.y !== 1.0) { this._dx = this.bounds.x - (camera.x * this.scrollFactor.x); @@ -119,6 +177,9 @@ module Phaser { } + /** + * Automatically called after update() by the game loop, this function just update animations. + */ public postUpdate() { this.animations.update(); @@ -143,6 +204,13 @@ module Phaser { return this.animations.frameName; } + /** + * Render this sprite to specific camera. Called by game loop after update(). + * @param camera {Camera} Camera this sprite will be rendered to. + * @cameraOffsetX {number} X offset to the camera. + * @cameraOffsetY {number} Y offset to the camera. + * @return {boolean} Return false if not rendered, otherwise return true. + */ public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number): bool { // Render checks @@ -309,7 +377,12 @@ module Phaser { } - // Renders the bounding box around this Sprite and the contact points. Useful for visually debugging. + /** + * Renders the bounding box around this Sprite and the contact points. Useful for visually debugging. + * @param camera {Camera} Camera the bound will be rendered to. + * @param cameraOffsetX {number} X offset of bound to the camera. + * @param cameraOffsetY {number} Y offset of bound to the camera. + */ private renderBounds(camera:Camera, cameraOffsetX:number, cameraOffsetY:number) { this._dx = cameraOffsetX + (this.bounds.topLeft.x - camera.worldView.x); @@ -323,7 +396,7 @@ module Phaser { var hh = this.bounds.halfHeight * this.scale.y; var sw = (this.bounds.width * this.scale.x) - 1; var sh = (this.bounds.height * this.scale.y) - 1; - + this._game.stage.context.fillRect(this._dx, this._dy, 1, 1); // top left this._game.stage.context.fillRect(this._dx + hw, this._dy, 1, 1); // top center this._game.stage.context.fillRect(this._dx + sw, this._dy, 1, 1); // top right @@ -336,6 +409,12 @@ module Phaser { } + /** + * Render debug infos. (including name, bounds info, position and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param color {number} Optional, color of the debug info to be rendered. (format is css color string) + */ public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { this._game.stage.context.fillStyle = color; diff --git a/Phaser/system/Camera.ts b/Phaser/system/Camera.ts index 9eb2d439..ec5d3b10 100644 --- a/Phaser/system/Camera.ts +++ b/Phaser/system/Camera.ts @@ -14,14 +14,16 @@ module Phaser { export class Camera { /** - * Instantiates a new camera at the specified location, with the specified size and zoom level. - * - * @param X X location of the camera's display in pixels. Uses native, 1:1 resolution, ignores zoom. - * @param Y Y location of the camera's display in pixels. Uses native, 1:1 resolution, ignores zoom. - * @param Width The width of the camera display in pixels. - * @param Height The height of the camera display in pixels. - * @param Zoom The initial zoom level of the camera. A zoom level of 2 will make all pixels display at 2x resolution. - */ + *Sprite constructor + * Instantiates a new camera at the specified location, with the specified size and zoom level. + * + * @param game {Phaser.Game} Current game instance. + * @param id {number} Unique identity. + * @param x {number} X location of the camera's display in pixels. Uses native, 1:1 resolution, ignores zoom. + * @param y {number} Y location of the camera's display in pixels. Uses native, 1:1 resolution, ignores zoom. + * @param width {number} The width of the camera display in pixels. + * @param height {number} The height of the camera display in pixels. + */ constructor(game: Game, id: number, x: number, y: number, width: number, height: number) { this._game = game; @@ -38,6 +40,9 @@ module Phaser { } + /** + * Local private reference to Game. + */ private _game: Game; private _clip: bool = false; @@ -48,45 +53,151 @@ module Phaser { private _sx: number = 0; private _sy: number = 0; + /** + * Camera "follow" style preset: camera has no deadzone, just tracks the focus object directly. + * @type {number} + */ public static STYLE_LOCKON: number = 0; + /** + * Camera "follow" style preset: camera deadzone is narrow but tall. + * @type {number} + */ public static STYLE_PLATFORMER: number = 1; + /** + * Camera "follow" style preset: camera deadzone is a medium-size square around the focus object. + * @type {number} + */ public static STYLE_TOPDOWN: number = 2; + /** + * Camera "follow" style preset: camera deadzone is a small square around the focus object. + * @type {number} + */ public static STYLE_TOPDOWN_TIGHT: number = 3; + /** + * Identity of this camera. + */ public ID: number; + /** + * Camera view rectangle in world coordinate. + * @type {Rectangle} + */ public worldView: Rectangle; + /** + * How many sprites will be rendered by this camera. + * @type {number} + */ public totalSpritesRendered: number; + /** + * Scale factor of the camera. + * @type {MicroPoint} + */ public scale: MicroPoint = new MicroPoint(1, 1); + /** + * Scrolling factor. + * @type {MicroPoint} + */ public scroll: MicroPoint = new MicroPoint(0, 0); + /** + * Camera bounds. + * @type {Rectangle} + */ public bounds: Rectangle = null; + /** + * Sprite moving inside this rectangle will not cause camera moving. + * @type {Rectangle} + */ public deadzone: Rectangle = null; // Camera Border 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)'; // Camera Background Color + /** + * Whethor camera background invisible or not. + * @type {boolean} + */ public opaque: bool = true; + /** + * Background color in css color string. + * @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); + /** + * Whether this camera visible or not. (default is true) + * @type {boolean} + */ public visible: bool = true; + /** + * Alpha of the camera. (everything rendered to this camera will be affected) + * @type {number} + */ public alpha: number = 1; - // The x/y position of the current input event in world coordinates + /** + * The x position of the current input event in world coordinates. + * @type {number} + */ public inputX: number = 0; + /** + * The y position of the current input event in world coordinates. + * @type {number} + */ public inputY: number = 0; + /** + * Effects manager. + * @type {FXManager} + */ public fx: FXManager; + /** + * Tells this camera object what sprite to track. + * @param target {Sprite} The object you want the camera to track. Set to null to not follow anything. + * @param style {number} Optional, Leverage one of the existing "deadzone" presets. If you use a custom deadzone, ignore this parameter and manually specify the deadzone after calling follow(). + */ public follow(target: Sprite, style?: number = Camera.STYLE_LOCKON) { this._target = target; @@ -116,6 +227,11 @@ module Phaser { } + /** + * Move the camera focus to this location instantly. + * @param x {number} X position. + * @param y {number} Y position. + */ public focusOnXY(x: number, y: number) { x += (x > 0) ? 0.0000001 : -0.0000001; @@ -126,6 +242,10 @@ module Phaser { } + /** + * Move the camera focus to this location instantly. + * @param point {any} Point you want to focus. + */ public focusOn(point) { point.x += (point.x > 0) ? 0.0000001 : -0.0000001; @@ -138,11 +258,11 @@ module Phaser { /** * Specify the boundaries of the world or where the camera is allowed to move. - * - * @param x The smallest X value of your world (usually 0). - * @param y The smallest Y value of your world (usually 0). - * @param width The largest X value of your world (usually the world width). - * @param height The largest Y value of your world (usually the world height). + * + * @param x {number} The smallest X value of your world (usually 0). + * @param y {number} The smallest Y value of your world (usually 0). + * @param width {number} The largest X value of your world (usually the world width). + * @param height {number} The largest Y value of your world (usually the world height). */ public setBounds(x: number = 0, y: number = 0, width: number = 0, height: number = 0) { @@ -158,6 +278,9 @@ module Phaser { this.update(); } + /** + * Update focusing and scrolling. + */ public update() { this.fx.preUpdate(); @@ -240,6 +363,9 @@ module Phaser { } + /** + * Draw background, shadow, effects, and objects if this is visible. + */ public render() { if (this.visible === false || this.alpha < 0.1) @@ -368,6 +494,11 @@ module Phaser { return this._bgColor; } + /** + * Set camera background texture. + * @param key {string} Asset key of the texture. + * @param repeat {string} Optional, 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); @@ -375,6 +506,11 @@ module Phaser { } + /** + * Set position of this camera. + * @param x {number} X position. + * @param y {number} Y position. + */ public setPosition(x: number, y: number) { this._stageX = x; @@ -384,6 +520,11 @@ module Phaser { } + /** + * Give this camera a new size. + * @param width {number} Width of new size. + * @param height {number} Height of new size. + */ public setSize(width: number, height: number) { this.worldView.width = width; @@ -392,6 +533,12 @@ module Phaser { } + /** + * Render debug infos. (including id, position, rotation, scrolling factor, bounds and some other properties) + * @param x {number} X position of the debug info to be rendered. + * @param y {number} Y position of the debug info to be rendered. + * @param color {number} Optional, color of the debug info to be rendered. (format is css color string) + */ public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') { this._game.stage.context.fillStyle = color;