wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-06-29 16:30:29 +08:00
Code Issues Packages Projects Releases Wiki Activity

Finish document for DynamicTexture, Loader, GeomSprite, Sprite, Camera.

Browse Source
This commit is contained in:
Sean
2013-05-04 20:02:12 +08:00
committed by Richard Davey
parent ca932038fb
commit deb37e9a90
5 changed files with 592 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Phaser/DynamicTexture.ts
+96 -23
View File
@@ -13,6 +13,14 @@ module Phaser {
export class DynamicTexture {
/**
* DynamicTexture constructor
* Create a new <code>DynamicTexture</code>.
*
* @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 {
Phaser/Loader.ts
+109 -1
View File
@@ -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])
Phaser/gameobjects/GeomSprite.ts
+144 -3
View File
@@ -12,6 +12,14 @@ module Phaser {
export class GeomSprite extends GameObject {
/**
* GeomSprite constructor
* Create a new <code>GeomSprite</code>.
*
* @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
Phaser/gameobjects/Sprite.ts
+82 -3
View File
@@ -14,6 +14,15 @@ module Phaser {
export class Sprite extends GameObject {
/**
* Sprite constructor
* Create a new <code>Sprite</code>.
*
* @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;
Phaser/system/Camera.ts
+161 -14
View File
@@ -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;