Mirrors/phaser
2
0
Fork 0
mirror of https://github.com/photonstorm/phaser synced 2024-11-25 14:10:42 +00:00
Code Issues Projects Releases Packages Wiki Activity

Saving first iteration of the ScrollZone game object.

Browse source
This commit is contained in:
Richard Davey 2013-04-22 01:53:24 +01:00
parent 2638e598dc
commit f2678104fa
43 changed files with 13711 additions and 857 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
Phaser/AnimationManager.ts
View file

@ -57,6 +57,7 @@ module Phaser {
{
if (this.validateFrames(frames, useNumericIndex) == false)
{
throw Error('Invalid frames given to Animation ' + name);
return;
}
}
@ -151,10 +152,10 @@ module Phaser {
public set frame(value: number) {
if (this._frameData.getFrame(value) !== null)
{
this.currentFrame = this._frameData.getFrame(value);
if (this.currentFrame !== null)
{
this._parent.bounds.width = this.currentFrame.width;
this._parent.bounds.height = this.currentFrame.height;
this._frameIndex = value;
@ -168,10 +169,10 @@ module Phaser {
public set frameName(value: string) {
if (this._frameData.getFrameByName(value) !== null)
{
this.currentFrame = this._frameData.getFrameByName(value);
if (this.currentFrame !== null)
{
this._parent.bounds.width = this.currentFrame.width;
this._parent.bounds.height = this.currentFrame.height;
this._frameIndex = this.currentFrame.index;

2
Phaser/DynamicTexture.ts
View file

@ -13,7 +13,7 @@ module Phaser {
export class DynamicTexture {
constructor(game: Game, key: string, width: number, height: number) {
constructor(game: Game, width: number, height: number) {
this._game = game;

13
Phaser/Game.ts
View file

@ -28,6 +28,7 @@
/// <reference path="gameobjects/Particle.ts" />
/// <reference path="gameobjects/Sprite.ts" />
/// <reference path="gameobjects/Tilemap.ts" />
/// <reference path="gameobjects/ScrollZone.ts" />
/**
* Phaser - Game
@ -381,8 +382,8 @@ module Phaser {
return this.world.createSprite(x, y, key);
}
public createDynamicTexture(key: string, width: number, height: number): DynamicTexture {
return this.world.createDynamicTexture(key, width, height);
public createDynamicTexture(width: number, height: number): DynamicTexture {
return this.world.createDynamicTexture(width, height);
}
public createGroup(MaxSize?: number = 0): Group {
@ -397,8 +398,12 @@ module Phaser {
return this.world.createEmitter(x, y, size);
}
public createTilemap(key: string, mapData: string, format: number, tileWidth?: number, tileHeight?: number): Tilemap {
return this.world.createTilemap(key, mapData, format, tileWidth, tileHeight);
public createScrollZone(key:string, x: number, y: number, width: number, height: number): ScrollZone {
return this.world.createScrollZone(key, x, y, width, height);
}
public createTilemap(key: string, mapData: string, format: number, resizeWorld: bool = true, tileWidth?: number = 0, tileHeight?: number = 0): Tilemap {
return this.world.createTilemap(key, mapData, format, resizeWorld, tileWidth, tileHeight);
}
public createTween(obj): Tween {

32
Phaser/GameMath.ts
View file

@ -943,6 +943,38 @@ module Phaser {
return this.sinTable;
}
/**
* Shifts through the sin table data by one value and returns it.
* This effectively moves the position of the data from the start to the end of the table.
* @return The sin value.
*/
public shiftSinTable(): number {
if (this.sinTable)
{
var s = this.sinTable.shift();
this.sinTable.push(s);
return s;
}
}
/**
* Shifts through the cos table data by one value and returns it.
* This effectively moves the position of the data from the start to the end of the table.
* @return The cos value.
*/
public shiftCosTable(): number {
if (this.cosTable)
{
var s = this.cosTable.shift();
this.cosTable.push(s);
return s;
}
}
/**

4
Phaser/Group.ts
View file

@ -286,7 +286,7 @@ module Phaser {
return null;
}
return this.add(new ObjectClass());
return this.add(new ObjectClass(this._game));
}
else
{
@ -314,7 +314,7 @@ module Phaser {
return null;
}
return this.add(new ObjectClass());
return this.add(new ObjectClass(this._game));
}
}

14
Phaser/Phaser.csproj
View file

@ -85,6 +85,10 @@
<Content Include="gameobjects\Particle.js">
<DependentUpon>Particle.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="gameobjects\ScrollZone.ts" />
<Content Include="gameobjects\ScrollZone.js">
<DependentUpon>ScrollZone.ts</DependentUpon>
</Content>
<Content Include="gameobjects\Sprite.js">
<DependentUpon>Sprite.ts</DependentUpon>
</Content>
@ -107,6 +111,10 @@
<Content Include="geom\Point.js">
<DependentUpon>Point.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="geom\Quad.ts" />
<Content Include="geom\Quad.js">
<DependentUpon>Quad.ts</DependentUpon>
</Content>
<Content Include="geom\Rectangle.js">
<DependentUpon>Rectangle.ts</DependentUpon>
</Content>
@ -154,14 +162,14 @@
<Content Include="system\Tile.js">
<DependentUpon>Tile.ts</DependentUpon>
</Content>
<Content Include="system\TilemapBuffer.js">
<DependentUpon>TilemapBuffer.ts</DependentUpon>
<TypeScriptCompile Include="system\TilemapLayer.ts" />
<Content Include="system\TilemapLayer.js">
<DependentUpon>TilemapLayer.ts</DependentUpon>
</Content>
<Content Include="system\Tween.js">
<DependentUpon>Tween.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="system\Tween.ts" />
<TypeScriptCompile Include="system\TilemapBuffer.ts" />
<TypeScriptCompile Include="system\Tile.ts" />
<TypeScriptCompile Include="system\StageScaleMode.ts" />
<TypeScriptCompile Include="system\RequestAnimationFrame.ts" />

4
Phaser/Phaser.ts
View file

@ -1,7 +1,7 @@
/**
* Phaser
*
* v0.9.2 - April 20th 2013
* v0.9.3 - April 22nd 2013
*
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
*
@ -16,6 +16,6 @@
module Phaser {
export var VERSION: string = 'Phaser version 0.9.2';
export var VERSION: string = 'Phaser version 0.9.3';
}

12
Phaser/State.ts
View file

@ -66,8 +66,8 @@ module Phaser {
return this.game.world.createSprite(x, y, key);
}
public createDynamicTexture(key: string, width: number, height: number): DynamicTexture {
return this.game.world.createDynamicTexture(key, width, height);
public createDynamicTexture(width: number, height: number): DynamicTexture {
return this.game.world.createDynamicTexture(width, height);
}
public createGroup(MaxSize?: number = 0): Group {
@ -82,8 +82,12 @@ module Phaser {
return this.game.world.createEmitter(x, y, size);
}
public createTilemap(key: string, mapData: string, format: number, tileWidth?: number, tileHeight?: number): Tilemap {
return this.game.world.createTilemap(key, mapData, format, tileWidth, tileHeight);
public createScrollZone(key:string, x: number, y: number, width: number, height: number): ScrollZone {
return this.game.world.createScrollZone(key, x, y, width, height);
}
public createTilemap(key: string, mapData: string, format: number, resizeWorld: bool = true, tileWidth?: number = 0, tileHeight?: number = 0): Tilemap {
return this.game.world.createTilemap(key, mapData, format, resizeWorld, tileWidth, tileHeight);
}
public createTween(obj): Tween {

16
Phaser/World.ts
View file

@ -125,7 +125,7 @@ module Phaser {
return this._cameras.getAll();
}
// Sprites
// Game Objects
// Drop this?
public addExistingSprite(sprite: Sprite): Sprite {
@ -140,21 +140,21 @@ module Phaser {
return <GeomSprite> this.group.add(new GeomSprite(this._game, x, y));
}
public createDynamicTexture(key: string, width: number, height: number): DynamicTexture {
return new DynamicTexture(this._game, key, width, height);
public createDynamicTexture(width: number, height: number): DynamicTexture {
return new DynamicTexture(this._game, width, height);
}
public createGroup(MaxSize?: number = 0): Group {
return <Group> this.group.add(new Group(this._game, MaxSize));
}
// Tilemaps
public createTilemap(key: string, mapData: string, format: number, tileWidth?: number, tileHeight?: number): Tilemap {
return <Tilemap> this.group.add(new Tilemap(this._game, key, mapData, format, tileWidth, tileHeight));
public createScrollZone(key: string, x: number, y: number, width: number, height: number): ScrollZone {
return <ScrollZone> this.group.add(new ScrollZone(this._game, key, x, y, width, height));
}
// Emitters
public createTilemap(key: string, mapData: string, format: number, resizeWorld: bool = true, tileWidth?: number = 0, tileHeight?: number = 0): Tilemap {
return <Tilemap> this.group.add(new Tilemap(this._game, key, mapData, format, resizeWorld, tileWidth, tileHeight));
}
public createParticle(): Particle {
return new Particle(this._game);

281
Phaser/gameobjects/ScrollZone.ts Normal file
View file

@ -0,0 +1,281 @@
/// <reference path="../Game.ts" />
/// <reference path="../geom/Quad.ts" />
/**
* Phaser - ScrollZone
*
* Creates a scrolling region of the given width and height from an image in the cache.
* The ScrollZone can be positioned anywhere in-world like a normal game object.
* The image within it is scrolled via the scrollSpeed.x/y properties.
* If you create a scroll zone larger than the given source image it will create a DynamicTexture and fill it with a pattern of the source image.
*/
module Phaser {
export class ScrollZone extends GameObject {
/**
*
*/
constructor(game: Game, key:string, x: number, y: number, width: number, height: number) {
super(game, x, y, width, height);
// Our seamless scrolling quads
this._A = new Quad(0, 0, width, height);
this._B = new Quad();
this._C = new Quad();
this._D = new Quad();
this._scroll = new MicroPoint();
this.offset = new MicroPoint();
this.scrollSpeed = new MicroPoint();
if (this._game.cache.getImage(key))
{
this._texture = this._game.cache.getImage(key);
this.bounds.width = width;
this.bounds.height = height;
this._sourceWidth = this._texture.width;
this._sourceHeight = this._texture.height;
// If the Scrolling Zone is BIGGER than the texture then we need to create a repeating pattern DynamicTexture
if (this._texture.width < width || this._texture.height < height)
{
this.createRepeatingTexture();
}
}
}
private _texture;
private _dynamicTexture: DynamicTexture = null;
private _A: Quad;
private _B: Quad;
private _C: Quad;
private _D: Quad;
private _scroll: MicroPoint;
private _sourceWidth: number;
private _sourceHeight: number;
// local rendering related temp vars to help avoid gc spikes
private _dx: number = 0;
private _dy: number = 0;
private _dw: number = 0;
private _dh: number = 0;
private _anchorWidth: number = 0;
private _anchorHeight: number = 0;
private _inverseWidth: number = 0;
private _inverseHeight: number = 0;
public scrollSpeed: MicroPoint;
public offset: MicroPoint;
public flipped: bool = false;
public update() {
this._scroll.x = Math.round(this._scroll.x + this.scrollSpeed.x);
this._scroll.y = Math.round(this._scroll.y + this.scrollSpeed.y);
if (this._scroll.x > this._sourceWidth)
{
this._scroll.x = 0;
}
if (this._scroll.x < 0)
{
this._scroll.x = this._sourceWidth;
}
if (this._scroll.y > this._sourceHeight)
{
this._scroll.y = 0;
}
if (this._scroll.y < 0)
{
this._scroll.y = this._sourceHeight;
}
// Anchor Dimensions
this._anchorWidth = this._sourceWidth - this._scroll.x;
this._anchorHeight = this._sourceHeight - this._scroll.y;
if (this._anchorWidth > this.width)
{
this._anchorWidth = this.width;
}
if (this._anchorHeight > this.height)
{
this._anchorHeight = this.height;
}
this._inverseWidth = this.width - this._anchorWidth;
this._inverseHeight = this.height - this._anchorHeight;
// Quad A
this._A.setTo(this._scroll.x, this._scroll.y, this._anchorWidth, this._anchorHeight);
// Quad B
this._B.y = this._scroll.y;
this._B.width = this._inverseWidth;
this._B.height = this._anchorHeight;
// Quad C
this._C.x = this._scroll.x;
this._C.width = this._anchorWidth;
this._C.height = this._inverseHeight;
// Quad D
this._D.width = this._inverseWidth;
this._D.height = this._inverseHeight;
}
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);
this._dy = this.bounds.y - (camera.y * this.scrollFactor.x);
this._dw = this.bounds.width * this.scale.x;
this._dh = this.bounds.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.bounds, this.bounds.length);
}
}
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.inCamera(camera.worldView) == false)
{
return false;
}
// Alpha
if (this.alpha !== 1)
{
var globalAlpha = this._game.stage.context.globalAlpha;
this._game.stage.context.globalAlpha = this.alpha;
}
this._dx = cameraOffsetX + (this.bounds.topLeft.x - camera.worldView.x);
this._dy = cameraOffsetY + (this.bounds.topLeft.y - camera.worldView.y);
this._dw = this.bounds.width * this.scale.x;
this._dh = this.bounds.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._game.stage.context.save();
this._game.stage.context.translate(this._dx + (this._dw / 2), this._dy + (this._dh / 2));
if (this.angle !== 0)
{
this._game.stage.context.rotate(this.angle * (Math.PI / 180));
}
this._dx = -(this._dw / 2);
this._dy = -(this._dh / 2);
if (this.flipped == true)
{
this._game.stage.context.scale(-1, 1);
}
}
this._dx = Math.round(this._dx);
this._dy = Math.round(this._dy);
if (this._dynamicTexture)
{
if (this._A.width !== 0 && this._A.height !== 0)
{
this._game.stage.context.drawImage(this._dynamicTexture.canvas, this._A.x, this._A.y, this._A.width, this._A.height, this._dx, this._dy, this._A.width, this._A.height);
}
if (this._B.width !== 0 && this._B.height !== 0)
{
this._game.stage.context.drawImage(this._dynamicTexture.canvas, this._B.x, this._B.y, this._B.width, this._B.height, this._dx + this._A.width, this._dy, this._B.width, this._B.height);
}
if (this._C.width !== 0 && this._C.height !== 0)
{
this._game.stage.context.drawImage(this._dynamicTexture.canvas, this._C.x, this._C.y, this._C.width, this._C.height, this._dx, this._dy + this._A.height, this._C.width, this._C.height);
}
if (this._D.width !== 0 && this._D.height !== 0)
{
this._game.stage.context.drawImage(this._dynamicTexture.canvas, this._D.x, this._D.y, this._D.width, this._D.height, this._dx + this._C.width, this._dy + this._A.height, this._D.width, this._D.height);
}
}
else
{
if (this._A.width !== 0 && this._A.height !== 0)
{
this._game.stage.context.drawImage(this._texture, this._A.x, this._A.y, this._A.width, this._A.height, this._dx, this._dy, this._A.width, this._A.height);
}
if (this._B.width !== 0 && this._B.height !== 0)
{
this._game.stage.context.drawImage(this._texture, this._B.x, this._B.y, this._B.width, this._B.height, this._dx + this._A.width, this._dy, this._B.width, this._B.height);
}
if (this._C.width !== 0 && this._C.height !== 0)
{
this._game.stage.context.drawImage(this._texture, this._C.x, this._C.y, this._C.width, this._C.height, this._dx, this._dy + this._A.height, this._C.width, this._C.height);
}
if (this._D.width !== 0 && this._D.height !== 0)
{
this._game.stage.context.drawImage(this._texture, this._D.x, this._D.y, this._D.width, this._D.height, this._dx + this._C.width, this._dy + this._A.height, this._D.width, this._D.height);
}
}
if (globalAlpha > -1)
{
this._game.stage.context.globalAlpha = globalAlpha;
}
return true;
}
private createRepeatingTexture() {
// Work out how many we'll need of the source image to make it tile properly
var tileWidth = Math.ceil(this.width / this._sourceWidth) * this._sourceWidth;
var tileHeight = Math.ceil(this.height / this._sourceHeight) * this._sourceHeight;
this._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();
this._sourceWidth = tileWidth;
this._sourceHeight = tileHeight;
}
}
}

237
Phaser/gameobjects/Tilemap.ts
View file

@ -1,271 +1,156 @@
/// <reference path="../Game.ts" />
/// <reference path="GameObject.ts" />
/// <reference path="../system/Tile.ts" />
/// <reference path="../system/TilemapBuffer.ts" />
/// <reference path="../system/TilemapLayer.ts" />
/**
* Phaser - Tilemap
*
* This GameObject allows for the display of a tilemap within the game world. Tile maps consist of an image, tile data and a size.
* Internally it creates a TilemapBuffer for each camera in the world.
* Internally it creates a TilemapLayer for each layer in the tilemap.
*/
module Phaser {
export class Tilemap extends GameObject {
constructor(game: Game, key: string, mapData: string, format: number, tileWidth?: number = 0, tileHeight?: number = 0) {
constructor(game: Game, key: string, mapData: string, format: number, resizeWorld: bool = true, tileWidth?: number = 0, tileHeight?: number = 0) {
super(game);
this._texture = this._game.cache.getImage(key);
this._tilemapBuffers = [];
this.isGroup = false;
this.tileWidth = tileWidth;
this.tileHeight = tileHeight;
this.boundsInTiles = new Rectangle();
this._layers = [];
this.mapFormat = format;
switch (format)
{
case Tilemap.FORMAT_CSV:
this.parseCSV(game.cache.getText(mapData));
this.parseCSV(game.cache.getText(mapData), key, tileWidth, tileHeight);
break;
case Tilemap.FORMAT_TILED_JSON:
this.parseTiledJSON(game.cache.getText(mapData));
this.parseTiledJSON(game.cache.getText(mapData), key);
break;
}
this.parseTileOffsets();
this.createTilemapBuffers();
if (this.currentLayer && resizeWorld)
{
this._game.world.setSize(this.currentLayer.widthInPixels, this.currentLayer.heightInPixels, true);
}
}
private _texture;
private _tileOffsets;
private _tilemapBuffers: TilemapBuffer[];
private _dx: number = 0;
private _dy: number = 0;
private _layers : TilemapLayer[];
public static FORMAT_CSV: number = 0;
public static FORMAT_TILED_JSON: number = 1;
public mapData;
public currentLayer: TilemapLayer;
public mapFormat: number;
public boundsInTiles: Rectangle;
public tileWidth: number;
public tileHeight: number;
public update() {
}
public widthInTiles: number = 0;
public heightInTiles: number = 0;
public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number) {
public widthInPixels: number = 0;
public heightInPixels: number = 0;
// Loop through the layers
for (var i = 0; i < this._layers.length; i++)
{
this._layers[i].render(camera, cameraOffsetX, cameraOffsetY);
}
// How many extra tiles to draw around the edge of the screen (for fast scrolling games, or to optimise mobile performance try increasing this)
// The number is the amount of extra tiles PER SIDE, so a value of 10 would be (10 tiles + screen size + 10 tiles)
public tileBoundary: number = 10;
}
private parseCSV(data: string) {
private parseCSV(data: string, key: string, tileWidth: number, tileHeight: number) {
//console.log('parseMapData');
this.mapData = [];
var layer: TilemapLayer = new TilemapLayer(this._game, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this._layers.length.toString(), tileWidth, tileHeight);
// Trim any rogue whitespace from the data
data = data.trim();
var rows = data.split("\n");
//console.log('rows', rows);
for (var i = 0; i < rows.length; i++)
{
var column = rows[i].split(",");
//console.log('column', column);
var output = [];
if (column.length > 0)
{
// Set the width based on the first row
if (this.widthInTiles == 0)
{
// Maybe -1?
this.widthInTiles = column.length;
layer.addColumn(column);
}
}
// We have a new row of tiles
this.heightInTiles++;
layer.updateBounds();
// Parse it
for (var c = 0; c < column.length; c++)
{
output[c] = parseInt(column[c]);
}
this.currentLayer = layer;
this.mapData.push(output);
}
this._layers.push(layer);
}
//console.log('final map array');
//console.log(this.mapData);
if (this.widthInTiles > 0)
{
this.widthInPixels = this.tileWidth * this.widthInTiles;
}
if (this.heightInTiles > 0)
{
this.heightInPixels = this.tileHeight * this.heightInTiles;
}
this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
}
private parseTiledJSON(data: string) {
//console.log('parseTiledJSON');
this.mapData = [];
private parseTiledJSON(data: string, key: string) {
// Trim any rogue whitespace from the data
data = data.trim();
// We ought to change this soon, so we have layer support, but for now let's just get it working
var json = JSON.parse(data);
// Right now we assume no errors at all with the parsing (safe I know)
this.tileWidth = json.tilewidth;
this.tileHeight = json.tileheight;
for (var i = 0; i < json.layers.length; i++)
{
var layer: TilemapLayer = new TilemapLayer(this._game, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
// Parse the first layer only
this.widthInTiles = json.layers[0].width;
this.heightInTiles = json.layers[0].height;
this.widthInPixels = this.widthInTiles * this.tileWidth;
this.heightInPixels = this.heightInTiles * this.tileHeight;
this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
//console.log('width in tiles', this.widthInTiles);
//console.log('height in tiles', this.heightInTiles);
//console.log('width in px', this.widthInPixels);
//console.log('height in px', this.heightInPixels);
// Now let's get the data
layer.alpha = json.layers[i].opacity;
layer.visible = json.layers[i].visible;
var c = 0;
var row;
for (var i = 0; i < json.layers[0].data.length; i++)
for (var t = 0; t < json.layers[i].data.length; t++)
{
if (c == 0)
{
row = [];
}
row.push(json.layers[0].data[i]);
row.push(json.layers[i].data[t]);
c++;
if (c == this.widthInTiles)
if (c == json.layers[i].width)
{
this.mapData.push(row);
layer.addColumn(row);
c = 0;
}
}
//console.log('mapData');
//console.log(this.mapData);
layer.updateBounds();
}
this.currentLayer = layer;
public getMapSegment(area: Rectangle) {
}
private createTilemapBuffers() {
var cams = this._game.world.getAllCameras();
for (var i = 0; i < cams.length; i++)
{
this._tilemapBuffers[cams[i].ID] = new TilemapBuffer(this._game, cams[i], this, this._texture, this._tileOffsets);
}
}
private parseTileOffsets() {
this._tileOffsets = [];
var i = 0;
if (this.mapFormat == Tilemap.FORMAT_TILED_JSON)
{
// For some reason Tiled counts from 1 not 0
this._tileOffsets[0] = null;
i = 1;
}
for (var ty = 0; ty < this._texture.height; ty += this.tileHeight)
{
for (var tx = 0; tx < this._texture.width; tx += this.tileWidth)
{
this._tileOffsets[i] = { x: tx, y: ty };
i++;
}
}
}
/*
// Use a Signal?
public addTilemapBuffers(camera:Camera) {
console.log('added new camera to tilemap');
this._tilemapBuffers[camera.ID] = new TilemapBuffer(this._game, camera, this, this._texture, this._tileOffsets);
}
*/
public update() {
// Check if any of the cameras have scrolled far enough for us to need to refresh a TilemapBuffer
this._tilemapBuffers[0].update();
}
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
this._tilemapBuffers[0].renderDebugInfo(x, y, color);
}
public render(camera: Camera, cameraOffsetX: number, cameraOffsetY: number): bool {
if (this.visible === false || this.scale.x == 0 || this.scale.y == 0 || this.alpha < 0.1)
{
return false;
}
this._dx = cameraOffsetX + (this.bounds.x - camera.worldView.x);
this._dy = cameraOffsetY + (this.bounds.y - camera.worldView.y);
this._dx = Math.round(this._dx);
this._dy = Math.round(this._dy);
if (this._tilemapBuffers[camera.ID])
{
//this._tilemapBuffers[camera.ID].render(this._dx, this._dy);
this._tilemapBuffers[camera.ID].render(cameraOffsetX, cameraOffsetY);
}
return true;
this._layers.push(layer);
}
}
public get widthInPixels(): number {
return this.currentLayer.widthInPixels;
}
public get heightInPixels(): number {
return this.currentLayer.heightInPixels;
}
// Set current layer
// Set layer order?
// Get tile from x/y
// Get block of tiles
// Swap tiles around
// Delete tiles of certain type
// Erase tiles
}
}

58
Phaser/geom/Quad.ts Normal file
View file

@ -0,0 +1,58 @@
/// <reference path="../Game.ts" />
/**
* Phaser - Quad
*
* A Quad object is an area defined by its position, as indicated by its top-left corner (x,y) and width and height.
* Very much like a Rectangle only without all of the additional methods and properties of that class.
*/
module Phaser {
export class Quad {
/**
* Creates a new Quad object with the top-left corner specified by the x and y parameters and with the specified width and height parameters. If you call this function without parameters, a rectangle with x, y, width, and height properties set to 0 is created.
* @class Quad
* @constructor
* @param {Number} x The x coordinate of the top-left corner of the quad.
* @param {Number} y The y coordinate of the top-left corner of the quad.
* @param {Number} width The width of the quad.
* @param {Number} height The height of the quad.
* @return {Quad } This object
**/
constructor(x: number = 0, y: number = 0, width: number = 0, height: number = 0) {
this.setTo(x, y, width, height);
}
public x: number;
public y: number;
public width: number;
public height: number;
/**
* Sets the Quad to the specified size.
* @method setTo
* @param {Number} x The x coordinate of the top-left corner of the quad.
* @param {Number} y The y coordinate of the top-left corner of the quad.
* @param {Number} width The width of the quad.
* @param {Number} height The height of the quad.
* @return {Quad} This object
**/
public setTo(x: number, y: number, width: number, height: number): Quad {
this.x = x;
this.y = y;
this.width = width;
this.height = height;
return this;
}
}
}

7
Phaser/geom/Rectangle.ts
View file

@ -12,13 +12,14 @@ module Phaser {
export class Rectangle {
/**
* Creates a new Rectangle object with the top-left corner specified by the x and y parameters and with the specified width and height parameters. If you call this function without parameters, a rectangle with x, y, width, and height properties set to 0 is created.
* Creates a new Rectangle object with the top-left corner specified by the x and y parameters and with the specified width and height parameters.
* If you call this function without parameters, a rectangle with x, y, width, and height properties set to 0 is created.
* @class Rectangle
* @constructor
* @param {Number} x The x coordinate of the top-left corner of the rectangle.
* @param {Number} y The y coordinate of the top-left corner of the rectangle.
* @param {Number} width The width of the rectangle in pixels.
* @param {Number} height The height of the rectangle in pixels.
* @param {Number} width The width of the rectangle.
* @param {Number} height The height of the rectangle.
* @return {Rectangle} This rectangle object
**/
constructor(x: number = 0, y: number = 0, width: number = 0, height: number = 0) {

4
Phaser/phaser.js
View file

@ -1,7 +1,7 @@
/**
* Phaser
*
* v0.9.2 - April 20th 2013
* v0.9.3 - April 22nd 2013
*
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
*
@ -15,5 +15,5 @@
*/
var Phaser;
(function (Phaser) {
Phaser.VERSION = 'Phaser version 0.9.2';
Phaser.VERSION = 'Phaser version 0.9.3';
})(Phaser || (Phaser = {}));

173
Phaser/system/TilemapBuffer.ts
View file

@ -1,173 +0,0 @@
/// <reference path="../Game.ts" />
/**
* Phaser - TilemapBuffer
*
* Responsible for rendering a portion of a tilemap to the given Camera.
*/
module Phaser {
export class TilemapBuffer {
constructor(game: Game, camera: Camera, tilemap: Tilemap, texture, tileOffsets) {
//console.log('New TilemapBuffer created for Camera ' + camera.ID);
this._game = game;
this.camera = camera;
this._tilemap = tilemap;
this._texture = texture;
this._tileOffsets = tileOffsets;
//this.createCanvas();
}
private _game: Game;
private _tilemap: Tilemap;
private _texture;
private _tileOffsets;
private _startX: number = 0;
private _maxX: number = 0;
private _startY: number = 0;
private _maxY: number = 0;
private _tx: number = 0;
private _ty: number = 0;
private _dx: number = 0;
private _dy: number = 0;
private _oldCameraX: number = 0;
private _oldCameraY: number = 0;
private _dirty: bool = true;
private _columnData;
public camera: Camera;
public canvas: HTMLCanvasElement;
public context: CanvasRenderingContext2D;
private createCanvas() {
this.canvas = <HTMLCanvasElement> document.createElement('canvas');
this.canvas.width = this._game.stage.width;
this.canvas.height = this._game.stage.height;
this.context = this.canvas.getContext('2d');
}
public update() {
/*
if (this.camera.worldView.x !== this._oldCameraX || this.camera.worldView.y !== this._oldCameraY)
{
this._dirty = true;
}
this._oldCameraX = this.camera.worldView.x;
this._oldCameraY = this.camera.worldView.y;
*/
}
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
this._game.stage.context.fillStyle = color;
this._game.stage.context.fillText('TilemapBuffer', x, y);
this._game.stage.context.fillText('startX: ' + this._startX + ' endX: ' + this._maxX, x, y + 14);
this._game.stage.context.fillText('startY: ' + this._startY + ' endY: ' + this._maxY, x, y + 28);
this._game.stage.context.fillText('dx: ' + this._dx + ' dy: ' + this._dy, x, y + 42);
this._game.stage.context.fillText('Dirty: ' + this._dirty, x, y + 56);
}
public render(dx, dy): bool {
/*
if (this._dirty == false)
{
this._game.stage.context.drawImage(this.canvas, 0, 0);
return true;
}
*/
// Work out how many tiles we can fit into our camera and round it up for the edges
this._maxX = this._game.math.ceil(this.camera.width / this._tilemap.tileWidth) + 1;
this._maxY = this._game.math.ceil(this.camera.height / this._tilemap.tileHeight) + 1;
// And now work out where in the tilemap the camera actually is
this._startX = this._game.math.floor(this.camera.worldView.x / this._tilemap.tileWidth);
this._startY = this._game.math.floor(this.camera.worldView.y / this._tilemap.tileHeight);
// Tilemap bounds check
if (this._startX < 0)
{
this._startX = 0;
}
if (this._startY < 0)
{
this._startY = 0;
}
if (this._startX + this._maxX > this._tilemap.widthInTiles)
{
this._startX = this._tilemap.widthInTiles - this._maxX;
}
if (this._startY + this._maxY > this._tilemap.heightInTiles)
{
this._startY = this._tilemap.heightInTiles - this._maxY;
}
// Finally get the offset to avoid the blocky movement
this._dx = dx;
this._dy = dy;
this._dx += -(this.camera.worldView.x - (this._startX * this._tilemap.tileWidth));
this._dy += -(this.camera.worldView.y - (this._startY * this._tilemap.tileHeight));
this._tx = this._dx;
this._ty = this._dy;
for (var row = this._startY; row < this._startY + this._maxY; row++)
{
this._columnData = this._tilemap.mapData[row];
for (var tile = this._startX; tile < this._startX + this._maxX; tile++)
{
if (this._tileOffsets[this._columnData[tile]])
{
//this.context.drawImage(
this._game.stage.context.drawImage(
this._texture, // Source Image
this._tileOffsets[this._columnData[tile]].x, // Source X (location within the source image)
this._tileOffsets[this._columnData[tile]].y, // Source Y
this._tilemap.tileWidth, // Source Width
this._tilemap.tileHeight, // Source Height
this._tx, // Destination X (where on the canvas it'll be drawn)
this._ty, // Destination Y
this._tilemap.tileWidth, // Destination Width (always same as Source Width unless scaled)
this._tilemap.tileHeight // Destination Height (always same as Source Height unless scaled)
);
this._tx += this._tilemap.tileWidth;
}
}
this._tx = this._dx;
this._ty += this._tilemap.tileHeight;
}
//this._game.stage.context.drawImage(this.canvas, 0, 0);
//console.log('dirty cleaned');
//this._dirty = false;
return true;
}
}
}

233
Phaser/system/TilemapLayer.ts Normal file
View file

@ -0,0 +1,233 @@
/// <reference path="../Game.ts" />
/**
* Phaser - TilemapLayer
*
* A Tilemap Layer. Tiled format maps can have multiple overlapping layers.
*/
module Phaser {
export class TilemapLayer {
constructor(game: Game, key: string, mapFormat: number, name: string, tileWidth: number, tileHeight: number) {
this._game = game;
this.name = name;
this.mapFormat = mapFormat;
this.tileWidth = tileWidth;
this.tileHeight = tileHeight;
this.boundsInTiles = new Rectangle();
//this.scrollFactor = new MicroPoint(1, 1);
this.mapData = [];
this._texture = this._game.cache.getImage(key);
this.parseTileOffsets();
}
private _game: Game;
private _texture;
private _tileOffsets;
private _startX: number = 0;
private _startY: number = 0;
private _maxX: number = 0;
private _maxY: number = 0;
private _tx: number = 0;
private _ty: number = 0;
private _dx: number = 0;
private _dy: number = 0;
private _oldCameraX: number = 0;
private _oldCameraY: number = 0;
private _columnData;
public name: string;
public alpha: number = 1;
public visible: bool = true;
//public scrollFactor: MicroPoint;
public orientation: string;
public properties: {};
public mapData;
public mapFormat: number;
public boundsInTiles: Rectangle;
public tileWidth: number;
public tileHeight: number;
public widthInTiles: number = 0;
public heightInTiles: number = 0;
public widthInPixels: number = 0;
public heightInPixels: number = 0;
public addColumn(column) {
var data = [];
for (var c = 0; c < column.length; c++)
{
data[c] = parseInt(column[c]);
}
if (this.widthInTiles == 0)
{
this.widthInTiles = data.length;
this.widthInPixels = this.widthInTiles * this.tileWidth;
}
this.mapData.push(data);
this.heightInTiles++;
this.heightInPixels += this.tileHeight;
}
public updateBounds() {
this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
}
private parseTileOffsets() {
this._tileOffsets = [];
var i = 0;
if (this.mapFormat == Tilemap.FORMAT_TILED_JSON)
{
// For some reason Tiled counts from 1 not 0
this._tileOffsets[0] = null;
i = 1;
}
for (var ty = 0; ty < this._texture.height; ty += this.tileHeight)
{
for (var tx = 0; tx < this._texture.width; tx += this.tileWidth)
{
this._tileOffsets[i] = { x: tx, y: ty };
i++;
}
}
}
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
this._game.stage.context.fillStyle = color;
this._game.stage.context.fillText('TilemapLayer: ' + this.name, x, y);
this._game.stage.context.fillText('startX: ' + this._startX + ' endX: ' + this._maxX, x, y + 14);
this._game.stage.context.fillText('startY: ' + this._startY + ' endY: ' + this._maxY, x, y + 28);
this._game.stage.context.fillText('dx: ' + this._dx + ' dy: ' + this._dy, x, y + 42);
}
public render(camera: Camera, dx, dy): bool {
if (this.visible === false || this.alpha < 0.1)
{
return false;
}
// Work out how many tiles we can fit into our camera and round it up for the edges
this._maxX = this._game.math.ceil(camera.width / this.tileWidth) + 1;
this._maxY = this._game.math.ceil(camera.height / this.tileHeight) + 1;
// And now work out where in the tilemap the camera actually is
this._startX = this._game.math.floor(camera.worldView.x / this.tileWidth);
this._startY = this._game.math.floor(camera.worldView.y / this.tileHeight);
// Tilemap bounds check
if (this._startX < 0)
{
this._startX = 0;
}
if (this._startY < 0)
{
this._startY = 0;
}
if (this._startX + this._maxX > this.widthInTiles)
{
this._startX = this.widthInTiles - this._maxX;
}
if (this._startY + this._maxY > this.heightInTiles)
{
this._startY = this.heightInTiles - this._maxY;
}
// Finally get the offset to avoid the blocky movement
this._dx = dx;
this._dy = dy;
this._dx += -(camera.worldView.x - (this._startX * this.tileWidth));
this._dy += -(camera.worldView.y - (this._startY * this.tileHeight));
this._tx = this._dx;
this._ty = this._dy;
// 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);
}
*/
// Alpha
if (this.alpha !== 1)
{
var globalAlpha = this._game.stage.context.globalAlpha;
this._game.stage.context.globalAlpha = this.alpha;
}
for (var row = this._startY; row < this._startY + this._maxY; row++)
{
this._columnData = this.mapData[row];
for (var tile = this._startX; tile < this._startX + this._maxX; tile++)
{
if (this._tileOffsets[this._columnData[tile]])
{
this._game.stage.context.drawImage(
this._texture, // Source Image
this._tileOffsets[this._columnData[tile]].x, // Source X (location within the source image)
this._tileOffsets[this._columnData[tile]].y, // Source Y
this.tileWidth, // Source Width
this.tileHeight, // Source Height
this._tx, // Destination X (where on the canvas it'll be drawn)
this._ty, // Destination Y
this.tileWidth, // Destination Width (always same as Source Width unless scaled)
this.tileHeight // Destination Height (always same as Source Height unless scaled)
);
}
this._tx += this.tileWidth;
}
this._tx = this._dx;
this._ty += this.tileHeight;
}
if (globalAlpha > -1)
{
this._game.stage.context.globalAlpha = globalAlpha;
}
return true;
}
}
}

15
README.md
View file

@ -1,9 +1,9 @@
Phaser
======
Version 0.9.2
Version 0.9.3
20th April 2013
21st April 2013
By Richard Davey, [Photon Storm](http://www.photonstorm.com)
@ -18,6 +18,17 @@ For support post to the Phaser board on the [HTML5 Game Devs forum](http://www.h
Change Log
----------
V0.9.3
* Fixed issues with Group not adding reference to Game to newly created objects.
* Added more robust frame checking into AnimationManager
* Re-built Tilemap handling from scratch to allow for proper layered maps (as exported from Tiled / Mappy)
* Tilemap no longer requires a buffer per Camera (in prep for WebGL support)
* Added shiftSinTable and shiftCosTable to the GameMath class to allow for quick iteration through the data tables.
* Added the new ScrollZone game object. Endlessly useful but especially for scrolling backdrops. Created several example tests.
* Removed the need for DynamicTextures to require a key property and updated test cases.
V0.9.2
* Fixed issue with create not being called if there was an empty init method.

16
Tests/Tests.csproj
View file

@ -101,6 +101,22 @@
<DependentUpon>screen grab.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="sprites\align.ts" />
<TypeScriptCompile Include="scrollzones\simple scrollzone.ts" />
<TypeScriptCompile Include="scrollzones\ballscroller.ts" />
<Content Include="scrollzones\ballscroller.js">
<DependentUpon>ballscroller.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="scrollzones\parallax.ts" />
<Content Include="scrollzones\parallax.js">
<DependentUpon>parallax.ts</DependentUpon>
</Content>
<Content Include="scrollzones\simple scrollzone.js">
<DependentUpon>simple scrollzone.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="scrollzones\texture repeat.ts" />
<Content Include="scrollzones\texture repeat.js">
<DependentUpon>texture repeat.ts</DependentUpon>
</Content>
<Content Include="sprites\align.js">
<DependentUpon>align.ts</DependentUpon>
</Content>

50
Tests/assets/maps/multi-layer-test.json Normal file
View file

File diff suppressed because one or more lines are too long

BIN
Tests/assets/pics/auto_scroll_landscape.png
View file

Binary file not shown.
Side by side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.8 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
Tests/assets/pics/cockpit.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 7.1 KiB

BIN
Tests/assets/pics/cougar_dragonsun.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 59 KiB

BIN
Tests/assets/pics/devilstar_demo_download_disk.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 20 KiB

BIN
Tests/assets/pics/jim_sachs_time_crystal.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 6.9 KiB

BIN
Tests/assets/pics/scrollframe.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

40
Tests/misc/screen grab.js Normal file
View file

@ -0,0 +1,40 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
myGame.loader.load();
}
var car;
var map;
var hasGrabbed = false;
function create() {
myGame.camera.deadzone = new Phaser.Rectangle(64, 64, myGame.stage.width - 128, myGame.stage.height - 128);
map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
// for now like this, but change to auto soon
myGame.world.setSize(map.widthInPixels, map.heightInPixels);
myGame.camera.setBounds(0, 0, myGame.world.width, myGame.world.height);
car = myGame.createSprite(300, 100, 'car');
myGame.camera.follow(car);
}
function update() {
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 0;
car.angularAcceleration = 0;
if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
car.angularVelocity = -200;
} else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
car.angularVelocity = 200;
}
if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
var motion = myGame.motion.velocityFromAngle(car.angle, 300);
car.velocity.copyFrom(motion);
}
if(myGame.input.keyboard.justReleased(Phaser.Keyboard.SPACEBAR) && hasGrabbed == false) {
console.log('graboids');
hasGrabbed = true;
}
}
})();

67
Tests/misc/screen grab.ts Normal file
View file

@ -0,0 +1,67 @@
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
myGame.loader.load();
}
var car: Phaser.Sprite;
var map: Phaser.Tilemap;
var hasGrabbed: bool = false;
function create() {
myGame.camera.deadzone = new Phaser.Rectangle(64, 64, myGame.stage.width - 128, myGame.stage.height - 128);
map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
// for now like this, but change to auto soon
myGame.world.setSize(map.widthInPixels, map.heightInPixels);
myGame.camera.setBounds(0, 0, myGame.world.width, myGame.world.height);
car = myGame.createSprite(300, 100, 'car');
myGame.camera.follow(car);
}
function update() {
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 0;
car.angularAcceleration = 0;
if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
car.angularVelocity = -200;
}
else if (myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
{
car.angularVelocity = 200;
}
if (myGame.input.keyboard.isDown(Phaser.Keyboard.UP))
{
var motion:Phaser.Point = myGame.motion.velocityFromAngle(car.angle, 300);
car.velocity.copyFrom(motion);
}
if (myGame.input.keyboard.justReleased(Phaser.Keyboard.SPACEBAR) && hasGrabbed == false)
{
console.log('graboids');
hasGrabbed = true;
}
}
})();

