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

Getting tilemap collision up and running

Browse Source
This commit is contained in:
Richard Davey
2013-04-25 01:55:56 +01:00
parent 53d8e4da2e
commit b8ab13fec8
25 changed files with 1109 additions and 198 deletions
Download Patch File Download Diff File Expand all files Collapse all files
Phaser/Collision.ts
+115 -14
View File
@@ -604,7 +604,7 @@ module Phaser {
}
/**
* The main collision resolution in flixel.
* The main collision resolution.
*
* @param Object1 Any <code>Sprite</code>.
* @param Object2 Any other <code>Sprite</code>.
@@ -620,6 +620,120 @@ module Phaser {
}
/**
* Collision resolution specifically for GameObjects vs. Tiles.
*
* @param Object1 Any <code>GameObject</code>.
* @param Object2 Any <code>Tile</code>.
*
* @return Whether the objects in fact touched and were separated.
*/
public static separateTile(object:GameObject, tile:Tile): bool {
//var separatedX: bool = Collision.separateTileX(object, tile);
//var separatedY: bool = Collision.separateTileY(object, tile);
//return separatedX || separatedY;
return false;
}
/*
public static separateTileX(object:GameObject, tile:Tile): bool {
//First, get the two object deltas
var overlap: number = 0;
var obj1delta: number = object.x - object.last.x;
var obj2delta: number = tile.x;
if (obj1delta != obj2delta)
{
//Check if the X hulls actually overlap
var obj1deltaAbs: number = (obj1delta > 0) ? obj1delta : -obj1delta;
var obj2deltaAbs: number = (obj2delta > 0) ? obj2delta : -obj2delta;
//var obj1rect: Rectangle = new Rectangle(Object1.x - ((obj1delta > 0) ? obj1delta : 0), Object1.last.y, Object1.width + ((obj1delta > 0) ? obj1delta : -obj1delta), Object1.height);
//var obj2rect: Rectangle = new Rectangle(Object2.x - ((obj2delta > 0) ? obj2delta : 0), Object2.last.y, Object2.width + ((obj2delta > 0) ? obj2delta : -obj2delta), Object2.height);
//if ((obj1rect.x + obj1rect.width > obj2rect.x) && (obj1rect.x < obj2rect.x + obj2rect.width) && (obj1rect.y + obj1rect.height > obj2rect.y) && (obj1rect.y < obj2rect.y + obj2rect.height))
//{
var maxOverlap: number = obj1deltaAbs + obj2deltaAbs + Collision.OVERLAP_BIAS;
//If they did overlap (and can), figure out by how much and flip the corresponding flags
if (obj1delta > obj2delta)
{
overlap = Object1.x + Object1.width - Object2.x;
if ((overlap > maxOverlap) || !(Object1.allowCollisions & Collision.RIGHT) || !(Object2.allowCollisions & Collision.LEFT))
{
overlap = 0;
}
else
{
Object1.touching |= Collision.RIGHT;
Object2.touching |= Collision.LEFT;
}
}
else if (obj1delta < obj2delta)
{
overlap = Object1.x - Object2.width - Object2.x;
if ((-overlap > maxOverlap) || !(Object1.allowCollisions & Collision.LEFT) || !(Object2.allowCollisions & Collision.RIGHT))
{
overlap = 0;
}
else
{
Object1.touching |= Collision.LEFT;
Object2.touching |= Collision.RIGHT;
}
}
}
}
//Then adjust their positions and velocities accordingly (if there was any overlap)
if (overlap != 0)
{
var obj1v: number = Object1.velocity.x;
var obj2v: number = Object2.velocity.x;
if (!obj1immovable && !obj2immovable)
{
overlap *= 0.5;
Object1.x = Object1.x - overlap;
Object2.x += overlap;
var obj1velocity: number = Math.sqrt((obj2v * obj2v * Object2.mass) / Object1.mass) * ((obj2v > 0) ? 1 : -1);
var obj2velocity: number = Math.sqrt((obj1v * obj1v * Object1.mass) / Object2.mass) * ((obj1v > 0) ? 1 : -1);
var average: number = (obj1velocity + obj2velocity) * 0.5;
obj1velocity -= average;
obj2velocity -= average;
Object1.velocity.x = average + obj1velocity * Object1.elasticity;
Object2.velocity.x = average + obj2velocity * Object2.elasticity;
}
else if (!obj1immovable)
{
Object1.x = Object1.x - overlap;
Object1.velocity.x = obj2v - obj1v * Object1.elasticity;
}
else if (!obj2immovable)
{
Object2.x += overlap;
Object2.velocity.x = obj1v - obj2v * Object2.elasticity;
}
return true;
}
else
{
return false;
}
}
*/
/**
* The X-axis component of the object separation process.
*
@@ -639,19 +753,6 @@ module Phaser {
return false;
}
//If one of the objects is a tilemap, just pass it off.
/*
if (typeof Object1 === 'Tilemap')
{
return Object1.overlapsWithCallback(Object2, separateX);
}
if (typeof Object2 === 'Tilemap')
{
return Object2.overlapsWithCallback(Object1, separateX, true);
}
*/
//First, get the two object deltas
var overlap: number = 0;
var obj1delta: number = Object1.x - Object1.last.x;
Phaser/Game.ts
+3
View File
@@ -35,6 +35,9 @@
*
* This is where the magic happens. The Game object is the heart of your game,
* providing quick access to common functions and handling the boot process.
*
* "Hell, there are no rules here - we're trying to accomplish something."
* Thomas A. Edison
*/
module Phaser {
Phaser/Phaser.ts
+2 -2
View File
@@ -1,7 +1,7 @@
/**
* Phaser
*
* v0.9.3 - April 24th 2013
* v0.9.4 - April 24th 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.3';
export var VERSION: string = 'Phaser version 0.9.4';
}
Phaser/gameobjects/GameObject.ts
+2
View File
@@ -89,6 +89,8 @@ module Phaser {
// rotationOffset to 90 and it would correspond correctly with Phasers rotation system
public rotationOffset: number = 0;
public renderRotation: bool = true;
// Physics properties
public immovable: bool;
Phaser/gameobjects/Sprite.ts
+1 -1
View File
@@ -229,7 +229,7 @@ module Phaser {
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.rotationOffset !== 0)
if (this.renderRotation == true && (this.angle !== 0 || this.rotationOffset !== 0))
{
this._game.stage.context.rotate((this.rotationOffset + this.angle) * (Math.PI / 180));
}
Phaser/gameobjects/Tilemap.ts
+105 -10
View File
@@ -1,6 +1,7 @@
/// <reference path="../Game.ts" />
/// <reference path="GameObject.ts" />
/// <reference path="../system/TilemapLayer.ts" />
/// <reference path="../system/Tile.ts" />
/**
* Phaser - Tilemap
@@ -19,7 +20,8 @@ module Phaser {
this.isGroup = false;
this._layers = [];
this.tiles = [];
this.layers = [];
this.mapFormat = format;
@@ -41,11 +43,11 @@ module Phaser {
}
private _layers : TilemapLayer[];
public static FORMAT_CSV: number = 0;
public static FORMAT_TILED_JSON: number = 1;
public tiles : Tile[];
public layers : TilemapLayer[];
public currentLayer: TilemapLayer;
public mapFormat: number;
@@ -57,9 +59,9 @@ module Phaser {
if (this.cameraBlacklist.indexOf(camera.ID) == -1)
{
// Loop through the layers
for (var i = 0; i < this._layers.length; i++)
for (var i = 0; i < this.layers.length; i++)
{
this._layers[i].render(camera, cameraOffsetX, cameraOffsetY);
this.layers[i].render(camera, cameraOffsetX, cameraOffsetY);
}
}
@@ -67,7 +69,7 @@ module Phaser {
private parseCSV(data: string, key: string, tileWidth: number, tileHeight: number) {
var layer: TilemapLayer = new TilemapLayer(this._game, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this._layers.length.toString(), tileWidth, tileHeight);
var layer: TilemapLayer = new TilemapLayer(this._game, this, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this.layers.length.toString(), tileWidth, tileHeight);
// Trim any rogue whitespace from the data
data = data.trim();
@@ -85,10 +87,13 @@ module Phaser {
}
layer.updateBounds();
var tileQuantity = layer.parseTileOffsets();
this.currentLayer = layer;
this._layers.push(layer);
this.layers.push(layer);
this.generateTiles(tileQuantity);
}
@@ -101,10 +106,12 @@ module Phaser {
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);
var layer: TilemapLayer = new TilemapLayer(this._game, this, 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;
layer.tileMargin = json.tilesets[0].margin;
layer.tileSpacing = json.tilesets[0].spacing;
var c = 0;
var row;
@@ -129,12 +136,25 @@ module Phaser {
layer.updateBounds();
var tileQuantity = layer.parseTileOffsets();
this.currentLayer = layer;
this._layers.push(layer);
this.layers.push(layer);
}
this.generateTiles(tileQuantity);
}
private generateTiles(qty:number) {
for (var i = 0; i < qty; i++)
{
this.tiles.push(new Tile(this._game, this, i, this.currentLayer.tileWidth, this.currentLayer.tileHeight));
}
}
public get widthInPixels(): number {
@@ -145,9 +165,84 @@ module Phaser {
return this.currentLayer.heightInPixels;
}
// Tile Collision
public setCollisionRange(start: number, end: number, collision?:number = Collision.ANY) {
for (var i = start; i < end; i++)
{
this.tiles[i].allowCollisions = collision;
}
}
public setCollisionByIndex(values:number[], collision?:number = Collision.ANY) {
for (var i = 0; i < values.length; i++)
{
this.tiles[values[i]].allowCollisions = collision;
}
}
// Tile Management
public getTile(x: number, y: number, layer?: number = 0):Tile {
return this.tiles[this.layers[layer].getTileIndex(x, y)];
}
public getTileFromWorldXY(x: number, y: number, layer?: number = 0):Tile {
return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)];
}
public getTileFromInputXY(layer?: number = 0):Tile {
return this.tiles[this.layers[layer].getTileFromWorldXY(this._game.input.worldX, this._game.input.worldY)];
}
public getTileOverlaps(object: GameObject) {
return this.currentLayer.getTileOverlaps(object);
}
// COLLIDE
public collide(objectOrGroup = null, callback = null): bool {
if (objectOrGroup == null)
{
objectOrGroup = this._game.world.group;
}
// Group?
if (objectOrGroup.isGroup == false)
{
if (objectOrGroup.exists && objectOrGroup.allowCollisions != Collision.NONE)
{
// Get the tiles this object overlaps with (could be any number based on its width/height)
// Iterate through each tile, checking if it overlaps with the object bounds
// Yes? then separate, else abort
}
}
else
{
// todo
}
return true;
}
// Set current layer
// Set layer order?
// Get tile from x/y
// Get block of tiles
// Swap tiles around
// Delete tiles of certain type
Phaser/geom/Quad.ts
+2 -2
View File
@@ -72,11 +72,11 @@ module Phaser {
* Determines whether the object specified intersects (overlaps) with this Quad object.
* This method checks the x, y, width, and height properties of the specified Quad object to see if it intersects with this Quad object.
* @method intersects
* @param {Quad} q The Quad to compare against to see if it intersects with this Quad.
* @param {Object} q The object to check for intersection with this Quad. Must have left/right/top/bottom properties (Rectangle, Quad).
* @param {Number} t A tolerance value to allow for an intersection test with padding, default to 0
* @return {Boolean} A value of true if the specified object intersects with this Quad; otherwise false.
**/
public intersects(q: Quad, t?: number = 0): bool {
public intersects(q, t?: number = 0): bool {
return !(q.left > this.right + t || q.right < this.left - t || q.top > this.bottom + t || q.bottom < this.top - t);
Phaser/phaser.js
+2 -2
View File
@@ -1,7 +1,7 @@
/**
* Phaser
*
* v0.9.3 - April 24th 2013
* v0.9.4 - April 24th 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.3';
Phaser.VERSION = 'Phaser version 0.9.4';
})(Phaser || (Phaser = {}));
Phaser/system/Camera.ts
+10 -12
View File
@@ -269,23 +269,21 @@ module Phaser {
/**
* Specify the boundaries of the world or where the camera is allowed to move.
*
* @param X The smallest X value of your world (usually 0).
* @param Y The smallest Y value of your world (usually 0).
* @param Width The largest X value of your world (usually the world width).
* @param Height The largest Y value of your world (usually the world height).
* @param UpdateWorld Whether the global quad-tree's dimensions should be updated to match (default: false).
* @param x The smallest X value of your world (usually 0).
* @param y The smallest Y value of your world (usually 0).
* @param width The largest X value of your world (usually the world width).
* @param height The largest Y value of your world (usually the world height).
*/
public setBounds(X: number = 0, Y: number = 0, Width: number = 0, Height: number = 0, UpdateWorld: bool = false) {
public setBounds(x: number = 0, y: number = 0, width: number = 0, height: number = 0) {
if (this.bounds == null)
{
this.bounds = new Rectangle();
}
this.bounds.setTo(X, Y, Width, Height);
//if(UpdateWorld)
// G.worldBounds.copyFrom(bounds);
this.bounds.setTo(x, y, width, height);
this.worldView.setTo(x, y, width, height);
this.scroll.setTo(0, 0);
this.update();
}
@@ -345,7 +343,7 @@ module Phaser {
if (this.scroll.x > this.bounds.right - this.width)
{
this.scroll.x = this.bounds.right - this.width;
this.scroll.x = (this.bounds.right - this.width) + 1;
}
if (this.scroll.y < this.bounds.top)
@@ -355,7 +353,7 @@ module Phaser {
if (this.scroll.y > this.bounds.bottom - this.height)
{
this.scroll.y = this.bounds.bottom - this.height;
this.scroll.y = (this.bounds.bottom - this.height) + 1;
}
}
Phaser/system/QuadTree.ts
+1 -3
View File
@@ -632,7 +632,7 @@ module Phaser {
*/
public execute(): bool {
//console.log('quadtree execute');
console.log('quadtree execute');
var overlapProcessed: bool = false;
var iterator: LinkedList;
@@ -704,8 +704,6 @@ module Phaser {
*/
private overlapNode(): bool {
//console.log('overlapNode');
//Walk the list and check for overlaps
var overlapProcessed: bool = false;
var checkObject;
Phaser/system/Tile.ts
+29 -47
View File
@@ -3,55 +3,35 @@
/**
* Phaser - Tile
*
* A simple helper object for <code>Tilemap</code> that helps expand collision opportunities and control.
* A Tile is a single representation of a tile within a Tilemap
*/
module Phaser {
export class Tile extends GameObject {
export class Tile {
/**
* Instantiate this new tile object. This is usually called from <code>Tilemap.loadMap()</code>.
*
* @param Tilemap A reference to the tilemap object creating the tile.
* @param Index The actual core map data index for this tile type.
* @param Width The width of the tile.
* @param Height The height of the tile.
* @param Visible Whether the tile is visible or not.
* @param AllowCollisions The collision flags for the object. By default this value is ANY or NONE depending on the parameters sent to loadMap().
*/
constructor(game: Game, Tilemap: Tilemap, Index: number, Width: number, Height: number, Visible: bool, AllowCollisions: number) {
constructor(game: Game, tilemap: Tilemap, index: number, width: number, height: number) {
super(game, 0, 0, Width, Height);
this._game = game;
this.tilemap = tilemap;
this.index = index;
this.immovable = true;
this.moves = false;
this.callback = null;
this.filter = null;
this.tilemap = Tilemap;
this.index = Index;
this.visible = Visible;
this.allowCollisions = AllowCollisions;
this.mapIndex = 0;
this.width = width;
this.height = height;
this.allowCollisions = Collision.NONE;
}
/**
* This function is called whenever an object hits a tile of this type.
* This function should take the form <code>myFunction(Tile:Tile,Object:Object)</code>.
* Defaults to null, set through <code>Tilemap.setTileProperties()</code>.
*/
public callback;
private _game: Game;
/**
* Each tile can store its own filter class for their callback functions.
* That is, the callback will only be triggered if an object with a class
* type matching the filter touched it.
* Defaults to null, set through <code>Tilemap.setTileProperties()</code>.
*/
public filter;
// You can give this Tile a friendly name to help with debugging. Never used internally.
public name: string;
public width: number;
public height: number;
public allowCollisions: number;
/**
* A reference to the tilemap this tile object belongs to.
@@ -65,24 +45,26 @@ module Phaser {
*/
public index: number;
/**
* The current map index of this tile object at this moment.
* You can think of tile objects as moving around the tilemap helping with collisions.
* This value is only reliable and useful if used from the callback function.
*/
public mapIndex: number;
/**
* Clean up memory.
*/
public destroy() {
super.destroy();
this.callback = null;
this.tilemap = null;
}
/**
* Returns a string representation of this object.
* @method toString
* @return {string} a string representation of the object.
**/
public toString(): string {
return "[{Tiled (index=" + this.index + " collisions=" + this.allowCollisions + " width=" + this.width + " height=" + this.height + ")}]";
}
}
}
Phaser/system/TilemapLayer.ts
+134 -6
View File
@@ -10,9 +10,10 @@ module Phaser {
export class TilemapLayer {
constructor(game: Game, key: string, mapFormat: number, name: string, tileWidth: number, tileHeight: number) {
constructor(game: Game, parent:Tilemap, key: string, mapFormat: number, name: string, tileWidth: number, tileHeight: number) {
this._game = game;
this._parent = parent;
this.name = name;
this.mapFormat = mapFormat;
@@ -24,11 +25,10 @@ module Phaser {
this.mapData = [];
this._texture = this._game.cache.getImage(key);
this.parseTileOffsets();
}
private _game: Game;
private _parent: Tilemap;
private _texture;
private _tileOffsets;
private _startX: number = 0;
@@ -45,6 +45,7 @@ module Phaser {
public name: string;
public alpha: number = 1;
public exists: bool = true;
public visible: bool = true;
//public scrollFactor: MicroPoint;
public orientation: string;
@@ -63,6 +64,119 @@ module Phaser {
public widthInPixels: number = 0;
public heightInPixels: number = 0;
public tileMargin: number = 0;
public tileSpacing: number = 0;
public getTileFromWorldXY(x: number, y: number): number {
x = this._game.math.snapToFloor(x, this.tileWidth) / this.tileWidth;
y = this._game.math.snapToFloor(y, this.tileHeight) / this.tileHeight;
return this.getTileIndex(x, y);
}
public getTileOverlaps(object: GameObject) {
//var result: bool = false;
//var x: number = object.x;
//var y: number = object.y;
// What tiles do we need to check against?
var mapX:number = this._game.math.snapToFloor(object.bounds.x, this.tileWidth);
var mapY:number = this._game.math.snapToFloor(object.bounds.y, this.tileHeight);
var mapW:number = this._game.math.snapToCeil(object.bounds.width, this.tileWidth) + this.tileWidth;
var mapH:number = this._game.math.snapToCeil(object.bounds.height, this.tileHeight) + this.tileHeight;
var tileX = mapX / this.tileWidth;
var tileY = mapY / this.tileHeight;
var tileW = mapW / this.tileWidth;
var tileH = mapH / this.tileHeight;
if (tileX < 0)
{
tileX = 0;
}
if (tileY < 0)
{
tileY = 0;
}
if (tileW > this.widthInTiles)
{
tileW = this.widthInTiles;
}
if (tileH > this.heightInTiles)
{
tileH = this.heightInTiles;
}
// Loop through the tiles we've got and check overlaps accordingly
var tiles = this.getTileBlock(tileX, tileY, tileW, tileH);
var result = [];
var tempBounds = new Quad();
for (var r = 0; r < tiles.length; r++)
{
if (tiles[r].tile.allowCollisions != Collision.NONE)
{
tempBounds.setTo(tiles[r].x * this.tileWidth, tiles[r].y * this.tileHeight, this.tileWidth, this.tileHeight);
if (tempBounds.intersects(object.bounds))
{
result.push(true);
}
else
{
result.push(false);
}
}
else
{
result.push(false);
}
}
//return { x: mapX, y: mapY, w: mapW, h: mapH, collision: result };
return { x: tileX, y: tileY, w: tileW, h: tileH, collision: result };
}
//public checkTileOverlap(object:GameObject,
public getTileBlock(x: number, y: number, width: number, height: number) {
var output = [];
for (var ty = y; ty < y + height; ty++)
{
for (var tx = x; tx < x + width; tx++)
{
output.push({ x: tx, y: ty, tile: this._parent.tiles[this.mapData[ty][tx]] });
}
}
return output;
}
public getTileIndex(x: number, y: number): number {
if (y >= 0 && y < this.mapData.length)
{
if (x >= 0 && x < this.mapData[y].length)
{
return this.mapData[y][x];
}
}
return null;
}
public addColumn(column) {
var data = [];
@@ -89,9 +203,11 @@ module Phaser {
this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
console.log('layer bounds', this.boundsInTiles);
}
private parseTileOffsets() {
public parseTileOffsets():number {
this._tileOffsets = [];
@@ -104,15 +220,17 @@ module Phaser {
i = 1;
}
for (var ty = 0; ty < this._texture.height; ty += this.tileHeight)
for (var ty = this.tileMargin; ty < this._texture.height; ty += (this.tileHeight + this.tileSpacing))
{
for (var tx = 0; tx < this._texture.width; tx += this.tileWidth)
for (var tx = this.tileMargin; tx < this._texture.width; tx += (this.tileWidth + this.tileSpacing))
{
this._tileOffsets[i] = { x: tx, y: ty };
i++;
}
}
return this._tileOffsets.length;
}
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
@@ -151,6 +269,16 @@ module Phaser {
this._startY = 0;
}
if (this._maxX > this.widthInTiles)
{
this._maxX = this.widthInTiles;
}
if (this._maxY > this.heightInTiles)
{
this._maxY = this.heightInTiles;
}
if (this._startX + this._maxX > this.widthInTiles)
{
this._startX = this.widthInTiles - this._maxX;
Phaser/system/input/Input.ts
+1
View File
@@ -77,6 +77,7 @@ module Phaser {
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
this._game.stage.context.font = '14px Courier';
this._game.stage.context.fillStyle = color;
this._game.stage.context.fillText('Input', x, y);
this._game.stage.context.fillText('Screen X: ' + this.x + ' Screen Y: ' + this.y, x, y + 14);
Phaser/system/input/Keyboard.ts
+1 -1
View File
@@ -32,7 +32,7 @@ module Phaser {
public addKeyCapture(keycode) {
if (typeof keycode == 'array')
if (typeof keycode === 'object')
{
for (var code in keycode)
{
README.md
+25 -19
View File
@@ -1,9 +1,7 @@
Phaser
======
Version 0.9.3
24th April 2013
Version: 0.9.4 Released: XX April 2013
By Richard Davey, [Photon Storm](http://www.photonstorm.com)
@@ -20,23 +18,13 @@ Try out the [Phaser Test Suite](http://gametest.mobi/phaser/)
Latest Update
-------------
V0.9.3
V0.9.4
* Fixed Tilemap bounds check if map was smaller than game dimensions
* Added Tilemap.getTile, getTileFromWorldXY, getTileFromInputXY
* Added Tilemap.setCollisionByIndex and setCollisionByRange
* Added GameObject.renderRotation boolean to control if the sprite will visually rotate or not (useful when angle needs to change but graphics don't)
* Added the new ScrollZone game object. Endlessly useful but especially for scrolling backdrops. Created 6 example tests.
* Added GameObject.hideFromCamera(cameraID) to stop an object rendering to specific cameras (also showToCamera and clearCameraList)
* Added GameObject.setBounds() to confine a game object to a specific area within the world (useful for stopping them going off the edges)
* Added GameObject.outOfBoundsAction, can be either OUT OF BOUNDS STOP which stops the object moving, or OUT OF BOUNDS KILL which kills it.
* Added GameObject.rotationOffset. Useful if your graphics need to rotate but weren't drawn facing zero degrees (to the right).
* Added shiftSinTable and shiftCosTable to the GameMath class to allow for quick iteration through the data tables.
* 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)
* Fixed issues with Group not adding reference to Game to newly created objects (thanks JesseFreeman)
* Fixed a potential race condition issue in Game.boot (thanks Hackmaniac)
* Fixed issue with showing frame zero of a texture atlas before the animation started playing (thanks JesseFreeman)
* Fixed a bug where Camera.visible = false would still render
* Removed the need for DynamicTextures to require a key property and updated test cases.
* You can now pass an array or a single value to Input.Keyboard.addKeyCapture().
Requirements
------------
@@ -171,6 +159,24 @@ Please add them to the [Issue Tracker][1] with as much info as possible.
Change Log
----------
V0.9.3
* Added the new ScrollZone game object. Endlessly useful but especially for scrolling backdrops. Created 6 example tests.
* Added GameObject.hideFromCamera(cameraID) to stop an object rendering to specific cameras (also showToCamera and clearCameraList)
* Added GameObject.setBounds() to confine a game object to a specific area within the world (useful for stopping them going off the edges)
* Added GameObject.outOfBoundsAction, can be either OUT OF BOUNDS STOP which stops the object moving, or OUT OF BOUNDS KILL which kills it.
* Added GameObject.rotationOffset. Useful if your graphics need to rotate but weren't drawn facing zero degrees (to the right).
* Added shiftSinTable and shiftCosTable to the GameMath class to allow for quick iteration through the data tables.
* 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)
* Fixed issues with Group not adding reference to Game to newly created objects (thanks JesseFreeman)
* Fixed a potential race condition issue in Game.boot (thanks Hackmaniac)
* Fixed issue with showing frame zero of a texture atlas before the animation started playing (thanks JesseFreeman)
* Fixed a bug where Camera.visible = false would still render
* Removed the need for DynamicTextures to require a key property and updated test cases.
* You can now pass an array or a single value to Input.Keyboard.addKeyCapture().
V0.9.2
* Fixed issue with create not being called if there was an empty init method.
Tests/Tests.csproj
+8
View File
@@ -133,6 +133,14 @@
<DependentUpon>flipped.ts</DependentUpon>
</Content>
<TypeScriptCompile Include="tilemap\small map.ts" />
<TypeScriptCompile Include="tilemap\get tile.ts" />
<TypeScriptCompile Include="tilemap\collision.ts" />
<Content Include="tilemap\collision.js">
<DependentUpon>collision.ts</DependentUpon>
</Content>
<Content Include="tilemap\get tile.js">
<DependentUpon>get tile.ts</DependentUpon>
</Content>
<Content Include="tilemap\small map.js">
<DependentUpon>small map.ts</DependentUpon>
</Content>
Tests/assets/maps/desert.json
+39
View File
File diff suppressed because one or more lines are too long
Tests/assets/maps/desert2.json
+54
View File
File diff suppressed because one or more lines are too long
Tests/assets/maps/platform-test-1.json
+39
View File
File diff suppressed because one or more lines are too long
Tests/assets/tiles/tmw_desert_spacing.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 37 KiB

Tests/phaser.js
+220 -79
View File
@@ -472,6 +472,7 @@ var Phaser;
// For example if you had a sprite drawn facing straight up then you could set
// rotationOffset to 90 and it would correspond correctly with Phasers rotation system
this.rotationOffset = 0;
this.renderRotation = true;
this.moves = true;
// Input
this.inputEnabled = false;
@@ -1125,24 +1126,22 @@ var Phaser;
Camera.prototype.setBounds = /**
* Specify the boundaries of the world or where the camera is allowed to move.
*
* @param X The smallest X value of your world (usually 0).
* @param Y The smallest Y value of your world (usually 0).
* @param Width The largest X value of your world (usually the world width).
* @param Height The largest Y value of your world (usually the world height).
* @param UpdateWorld Whether the global quad-tree's dimensions should be updated to match (default: false).
* @param x The smallest X value of your world (usually 0).
* @param y The smallest Y value of your world (usually 0).
* @param width The largest X value of your world (usually the world width).
* @param height The largest Y value of your world (usually the world height).
*/
function (X, Y, Width, Height, UpdateWorld) {
if (typeof X === "undefined") { X = 0; }
if (typeof Y === "undefined") { Y = 0; }
if (typeof Width === "undefined") { Width = 0; }
if (typeof Height === "undefined") { Height = 0; }
if (typeof UpdateWorld === "undefined") { UpdateWorld = false; }
function (x, y, width, height) {
if (typeof x === "undefined") { x = 0; }
if (typeof y === "undefined") { y = 0; }
if (typeof width === "undefined") { width = 0; }
if (typeof height === "undefined") { height = 0; }
if(this.bounds == null) {
this.bounds = new Phaser.Rectangle();
}
this.bounds.setTo(X, Y, Width, Height);
//if(UpdateWorld)
// G.worldBounds.copyFrom(bounds);
this.bounds.setTo(x, y, width, height);
this.worldView.setTo(x, y, width, height);
this.scroll.setTo(0, 0);
this.update();
};
Camera.prototype.update = function () {
@@ -1177,13 +1176,13 @@ var Phaser;
this.scroll.x = this.bounds.left;
}
if(this.scroll.x > this.bounds.right - this.width) {
this.scroll.x = this.bounds.right - this.width;
this.scroll.x = (this.bounds.right - this.width) + 1;
}
if(this.scroll.y < this.bounds.top) {
this.scroll.y = this.bounds.top;
}
if(this.scroll.y > this.bounds.bottom - this.height) {
this.scroll.y = this.bounds.bottom - this.height;
this.scroll.y = (this.bounds.bottom - this.height) + 1;
}
}
this.worldView.x = this.scroll.x;
@@ -1595,7 +1594,7 @@ var Phaser;
if(this.angle !== 0 || this.rotationOffset !== 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.rotationOffset !== 0) {
if(this.renderRotation == true && (this.angle !== 0 || this.rotationOffset !== 0)) {
this._game.stage.context.rotate((this.rotationOffset + this.angle) * (Math.PI / 180));
}
this._dx = -(this._dw / 2);
@@ -4369,7 +4368,7 @@ var Phaser;
* @return Whether or not any overlaps were found.
*/
function () {
//console.log('quadtree execute');
console.log('quadtree execute');
var overlapProcessed = false;
var iterator;
if(this._headA.object != null) {
@@ -4415,7 +4414,6 @@ var Phaser;
* @return Whether or not any overlaps were found.
*/
function () {
//console.log('overlapNode');
//Walk the list and check for overlaps
var overlapProcessed = false;
var checkObject;
@@ -7465,7 +7463,7 @@ var Phaser;
/**
* Phaser
*
* v0.9.3 - April 24th 2013
* v0.9.4 - April 24th 2013
*
* A small and feature-packed 2D canvas game framework born from the firey pits of Flixel and Kiwi.
*
@@ -7479,7 +7477,7 @@ var Phaser;
*/
var Phaser;
(function (Phaser) {
Phaser.VERSION = 'Phaser version 0.9.3';
Phaser.VERSION = 'Phaser version 0.9.4';
})(Phaser || (Phaser = {}));
/// <reference path="../Game.ts" />
/**
@@ -9491,6 +9489,7 @@ var Phaser;
};
Input.prototype.renderDebugInfo = function (x, y, color) {
if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
this._game.stage.context.font = '14px Courier';
this._game.stage.context.fillStyle = color;
this._game.stage.context.fillText('Input', x, y);
this._game.stage.context.fillText('Screen X: ' + this.x + ' Screen Y: ' + this.y, x, y + 14);
@@ -9530,7 +9529,7 @@ var Phaser;
}, false);
};
Keyboard.prototype.addKeyCapture = function (keycode) {
if(typeof keycode == 'array') {
if(typeof keycode === 'object') {
for(var code in keycode) {
this._capture[code] = true;
}
@@ -10991,7 +10990,7 @@ var Phaser;
var Phaser;
(function (Phaser) {
var TilemapLayer = (function () {
function TilemapLayer(game, key, mapFormat, name, tileWidth, tileHeight) {
function TilemapLayer(game, parent, key, mapFormat, name, tileWidth, tileHeight) {
this._startX = 0;
this._startY = 0;
this._maxX = 0;
@@ -11003,12 +11002,16 @@ var Phaser;
this._oldCameraX = 0;
this._oldCameraY = 0;
this.alpha = 1;
this.exists = true;
this.visible = true;
this.widthInTiles = 0;
this.heightInTiles = 0;
this.widthInPixels = 0;
this.heightInPixels = 0;
this.tileMargin = 0;
this.tileSpacing = 0;
this._game = game;
this._parent = parent;
this.name = name;
this.mapFormat = mapFormat;
this.tileWidth = tileWidth;
@@ -11017,8 +11020,84 @@ var Phaser;
//this.scrollFactor = new MicroPoint(1, 1);
this.mapData = [];
this._texture = this._game.cache.getImage(key);
this.parseTileOffsets();
}
TilemapLayer.prototype.getTileFromWorldXY = function (x, y) {
x = this._game.math.snapToFloor(x, this.tileWidth) / this.tileWidth;
y = this._game.math.snapToFloor(y, this.tileHeight) / this.tileHeight;
return this.getTileIndex(x, y);
};
TilemapLayer.prototype.getTileOverlaps = function (object) {
//var result: bool = false;
//var x: number = object.x;
//var y: number = object.y;
// What tiles do we need to check against?
var mapX = this._game.math.snapToFloor(object.bounds.x, this.tileWidth);
var mapY = this._game.math.snapToFloor(object.bounds.y, this.tileHeight);
var mapW = this._game.math.snapToCeil(object.bounds.width, this.tileWidth) + this.tileWidth;
var mapH = this._game.math.snapToCeil(object.bounds.height, this.tileHeight) + this.tileHeight;
var tileX = mapX / this.tileWidth;
var tileY = mapY / this.tileHeight;
var tileW = mapW / this.tileWidth;
var tileH = mapH / this.tileHeight;
if(tileX < 0) {
tileX = 0;
}
if(tileY < 0) {
tileY = 0;
}
if(tileW > this.widthInTiles) {
tileW = this.widthInTiles;
}
if(tileH > this.heightInTiles) {
tileH = this.heightInTiles;
}
// Loop through the tiles we've got and check overlaps accordingly
var tiles = this.getTileBlock(tileX, tileY, tileW, tileH);
var result = [];
var tempBounds = new Phaser.Quad();
for(var r = 0; r < tiles.length; r++) {
if(tiles[r].tile.allowCollisions != Phaser.Collision.NONE) {
tempBounds.setTo(tiles[r].x * this.tileWidth, tiles[r].y * this.tileHeight, this.tileWidth, this.tileHeight);
if(tempBounds.intersects(object.bounds)) {
result.push(true);
} else {
result.push(false);
}
} else {
result.push(false);
}
}
//return { x: mapX, y: mapY, w: mapW, h: mapH, collision: result };
return {
x: tileX,
y: tileY,
w: tileW,
h: tileH,
collision: result
};
};
TilemapLayer.prototype.getTileBlock = //public checkTileOverlap(object:GameObject,
function (x, y, width, height) {
var output = [];
for(var ty = y; ty < y + height; ty++) {
for(var tx = x; tx < x + width; tx++) {
output.push({
x: tx,
y: ty,
tile: this._parent.tiles[this.mapData[ty][tx]]
});
}
}
return output;
};
TilemapLayer.prototype.getTileIndex = function (x, y) {
if(y >= 0 && y < this.mapData.length) {
if(x >= 0 && x < this.mapData[y].length) {
return this.mapData[y][x];
}
}
return null;
};
TilemapLayer.prototype.addColumn = function (column) {
var data = [];
for(var c = 0; c < column.length; c++) {
@@ -11034,6 +11113,7 @@ var Phaser;
};
TilemapLayer.prototype.updateBounds = function () {
this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles);
console.log('layer bounds', this.boundsInTiles);
};
TilemapLayer.prototype.parseTileOffsets = function () {
this._tileOffsets = [];
@@ -11043,8 +11123,8 @@ var Phaser;
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) {
for(var ty = this.tileMargin; ty < this._texture.height; ty += (this.tileHeight + this.tileSpacing)) {
for(var tx = this.tileMargin; tx < this._texture.width; tx += (this.tileWidth + this.tileSpacing)) {
this._tileOffsets[i] = {
x: tx,
y: ty
@@ -11052,6 +11132,7 @@ var Phaser;
i++;
}
}
return this._tileOffsets.length;
};
TilemapLayer.prototype.renderDebugInfo = function (x, y, color) {
if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
@@ -11078,6 +11159,12 @@ var Phaser;
if(this._startY < 0) {
this._startY = 0;
}
if(this._maxX > this.widthInTiles) {
this._maxX = this.widthInTiles;
}
if(this._maxY > this.heightInTiles) {
this._maxY = this.heightInTiles;
}
if(this._startX + this._maxX > this.widthInTiles) {
this._startX = this.widthInTiles - this._maxX;
}
@@ -11134,8 +11221,44 @@ var Phaser;
Phaser.TilemapLayer = TilemapLayer;
})(Phaser || (Phaser = {}));
/// <reference path="../Game.ts" />
/**
* Phaser - Tile
*
* A Tile is a single representation of a tile within a Tilemap
*/
var Phaser;
(function (Phaser) {
var Tile = (function () {
function Tile(game, tilemap, index, width, height) {
this._game = game;
this.tilemap = tilemap;
this.index = index;
this.width = width;
this.height = height;
this.allowCollisions = Phaser.Collision.NONE;
}
Tile.prototype.destroy = /**
* Clean up memory.
*/
function () {
this.tilemap = null;
};
Tile.prototype.toString = /**
* Returns a string representation of this object.
* @method toString
* @return {string} a string representation of the object.
**/
function () {
return "[{Tiled (index=" + this.index + " collisions=" + this.allowCollisions + " width=" + this.width + " height=" + this.height + ")}]";
};
return Tile;
})();
Phaser.Tile = Tile;
})(Phaser || (Phaser = {}));
/// <reference path="../Game.ts" />
/// <reference path="GameObject.ts" />
/// <reference path="../system/TilemapLayer.ts" />
/// <reference path="../system/Tile.ts" />
/**
* Phaser - Tilemap
*
@@ -11152,7 +11275,8 @@ var Phaser;
if (typeof tileHeight === "undefined") { tileHeight = 0; }
_super.call(this, game);
this.isGroup = false;
this._layers = [];
this.tiles = [];
this.layers = [];
this.mapFormat = format;
switch(format) {
case Tilemap.FORMAT_CSV:
@@ -11173,13 +11297,13 @@ var Phaser;
Tilemap.prototype.render = function (camera, cameraOffsetX, cameraOffsetY) {
if(this.cameraBlacklist.indexOf(camera.ID) == -1) {
// Loop through the layers
for(var i = 0; i < this._layers.length; i++) {
this._layers[i].render(camera, cameraOffsetX, cameraOffsetY);
for(var i = 0; i < this.layers.length; i++) {
this.layers[i].render(camera, cameraOffsetX, cameraOffsetY);
}
}
};
Tilemap.prototype.parseCSV = function (data, key, tileWidth, tileHeight) {
var layer = new Phaser.TilemapLayer(this._game, key, Tilemap.FORMAT_CSV, 'TileLayerCSV' + this._layers.length.toString(), tileWidth, tileHeight);
var layer = new Phaser.TilemapLayer(this._game, this, 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");
@@ -11190,17 +11314,21 @@ var Phaser;
}
}
layer.updateBounds();
var tileQuantity = layer.parseTileOffsets();
this.currentLayer = layer;
this._layers.push(layer);
this.layers.push(layer);
this.generateTiles(tileQuantity);
};
Tilemap.prototype.parseTiledJSON = function (data, key) {
// Trim any rogue whitespace from the data
data = data.trim();
var json = JSON.parse(data);
for(var i = 0; i < json.layers.length; i++) {
var layer = new Phaser.TilemapLayer(this._game, key, Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight);
var layer = new Phaser.TilemapLayer(this._game, this, 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;
layer.tileMargin = json.tilesets[0].margin;
layer.tileSpacing = json.tilesets[0].spacing;
var c = 0;
var row;
for(var t = 0; t < json.layers[i].data.length; t++) {
@@ -11215,8 +11343,15 @@ var Phaser;
}
}
layer.updateBounds();
var tileQuantity = layer.parseTileOffsets();
this.currentLayer = layer;
this._layers.push(layer);
this.layers.push(layer);
}
this.generateTiles(tileQuantity);
};
Tilemap.prototype.generateTiles = function (qty) {
for(var i = 0; i < qty; i++) {
this.tiles.push(new Phaser.Tile(this._game, this, i, this.currentLayer.tileWidth, this.currentLayer.tileHeight));
}
};
Object.defineProperty(Tilemap.prototype, "widthInPixels", {
@@ -11233,12 +11368,59 @@ var Phaser;
enumerable: true,
configurable: true
});
Tilemap.prototype.setCollisionRange = // Tile Collision
function (start, end, collision) {
if (typeof collision === "undefined") { collision = Phaser.Collision.ANY; }
for(var i = start; i < end; i++) {
this.tiles[i].allowCollisions = collision;
}
};
Tilemap.prototype.setCollisionByIndex = function (values, collision) {
if (typeof collision === "undefined") { collision = Phaser.Collision.ANY; }
for(var i = 0; i < values.length; i++) {
this.tiles[values[i]].allowCollisions = collision;
}
};
Tilemap.prototype.getTile = // Tile Management
function (x, y, layer) {
if (typeof layer === "undefined") { layer = 0; }
return this.tiles[this.layers[layer].getTileIndex(x, y)];
};
Tilemap.prototype.getTileFromWorldXY = function (x, y, layer) {
if (typeof layer === "undefined") { layer = 0; }
return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)];
};
Tilemap.prototype.getTileFromInputXY = function (layer) {
if (typeof layer === "undefined") { layer = 0; }
return this.tiles[this.layers[layer].getTileFromWorldXY(this._game.input.worldX, this._game.input.worldY)];
};
Tilemap.prototype.getTileOverlaps = function (object) {
return this.currentLayer.getTileOverlaps(object);
};
Tilemap.prototype.collide = // COLLIDE
function (objectOrGroup, callback) {
if (typeof objectOrGroup === "undefined") { objectOrGroup = null; }
if (typeof callback === "undefined") { callback = null; }
if(objectOrGroup == null) {
objectOrGroup = this._game.world.group;
}
// Group?
if(objectOrGroup.isGroup == false) {
if(objectOrGroup.exists && objectOrGroup.allowCollisions != Phaser.Collision.NONE) {
// Get the tiles this object overlaps with (could be any number based on its width/height)
// Iterate through each tile, checking if it overlaps with the object bounds
// Yes? then separate, else abort
}
} else {
// todo
}
return true;
};
return Tilemap;
})(Phaser.GameObject);
Phaser.Tilemap = Tilemap;
// Set current layer
// Set layer order?
// Get tile from x/y
// Get block of tiles
// Swap tiles around
// Delete tiles of certain type
@@ -11280,6 +11462,9 @@ var Phaser;
*
* This is where the magic happens. The Game object is the heart of your game,
* providing quick access to common functions and handling the boot process.
*
* "Hell, there are no rules here - we're trying to accomplish something."
* Thomas A. Edison
*/
var Phaser;
(function (Phaser) {
@@ -11649,7 +11834,7 @@ var Phaser;
* Determines whether the object specified intersects (overlaps) with this Quad object.
* This method checks the x, y, width, and height properties of the specified Quad object to see if it intersects with this Quad object.
* @method intersects
* @param {Quad} q The Quad to compare against to see if it intersects with this Quad.
* @param {Object} q The object to check for intersection with this Quad. Must have left/right/top/bottom properties (Rectangle, Quad).
* @param {Number} t A tolerance value to allow for an intersection test with padding, default to 0
* @return {Boolean} A value of true if the specified object intersects with this Quad; otherwise false.
**/
@@ -11917,50 +12102,6 @@ var Phaser;
})(Phaser.GameObject);
Phaser.ScrollZone = ScrollZone;
})(Phaser || (Phaser = {}));
/// <reference path="../Game.ts" />
/**
* Phaser - Tile
*
* A simple helper object for <code>Tilemap</code> that helps expand collision opportunities and control.
*/
var Phaser;
(function (Phaser) {
var Tile = (function (_super) {
__extends(Tile, _super);
/**
* Instantiate this new tile object. This is usually called from <code>Tilemap.loadMap()</code>.
*
* @param Tilemap A reference to the tilemap object creating the tile.
* @param Index The actual core map data index for this tile type.
* @param Width The width of the tile.
* @param Height The height of the tile.
* @param Visible Whether the tile is visible or not.
* @param AllowCollisions The collision flags for the object. By default this value is ANY or NONE depending on the parameters sent to loadMap().
*/
function Tile(game, Tilemap, Index, Width, Height, Visible, AllowCollisions) {
_super.call(this, game, 0, 0, Width, Height);
this.immovable = true;
this.moves = false;
this.callback = null;
this.filter = null;
this.tilemap = Tilemap;
this.index = Index;
this.visible = Visible;
this.allowCollisions = AllowCollisions;
this.mapIndex = 0;
}
Tile.prototype.destroy = /**
* Clean up memory.
*/
function () {
_super.prototype.destroy.call(this);
this.callback = null;
this.tilemap = null;
};
return Tile;
})(Phaser.GameObject);
Phaser.Tile = Tile;
})(Phaser || (Phaser = {}));
/// <reference path="Game.ts" />
/**
* Phaser - State
Tests/tilemap/collision.js
+73
View File
@@ -0,0 +1,73 @@
/// <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() {
myGame.loader.addTextFile('platform', 'assets/maps/platform-test-1.json');
myGame.loader.addImageFile('tiles', 'assets/tiles/platformer_tiles.png');
myGame.loader.addImageFile('ufo', 'assets/sprites/ufo.png');
myGame.loader.addImageFile('ilkke', 'assets/sprites/ilkke.png');
myGame.loader.addImageFile('chunk', 'assets/sprites/chunk.png');
myGame.loader.addImageFile('healthbar', 'assets/sprites/healthbar.png');
myGame.loader.load();
}
var map;
var car;
var marker;
var tile;
function create() {
map = myGame.createTilemap('tiles', 'platform', Phaser.Tilemap.FORMAT_TILED_JSON);
map.setCollisionRange(21, 53);
map.setCollisionRange(105, 109);
myGame.camera.backgroundColor = 'rgb(47,154,204)';
car = myGame.createSprite(250, 0, 'ufo');
car.renderRotation = false;
car.renderDebug = true;
car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
//car.velocity.y = 10;
marker = myGame.createGeomSprite(0, 0);
marker.createRectangle(16, 16);
marker.renderFill = false;
myGame.onRenderCallback = render;
}
function update() {
marker.x = myGame.math.snapToFloor(myGame.input.worldX, 16);
marker.y = myGame.math.snapToFloor(myGame.input.worldY, 16);
//myGame.collide(car, map.currentLayer);
car.velocity.x = 0;
car.velocity.y = 0;
if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
car.velocity.x = -100;
} else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
car.velocity.x = 100;
}
if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
car.velocity.y = -100;
} else if(myGame.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
car.velocity.y = 100;
}
}
function render() {
tile = map.getTileFromInputXY();
var b = map.getTileOverlaps(car);
myGame.stage.context.font = '18px Arial';
myGame.stage.context.fillStyle = 'rgb(255,255,255)';
myGame.stage.context.fillText(tile.toString(), 32, 32);
myGame.input.renderDebugInfo(32, 64, 'rgb(255,255,255)');
myGame.stage.context.fillStyle = 'rgb(255,255,255)';
myGame.stage.context.fillText(b.x + ' ' + b.y + ' ' + b.w + ' ' + b.h, 32, 200);
myGame.stage.context.fillText(car.bounds.x + ' ' + car.bounds.y + ' ' + car.bounds.width + ' ' + car.bounds.height, 32, 232);
var i = 0;
for(var y = b.y; y < b.y + b.h; y++) {
for(var x = b.x; x < b.x + b.w; x++) {
if(b.collision[i] == true) {
myGame.stage.context.fillStyle = 'rgba(255,0,0,0.5)';
} else {
myGame.stage.context.fillStyle = 'rgba(0,255,0,0.5)';
}
myGame.stage.context.fillRect(x * 16, y * 16, 16, 16);
i++;
}
}
}
})();
Tests/tilemap/collision.ts
+116
View File
@@ -0,0 +1,116 @@
/// <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() {
myGame.loader.addTextFile('platform', 'assets/maps/platform-test-1.json');
myGame.loader.addImageFile('tiles', 'assets/tiles/platformer_tiles.png');
myGame.loader.addImageFile('ufo', 'assets/sprites/ufo.png');
myGame.loader.addImageFile('ilkke', 'assets/sprites/ilkke.png');
myGame.loader.addImageFile('chunk', 'assets/sprites/chunk.png');
myGame.loader.addImageFile('healthbar', 'assets/sprites/healthbar.png');
myGame.loader.load();
}
var map: Phaser.Tilemap;
var car: Phaser.Sprite;
var marker: Phaser.GeomSprite;
var tile: Phaser.Tile;
function create() {
map = myGame.createTilemap('tiles', 'platform', Phaser.Tilemap.FORMAT_TILED_JSON);
map.setCollisionRange(21,53);
map.setCollisionRange(105,109);
myGame.camera.backgroundColor = 'rgb(47,154,204)';
car = myGame.createSprite(250, 0, 'ufo');
car.renderRotation = false;
car.renderDebug = true;
car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
//car.velocity.y = 10;
marker = myGame.createGeomSprite(0, 0);
marker.createRectangle(16, 16);
marker.renderFill = false;
myGame.onRenderCallback = render;
}
function update() {
marker.x = myGame.math.snapToFloor(myGame.input.worldX, 16);
marker.y = myGame.math.snapToFloor(myGame.input.worldY, 16);
//myGame.collide(car, map.currentLayer);
car.velocity.x = 0;
car.velocity.y = 0;
if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
car.velocity.x = -100;
}
else if (myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
{
car.velocity.x = 100;
}
if (myGame.input.keyboard.isDown(Phaser.Keyboard.UP))
{
car.velocity.y = -100;
}
else if (myGame.input.keyboard.isDown(Phaser.Keyboard.DOWN))
{
car.velocity.y = 100;
}
}
function render {
tile = map.getTileFromInputXY();
var b = map.getTileOverlaps(car);
myGame.stage.context.font = '18px Arial';
myGame.stage.context.fillStyle = 'rgb(255,255,255)';
myGame.stage.context.fillText(tile.toString(), 32, 32);
myGame.input.renderDebugInfo(32, 64, 'rgb(255,255,255)');
myGame.stage.context.fillStyle = 'rgb(255,255,255)';
myGame.stage.context.fillText(b.x + ' ' + b.y + ' ' + b.w + ' ' + b.h, 32, 200);
myGame.stage.context.fillText(car.bounds.x + ' ' + car.bounds.y + ' ' + car.bounds.width + ' ' + car.bounds.height, 32, 232);
var i = 0;
for (var y = b.y; y < b.y + b.h; y++)
{
for (var x = b.x; x < b.x + b.w; x++)
{
if (b.collision[i] == true)
{
myGame.stage.context.fillStyle = 'rgba(255,0,0,0.5)';
}
else
{
myGame.stage.context.fillStyle = 'rgba(0,255,0,0.5)';
}
myGame.stage.context.fillRect(x * 16, y * 16, 16, 16);
i++;
}
}
}
})();
Tests/tilemap/get tile.js
+49
View File
@@ -0,0 +1,49 @@
/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
/// <reference path="../../Phaser/system/Tile.ts" />
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addTextFile('desert', 'assets/maps/desert.json');
myGame.loader.addImageFile('tiles', 'assets/tiles/tmw_desert_spacing.png');
myGame.loader.addImageFile('car', 'assets/sprites/car90.png');
myGame.loader.load();
}
var map;
var car;
var marker;
var tile;
function create() {
map = myGame.createTilemap('tiles', 'desert', Phaser.Tilemap.FORMAT_TILED_JSON);
car = myGame.createSprite(250, 200, 'car');
car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
marker = myGame.createGeomSprite(0, 0);
marker.createRectangle(32, 32);
marker.renderFill = false;
marker.lineColor = 'rgb(0,0,0)';
myGame.camera.follow(car);
myGame.onRenderCallback = render;
}
function update() {
marker.x = myGame.math.snapToFloor(myGame.input.worldX, 32);
marker.y = myGame.math.snapToFloor(myGame.input.worldY, 32);
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 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)) {
car.velocity.copyFrom(myGame.motion.velocityFromAngle(car.angle, 300));
}
}
function render() {
tile = map.getTileFromInputXY();
myGame.stage.context.font = '18px Arial';
myGame.stage.context.fillStyle = 'rgb(0,0,0)';
myGame.stage.context.fillText(tile.toString(), 32, 32);
myGame.input.renderDebugInfo(32, 64, 'rgb(0,0,0)');
}
})();
Tests/tilemap/get tile.ts
+78
View File
@@ -0,0 +1,78 @@
/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
/// <reference path="../../Phaser/system/Tile.ts" />
/// <reference path="../../Phaser/Game.ts" />
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addTextFile('desert', 'assets/maps/desert.json');
myGame.loader.addImageFile('tiles', 'assets/tiles/tmw_desert_spacing.png');
myGame.loader.addImageFile('car', 'assets/sprites/car90.png');
myGame.loader.load();
}
var map: Phaser.Tilemap;
var car: Phaser.Sprite;
var marker: Phaser.GeomSprite;
var tile: Phaser.Tile;
function create() {
map = myGame.createTilemap('tiles', 'desert', Phaser.Tilemap.FORMAT_TILED_JSON);
car = myGame.createSprite(250, 200, 'car');
car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
marker = myGame.createGeomSprite(0, 0);
marker.createRectangle(32, 32);
marker.renderFill = false;
marker.lineColor = 'rgb(0,0,0)';
myGame.camera.follow(car);
myGame.onRenderCallback = render;
}
function update() {
marker.x = myGame.math.snapToFloor(myGame.input.worldX, 32);
marker.y = myGame.math.snapToFloor(myGame.input.worldY, 32);
car.velocity.x = 0;
car.velocity.y = 0;
car.angularVelocity = 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))
{
car.velocity.copyFrom(myGame.motion.velocityFromAngle(car.angle, 300));
}
}
function render {
tile = map.getTileFromInputXY();
myGame.stage.context.font = '18px Arial';
myGame.stage.context.fillStyle = 'rgb(0,0,0)';
myGame.stage.context.fillText(tile.toString(), 32, 32);
myGame.input.renderDebugInfo(32, 64, 'rgb(0,0,0)');
}
})();