ScrollZone back in under the new renderer with new demos

This commit is contained in:
Richard Davey
2013-05-30 05:34:35 +01:00
parent f2054f8a2a
commit ce1523585f
28 changed files with 1582 additions and 349 deletions
+6 -6
View File
@@ -134,9 +134,9 @@ module Phaser {
* @param height {number} Height of this object.
* @returns {ScrollZone} The newly created scroll zone object.
*/
//public scrollZone(key: string, x?: number = 0, y?: number = 0, width?: number = 0, height?: number = 0): ScrollZone {
// return <ScrollZone> this._world.group.add(new ScrollZone(this._game, key, x, y, width, height));
//}
public scrollZone(key: string, x?: number = 0, y?: number = 0, width?: number = 0, height?: number = 0): ScrollZone {
return <ScrollZone> this._world.group.add(new ScrollZone(this._game, key, x, y, width, height));
}
/**
* Create a new Tilemap.
@@ -203,9 +203,9 @@ module Phaser {
* @param scrollZone The ScrollZone to add to the Game World
* @return {Phaser.ScrollZone} The ScrollZone object
*/
//public existingScrollZone(scrollZone: ScrollZone): ScrollZone {
// return this._world.group.add(scrollZone);
//}
public existingScrollZone(scrollZone: ScrollZone): ScrollZone {
return this._world.group.add(scrollZone);
}
/**
* Add an existing Tilemap to the current world.
+17 -159
View File
@@ -28,17 +28,17 @@ module Phaser {
*/
constructor(game: Game, key:string, x: number = 0, y: number = 0, width?: number = 0, height?: number = 0) {
super(game, x, y, width, height);
super(game, x, y, key, width, height);
this.type = Phaser.Types.SCROLLZONE;
this.render = game.renderer.renderScrollZone;
this.physics.moves = false;
this.regions = [];
if (this._game.cache.getImage(key))
if (this.texture.loaded)
{
this._texture = this._game.cache.getImage(key);
this.width = this._texture.width;
this.height = this._texture.height;
if (width > this._texture.width || height > this._texture.height)
if (width > this.width || height > this.height)
{
// Create our repeating texture (as the source image wasn't large enough for the requested size)
this.createRepeatingTexture(width, height);
@@ -50,7 +50,7 @@ module Phaser {
this.addRegion(0, 0, this.width, this.height);
// If the zone is smaller than the image itself then shrink the bounds
if ((width < this._texture.width || height < this._texture.height) && width !== 0 && height !== 0)
if ((width < this.width || height < this.height) && width !== 0 && height !== 0)
{
this.width = width;
this.height = height;
@@ -60,41 +60,6 @@ module Phaser {
}
/**
* Texture of this object.
*/
private _texture;
/**
* If this zone is larger than texture image, this will be filled with a pattern of texture.
* @type {DynamicTexture}
*/
private _dynamicTexture: DynamicTexture = null;
/**
* Local rendering related temp vars to help avoid gc spikes.
* @type {number}
*/
private _dx: number = 0;
/**
* Local rendering related temp vars to help avoid gc spikes.
* @type {number}
*/
private _dy: number = 0;
/**
* Local rendering related temp vars to help avoid gc spikes.
* @type {number}
*/
private _dw: number = 0;
/**
* Local rendering related temp vars to help avoid gc spikes.
* @type {number}
*/
private _dh: number = 0;
/**
* Current region this zone is scrolling.
* @type {ScrollRegion}
@@ -107,12 +72,6 @@ module Phaser {
*/
public regions: ScrollRegion[];
/**
* Flip this zone vertically? (default to false)
* @type {boolean}
*/
public flipped: bool = false;
/**
* Add a new region to this zone.
* @param x {number} X position of the new region.
@@ -162,114 +121,11 @@ module Phaser {
for (var i = 0; i < this.regions.length; i++)
{
this.regions[i].update(this._game.time.delta);
this.regions[i].update(this.game.time.delta);
}
}
/**
* Check whether this zone is visible in a specific camera rectangle.
* @param camera {Rectangle} The rectangle you want to check.
* @return {boolean} Return true if bound of this zone 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.frameBounds.x - (camera.x * this.scrollFactor.x);
this._dy = this.frameBounds.y - (camera.y * this.scrollFactor.x);
this._dw = this.frameBounds.width * this.scale.x;
this._dh = this.frameBounds.height * this.scale.y;
return (camera.right > this._dx) && (camera.x < this._dx + this._dw) && (camera.bottom > this._dy) && (camera.y < this._dy + this._dh);
}
else
{
return camera.intersects(this.frameBounds, this.frameBounds.length);
}
}
/**
* Render this zone object to a specific camera.
* @param camera {Camera} The camera this object will be render to.
* @param cameraOffsetX {number} X offset of camera.
* @param cameraOffsetY {number} Y offset of camera.
* @return Return false if not rendered, otherwise return true.
*/
public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number) {
// Render checks
if (this.visible == false || this.scale.x == 0 || this.scale.y == 0 || this.alpha < 0.1 || this.cameraBlacklist.indexOf(camera.ID) !== -1 || this.inCamera(camera.worldView) == false)
{
return false;
}
// Alpha
if (this.alpha !== 1)
{
var globalAlpha = this.context.globalAlpha;
this.context.globalAlpha = this.alpha;
}
this._dx = cameraOffsetX + (this.frameBounds.topLeft.x - camera.worldView.x);
this._dy = cameraOffsetY + (this.frameBounds.topLeft.y - camera.worldView.y);
this._dw = this.frameBounds.width * this.scale.x;
this._dh = this.frameBounds.height * this.scale.y;
// Apply camera difference
if (this.scrollFactor.x !== 1.0 || this.scrollFactor.y !== 1.0)
{
this._dx -= (camera.worldView.x * this.scrollFactor.x);
this._dy -= (camera.worldView.y * this.scrollFactor.y);
}
// Rotation - needs to work from origin point really, but for now from center
if (this.angle !== 0 || this.flipped == true)
{
this.context.save();
this.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2));
if (this.angle !== 0)
{
this.context.rotate(this.angle * (Math.PI / 180));
}
this._dx = -(this._dw / 2);
this._dy = -(this._dh / 2);
if (this.flipped == true)
{
this.context.scale(-1, 1);
}
}
this._dx = Math.round(this._dx);
this._dy = Math.round(this._dy);
this._dw = Math.round(this._dw);
this._dh = Math.round(this._dh);
for (var i = 0; i < this.regions.length; i++)
{
if (this._dynamicTexture)
{
this.regions[i].render(this.context, this._dynamicTexture.canvas, this._dx, this._dy, this._dw, this._dh);
}
else
{
this.regions[i].render(this.context, this._texture, this._dx, this._dy, this._dw, this._dh);
}
}
if (globalAlpha > -1)
{
this.context.globalAlpha = globalAlpha;
}
return true;
}
/**
* Create repeating texture with _texture, and store it into the _dynamicTexture.
* Used to create texture when texture image is small than size of the zone.
@@ -277,14 +133,16 @@ module Phaser {
private createRepeatingTexture(regionWidth: number, regionHeight: number) {
// Work out how many we'll need of the source image to make it tile properly
var tileWidth = Math.ceil(this._texture.width / regionWidth) * regionWidth;
var tileHeight = Math.ceil(this._texture.height / regionHeight) * regionHeight;
var tileWidth = Math.ceil(this.width / regionWidth) * regionWidth;
var tileHeight = Math.ceil(this.height / regionHeight) * regionHeight;
this._dynamicTexture = new DynamicTexture(this._game, tileWidth, tileHeight);
var dt: DynamicTexture = new DynamicTexture(this.game, tileWidth, tileHeight);
this._dynamicTexture.context.rect(0, 0, tileWidth, tileHeight);
this._dynamicTexture.context.fillStyle = this._dynamicTexture.context.createPattern(this._texture, "repeat");
this._dynamicTexture.context.fill();
dt.context.rect(0, 0, tileWidth, tileHeight);
dt.context.fillStyle = dt.context.createPattern(this.texture.imageTexture, "repeat");
dt.context.fill();
this.texture.loadDynamicTexture(dt);
}
+16 -7
View File
@@ -45,9 +45,6 @@ module Phaser {
this.animations = new Phaser.Components.AnimationManager(this);
this.texture = new Phaser.Components.Texture(this, key);
this.width = this.frameBounds.width;
this.height = this.frameBounds.height;
// Transform related (if we add any more then move to a component)
this.origin = new Phaser.Vec2(0, 0);
this.scale = new Phaser.Vec2(1, 1);
@@ -99,10 +96,6 @@ module Phaser {
*/
public alive: bool;
// Getters only, don't over-write these values
public width: number;
public height: number;
/**
* Sprite physics.
*/
@@ -217,6 +210,22 @@ module Phaser {
return this.animations.frameName;
}
public set width(value: number) {
this.frameBounds.width = value;
}
public get width(): number {
return this.frameBounds.width;
}
public set height(value: number) {
this.frameBounds.height = value;
}
public get height(): number {
return this.frameBounds.height;
}
/**
* Pre-update is called right before update() on each object in the game loop.
*/