wassname/phaser
1
0
Fork 0
mirror of https://github.com/wassname/phaser.git synced 2026-07-19 11:26:26 +08:00
Code Issues Packages Projects Releases Wiki Activity

ScrollZone back in under the new renderer with new demos

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
Phaser/Phaser.csproj
+2
View File
@@ -69,6 +69,7 @@
<Content Include="components\camera\CameraFX.js">
<DependentUpon>CameraFX.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="components\ScrollRegion.ts" />
<Content Include="components\sprite\Texture.js">
<DependentUpon>Texture.ts</DependentUpon>
</Content>
@@ -93,6 +94,7 @@
<Content Include="gameobjects\IGameObject.js">
<DependentUpon>IGameObject.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="gameobjects\ScrollZone.ts" />
<Content Include="math\GameMath.js">
<DependentUpon>GameMath.ts</DependentUpon>
</Content>
Phaser/components/sprite/Physics.ts
+9 -22
View File
@@ -1,11 +1,10 @@
/// <reference path="../../core/Vec2.ts" />
/// <reference path="../../core/Point.ts" />
/// <reference path="../../math/Vec2Utils.ts" />
/// <reference path="../../physics/AABB.ts" />
/**
* Phaser - Components - Physics
*
*
*/
module Phaser.Components {
@@ -14,32 +13,24 @@ module Phaser.Components {
constructor(parent: Sprite) {
this._game = parent.game;
this.game = parent.game;
this._sprite = parent;
// Copy from PhysicsManager?
this.gravity = new Vec2;
this.drag = new Vec2;
this.bounce = new Vec2;
this.friction = new Vec2;
this.gravity = Vec2Utils.clone(this.game.world.physics.gravity);
this.drag = Vec2Utils.clone(this.game.world.physics.drag);
this.bounce = Vec2Utils.clone(this.game.world.physics.bounce);
this.friction = Vec2Utils.clone(this.game.world.physics.friction);
this.velocity = new Vec2;
this.acceleration = new Vec2;
//this.AABB = new Phaser.Physics.AABB(this._game, this._sprite, this._sprite.x, this._sprite.y, this._sprite.width, this._sprite.height);
this.shape = this._game.world.physics.add(new Phaser.Physics.AABB(this._game, this._sprite, this._sprite.x, this._sprite.y, this._sprite.width, this._sprite.height));
this.shape = this.game.world.physics.add(new Phaser.Physics.AABB(this.game, this._sprite, this._sprite.x, this._sprite.y, this._sprite.width, this._sprite.height));
}
/**
*
*/
private _game: Game;
/**
*
*/
private _sprite: Sprite;
public game: Game;
public shape: Phaser.Physics.IPhysicsShape;
/**
@@ -70,10 +61,6 @@ module Phaser.Components {
{
this._sprite.x = (this.shape.position.x - this.shape.bounds.halfWidth) - this.shape.offset.x;
this._sprite.y = (this.shape.position.y - this.shape.bounds.halfHeight) - this.shape.offset.y;
//this._sprite.x = (this.shape.position.x - this.shape.bounds.halfWidth);
//this._sprite.y = (this.shape.position.y - this.shape.bounds.halfHeight);
//this._sprite.x = (this.shape.position.x);
//this._sprite.y = (this.shape.position.y);
}
}
Phaser/components/sprite/Texture.ts
+20 -12
View File
@@ -44,13 +44,13 @@ module Phaser.Components {
/**
* Reference to the Image stored in the Game.Cache that is used as the texture for the Sprite.
*/
private _imageTexture = null;
public imageTexture = null;
/**
* Reference to the DynamicTexture that is used as the texture for the Sprite.
* @type {DynamicTexture}
*/
private _dynamicTexture: DynamicTexture = null;
public dynamicTexture: DynamicTexture = null;
/**
* The status of the texture image.
@@ -105,6 +105,12 @@ module Phaser.Components {
*/
public flippedY: bool = false;
/**
* Is the texture a DynamicTexture?
* @type {boolean}
*/
public isDynamic: bool = false;
/**
* Updates the texture being used to render the Sprite.
* Called automatically by SpriteUtils.loadTexture and SpriteUtils.loadDynamicTexture.
@@ -113,13 +119,15 @@ module Phaser.Components {
if (dynamic)
{
this._dynamicTexture = dynamic;
this.texture = this._dynamicTexture.canvas;
this.isDynamic = true;
this.dynamicTexture = dynamic;
this.texture = this.dynamicTexture.canvas;
}
else
{
this._imageTexture = image;
this.texture = this._imageTexture;
this.isDynamic = false;
this.imageTexture = image;
this.texture = this.imageTexture;
}
this.loaded = true;
@@ -183,13 +191,13 @@ module Phaser.Components {
*/
public get width(): number {
if (this._dynamicTexture)
if (this.isDynamic)
{
return this._dynamicTexture.width;
return this.dynamicTexture.width;
}
else
{
return this._imageTexture.width;
return this.imageTexture.width;
}
}
@@ -199,13 +207,13 @@ module Phaser.Components {
*/
public get height(): number {
if (this._dynamicTexture)
if (this.isDynamic)
{
return this._dynamicTexture.height;
return this.dynamicTexture.height;
}
else
{
return this._imageTexture.height;
return this.imageTexture.height;
}
}
Phaser/gameobjects/GameObjectFactory.ts
+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.
Phaser/gameobjects/ScrollZone.ts
+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);
}
Phaser/gameobjects/Sprite.ts
+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.
*/
Phaser/physics/AABB.ts
+4 -6
View File
@@ -29,7 +29,6 @@ module Phaser.Physics {
this.scale = new Vec2(1, 1);
}
//this.bounds = new Rectangle(x + Math.round(width / 2), y + Math.round(height / 2), width, height);
this.bounds = new Rectangle(x + Math.round(width / 2), y + Math.round(height / 2), width, height);
this.position = new Vec2(x + this.bounds.halfWidth, y + this.bounds.halfHeight);
this.oldPosition = new Vec2(x + this.bounds.halfWidth, y + this.bounds.halfHeight);
@@ -57,16 +56,11 @@ module Phaser.Physics {
if (this.sprite)
{
// Update position to sprite value
//console.log('a', this.position.x, this.position.y);
this.position.setTo((this.sprite.x + this.bounds.halfWidth) + this.offset.x, (this.sprite.y + this.bounds.halfHeight) + this.offset.y);
//console.log('b', this.position.x, this.position.y);
//this.position.setTo(this.sprite.x, this.sprite.y);
// Update scale / dimensions
if (Vec2Utils.equals(this.scale, this.sprite.scale) == false)
{
console.log('scaled');
this.scale.copyFrom(this.sprite.scale);
this.bounds.width = this.sprite.width;
this.bounds.height = this.sprite.height;
@@ -76,6 +70,10 @@ module Phaser.Physics {
}
public update() {
this.bounds.x = this.position.x;
this.bounds.y = this.position.y;
}
public setSize(width: number, height: number) {
Phaser/renderers/CanvasRenderer.ts
+116
View File
@@ -1,5 +1,6 @@
/// <reference path="../Game.ts" />
/// <reference path="../gameobjects/Sprite.ts" />
/// <reference path="../gameobjects/ScrollZone.ts" />
/// <reference path="../cameras/Camera.ts" />
/// <reference path="IRenderer.ts" />
@@ -199,6 +200,121 @@ module Phaser {
}
public renderScrollZone(camera: Camera, scrollZone: ScrollZone): bool {
// Render checks (needs inCamera check added)
if (scrollZone.scale.x == 0 || scrollZone.scale.y == 0 || scrollZone.texture.alpha < 0.1)
{
return false;
}
// Reset our temp vars
this._ga = -1;
this._sx = 0;
this._sy = 0;
this._sw = scrollZone.frameBounds.width;
this._sh = scrollZone.frameBounds.height;
this._fx = scrollZone.scale.x;
this._fy = scrollZone.scale.y;
this._sin = 0;
this._cos = 1;
this._dx = (camera.scaledX * scrollZone.scrollFactor.x) + scrollZone.frameBounds.x - (camera.worldView.x * scrollZone.scrollFactor.x);
this._dy = (camera.scaledY * scrollZone.scrollFactor.y) + scrollZone.frameBounds.y - (camera.worldView.y * scrollZone.scrollFactor.y);
this._dw = scrollZone.frameBounds.width;
this._dh = scrollZone.frameBounds.height;
// Alpha
if (scrollZone.texture.alpha !== 1)
{
this._ga = scrollZone.texture.context.globalAlpha;
scrollZone.texture.context.globalAlpha = scrollZone.texture.alpha;
}
// Sprite Flip X
if (scrollZone.texture.flippedX)
{
this._fx = -scrollZone.scale.x;
}
// Sprite Flip Y
if (scrollZone.texture.flippedY)
{
this._fy = -scrollZone.scale.y;
}
// Rotation and Flipped
if (scrollZone.modified)
{
if (scrollZone.texture.renderRotation == true && (scrollZone.rotation !== 0 || scrollZone.rotationOffset !== 0))
{
this._sin = Math.sin(scrollZone.game.math.degreesToRadians(scrollZone.rotationOffset + scrollZone.rotation));
this._cos = Math.cos(scrollZone.game.math.degreesToRadians(scrollZone.rotationOffset + scrollZone.rotation));
}
// setTransform(a, b, c, d, e, f);
// a = scale x
// b = skew x
// c = skew y
// d = scale y
// e = translate x
// f = translate y
scrollZone.texture.context.save();
scrollZone.texture.context.setTransform(this._cos * this._fx, (this._sin * this._fx) + scrollZone.skew.x, -(this._sin * this._fy) + scrollZone.skew.y, this._cos * this._fy, this._dx, this._dy);
this._dx = -scrollZone.origin.x;
this._dy = -scrollZone.origin.y;
}
else
{
if (!scrollZone.origin.equals(0))
{
this._dx -= scrollZone.origin.x;
this._dy -= scrollZone.origin.y;
}
}
this._sx = Math.round(this._sx);
this._sy = Math.round(this._sy);
this._sw = Math.round(this._sw);
this._sh = Math.round(this._sh);
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 < scrollZone.regions.length; i++)
{
if (scrollZone.texture.isDynamic)
{
scrollZone.regions[i].render(scrollZone.texture.context, scrollZone.texture.texture, this._dx, this._dy, this._dw, this._dh);
}
else
{
scrollZone.regions[i].render(scrollZone.texture.context, scrollZone.texture.texture, this._dx, this._dy, this._dw, this._dh);
}
}
if (scrollZone.modified)
{
scrollZone.texture.context.restore();
}
//if (this.renderDebug)
//{
// this.renderBounds(camera, cameraOffsetX, cameraOffsetY);
//this.collisionMask.render(camera, cameraOffsetX, cameraOffsetY);
//}
if (this._ga > -1)
{
scrollZone.texture.context.globalAlpha = this._ga;
}
return true;
}
}
}
Phaser/renderers/HeadlessRenderer.ts
+3 -9
View File
@@ -18,18 +18,12 @@ module Phaser {
public render() {}
public renderSprite(camera: Camera, sprite: Sprite): bool {
// Render checks (needs inCamera check added)
if (sprite.scale.x == 0 || sprite.scale.y == 0 || sprite.texture.alpha < 0.1)
{
return false;
}
return true;
}
// Add Tilemap, ScrollZone, etc?
public renderScrollZone(camera: Camera, scrollZone: ScrollZone): bool {
return true;
}
}
Phaser/renderers/IRenderer.ts
+1
View File
@@ -6,6 +6,7 @@ module Phaser {
render();
renderSprite(camera: Camera, sprite: Sprite): bool;
renderScrollZone(camera: Camera, sprite: ScrollZone): bool;
}