wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-08-12 12:20:38 +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-10 16:31:17 +01: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/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;