1087
Tests/phaser.js
View file

File diff suppressed because it is too large Load diff

22
Tests/scrollzones/ballscroller.js Normal file
View file

@ -0,0 +1,22 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('balls', 'assets/sprites/balls.png');
myGame.loader.load();
}
var scroller;
function create() {
// This creates a ScrollZone the size of the game window
// However the source image (balls.png) is only 102x17 so it will automatically create a fill pattern
scroller = myGame.createScrollZone('balls', 0, 0, 800, 600);
// Some sin/cos data for the movement
myGame.math.sinCosGenerator(256, 4, 4, 2);
}
function update() {
// Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
scroller.scrollSpeed.x = myGame.math.shiftSinTable();
scroller.scrollSpeed.y = myGame.math.shiftCosTable();
}
})();

37
Tests/scrollzones/ballscroller.ts Normal file
View file

@ -0,0 +1,37 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('balls', 'assets/sprites/balls.png');
myGame.loader.load();
}
var scroller: Phaser.ScrollZone;
function create() {
// This creates a ScrollZone the size of the game window
// However the source image (balls.png) is only 102x17 so it will automatically create a fill pattern
scroller = myGame.createScrollZone('balls', 0, 0, 800, 600);
// Some sin/cos data for the movement
myGame.math.sinCosGenerator(256, 4, 4, 2);
}
function update() {
// Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
scroller.scrollSpeed.x = myGame.math.shiftSinTable();
scroller.scrollSpeed.y = myGame.math.shiftCosTable();
}
})();

