Added phaser build and hellophaser sample
This commit is contained in:
393
src/tilemap/Tile.js
Normal file
393
src/tilemap/Tile.js
Normal file
@@ -0,0 +1,393 @@
|
||||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2014 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Create a new `Tile` object.
|
||||
*
|
||||
* @class Phaser.Tile
|
||||
* @classdesc A Tile is a representation of a single tile within the Tilemap.
|
||||
* @constructor
|
||||
* @param {object} layer - The layer in the Tilemap data that this tile belongs to.
|
||||
* @param {number} index - The index of this tile type in the core map data.
|
||||
* @param {number} x - The x coordinate of this tile.
|
||||
* @param {number} y - The y coordinate of this tile.
|
||||
* @param {number} width - Width of the tile.
|
||||
* @param {number} height - Height of the tile.
|
||||
*/
|
||||
Phaser.Tile = function (layer, index, x, y, width, height) {
|
||||
|
||||
/**
|
||||
* @property {object} layer - The layer in the Tilemap data that this tile belongs to.
|
||||
*/
|
||||
this.layer = layer;
|
||||
|
||||
/**
|
||||
* @property {number} index - The index of this tile within the map data corresponding to the tileset, or -1 if this represents a blank/null tile.
|
||||
*/
|
||||
this.index = index;
|
||||
|
||||
/**
|
||||
* @property {number} x - The x map coordinate of this tile.
|
||||
*/
|
||||
this.x = x;
|
||||
|
||||
/**
|
||||
* @property {number} y - The y map coordinate of this tile.
|
||||
*/
|
||||
this.y = y;
|
||||
|
||||
/**
|
||||
* @property {number} x - The x map coordinate of this tile.
|
||||
*/
|
||||
this.worldX = x * width;
|
||||
|
||||
/**
|
||||
* @property {number} y - The y map coordinate of this tile.
|
||||
*/
|
||||
this.worldY = y * height;
|
||||
|
||||
/**
|
||||
* @property {number} width - The width of the tile in pixels.
|
||||
*/
|
||||
this.width = width;
|
||||
|
||||
/**
|
||||
* @property {number} height - The height of the tile in pixels.
|
||||
*/
|
||||
this.height = height;
|
||||
|
||||
/**
|
||||
* @property {number} width - The width of the tile in pixels.
|
||||
*/
|
||||
this.centerX = Math.abs(width / 2);
|
||||
|
||||
/**
|
||||
* @property {number} height - The height of the tile in pixels.
|
||||
*/
|
||||
this.centerY = Math.abs(height / 2);
|
||||
|
||||
/**
|
||||
* @property {number} alpha - The alpha value at which this tile is drawn to the canvas.
|
||||
*/
|
||||
this.alpha = 1;
|
||||
|
||||
/**
|
||||
* @property {object} properties - Tile specific properties.
|
||||
*/
|
||||
this.properties = {};
|
||||
|
||||
/**
|
||||
* @property {boolean} scanned - Has this tile been walked / turned into a poly?
|
||||
*/
|
||||
this.scanned = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} faceTop - Is the top of this tile an interesting edge?
|
||||
*/
|
||||
this.faceTop = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} faceBottom - Is the bottom of this tile an interesting edge?
|
||||
*/
|
||||
this.faceBottom = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} faceLeft - Is the left of this tile an interesting edge?
|
||||
*/
|
||||
this.faceLeft = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} faceRight - Is the right of this tile an interesting edge?
|
||||
*/
|
||||
this.faceRight = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} collideLeft - Indicating collide with any object on the left.
|
||||
* @default
|
||||
*/
|
||||
this.collideLeft = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} collideRight - Indicating collide with any object on the right.
|
||||
* @default
|
||||
*/
|
||||
this.collideRight = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} collideUp - Indicating collide with any object on the top.
|
||||
* @default
|
||||
*/
|
||||
this.collideUp = false;
|
||||
|
||||
/**
|
||||
* @property {boolean} collideDown - Indicating collide with any object on the bottom.
|
||||
* @default
|
||||
*/
|
||||
this.collideDown = false;
|
||||
|
||||
/**
|
||||
* @property {function} collisionCallback - Tile collision callback.
|
||||
* @default
|
||||
*/
|
||||
this.collisionCallback = null;
|
||||
|
||||
/**
|
||||
* @property {object} collisionCallbackContext - The context in which the collision callback will be called.
|
||||
* @default
|
||||
*/
|
||||
this.collisionCallbackContext = this;
|
||||
|
||||
};
|
||||
|
||||
Phaser.Tile.prototype = {
|
||||
|
||||
/**
|
||||
* Check if the given x and y world coordinates are within this Tile.
|
||||
*
|
||||
* @method Phaser.Tile#containsPoint
|
||||
* @param {number} x - The x coordinate to test.
|
||||
* @param {number} y - The y coordinate to test.
|
||||
* @return {boolean} True if the coordinates are within this Tile, otherwise false.
|
||||
*/
|
||||
containsPoint: function (x, y) {
|
||||
|
||||
return !(x < this.worldX || y < this.worldY || x > this.right || y > this.bottom);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Check for intersection with this tile.
|
||||
*
|
||||
* @method Phaser.Tile#intersects
|
||||
* @param {number} x - The x axis in pixels.
|
||||
* @param {number} y - The y axis in pixels.
|
||||
* @param {number} right - The right point.
|
||||
* @param {number} bottom - The bottom point.
|
||||
*/
|
||||
intersects: function (x, y, right, bottom) {
|
||||
|
||||
if (right <= this.worldX)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
if (bottom <= this.worldY)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
if (x >= this.worldX + this.width)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
if (y >= this.worldY + this.height)
|
||||
{
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Set a callback to be called when this tile is hit by an object.
|
||||
* The callback must true true for collision processing to take place.
|
||||
*
|
||||
* @method Phaser.Tile#setCollisionCallback
|
||||
* @param {function} callback - Callback function.
|
||||
* @param {object} context - Callback will be called within this context.
|
||||
*/
|
||||
setCollisionCallback: function (callback, context) {
|
||||
|
||||
this.collisionCallback = callback;
|
||||
this.collisionCallbackContext = context;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Clean up memory.
|
||||
*
|
||||
* @method Phaser.Tile#destroy
|
||||
*/
|
||||
destroy: function () {
|
||||
|
||||
this.collisionCallback = null;
|
||||
this.collisionCallbackContext = null;
|
||||
this.properties = null;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Set collision settings on this tile.
|
||||
*
|
||||
* @method Phaser.Tile#setCollision
|
||||
* @param {boolean} left - Indicating collide with any object on the left.
|
||||
* @param {boolean} right - Indicating collide with any object on the right.
|
||||
* @param {boolean} up - Indicating collide with any object on the top.
|
||||
* @param {boolean} down - Indicating collide with any object on the bottom.
|
||||
*/
|
||||
setCollision: function (left, right, up, down) {
|
||||
|
||||
this.collideLeft = left;
|
||||
this.collideRight = right;
|
||||
this.collideUp = up;
|
||||
this.collideDown = down;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Reset collision status flags.
|
||||
*
|
||||
* @method Phaser.Tile#resetCollision
|
||||
*/
|
||||
resetCollision: function () {
|
||||
|
||||
this.collideLeft = false;
|
||||
this.collideRight = false;
|
||||
this.collideUp = false;
|
||||
this.collideDown = false;
|
||||
|
||||
this.faceTop = false;
|
||||
this.faceBottom = false;
|
||||
this.faceLeft = false;
|
||||
this.faceRight = false;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Is this tile interesting?
|
||||
*
|
||||
* @method Phaser.Tile#isInteresting
|
||||
* @param {boolean} collides - If true will check any collides value.
|
||||
* @param {boolean} faces - If true will check any face value.
|
||||
* @return {boolean} True if the Tile is interesting, otherwise false.
|
||||
*/
|
||||
isInteresting: function (collides, faces) {
|
||||
|
||||
if (collides && faces)
|
||||
{
|
||||
// Does this tile have any collide flags OR interesting face?
|
||||
return (this.collideLeft || this.collideRight || this.collideUp || this.collideDown || this.faceTop || this.faceBottom || this.faceLeft || this.faceRight || this.collisionCallback);
|
||||
}
|
||||
else if (collides)
|
||||
{
|
||||
// Does this tile collide?
|
||||
return (this.collideLeft || this.collideRight || this.collideUp || this.collideDown);
|
||||
}
|
||||
else if (faces)
|
||||
{
|
||||
// Does this tile have an interesting face?
|
||||
return (this.faceTop || this.faceBottom || this.faceLeft || this.faceRight);
|
||||
}
|
||||
|
||||
return false;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Copies the tile data and properties from the given tile to this tile.
|
||||
*
|
||||
* @method Phaser.Tile#copy
|
||||
* @param {Phaser.Tile} tile - The tile to copy from.
|
||||
*/
|
||||
copy: function (tile) {
|
||||
|
||||
this.index = tile.index;
|
||||
this.alpha = tile.alpha;
|
||||
this.properties = tile.properties;
|
||||
|
||||
this.collideUp = tile.collideUp;
|
||||
this.collideDown = tile.collideDown;
|
||||
this.collideLeft = tile.collideLeft;
|
||||
this.collideRight = tile.collideRight;
|
||||
|
||||
this.collisionCallback = tile.collisionCallback;
|
||||
this.collisionCallbackContext = tile.collisionCallbackContext;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Phaser.Tile.prototype.constructor = Phaser.Tile;
|
||||
|
||||
/**
|
||||
* @name Phaser.Tile#collides
|
||||
* @property {boolean} collides - True if this tile can collide on any of its faces.
|
||||
* @readonly
|
||||
*/
|
||||
Object.defineProperty(Phaser.Tile.prototype, "collides", {
|
||||
|
||||
get: function () {
|
||||
return (this.collideLeft || this.collideRight || this.collideUp || this.collideDown);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @name Phaser.Tile#canCollide
|
||||
* @property {boolean} canCollide - True if this tile can collide on any of its faces or has a collision callback set.
|
||||
* @readonly
|
||||
*/
|
||||
Object.defineProperty(Phaser.Tile.prototype, "canCollide", {
|
||||
|
||||
get: function () {
|
||||
return (this.collideLeft || this.collideRight || this.collideUp || this.collideDown || this.collisionCallback);
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @name Phaser.Tile#left
|
||||
* @property {number} left - The x value in pixels.
|
||||
* @readonly
|
||||
*/
|
||||
Object.defineProperty(Phaser.Tile.prototype, "left", {
|
||||
|
||||
get: function () {
|
||||
return this.worldX;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @name Phaser.Tile#right
|
||||
* @property {number} right - The sum of the x and width properties.
|
||||
* @readonly
|
||||
*/
|
||||
Object.defineProperty(Phaser.Tile.prototype, "right", {
|
||||
|
||||
get: function () {
|
||||
return this.worldX + this.width;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @name Phaser.Tile#top
|
||||
* @property {number} top - The y value.
|
||||
* @readonly
|
||||
*/
|
||||
Object.defineProperty(Phaser.Tile.prototype, "top", {
|
||||
|
||||
get: function () {
|
||||
return this.worldY;
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @name Phaser.Tile#bottom
|
||||
* @property {number} bottom - The sum of the y and height properties.
|
||||
* @readonly
|
||||
*/
|
||||
Object.defineProperty(Phaser.Tile.prototype, "bottom", {
|
||||
|
||||
get: function () {
|
||||
return this.worldY + this.height;
|
||||
}
|
||||
|
||||
});
|
||||
1768
src/tilemap/Tilemap.js
Normal file
1768
src/tilemap/Tilemap.js
Normal file
File diff suppressed because it is too large
Load Diff
799
src/tilemap/TilemapLayer.js
Normal file
799
src/tilemap/TilemapLayer.js
Normal file
@@ -0,0 +1,799 @@
|
||||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2014 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* A Tilemap Layer is a set of map data combined with a Tileset in order to render that data to the game.
|
||||
*
|
||||
* @class Phaser.TilemapLayer
|
||||
* @constructor
|
||||
* @param {Phaser.Game} game - Game reference to the currently running game.
|
||||
* @param {Phaser.Tilemap} tilemap - The tilemap to which this layer belongs.
|
||||
* @param {number} index - The layer index within the map that this TilemapLayer represents.
|
||||
* @param {number} width - Width of the renderable area of the layer.
|
||||
* @param {number} height - Height of the renderable area of the layer.
|
||||
*/
|
||||
Phaser.TilemapLayer = function (game, tilemap, index, width, height) {
|
||||
|
||||
/**
|
||||
* @property {Phaser.Game} game - A reference to the currently running Game.
|
||||
*/
|
||||
this.game = game;
|
||||
|
||||
/**
|
||||
* @property {Phaser.Tilemap} map - The Tilemap to which this layer is bound.
|
||||
*/
|
||||
this.map = tilemap;
|
||||
|
||||
/**
|
||||
* @property {number} index - The index of this layer within the Tilemap.
|
||||
*/
|
||||
this.index = index;
|
||||
|
||||
/**
|
||||
* @property {object} layer - The layer object within the Tilemap that this layer represents.
|
||||
*/
|
||||
this.layer = tilemap.layers[index];
|
||||
|
||||
/**
|
||||
* @property {HTMLCanvasElement} canvas - The canvas to which this TilemapLayer draws.
|
||||
*/
|
||||
this.canvas = Phaser.Canvas.create(width, height, '', true);
|
||||
|
||||
/**
|
||||
* @property {CanvasRenderingContext2D} context - The 2d context of the canvas.
|
||||
*/
|
||||
this.context = this.canvas.getContext('2d');
|
||||
|
||||
/**
|
||||
* @property {PIXI.BaseTexture} baseTexture - Required Pixi var.
|
||||
*/
|
||||
this.baseTexture = new PIXI.BaseTexture(this.canvas);
|
||||
|
||||
/**
|
||||
* @property {PIXI.Texture} texture - Required Pixi var.
|
||||
*/
|
||||
this.texture = new PIXI.Texture(this.baseTexture);
|
||||
|
||||
/**
|
||||
* @property {Phaser.Frame} textureFrame - Dimensions of the renderable area.
|
||||
*/
|
||||
this.textureFrame = new Phaser.Frame(0, 0, 0, width, height, 'tilemapLayer', game.rnd.uuid());
|
||||
|
||||
Phaser.Image.call(this, this.game, 0, 0, this.texture, this.textureFrame);
|
||||
|
||||
/**
|
||||
* @property {string} name - The name of the layer.
|
||||
*/
|
||||
this.name = '';
|
||||
|
||||
/**
|
||||
* @property {number} type - The const type of this object.
|
||||
* @default
|
||||
*/
|
||||
this.type = Phaser.TILEMAPLAYER;
|
||||
|
||||
/**
|
||||
* An object that is fixed to the camera ignores the position of any ancestors in the display list and uses its x/y coordinates as offsets from the top left of the camera.
|
||||
* @property {boolean} fixedToCamera - Fixes this object to the Camera.
|
||||
* @default
|
||||
*/
|
||||
this.fixedToCamera = true;
|
||||
|
||||
/**
|
||||
* @property {Phaser.Point} cameraOffset - If this object is fixed to the camera then use this Point to specify how far away from the Camera x/y it's rendered.
|
||||
*/
|
||||
this.cameraOffset = new Phaser.Point(0, 0);
|
||||
|
||||
/**
|
||||
* @property {string} tileColor - If no tileset is given the tiles will be rendered as rectangles in this color. Provide in hex or rgb/rgba string format.
|
||||
* @default
|
||||
*/
|
||||
this.tileColor = 'rgb(255, 255, 255)';
|
||||
|
||||
/**
|
||||
* @property {boolean} debug - If set to true the collideable tile edges path will be rendered. Only works when game is running in Phaser.CANVAS mode.
|
||||
* @default
|
||||
*/
|
||||
this.debug = false;
|
||||
|
||||
/**
|
||||
* @property {number} debugAlpha - If debug is true then the tileset is rendered with this alpha level, to make the tile edges clearer.
|
||||
* @default
|
||||
*/
|
||||
this.debugAlpha = 0.5;
|
||||
|
||||
/**
|
||||
* @property {string} debugColor - If debug is true this is the color used to outline the edges of collidable tiles. Provide in hex or rgb/rgba string format.
|
||||
* @default
|
||||
*/
|
||||
this.debugColor = 'rgba(0, 255, 0, 1)';
|
||||
|
||||
/**
|
||||
* @property {boolean} debugFill - If true the debug tiles are filled with debugFillColor AND stroked around.
|
||||
* @default
|
||||
*/
|
||||
this.debugFill = false;
|
||||
|
||||
/**
|
||||
* @property {string} debugFillColor - If debugFill is true this is the color used to fill the tiles. Provide in hex or rgb/rgba string format.
|
||||
* @default
|
||||
*/
|
||||
this.debugFillColor = 'rgba(0, 255, 0, 0.2)';
|
||||
|
||||
/**
|
||||
* @property {string} debugCallbackColor - If debug is true this is the color used to outline the edges of tiles that have collision callbacks. Provide in hex or rgb/rgba string format.
|
||||
* @default
|
||||
*/
|
||||
this.debugCallbackColor = 'rgba(255, 0, 0, 1)';
|
||||
|
||||
/**
|
||||
* @property {number} scrollFactorX - speed at which this layer scrolls
|
||||
* horizontally, relative to the camera (e.g. scrollFactorX of 0.5 scrolls
|
||||
* half as quickly as the 'normal' camera-locked layers do)
|
||||
* @default 1
|
||||
*/
|
||||
this.scrollFactorX = 1;
|
||||
|
||||
/**
|
||||
* @property {number} scrollFactorY - speed at which this layer scrolls
|
||||
* vertically, relative to the camera (e.g. scrollFactorY of 0.5 scrolls
|
||||
* half as quickly as the 'normal' camera-locked layers do)
|
||||
* @default 1
|
||||
*/
|
||||
this.scrollFactorY = 1;
|
||||
|
||||
/**
|
||||
* @property {boolean} dirty - Flag controlling when to re-render the layer.
|
||||
*/
|
||||
this.dirty = true;
|
||||
|
||||
/**
|
||||
* @property {number} rayStepRate - When ray-casting against tiles this is the number of steps it will jump. For larger tile sizes you can increase this to improve performance.
|
||||
* @default
|
||||
*/
|
||||
this.rayStepRate = 4;
|
||||
|
||||
/**
|
||||
* @property {object} _mc - Local map data and calculation cache.
|
||||
* @private
|
||||
*/
|
||||
this._mc = {
|
||||
|
||||
cw: tilemap.tileWidth,
|
||||
ch: tilemap.tileHeight,
|
||||
ga: 1,
|
||||
dx: 0,
|
||||
dy: 0,
|
||||
dw: 0,
|
||||
dh: 0,
|
||||
tx: 0,
|
||||
ty: 0,
|
||||
tw: 0,
|
||||
th: 0,
|
||||
tl: 0,
|
||||
maxX: 0,
|
||||
maxY: 0,
|
||||
startX: 0,
|
||||
startY: 0,
|
||||
x: 0,
|
||||
y: 0,
|
||||
prevX: 0,
|
||||
prevY: 0
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* @property {array} _results - Local render loop var to help avoid gc spikes.
|
||||
* @private
|
||||
*/
|
||||
this._results = [];
|
||||
|
||||
this.updateMax();
|
||||
|
||||
};
|
||||
|
||||
Phaser.TilemapLayer.prototype = Object.create(Phaser.Image.prototype);
|
||||
Phaser.TilemapLayer.prototype.constructor = Phaser.TilemapLayer;
|
||||
|
||||
/**
|
||||
* Automatically called by World.postUpdate. Handles cache updates.
|
||||
*
|
||||
* @method Phaser.TilemapLayer#postUpdate
|
||||
* @memberof Phaser.TilemapLayer
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.postUpdate = function () {
|
||||
|
||||
// console.log('layer pu');
|
||||
|
||||
Phaser.Image.prototype.postUpdate.call(this);
|
||||
|
||||
// Stops you being able to auto-scroll the camera if it's not following a sprite
|
||||
this.scrollX = this.game.camera.x * this.scrollFactorX;
|
||||
this.scrollY = this.game.camera.y * this.scrollFactorY;
|
||||
|
||||
this.render();
|
||||
|
||||
// Fixed to Camera?
|
||||
if (this._cache[7] === 1)
|
||||
{
|
||||
this.position.x = (this.game.camera.view.x + this.cameraOffset.x) / this.game.camera.scale.x;
|
||||
this.position.y = (this.game.camera.view.y + this.cameraOffset.y) / this.game.camera.scale.y;
|
||||
}
|
||||
|
||||
// Update any Children
|
||||
// for (var i = 0, len = this.children.length; i < len; i++)
|
||||
// {
|
||||
// this.children[i].postUpdate();
|
||||
// }
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Sets the world size to match the size of this layer.
|
||||
*
|
||||
* @method Phaser.TilemapLayer#resizeWorld
|
||||
* @memberof Phaser.TilemapLayer
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.resizeWorld = function () {
|
||||
|
||||
this.game.world.setBounds(0, 0, this.layer.widthInPixels, this.layer.heightInPixels);
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Take an x coordinate that doesn't account for scrollFactorX and 'fix' it
|
||||
* into a scrolled local space. Used primarily internally
|
||||
* @method Phaser.TilemapLayer#_fixX
|
||||
* @memberof Phaser.TilemapLayer
|
||||
* @private
|
||||
* @param {number} x - x coordinate in camera space
|
||||
* @return {number} x coordinate in scrollFactor-adjusted dimensions
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype._fixX = function(x) {
|
||||
|
||||
if (x < 0)
|
||||
{
|
||||
x = 0;
|
||||
}
|
||||
|
||||
if (this.scrollFactorX === 1)
|
||||
{
|
||||
return x;
|
||||
}
|
||||
|
||||
return this._mc.x + (x - (this._mc.x / this.scrollFactorX));
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Take an x coordinate that _does_ account for scrollFactorX and 'unfix' it
|
||||
* back to camera space. Used primarily internally
|
||||
* @method Phaser.TilemapLayer#_unfixX
|
||||
* @memberof Phaser.TilemapLayer
|
||||
* @private
|
||||
* @param {number} x - x coordinate in scrollFactor-adjusted dimensions
|
||||
* @return {number} x coordinate in camera space
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype._unfixX = function(x) {
|
||||
|
||||
if (this.scrollFactorX === 1)
|
||||
{
|
||||
return x;
|
||||
}
|
||||
|
||||
return (this._mc.x / this.scrollFactorX) + (x - this._mc.x);
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Take a y coordinate that doesn't account for scrollFactorY and 'fix' it
|
||||
* into a scrolled local space. Used primarily internally
|
||||
* @method Phaser.TilemapLayer#_fixY
|
||||
* @memberof Phaser.TilemapLayer
|
||||
* @private
|
||||
* @param {number} y - y coordinate in camera space
|
||||
* @return {number} y coordinate in scrollFactor-adjusted dimensions
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype._fixY = function(y) {
|
||||
|
||||
if (y < 0)
|
||||
{
|
||||
y = 0;
|
||||
}
|
||||
|
||||
if (this.scrollFactorY === 1)
|
||||
{
|
||||
return y;
|
||||
}
|
||||
|
||||
return this._mc.y + (y - (this._mc.y / this.scrollFactorY));
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Take a y coordinate that _does_ account for scrollFactorY and 'unfix' it
|
||||
* back to camera space. Used primarily internally
|
||||
* @method Phaser.TilemapLayer#_unfixY
|
||||
* @memberof Phaser.TilemapLayer
|
||||
* @private
|
||||
* @param {number} y - y coordinate in scrollFactor-adjusted dimensions
|
||||
* @return {number} y coordinate in camera space
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype._unfixY = function(y) {
|
||||
|
||||
if (this.scrollFactorY === 1)
|
||||
{
|
||||
return y;
|
||||
}
|
||||
|
||||
return (this._mc.y / this.scrollFactorY) + (y - this._mc.y);
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert a pixel value to a tile coordinate.
|
||||
* @method Phaser.TilemapLayer#getTileX
|
||||
* @memberof Phaser.TilemapLayer
|
||||
* @param {number} x - X position of the point in target tile.
|
||||
* @return {Phaser.Tile} The tile with specific properties.
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.getTileX = function (x) {
|
||||
|
||||
// var tileWidth = this.tileWidth * this.scale.x;
|
||||
|
||||
return this.game.math.snapToFloor(this._fixX(x), this.map.tileWidth) / this.map.tileWidth;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert a pixel value to a tile coordinate.
|
||||
* @method Phaser.TilemapLayer#getTileY
|
||||
* @memberof Phaser.TilemapLayer
|
||||
* @param {number} y - Y position of the point in target tile.
|
||||
* @return {Phaser.Tile} The tile with specific properties.
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.getTileY = function (y) {
|
||||
|
||||
// var tileHeight = this.tileHeight * this.scale.y;
|
||||
|
||||
return this.game.math.snapToFloor(this._fixY(y), this.map.tileHeight) / this.map.tileHeight;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Convert a pixel value to a tile coordinate.
|
||||
* @method Phaser.TilemapLayer#getTileXY
|
||||
* @memberof Phaser.TilemapLayer
|
||||
* @param {number} x - X position of the point in target tile.
|
||||
* @param {number} y - Y position of the point in target tile.
|
||||
* @param {Phaser.Point|object} point - The Point object to set the x and y values on.
|
||||
* @return {Phaser.Point|object} A Point object with its x and y properties set.
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.getTileXY = function (x, y, point) {
|
||||
|
||||
point.x = this.getTileX(x);
|
||||
point.y = this.getTileY(y);
|
||||
|
||||
return point;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Gets all tiles that intersect with the given line.
|
||||
*
|
||||
* @method Phaser.TilemapLayer#getRayCastTiles
|
||||
* @memberof Phaser.TilemapLayer
|
||||
* @param {Phaser.Line} line - The line used to determine which tiles to return.
|
||||
* @param {number} [stepRate] - How many steps through the ray will we check? If undefined or null it uses TilemapLayer.rayStepRate.
|
||||
* @param {boolean} [collides=false] - If true only return tiles that collide on one or more faces.
|
||||
* @param {boolean} [interestingFace=false] - If true only return tiles that have interesting faces.
|
||||
* @return {array<Phaser.Tile>} An array of Phaser.Tiles.
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.getRayCastTiles = function (line, stepRate, collides, interestingFace) {
|
||||
|
||||
if (typeof stepRate === 'undefined' || stepRate === null) { stepRate = this.rayStepRate; }
|
||||
if (typeof collides === 'undefined') { collides = false; }
|
||||
if (typeof interestingFace === 'undefined') { interestingFace = false; }
|
||||
|
||||
// First get all tiles that touch the bounds of the line
|
||||
var tiles = this.getTiles(line.x, line.y, line.width, line.height, collides, interestingFace);
|
||||
|
||||
if (tiles.length === 0)
|
||||
{
|
||||
return [];
|
||||
}
|
||||
|
||||
// Now we only want the tiles that intersect with the points on this line
|
||||
var coords = line.coordinatesOnLine(stepRate);
|
||||
var total = coords.length;
|
||||
var results = [];
|
||||
|
||||
for (var i = 0; i < tiles.length; i++)
|
||||
{
|
||||
for (var t = 0; t < total; t++)
|
||||
{
|
||||
if (tiles[i].containsPoint(coords[t][0], coords[t][1]))
|
||||
{
|
||||
results.push(tiles[i]);
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return results;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Get all tiles that exist within the given area, defined by the top-left corner, width and height. Values given are in pixels, not tiles.
|
||||
* @method Phaser.TilemapLayer#getTiles
|
||||
* @memberof Phaser.TilemapLayer
|
||||
* @param {number} x - X position of the top left corner.
|
||||
* @param {number} y - Y position of the top left corner.
|
||||
* @param {number} width - Width of the area to get.
|
||||
* @param {number} height - Height of the area to get.
|
||||
* @param {boolean} [collides=false] - If true only return tiles that collide on one or more faces.
|
||||
* @param {boolean} [interestingFace=false] - If true only return tiles that have interesting faces.
|
||||
* @return {array<Phaser.Tile>} An array of Phaser.Tiles.
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides, interestingFace) {
|
||||
|
||||
// Should we only get tiles that have at least one of their collision flags set? (true = yes, false = no just get them all)
|
||||
if (typeof collides === 'undefined') { collides = false; }
|
||||
if (typeof interestingFace === 'undefined') { interestingFace = false; }
|
||||
|
||||
// adjust the x,y coordinates for scrollFactor
|
||||
x = this._fixX(x);
|
||||
y = this._fixY(y);
|
||||
|
||||
if (width > this.layer.widthInPixels)
|
||||
{
|
||||
width = this.layer.widthInPixels;
|
||||
}
|
||||
|
||||
if (height > this.layer.heightInPixels)
|
||||
{
|
||||
height = this.layer.heightInPixels;
|
||||
}
|
||||
|
||||
// Convert the pixel values into tile coordinates
|
||||
this._mc.tx = this.game.math.snapToFloor(x, this._mc.cw) / this._mc.cw;
|
||||
this._mc.ty = this.game.math.snapToFloor(y, this._mc.ch) / this._mc.ch;
|
||||
this._mc.tw = (this.game.math.snapToCeil(width, this._mc.cw) + this._mc.cw) / this._mc.cw;
|
||||
this._mc.th = (this.game.math.snapToCeil(height, this._mc.ch) + this._mc.ch) / this._mc.ch;
|
||||
|
||||
// This should apply the layer x/y here
|
||||
this._results.length = 0;
|
||||
|
||||
for (var wy = this._mc.ty; wy < this._mc.ty + this._mc.th; wy++)
|
||||
{
|
||||
for (var wx = this._mc.tx; wx < this._mc.tx + this._mc.tw; wx++)
|
||||
{
|
||||
if (this.layer.data[wy] && this.layer.data[wy][wx])
|
||||
{
|
||||
if ((!collides && !interestingFace) || this.layer.data[wy][wx].isInteresting(collides, interestingFace))
|
||||
{
|
||||
this._results.push(this.layer.data[wy][wx]);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
return this._results;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Internal function to update maximum values.
|
||||
* @method Phaser.TilemapLayer#updateMax
|
||||
* @memberof Phaser.TilemapLayer
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.updateMax = function () {
|
||||
|
||||
this._mc.maxX = this.game.math.ceil(this.canvas.width / this.map.tileWidth) + 1;
|
||||
this._mc.maxY = this.game.math.ceil(this.canvas.height / this.map.tileHeight) + 1;
|
||||
|
||||
if (this.layer)
|
||||
{
|
||||
if (this._mc.maxX > this.layer.width)
|
||||
{
|
||||
this._mc.maxX = this.layer.width;
|
||||
}
|
||||
|
||||
if (this._mc.maxY > this.layer.height)
|
||||
{
|
||||
this._mc.maxY = this.layer.height;
|
||||
}
|
||||
}
|
||||
|
||||
this.dirty = true;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders the tiles to the layer canvas and pushes to the display.
|
||||
* @method Phaser.TilemapLayer#render
|
||||
* @memberof Phaser.TilemapLayer
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.render = function () {
|
||||
|
||||
if (this.layer.dirty)
|
||||
{
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
if (!this.dirty || !this.visible)
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
this._mc.prevX = this._mc.dx;
|
||||
this._mc.prevY = this._mc.dy;
|
||||
|
||||
this._mc.dx = -(this._mc.x - (this._mc.startX * this.map.tileWidth));
|
||||
this._mc.dy = -(this._mc.y - (this._mc.startY * this.map.tileHeight));
|
||||
|
||||
this._mc.tx = this._mc.dx;
|
||||
this._mc.ty = this._mc.dy;
|
||||
|
||||
this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
|
||||
|
||||
this.context.fillStyle = this.tileColor;
|
||||
|
||||
var tile;
|
||||
var set;
|
||||
|
||||
if (this.debug)
|
||||
{
|
||||
this.context.globalAlpha = this.debugAlpha;
|
||||
}
|
||||
|
||||
for (var y = this._mc.startY, lenY = this._mc.startY + this._mc.maxY; y < lenY; y++)
|
||||
{
|
||||
this._column = this.layer.data[y];
|
||||
|
||||
for (var x = this._mc.startX, lenX = this._mc.startX + this._mc.maxX; x < lenX; x++)
|
||||
{
|
||||
if (this._column[x])
|
||||
{
|
||||
tile = this._column[x];
|
||||
|
||||
if (tile.index > -1)
|
||||
{
|
||||
set = this.map.tilesets[this.map.tiles[tile.index][2]];
|
||||
|
||||
if (this.debug === false && tile.alpha !== this.context.globalAlpha)
|
||||
{
|
||||
this.context.globalAlpha = tile.alpha;
|
||||
}
|
||||
|
||||
set.draw(this.context, Math.floor(this._mc.tx), Math.floor(this._mc.ty), tile.index);
|
||||
|
||||
if (tile.debug)
|
||||
{
|
||||
this.context.fillStyle = 'rgba(0, 255, 0, 0.4)';
|
||||
this.context.fillRect(Math.floor(this._mc.tx), Math.floor(this._mc.ty), this.map.tileWidth, this.map.tileHeight);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
this._mc.tx += this.map.tileWidth;
|
||||
|
||||
}
|
||||
|
||||
this._mc.tx = this._mc.dx;
|
||||
this._mc.ty += this.map.tileHeight;
|
||||
|
||||
}
|
||||
|
||||
if (this.debug)
|
||||
{
|
||||
this.context.globalAlpha = 1;
|
||||
this.renderDebug();
|
||||
}
|
||||
|
||||
if (this.game.renderType === Phaser.WEBGL)
|
||||
{
|
||||
// PIXI.updateWebGLTexture(this.baseTexture, renderSession.gl);
|
||||
PIXI.updateWebGLTexture(this.baseTexture, this.game.renderer.gl);
|
||||
}
|
||||
|
||||
this.dirty = false;
|
||||
this.layer.dirty = false;
|
||||
|
||||
return true;
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* Renders a collision debug overlay on-top of the canvas. Called automatically by render when debug = true.
|
||||
* @method Phaser.TilemapLayer#renderDebug
|
||||
* @memberof Phaser.TilemapLayer
|
||||
*/
|
||||
Phaser.TilemapLayer.prototype.renderDebug = function () {
|
||||
|
||||
this._mc.tx = this._mc.dx;
|
||||
this._mc.ty = this._mc.dy;
|
||||
|
||||
this.context.strokeStyle = this.debugColor;
|
||||
this.context.fillStyle = this.debugFillColor;
|
||||
|
||||
for (var y = this._mc.startY, lenY = this._mc.startY + this._mc.maxY; y < lenY; y++)
|
||||
{
|
||||
this._column = this.layer.data[y];
|
||||
|
||||
for (var x = this._mc.startX, lenX = this._mc.startX + this._mc.maxX; x < lenX; x++)
|
||||
{
|
||||
var tile = this._column[x];
|
||||
|
||||
if (tile && (tile.faceTop || tile.faceBottom || tile.faceLeft || tile.faceRight))
|
||||
{
|
||||
this._mc.tx = Math.floor(this._mc.tx);
|
||||
|
||||
if (this.debugFill)
|
||||
{
|
||||
this.context.fillRect(this._mc.tx, this._mc.ty, this._mc.cw, this._mc.ch);
|
||||
}
|
||||
|
||||
this.context.beginPath();
|
||||
|
||||
if (tile.faceTop)
|
||||
{
|
||||
this.context.moveTo(this._mc.tx, this._mc.ty);
|
||||
this.context.lineTo(this._mc.tx + this._mc.cw, this._mc.ty);
|
||||
}
|
||||
|
||||
if (tile.faceBottom)
|
||||
{
|
||||
this.context.moveTo(this._mc.tx, this._mc.ty + this._mc.ch);
|
||||
this.context.lineTo(this._mc.tx + this._mc.cw, this._mc.ty + this._mc.ch);
|
||||
}
|
||||
|
||||
if (tile.faceLeft)
|
||||
{
|
||||
this.context.moveTo(this._mc.tx, this._mc.ty);
|
||||
this.context.lineTo(this._mc.tx, this._mc.ty + this._mc.ch);
|
||||
}
|
||||
|
||||
if (tile.faceRight)
|
||||
{
|
||||
this.context.moveTo(this._mc.tx + this._mc.cw, this._mc.ty);
|
||||
this.context.lineTo(this._mc.tx + this._mc.cw, this._mc.ty + this._mc.ch);
|
||||
}
|
||||
|
||||
this.context.stroke();
|
||||
}
|
||||
|
||||
this._mc.tx += this.map.tileWidth;
|
||||
|
||||
}
|
||||
|
||||
this._mc.tx = this._mc.dx;
|
||||
this._mc.ty += this.map.tileHeight;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
/**
|
||||
* @name Phaser.TilemapLayer#scrollX
|
||||
* @property {number} scrollX - Scrolls the map horizontally or returns the current x position.
|
||||
*/
|
||||
Object.defineProperty(Phaser.TilemapLayer.prototype, "scrollX", {
|
||||
|
||||
get: function () {
|
||||
return this._mc.x;
|
||||
},
|
||||
|
||||
set: function (value) {
|
||||
|
||||
if (value !== this._mc.x && value >= 0 && this.layer.widthInPixels > this.width)
|
||||
{
|
||||
this._mc.x = value;
|
||||
|
||||
if (this._mc.x > (this.layer.widthInPixels - this.width))
|
||||
{
|
||||
this._mc.x = this.layer.widthInPixels - this.width;
|
||||
}
|
||||
|
||||
this._mc.startX = this.game.math.floor(this._mc.x / this.map.tileWidth);
|
||||
|
||||
if (this._mc.startX < 0)
|
||||
{
|
||||
this._mc.startX = 0;
|
||||
}
|
||||
|
||||
if (this._mc.startX + this._mc.maxX > this.layer.width)
|
||||
{
|
||||
this._mc.startX = this.layer.width - this._mc.maxX;
|
||||
}
|
||||
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @name Phaser.TilemapLayer#scrollY
|
||||
* @property {number} scrollY - Scrolls the map vertically or returns the current y position.
|
||||
*/
|
||||
Object.defineProperty(Phaser.TilemapLayer.prototype, "scrollY", {
|
||||
|
||||
get: function () {
|
||||
return this._mc.y;
|
||||
},
|
||||
|
||||
set: function (value) {
|
||||
|
||||
if (value !== this._mc.y && value >= 0 && this.layer.heightInPixels > this.height)
|
||||
{
|
||||
this._mc.y = value;
|
||||
|
||||
if (this._mc.y > (this.layer.heightInPixels - this.height))
|
||||
{
|
||||
this._mc.y = this.layer.heightInPixels - this.height;
|
||||
}
|
||||
|
||||
this._mc.startY = this.game.math.floor(this._mc.y / this.map.tileHeight);
|
||||
|
||||
if (this._mc.startY < 0)
|
||||
{
|
||||
this._mc.startY = 0;
|
||||
}
|
||||
|
||||
if (this._mc.startY + this._mc.maxY > this.layer.height)
|
||||
{
|
||||
this._mc.startY = this.layer.height - this._mc.maxY;
|
||||
}
|
||||
|
||||
this.dirty = true;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @name Phaser.TilemapLayer#collisionWidth
|
||||
* @property {number} collisionWidth - The width of the collision tiles.
|
||||
*/
|
||||
Object.defineProperty(Phaser.TilemapLayer.prototype, "collisionWidth", {
|
||||
|
||||
get: function () {
|
||||
return this._mc.cw;
|
||||
},
|
||||
|
||||
set: function (value) {
|
||||
|
||||
this._mc.cw = value;
|
||||
|
||||
this.dirty = true;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
/**
|
||||
* @name Phaser.TilemapLayer#collisionHeight
|
||||
* @property {number} collisionHeight - The height of the collision tiles.
|
||||
*/
|
||||
Object.defineProperty(Phaser.TilemapLayer.prototype, "collisionHeight", {
|
||||
|
||||
get: function () {
|
||||
return this._mc.ch;
|
||||
},
|
||||
|
||||
set: function (value) {
|
||||
|
||||
this._mc.ch = value;
|
||||
|
||||
this.dirty = true;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
497
src/tilemap/TilemapParser.js
Normal file
497
src/tilemap/TilemapParser.js
Normal file
@@ -0,0 +1,497 @@
|
||||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2014 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* Phaser.TilemapParser parses data objects from Phaser.Loader that need more preparation before they can be inserted into a Tilemap.
|
||||
*
|
||||
* @class Phaser.TilemapParser
|
||||
*/
|
||||
Phaser.TilemapParser = {
|
||||
|
||||
/**
|
||||
* Parse tilemap data from the cache and creates a Tilemap object.
|
||||
*
|
||||
* @method Phaser.TilemapParser.parse
|
||||
* @param {Phaser.Game} game - Game reference to the currently running game.
|
||||
* @param {string} key - The key of the tilemap in the Cache.
|
||||
* @param {number} [tileWidth=32] - The pixel width of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
|
||||
* @param {number} [tileHeight=32] - The pixel height of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
|
||||
* @param {number} [width=10] - The width of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
|
||||
* @param {number} [height=10] - The height of the map in tiles. If this map is created from Tiled or CSV data you don't need to specify this.
|
||||
* @return {object} The parsed map object.
|
||||
*/
|
||||
parse: function (game, key, tileWidth, tileHeight, width, height) {
|
||||
|
||||
if (typeof tileWidth === 'undefined') { tileWidth = 32; }
|
||||
if (typeof tileHeight === 'undefined') { tileHeight = 32; }
|
||||
if (typeof width === 'undefined') { width = 10; }
|
||||
if (typeof height === 'undefined') { height = 10; }
|
||||
|
||||
if (typeof key === 'undefined')
|
||||
{
|
||||
return this.getEmptyData();
|
||||
}
|
||||
|
||||
if (key === null)
|
||||
{
|
||||
return this.getEmptyData(tileWidth, tileHeight, width, height);
|
||||
}
|
||||
|
||||
var map = game.cache.getTilemapData(key);
|
||||
|
||||
if (map)
|
||||
{
|
||||
if (map.format === Phaser.Tilemap.CSV)
|
||||
{
|
||||
return this.parseCSV(key, map.data, tileWidth, tileHeight);
|
||||
}
|
||||
else if (!map.format || map.format === Phaser.Tilemap.TILED_JSON)
|
||||
{
|
||||
return this.parseTiledJSON(map.data);
|
||||
}
|
||||
}
|
||||
else
|
||||
{
|
||||
console.warn('Phaser.TilemapParser.parse - No map data found for key ' + key);
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Parses a CSV file into valid map data.
|
||||
*
|
||||
* @method Phaser.TilemapParser.parseCSV
|
||||
* @param {string} data - The CSV file data.
|
||||
* @param {number} [tileWidth=32] - The pixel width of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
|
||||
* @param {number} [tileHeight=32] - The pixel height of a single map tile. If using CSV data you must specify this. Not required if using Tiled map data.
|
||||
* @return {object} Generated map data.
|
||||
*/
|
||||
parseCSV: function (key, data, tileWidth, tileHeight) {
|
||||
|
||||
var map = this.getEmptyData();
|
||||
|
||||
// Trim any rogue whitespace from the data
|
||||
data = data.trim();
|
||||
|
||||
var output = [];
|
||||
var rows = data.split("\n");
|
||||
var height = rows.length;
|
||||
var width = 0;
|
||||
|
||||
for (var y = 0; y < rows.length; y++)
|
||||
{
|
||||
output[y] = [];
|
||||
|
||||
var column = rows[y].split(",");
|
||||
|
||||
for (var x = 0; x < column.length; x++)
|
||||
{
|
||||
output[y][x] = new Phaser.Tile(map.layers[0], parseInt(column[x], 10), x, y, tileWidth, tileHeight);
|
||||
}
|
||||
|
||||
if (width === 0)
|
||||
{
|
||||
width = column.length;
|
||||
}
|
||||
}
|
||||
|
||||
map.format = Phaser.Tilemap.CSV;
|
||||
map.name = key;
|
||||
map.width = width;
|
||||
map.height = height;
|
||||
map.tileWidth = tileWidth;
|
||||
map.tileHeight = tileHeight;
|
||||
map.widthInPixels = width * tileWidth;
|
||||
map.heightInPixels = height * tileHeight;
|
||||
|
||||
map.layers[0].width = width;
|
||||
map.layers[0].height = height;
|
||||
map.layers[0].widthInPixels = map.widthInPixels;
|
||||
map.layers[0].heightInPixels = map.heightInPixels;
|
||||
map.layers[0].data = output;
|
||||
|
||||
return map;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Returns an empty map data object.
|
||||
*
|
||||
* @method Phaser.TilemapParser.getEmptyData
|
||||
* @return {object} Generated map data.
|
||||
*/
|
||||
getEmptyData: function (tileWidth, tileHeight, width, height) {
|
||||
|
||||
var map = {};
|
||||
|
||||
map.width = 0;
|
||||
map.height = 0;
|
||||
map.tileWidth = 0;
|
||||
map.tileHeight = 0;
|
||||
|
||||
if (typeof tileWidth !== 'undefined' && tileWidth !== null) { map.tileWidth = tileWidth; }
|
||||
if (typeof tileHeight !== 'undefined' && tileHeight !== null) { map.tileHeight = tileHeight; }
|
||||
if (typeof width !== 'undefined' && width !== null) { map.width = width; }
|
||||
if (typeof height !== 'undefined' && height !== null) { map.height = height; }
|
||||
|
||||
map.orientation = 'orthogonal';
|
||||
map.version = '1';
|
||||
map.properties = {};
|
||||
map.widthInPixels = 0;
|
||||
map.heightInPixels = 0;
|
||||
|
||||
var layers = [];
|
||||
|
||||
var layer = {
|
||||
|
||||
name: 'layer',
|
||||
x: 0,
|
||||
y: 0,
|
||||
width: 0,
|
||||
height: 0,
|
||||
widthInPixels: 0,
|
||||
heightInPixels: 0,
|
||||
alpha: 1,
|
||||
visible: true,
|
||||
properties: {},
|
||||
indexes: [],
|
||||
callbacks: [],
|
||||
data: []
|
||||
|
||||
};
|
||||
|
||||
// fill with nulls?
|
||||
|
||||
layers.push(layer);
|
||||
|
||||
map.layers = layers;
|
||||
map.images = [];
|
||||
map.objects = {};
|
||||
map.collision = {};
|
||||
map.tilesets = [];
|
||||
map.tiles = [];
|
||||
|
||||
return map;
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Parses a Tiled JSON file into valid map data.
|
||||
* @method Phaser.TilemapParser.parseJSON
|
||||
* @param {object} json - The JSON map data.
|
||||
* @return {object} Generated and parsed map data.
|
||||
*/
|
||||
parseTiledJSON: function (json) {
|
||||
|
||||
if (json.orientation !== 'orthogonal')
|
||||
{
|
||||
console.warn('TilemapParser.parseTiledJSON: Only orthogonal map types are supported in this version of Phaser');
|
||||
return null;
|
||||
}
|
||||
|
||||
// Map data will consist of: layers, objects, images, tilesets, sizes
|
||||
var map = {};
|
||||
|
||||
map.width = json.width;
|
||||
map.height = json.height;
|
||||
map.tileWidth = json.tilewidth;
|
||||
map.tileHeight = json.tileheight;
|
||||
map.orientation = json.orientation;
|
||||
map.format = Phaser.Tilemap.TILED_JSON;
|
||||
map.version = json.version;
|
||||
map.properties = json.properties;
|
||||
map.widthInPixels = map.width * map.tileWidth;
|
||||
map.heightInPixels = map.height * map.tileHeight;
|
||||
|
||||
// Tile Layers
|
||||
var layers = [];
|
||||
|
||||
for (var i = 0; i < json.layers.length; i++)
|
||||
{
|
||||
if (json.layers[i].type !== 'tilelayer')
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
var layer = {
|
||||
|
||||
name: json.layers[i].name,
|
||||
x: json.layers[i].x,
|
||||
y: json.layers[i].y,
|
||||
width: json.layers[i].width,
|
||||
height: json.layers[i].height,
|
||||
widthInPixels: json.layers[i].width * json.tilewidth,
|
||||
heightInPixels: json.layers[i].height * json.tileheight,
|
||||
alpha: json.layers[i].opacity,
|
||||
visible: json.layers[i].visible,
|
||||
properties: {},
|
||||
indexes: [],
|
||||
callbacks: [],
|
||||
bodies: []
|
||||
|
||||
};
|
||||
|
||||
if (json.layers[i].properties)
|
||||
{
|
||||
layer.properties = json.layers[i].properties;
|
||||
}
|
||||
|
||||
var x = 0;
|
||||
var row = [];
|
||||
var output = [];
|
||||
|
||||
// Loop through the data field in the JSON.
|
||||
|
||||
// This is an array containing the tile indexes, one after the other. -1 = no tile, everything else = the tile index (starting at 1 for Tiled, 0 for CSV)
|
||||
// If the map contains multiple tilesets then the indexes are relative to that which the set starts from.
|
||||
// Need to set which tileset in the cache = which tileset in the JSON, if you do this manually it means you can use the same map data but a new tileset.
|
||||
|
||||
for (var t = 0, len = json.layers[i].data.length; t < len; t++)
|
||||
{
|
||||
// index, x, y, width, height
|
||||
if (json.layers[i].data[t] > 0)
|
||||
{
|
||||
row.push(new Phaser.Tile(layer, json.layers[i].data[t], x, output.length, json.tilewidth, json.tileheight));
|
||||
}
|
||||
else
|
||||
{
|
||||
row.push(new Phaser.Tile(layer, -1, x, output.length, json.tilewidth, json.tileheight));
|
||||
}
|
||||
|
||||
x++;
|
||||
|
||||
if (x === json.layers[i].width)
|
||||
{
|
||||
output.push(row);
|
||||
x = 0;
|
||||
row = [];
|
||||
}
|
||||
}
|
||||
|
||||
layer.data = output;
|
||||
|
||||
layers.push(layer);
|
||||
|
||||
}
|
||||
|
||||
map.layers = layers;
|
||||
|
||||
// Images
|
||||
var images = [];
|
||||
|
||||
for (var i = 0; i < json.layers.length; i++)
|
||||
{
|
||||
if (json.layers[i].type !== 'imagelayer')
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
var image = {
|
||||
|
||||
name: json.layers[i].name,
|
||||
image: json.layers[i].image,
|
||||
x: json.layers[i].x,
|
||||
y: json.layers[i].y,
|
||||
alpha: json.layers[i].opacity,
|
||||
visible: json.layers[i].visible,
|
||||
properties: {}
|
||||
|
||||
};
|
||||
|
||||
if (json.layers[i].properties)
|
||||
{
|
||||
image.properties = json.layers[i].properties;
|
||||
}
|
||||
|
||||
images.push(image);
|
||||
|
||||
}
|
||||
|
||||
map.images = images;
|
||||
|
||||
// Tilesets
|
||||
var tilesets = [];
|
||||
|
||||
for (var i = 0; i < json.tilesets.length; i++)
|
||||
{
|
||||
// name, firstgid, width, height, margin, spacing, properties
|
||||
var set = json.tilesets[i];
|
||||
var newSet = new Phaser.Tileset(set.name, set.firstgid, set.tilewidth, set.tileheight, set.margin, set.spacing, set.properties);
|
||||
|
||||
if (set.tileproperties)
|
||||
{
|
||||
newSet.tileProperties = set.tileproperties;
|
||||
}
|
||||
|
||||
newSet.rows = Math.round((set.imageheight - set.margin) / (set.tileheight + set.spacing));
|
||||
newSet.columns = Math.round((set.imagewidth - set.margin) / (set.tilewidth + set.spacing));
|
||||
newSet.total = newSet.rows * newSet.columns;
|
||||
|
||||
if (newSet.rows % 1 !== 0 || newSet.columns % 1 !== 0)
|
||||
{
|
||||
console.warn('TileSet image dimensions do not match expected dimensions. Tileset width/height must be evenly divisible by Tilemap tile width/height.');
|
||||
}
|
||||
else
|
||||
{
|
||||
tilesets.push(newSet);
|
||||
}
|
||||
}
|
||||
|
||||
map.tilesets = tilesets;
|
||||
|
||||
// Objects & Collision Data (polylines, etc)
|
||||
var objects = {};
|
||||
var collision = {};
|
||||
|
||||
function slice (obj, fields) {
|
||||
var sliced = {};
|
||||
for (var k in fields) {
|
||||
var key = fields[k];
|
||||
sliced[key] = obj[key];
|
||||
}
|
||||
return sliced;
|
||||
}
|
||||
|
||||
for (var i = 0; i < json.layers.length; i++)
|
||||
{
|
||||
if (json.layers[i].type !== 'objectgroup')
|
||||
{
|
||||
continue;
|
||||
}
|
||||
|
||||
objects[json.layers[i].name] = [];
|
||||
collision[json.layers[i].name] = [];
|
||||
|
||||
for (var v = 0, len = json.layers[i].objects.length; v < len; v++)
|
||||
{
|
||||
// Object Tiles
|
||||
if (json.layers[i].objects[v].gid)
|
||||
{
|
||||
var object = {
|
||||
|
||||
gid: json.layers[i].objects[v].gid,
|
||||
name: json.layers[i].objects[v].name,
|
||||
x: json.layers[i].objects[v].x,
|
||||
y: json.layers[i].objects[v].y,
|
||||
visible: json.layers[i].objects[v].visible,
|
||||
properties: json.layers[i].objects[v].properties
|
||||
|
||||
};
|
||||
|
||||
objects[json.layers[i].name].push(object);
|
||||
}
|
||||
else if (json.layers[i].objects[v].polyline)
|
||||
{
|
||||
var object = {
|
||||
|
||||
name: json.layers[i].objects[v].name,
|
||||
x: json.layers[i].objects[v].x,
|
||||
y: json.layers[i].objects[v].y,
|
||||
width: json.layers[i].objects[v].width,
|
||||
height: json.layers[i].objects[v].height,
|
||||
visible: json.layers[i].objects[v].visible,
|
||||
properties: json.layers[i].objects[v].properties
|
||||
|
||||
};
|
||||
|
||||
object.polyline = [];
|
||||
|
||||
// Parse the polyline into an array
|
||||
for (var p = 0; p < json.layers[i].objects[v].polyline.length; p++)
|
||||
{
|
||||
object.polyline.push([ json.layers[i].objects[v].polyline[p].x, json.layers[i].objects[v].polyline[p].y ]);
|
||||
}
|
||||
|
||||
collision[json.layers[i].name].push(object);
|
||||
}
|
||||
// polygon
|
||||
else if (json.layers[i].objects[v].polygon)
|
||||
{
|
||||
var object = slice(json.layers[i].objects[v],
|
||||
["name", "x", "y", "visible", "properties" ]);
|
||||
|
||||
// Parse the polygon into an array
|
||||
object.polygon = [];
|
||||
for (var p = 0; p < json.layers[i].objects[v].polygon.length; p++)
|
||||
{
|
||||
object.polygon.push([ json.layers[i].objects[v].polygon[p].x, json.layers[i].objects[v].polygon[p].y ]);
|
||||
}
|
||||
objects[json.layers[i].name].push(object);
|
||||
|
||||
}
|
||||
// ellipse
|
||||
else if (json.layers[i].objects[v].ellipse)
|
||||
{
|
||||
var object = slice(json.layers[i].objects[v],
|
||||
["name", "ellipse", "x", "y", "width", "height", "visible", "properties" ]);
|
||||
objects[json.layers[i].name].push(object);
|
||||
}
|
||||
// otherwise it's a rectangle
|
||||
else
|
||||
{
|
||||
var object = slice(json.layers[i].objects[v],
|
||||
["name", "x", "y", "width", "height", "visible", "properties" ]);
|
||||
object.rectangle = true;
|
||||
objects[json.layers[i].name].push(object);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
map.objects = objects;
|
||||
map.collision = collision;
|
||||
|
||||
map.tiles = [];
|
||||
|
||||
// Finally lets build our super tileset index
|
||||
for (var i = 0; i < map.tilesets.length; i++)
|
||||
{
|
||||
var set = map.tilesets[i];
|
||||
|
||||
var x = set.tileMargin;
|
||||
var y = set.tileMargin;
|
||||
|
||||
var count = 0;
|
||||
var countX = 0;
|
||||
var countY = 0;
|
||||
|
||||
for (var t = set.firstgid; t < set.firstgid + set.total; t++)
|
||||
{
|
||||
// Can add extra properties here as needed
|
||||
map.tiles[t] = [x, y, i];
|
||||
|
||||
x += set.tileWidth + set.tileSpacing;
|
||||
|
||||
count++;
|
||||
|
||||
if (count === set.total)
|
||||
{
|
||||
break;
|
||||
}
|
||||
|
||||
countX++;
|
||||
|
||||
if (countX === set.columns)
|
||||
{
|
||||
x = set.tileMargin;
|
||||
y += set.tileHeight + set.tileSpacing;
|
||||
|
||||
countX = 0;
|
||||
countY++;
|
||||
|
||||
if (countY === set.rows)
|
||||
{
|
||||
break;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
return map;
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
177
src/tilemap/Tileset.js
Normal file
177
src/tilemap/Tileset.js
Normal file
@@ -0,0 +1,177 @@
|
||||
/**
|
||||
* @author Richard Davey <rich@photonstorm.com>
|
||||
* @copyright 2014 Photon Storm Ltd.
|
||||
* @license {@link https://github.com/photonstorm/phaser/blob/master/license.txt|MIT License}
|
||||
*/
|
||||
|
||||
/**
|
||||
* A Tile set is a combination of an image containing the tiles and collision data per tile.
|
||||
* You should not normally instantiate this class directly.
|
||||
*
|
||||
* @class Phaser.Tileset
|
||||
* @constructor
|
||||
* @param {string} name - The name of the tileset in the map data.
|
||||
* @param {number} firstgid - The Tiled firstgid value. In non-Tiled data this should be considered the starting index value of the first tile in this set.
|
||||
* @param {number} [width=32] - Width of each tile in pixels.
|
||||
* @param {number} [height=32] - Height of each tile in pixels.
|
||||
* @param {number} [margin=0] - The amount of margin around the tilesheet.
|
||||
* @param {number} [spacing=0] - The amount of spacing between each tile in the sheet.
|
||||
* @param {object} [properties] - Tileset properties.
|
||||
*/
|
||||
Phaser.Tileset = function (name, firstgid, width, height, margin, spacing, properties) {
|
||||
|
||||
if (typeof width === 'undefined' || width <= 0) { width = 32; }
|
||||
if (typeof height === 'undefined' || height <= 0) { height = 32; }
|
||||
if (typeof margin === 'undefined') { margin = 0; }
|
||||
if (typeof spacing === 'undefined') { spacing = 0; }
|
||||
|
||||
/**
|
||||
* @property {string} name - The name of the Tileset.
|
||||
*/
|
||||
this.name = name;
|
||||
|
||||
/**
|
||||
* @property {number} firstgid - The Tiled firstgid value. In non-Tiled data this should be considered the starting index value of the first tile in this set.
|
||||
*/
|
||||
this.firstgid = firstgid;
|
||||
|
||||
/**
|
||||
* @property {number} tileWidth - The width of a tile in pixels.
|
||||
*/
|
||||
this.tileWidth = width;
|
||||
|
||||
/**
|
||||
* @property {number} tileHeight - The height of a tile in pixels.
|
||||
*/
|
||||
this.tileHeight = height;
|
||||
|
||||
/**
|
||||
* @property {number} tileMargin - The margin around the tiles in the tileset.
|
||||
*/
|
||||
this.tileMargin = margin;
|
||||
|
||||
/**
|
||||
* @property {number} tileSpacing - The spacing in pixels between each tile in the tileset.
|
||||
*/
|
||||
this.tileSpacing = spacing;
|
||||
|
||||
/**
|
||||
* @property {object} properties - Tileset specific properties (typically defined in the Tiled editor).
|
||||
*/
|
||||
this.properties = properties;
|
||||
|
||||
/**
|
||||
* @property {object} image - The image used for rendering. This is a reference to the image stored in Phaser.Cache.
|
||||
*/
|
||||
this.image = null;
|
||||
|
||||
/**
|
||||
* @property {number} rows - The number of rows in the tile sheet.
|
||||
*/
|
||||
this.rows = 0;
|
||||
|
||||
/**
|
||||
* @property {number} columns - The number of columns in the tile sheet.
|
||||
*/
|
||||
this.columns = 0;
|
||||
|
||||
/**
|
||||
* @property {number} total - The total number of tiles in the tilesheet.
|
||||
*/
|
||||
this.total = 0;
|
||||
|
||||
/**
|
||||
* @property {array} draw - The tile drawImage look-up table
|
||||
* @private
|
||||
*/
|
||||
this.drawCoords = [];
|
||||
|
||||
};
|
||||
|
||||
Phaser.Tileset.prototype = {
|
||||
|
||||
/**
|
||||
* Draws a tile from this Tileset at the given coordinates on the context.
|
||||
*
|
||||
* @method Phaser.Tileset#draw
|
||||
* @param {HTMLCanvasContext} context - The context to draw the tile onto.
|
||||
* @param {number} x - The x coordinate to draw to.
|
||||
* @param {number} y - The y coordinate to draw to.
|
||||
* @param {number} index - The index of the tile within the set to draw.
|
||||
*/
|
||||
draw: function (context, x, y, index) {
|
||||
|
||||
if (!this.image || !this.drawCoords[index])
|
||||
{
|
||||
return;
|
||||
}
|
||||
|
||||
context.drawImage(
|
||||
this.image,
|
||||
this.drawCoords[index][0],
|
||||
this.drawCoords[index][1],
|
||||
this.tileWidth,
|
||||
this.tileHeight,
|
||||
x,
|
||||
y,
|
||||
this.tileWidth,
|
||||
this.tileHeight
|
||||
);
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Adds a reference from this Tileset to an Image stored in the Phaser.Cache.
|
||||
*
|
||||
* @method Phaser.Tileset#setImage
|
||||
* @param {Image} image - The image this tileset will use to draw with.
|
||||
*/
|
||||
setImage: function (image) {
|
||||
|
||||
this.image = image;
|
||||
|
||||
this.rows = Math.round((image.height - this.tileMargin) / (this.tileHeight + this.tileSpacing));
|
||||
this.columns = Math.round((image.width - this.tileMargin) / (this.tileWidth + this.tileSpacing));
|
||||
this.total = this.rows * this.columns;
|
||||
|
||||
// Create the index look-up
|
||||
this.drawCoords.length = 0;
|
||||
|
||||
var tx = this.tileMargin;
|
||||
var ty = this.tileMargin;
|
||||
var i = this.firstgid;
|
||||
|
||||
for (var y = 0; y < this.rows; y++)
|
||||
{
|
||||
for (var x = 0; x < this.columns; x++)
|
||||
{
|
||||
this.drawCoords[i] = [ tx, ty ];
|
||||
tx += this.tileWidth + this.tileSpacing;
|
||||
i++;
|
||||
}
|
||||
|
||||
tx = this.tileMargin;
|
||||
ty += this.tileHeight + this.tileSpacing;
|
||||
}
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* Sets tile spacing and margins.
|
||||
*
|
||||
* @method Phaser.Tileset#setSpacing
|
||||
* @param {number} [tileMargin] - The margin around the tiles in the sheet.
|
||||
* @param {number} [tileSpacing] - The spacing between the tiles in the sheet.
|
||||
*/
|
||||
setSpacing: function (margin, spacing) {
|
||||
|
||||
this.tileMargin = margin;
|
||||
this.tileSpacing = spacing;
|
||||
|
||||
this.setImage(this.image);
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
Phaser.Tileset.prototype.constructor = Phaser.Tileset;
|
||||
Reference in New Issue
Block a user