Saving first iteration of the ScrollZone game object.
|
@ -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) {
|
||||
|
||||
this.currentFrame = this._frameData.getFrame(value);
|
||||
|
||||
if (this.currentFrame !== null)
|
||||
if (this._frameData.getFrame(value) !== null)
|
||||
{
|
||||
this.currentFrame = this._frameData.getFrame(value);
|
||||
|
||||
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) {
|
||||
|
||||
this.currentFrame = this._frameData.getFrameByName(value);
|
||||
|
||||
if (this.currentFrame !== null)
|
||||
if (this._frameData.getFrameByName(value) !== null)
|
||||
{
|
||||
this.currentFrame = this._frameData.getFrameByName(value);
|
||||
|
||||
this._parent.bounds.width = this.currentFrame.width;
|
||||
this._parent.bounds.height = this.currentFrame.height;
|
||||
this._frameIndex = this.currentFrame.index;
|
||||
|
|
|
@ -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;
|
||||
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
/**
|
||||
|
|
|
@ -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));
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -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" />
|
||||
|
|
|
@ -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';
|
||||
|
||||
}
|
||||
|
|
|
@ -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 {
|
||||
|
|
|
@ -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
|
@ -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;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
|
@ -1,270 +1,155 @@
|
|||
/// <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;
|
||||
}
|
||||
|
||||
// We have a new row of tiles
|
||||
this.heightInTiles++;
|
||||
|
||||
// Parse it
|
||||
for (var c = 0; c < column.length; c++)
|
||||
{
|
||||
output[c] = parseInt(column[c]);
|
||||
}
|
||||
|
||||
this.mapData.push(output);
|
||||
layer.addColumn(column);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
//console.log('final map array');
|
||||
//console.log(this.mapData);
|
||||
layer.updateBounds();
|
||||
|
||||
if (this.widthInTiles > 0)
|
||||
{
|
||||
this.widthInPixels = this.tileWidth * this.widthInTiles;
|
||||
}
|
||||
this.currentLayer = layer;
|
||||
|
||||
if (this.heightInTiles > 0)
|
||||
{
|
||||
this.heightInPixels = this.tileHeight * this.heightInTiles;
|
||||
}
|
||||
|
||||
this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
|
||||
this._layers.push(layer);
|
||||
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
// 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
|
||||
|
||||
var c = 0;
|
||||
var row;
|
||||
|
||||
for (var i = 0; i < json.layers[0].data.length; i++)
|
||||
for (var i = 0; i < json.layers.length; i++)
|
||||
{
|
||||
if (c == 0)
|
||||
var layer: TilemapLayer = new TilemapLayer(this._game, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
|
||||
|
||||
layer.alpha = json.layers[i].opacity;
|
||||
layer.visible = json.layers[i].visible;
|
||||
|
||||
var c = 0;
|
||||
var row;
|
||||
|
||||
for (var t = 0; t < json.layers[i].data.length; t++)
|
||||
{
|
||||
row = [];
|
||||
if (c == 0)
|
||||
{
|
||||
row = [];
|
||||
}
|
||||
|
||||
row.push(json.layers[i].data[t]);
|
||||
|
||||
c++;
|
||||
|
||||
if (c == json.layers[i].width)
|
||||
{
|
||||
layer.addColumn(row);
|
||||
c = 0;
|
||||
}
|
||||
}
|
||||
|
||||
row.push(json.layers[0].data[i]);
|
||||
layer.updateBounds();
|
||||
|
||||
c++;
|
||||
this.currentLayer = layer;
|
||||
|
||||
if (c == this.widthInTiles)
|
||||
{
|
||||
this.mapData.push(row);
|
||||
c = 0;
|
||||
}
|
||||
}
|
||||
this._layers.push(layer);
|
||||
|
||||
//console.log('mapData');
|
||||
//console.log(this.mapData);
|
||||
|
||||
}
|
||||
|
||||
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++;
|
||||
}
|
||||
}
|
||||
|
||||
public get widthInPixels(): number {
|
||||
return this.currentLayer.widthInPixels;
|
||||
}
|
||||
|
||||
/*
|
||||
// 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 get heightInPixels(): number {
|
||||
return this.currentLayer.heightInPixels;
|
||||
}
|
||||
|
||||
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
|
||||
this._tilemapBuffers[0].renderDebugInfo(x, y, color);
|
||||
}
|
||||
// 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
|
||||
|
||||
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;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
|
58
Phaser/geom/Quad.ts
Normal 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;
|
||||
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
|
@ -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) {
|
||||
|
|
|
@ -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 = {}));
|
||||
|
|
|
@ -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
|
@ -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
|
@ -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.
|
||||
|
|
|
@ -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
Before Width: | Height: | Size: 7.8 KiB After Width: | Height: | Size: 11 KiB |
BIN
Tests/assets/pics/cockpit.png
Normal file
After Width: | Height: | Size: 7.1 KiB |
BIN
Tests/assets/pics/cougar_dragonsun.png
Normal file
After Width: | Height: | Size: 59 KiB |
BIN
Tests/assets/pics/devilstar_demo_download_disk.png
Normal file
After Width: | Height: | Size: 20 KiB |
BIN
Tests/assets/pics/jim_sachs_time_crystal.png
Normal file
After Width: | Height: | Size: 6.9 KiB |
BIN
Tests/assets/pics/scrollframe.png
Normal file
After Width: | Height: | Size: 32 KiB |
40
Tests/misc/screen grab.js
Normal 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
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})();
|
1095
Tests/phaser.js
22
Tests/scrollzones/ballscroller.js
Normal 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
|
@ -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
|
@ -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
|
@ -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
|
@ -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
|
@ -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
|
@ -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
|
@ -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();
|
||||
|
||||
}
|
||||
|
||||
})();
|
|
@ -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);
|
||||
|
|
|
@ -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++)
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
})();
|
||||
|
|
|
@ -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);
|
||||
|
||||
}
|
||||
|
||||
|
|