32
Tests/scrollzones/parallax.js Normal file
View file

@ -0,0 +1,32 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
myGame.loader.addImageFile('starray', 'assets/pics/auto_scroll_landscape.png');
myGame.loader.load();
}
function create() {
// In this example we're creating a whole bunch of ScrollZones working on the same image
var y = 10;
var speed = 6;
speed -= 0.3;
// The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
for(var z = 0; z < 31; z++) {
var zone = myGame.createScrollZone('starray', 0, y, 640, 10);
zone.scrollSpeed.setTo(speed, 0);
zone.offset.y = y;
if(z <= 14) {
speed -= 0.3;
} else {
speed += 0.3;
}
if(z == 14) {
y = 240;
speed += 0.3;
} else {
y += 10;
}
}
}
})();

54
Tests/scrollzones/parallax.ts Normal file
View file

@ -0,0 +1,54 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
myGame.loader.addImageFile('starray', 'assets/pics/auto_scroll_landscape.png');
myGame.loader.load();
}
function create() {
// In this example we're creating a whole bunch of ScrollZones working on the same image
var y:number = 10;
var speed:number = 6;
speed -= 0.3;
// The image consists of 10px high scrolling layers, this creates them quickly (top = fastest, getting slower as we move down)
for (var z:number = 0; z < 31; z++)
{
var zone:Phaser.ScrollZone = myGame.createScrollZone('starray', 0, y, 640, 10);
zone.scrollSpeed.setTo(speed, 0);
zone.offset.y = y;
if (z <= 14)
{
speed -= 0.3;
}
else
{
speed += 0.3;
}
if (z == 14)
{
y = 240;
speed += 0.3;
}
else
{
y += 10;
}
}
}
})();

20
Tests/scrollzones/simple scrollzone.js Normal file
View file

@ -0,0 +1,20 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
myGame.loader.addImageFile('dragonsun', 'assets/pics/cougar_dragonsun.png');
myGame.loader.addImageFile('overlay', 'assets/pics/scrollframe.png');
myGame.loader.load();
}
var scroller;
function create() {
// This creates our ScrollZone. It is positioned at x32 y32 (world coodinates)
// and is a size of 352x240 (which matches the window in our overlay image)
scroller = myGame.createScrollZone('dragonsun', 32, 32, 352, 240);
// The speed of the scroll movement
scroller.scrollSpeed.x = 4;
scroller.scrollSpeed.y = 2;
myGame.createSprite(0, 0, 'overlay');
}
})();

33
Tests/scrollzones/simple scrollzone.ts Normal file
View file

@ -0,0 +1,33 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create);
function init() {
myGame.loader.addImageFile('dragonsun', 'assets/pics/cougar_dragonsun.png');
myGame.loader.addImageFile('overlay', 'assets/pics/scrollframe.png');
myGame.loader.load();
}
var scroller: Phaser.ScrollZone;
function create() {
// This creates our ScrollZone. It is positioned at x32 y32 (world coodinates)
// and is a size of 352x240 (which matches the window in our overlay image)
scroller = myGame.createScrollZone('dragonsun', 32, 32, 352, 240);
// The speed of the scroll movement
scroller.scrollSpeed.x = 4;
scroller.scrollSpeed.y = 2;
myGame.createSprite(0, 0, 'overlay');
}
})();

21
Tests/scrollzones/texture repeat.js Normal file
View file

@ -0,0 +1,21 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('balls', 'assets/misc/starfield.jpg');
myGame.loader.load();
}
var scroller;
var ship;
function create() {
// This creates a ScrollZone the size of the game window
// The texture will repeat automatically
scroller = myGame.createScrollZone('balls', 0, 0, 800, 600);
}
function update() {
// Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
scroller.scrollSpeed.x = myGame.math.shiftSinTable();
scroller.scrollSpeed.y = myGame.math.shiftCosTable();
}
})();

36
Tests/scrollzones/texture repeat.ts Normal file
View file

@ -0,0 +1,36 @@
/// <reference path="../../Phaser/Game.ts" />
/// <reference path="../../Phaser/gameobjects/ScrollZone.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addImageFile('balls', 'assets/misc/starfield.jpg');
myGame.loader.load();
}
var scroller: Phaser.ScrollZone;
var ship: Phaser.Sprite;
function create() {
// This creates a ScrollZone the size of the game window
// The texture will repeat automatically
scroller = myGame.createScrollZone('balls', 0, 0, 800, 600);
}
function update() {
// Cycle through the wave data and apply it to the scroll speed (causes the circular wave motion)
scroller.scrollSpeed.x = myGame.math.shiftSinTable();
scroller.scrollSpeed.y = myGame.math.shiftCosTable();
}
})();

2
Tests/sprites/dynamic texture 1.js
View file

@ -8,7 +8,7 @@
var wobblyBall;
function create() {
// Create our DynamicTexture
wobblyBall = myGame.createDynamicTexture('wobbly', 32, 64);
wobblyBall = myGame.createDynamicTexture(32, 64);
// And apply it to 100 randomly positioned sprites
for(var i = 0; i < 100; i++) {
var temp = myGame.createSprite(myGame.world.randomX, myGame.world.randomY);

2
Tests/sprites/dynamic texture 1.ts
View file

@ -17,7 +17,7 @@
function create() {
// Create our DynamicTexture
wobblyBall = myGame.createDynamicTexture('wobbly', 32, 64);
wobblyBall = myGame.createDynamicTexture(32, 64);
// And apply it to 100 randomly positioned sprites
for (var i = 0; i < 100; i++)

2
Tests/sprites/dynamic texture 2.js
View file

@ -12,7 +12,7 @@
function create() {
myGame.camera.backgroundColor = 'rgb(82,154,206)';
// Create our DynamicTexture
wobble = myGame.createDynamicTexture('wobbly', 48, 100);
wobble = myGame.createDynamicTexture(48, 100);
slime = myGame.createSprite(200, 300);
slime.width = 48;
slime.height = 100;

2
Tests/sprites/dynamic texture 2.ts
View file

@ -22,7 +22,7 @@
myGame.camera.backgroundColor = 'rgb(82,154,206)';
// Create our DynamicTexture
wobble = myGame.createDynamicTexture('wobbly', 48, 100);
wobble = myGame.createDynamicTexture(48, 100);
slime = myGame.createSprite(200, 300);
slime.width = 48;

23
Tests/tilemap/basic tilemap.js
View file

@ -1,9 +1,11 @@
/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
// Tiled JSON Test
myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
//myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
myGame.loader.addTextFile('jsontest', 'assets/maps/multi-layer-test.json');
myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
// CSV Test
myGame.loader.addTextFile('csvtest', 'assets/maps/catastrophi_level2.csv');
@ -16,19 +18,14 @@
var bigCam;
function create() {
myGame.camera.deadzone = new Phaser.Rectangle(64, 64, myGame.stage.width - 128, myGame.stage.height - 128);
bigCam = myGame.createCamera(30, 30, 200, 200);
bigCam.showBorder = true;
bigCam.scale.setTo(1.5, 1.5);
//map = myGame.createTilemap('jsontiles', 'jsontest', Tilemap.FORMAT_TILED_JSON);
map = myGame.createTilemap('csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, 16, 16);
// for now like this, but change to auto soon
myGame.world.setSize(map.widthInPixels, map.heightInPixels);
console.log('world size', map.widthInPixels, map.heightInPixels);
myGame.camera.setBounds(0, 0, myGame.world.width, myGame.world.height);
bigCam.setBounds(0, 0, myGame.world.width, myGame.world.height);
//bigCam = myGame.createCamera(30, 30, 200, 200);
//bigCam.showBorder = true;
//bigCam.scale.setTo(1.5, 1.5);
//map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
map = myGame.createTilemap('csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);
car = myGame.createSprite(300, 100, 'car');
myGame.camera.follow(car);
bigCam.follow(car, Phaser.Camera.STYLE_LOCKON);
//bigCam.follow(car, Phaser.Camera.STYLE_LOCKON);
myGame.onRenderCallback = render;
}
function update() {
@ -48,6 +45,6 @@
}
}
function render() {
map.renderDebugInfo(400, 16);
//map.renderDebugInfo(400, 16);
}
})();

25
Tests/tilemap/basic tilemap.ts
View file

@ -1,3 +1,4 @@
/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
/// <reference path="../../Phaser/Game.ts" />
(function () {
@ -7,7 +8,8 @@
function init() {
// Tiled JSON Test
myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
//myGame.loader.addTextFile('jsontest', 'assets/maps/test.json');
myGame.loader.addTextFile('jsontest', 'assets/maps/multi-layer-test.json');
myGame.loader.addImageFile('jsontiles', 'assets/tiles/platformer_tiles.png');
// CSV Test
@ -28,24 +30,17 @@
myGame.camera.deadzone = new Phaser.Rectangle(64, 64, myGame.stage.width - 128, myGame.stage.height - 128);
bigCam = myGame.createCamera(30, 30, 200, 200);
bigCam.showBorder = true;
bigCam.scale.setTo(1.5, 1.5);
//bigCam = myGame.createCamera(30, 30, 200, 200);
//bigCam.showBorder = true;
//bigCam.scale.setTo(1.5, 1.5);
//map = myGame.createTilemap('jsontiles', 'jsontest', Tilemap.FORMAT_TILED_JSON);
map = myGame.createTilemap('csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, 16, 16);
// for now like this, but change to auto soon
myGame.world.setSize(map.widthInPixels, map.heightInPixels);
console.log('world size', map.widthInPixels, map.heightInPixels);
myGame.camera.setBounds(0, 0, myGame.world.width, myGame.world.height);
bigCam.setBounds(0, 0, myGame.world.width, myGame.world.height);
//map = myGame.createTilemap('jsontiles', 'jsontest', Phaser.Tilemap.FORMAT_TILED_JSON);
map = myGame.createTilemap('csvtiles', 'csvtest', Phaser.Tilemap.FORMAT_CSV, true, 16, 16);
car = myGame.createSprite(300, 100, 'car');
myGame.camera.follow(car);
bigCam.follow(car, Phaser.Camera.STYLE_LOCKON);
//bigCam.follow(car, Phaser.Camera.STYLE_LOCKON);
myGame.onRenderCallback = render;
@ -80,7 +75,7 @@
function render {
map.renderDebugInfo(400, 16);
//map.renderDebugInfo(400, 16);
}

11857
build/phaser.js Normal file
View file

File diff suppressed because it is too large Load diff