diff --git a/examples/js.php b/examples/js.php index 82cf5682..c60f0eb0 100644 --- a/examples/js.php +++ b/examples/js.php @@ -102,4 +102,7 @@ + + + diff --git a/examples/rendertexture.php b/examples/rendertexture.php index 14c9d338..1746e071 100644 --- a/examples/rendertexture.php +++ b/examples/rendertexture.php @@ -22,8 +22,13 @@ function create() { - // var tempSprite = game.add.sprite(game.world.randomX, game.world.randomY, game.rnd.pick(images)); - var renderTexture = new Phaser.RenderTexture(800, 600); + var tempSprite = game.add.sprite(0, 0, 'atari1'); + tempSprite.visible = false; + + var renderTexture = game.add.renderTexture('fuji', 320, 200); + renderTexture.render(tempSprite); + + var texturedSprite = game.add.sprite(400, 300, renderTexture); } diff --git a/examples/sprite_extend.php b/examples/sprite_extend.php index d8bc2de0..77853a9b 100644 --- a/examples/sprite_extend.php +++ b/examples/sprite_extend.php @@ -31,7 +31,7 @@ MonsterBunny.prototype.update = function() { (function () { - var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render }); + var game = new Phaser.Game(800, 600, Phaser.AUTO, '', { preload: preload, create: create }); function preload() { @@ -49,12 +49,6 @@ MonsterBunny.prototype.update = function() { } - function update() { - } - - function render() { - } - })(); diff --git a/examples/tilemap.php b/examples/tilemap.php new file mode 100644 index 00000000..1b4f9600 --- /dev/null +++ b/examples/tilemap.php @@ -0,0 +1,69 @@ + + + + phaser.js - a new beginning + + + + + + + + \ No newline at end of file diff --git a/src/gameobjects/GameObjectFactory.js b/src/gameobjects/GameObjectFactory.js index 0bf887ff..2c5a221c 100644 --- a/src/gameobjects/GameObjectFactory.js +++ b/src/gameobjects/GameObjectFactory.js @@ -21,13 +21,13 @@ Phaser.GameObjectFactory.prototype = { * * @param x {number} X position of the new sprite. * @param y {number} Y position of the new sprite. - * @param [key] {string} The image key as defined in the Game.Cache to use as the texture for this sprite + * @param [texture] {string|RenderTexture} The image key as defined in the Game.Cache to use as the texture for this sprite OR a RenderTexture * @param [frame] {string|number} If the sprite uses an image from a texture atlas or sprite sheet you can pass the frame here. Either a number for a frame ID or a string for a frame name. * @returns {Sprite} The newly created sprite object. */ - sprite: function (x, y, key, frame) { + sprite: function (x, y, texture, frame) { - return this.world.add(new Phaser.Sprite(this.game, x, y, key, frame)); + return this.world.add(new Phaser.Sprite(this.game, x, y, texture, frame)); }, @@ -36,13 +36,13 @@ Phaser.GameObjectFactory.prototype = { * * @param x {number} X position of the new sprite. * @param y {number} Y position of the new sprite. - * @param [key] {string} The image key as defined in the Game.Cache to use as the texture for this sprite + * @param [texture] {string|RenderTexture} The image key as defined in the Game.Cache to use as the texture for this sprite OR a RenderTexture * @param [frame] {string|number} If the sprite uses an image from a texture atlas or sprite sheet you can pass the frame here. Either a number for a frame ID or a string for a frame name. * @returns {Sprite} The newly created sprite object. */ - child: function (parent, x, y, key, frame) { + child: function (parent, x, y, texture, frame) { - var child = this.world.add(new Phaser.Sprite(this.game, x, y, key, frame)); + var child = this.world.add(new Phaser.Sprite(this.game, x, y, texture, frame)); parent.addChild(child); return child; @@ -52,12 +52,11 @@ Phaser.GameObjectFactory.prototype = { * Create a tween object for a specific object. The object can be any JavaScript object or Phaser object such as Sprite. * * @param obj {object} Object the tween will be run on. - * @param [localReference] {bool} If true the tween will be stored in the object.tween property so long as it exists. If already set it'll be over-written. * @return {Phaser.Tween} The newly created tween object. */ - tween: function (obj, localReference) { + tween: function (obj) { - return this.game.tweens.create(obj, localReference); + return this.game.tweens.create(obj); }, @@ -109,4 +108,14 @@ Phaser.GameObjectFactory.prototype = { }, + renderTexture: function (key, width, height) { + + var texture = new Phaser.RenderTexture(this.game, key, width, height); + + this.game.cache.addRenderTexture(key, texture); + + return texture; + + }, + }; \ No newline at end of file diff --git a/src/gameobjects/RenderTexture.js b/src/gameobjects/RenderTexture.js index 3d0638ab..d37ad79d 100644 --- a/src/gameobjects/RenderTexture.js +++ b/src/gameobjects/RenderTexture.js @@ -1,17 +1,9 @@ -Phaser.RenderTexture = function (game, width, height) { - - // If exists = false then the Sprite isn't updated by the core game loop or physics subsystem at all - this.exists = true; - - // This is a handy little var your game can use to determine if a sprite is alive or not, it doesn't effect rendering - this.alive = true; - - this.group = null; - - this.name = ''; +Phaser.RenderTexture = function (game, key, width, height) { this.game = game; + this.name = key; + PIXI.EventTarget.call( this ); this.width = width || 100; diff --git a/src/gameobjects/Sprite.js b/src/gameobjects/Sprite.js index 68d4e622..c6810c42 100644 --- a/src/gameobjects/Sprite.js +++ b/src/gameobjects/Sprite.js @@ -1,8 +1,8 @@ -Phaser.Sprite = function (game, x, y, key, frame) { +Phaser.Sprite = function (game, x, y, texture, frame) { x = x || 0; y = y || 0; - key = key || null; + texture = texture || null; frame = frame || null; this.game = game; @@ -23,13 +23,47 @@ Phaser.Sprite = function (game, x, y, key, frame) { // The lifespan is decremented by game.time.elapsed each update, once it reaches zero the kill() function is called. this.lifespan = 0; - if (key == null || this.game.cache.checkImageKey(key) == false) + if (texture instanceof Phaser.RenderTexture) { - key = '__default'; + PIXI.Sprite.call(this, texture); + + this.currentFrame = this.game.cache.getTextureFrame(texture.name); + } + else + { + if (texture == null || this.game.cache.checkImageKey(texture) == false) + { + texture = '__default'; + } + + PIXI.Sprite.call(this, PIXI.TextureCache[texture]); + + if (this.game.cache.isSpriteSheet(texture)) + { + this.animations.loadFrameData(this.game.cache.getFrameData(texture)); + + if (frame !== null) + { + if (typeof frame === 'string') + { + this.frameName = frame; + } + else + { + this.frame = frame; + } + } + } + else + { + this.currentFrame = this.game.cache.getFrame(texture); + } } - PIXI.Sprite.call(this, PIXI.TextureCache[key]); - + /** + * The Signals you can subscribe to that are dispatched when certain things happen on this Sprite or its components + * @type Events + */ this.events = new Phaser.Events(this); /** @@ -38,27 +72,10 @@ Phaser.Sprite = function (game, x, y, key, frame) { */ this.animations = new Phaser.AnimationManager(this); - if (this.game.cache.isSpriteSheet(key)) - { - this.animations.loadFrameData(this.game.cache.getFrameData(key)); - - if (frame !== null) - { - if (typeof frame === 'string') - { - this.frameName = frame; - } - else - { - this.frame = frame; - } - } - } - else - { - this.currentFrame = this.game.cache.getFrame(key); - } - + /** + * The Input Handler Component + * @type InputHandler + */ this.input = new Phaser.InputHandler(this); /** diff --git a/src/loader/Cache.js b/src/loader/Cache.js index a19ea7b8..8c62d929 100644 --- a/src/loader/Cache.js +++ b/src/loader/Cache.js @@ -29,6 +29,12 @@ Phaser.Cache = function (game) { */ this._images = {}; + /** + * RenderTexture key-value container. + * @type {object} + */ + this._textures = {}; + /** * Sound key-value container. * @type {object} @@ -59,6 +65,19 @@ Phaser.Cache.prototype = { }, + /** + * Add a new canvas. + * @param key {string} Asset key for this canvas. + * @param canvas {RenderTexture} A RenderTexture. + */ + addRenderTexture: function (key, texture) { + + var frame = new Phaser.Animation.Frame(0, 0, texture.width, texture.height, '', ''); + + this._textures[key] = { texture: texture, frame: frame }; + + }, + /** * Add a new sprite sheet. * @param key {string} Asset key for the sprite sheet. @@ -176,7 +195,8 @@ Phaser.Cache.prototype = { var locked = this.game.sound.touchLocked; var decoded = false; - if (audioTag) { + if (audioTag) + { decoded = true; } @@ -188,8 +208,8 @@ Phaser.Cache.prototype = { var _this = this; - if (this._sounds[key]) { - + if (this._sounds[key]) + { this._sounds[key].data.src = this._sounds[key].url; this._sounds[key].data.addEventListener('canplaythrough', function () { @@ -202,7 +222,8 @@ Phaser.Cache.prototype = { reloadSoundComplete: function (key) { - if (this._sounds[key]) { + if (this._sounds[key]) + { this._sounds[key].locked = false; this.onSoundUnlock.dispatch(key); } @@ -211,7 +232,8 @@ Phaser.Cache.prototype = { updateSound: function (key, property, value) { - if (this._sounds[key]) { + if (this._sounds[key]) + { this._sounds[key][property] = value; } @@ -252,7 +274,8 @@ Phaser.Cache.prototype = { */ getCanvas: function (key) { - if (this._canvases[key]) { + if (this._canvases[key]) + { return this._canvases[key].canvas; } @@ -282,7 +305,8 @@ Phaser.Cache.prototype = { */ getImage: function (key) { - if (this._images[key]) { + if (this._images[key]) + { return this._images[key].data; } @@ -296,7 +320,8 @@ Phaser.Cache.prototype = { */ getFrameData: function (key) { - if (this._images[key] && this._images[key].frameData) { + if (this._images[key] && this._images[key].frameData) + { return this._images[key].frameData; } @@ -318,6 +343,37 @@ Phaser.Cache.prototype = { return null; }, + /** + * Get a single frame by key. You'd only do this to get the default Frame created for a non-atlas/spritesheet image. + * @param key Asset key of the frame data you want. + * @return {object} The frame data you want. + */ + getTextureFrame: function (key) { + + if (this._textures[key]) + { + return this._textures[key].frame; + } + + return null; + }, + + /** + * Get a RenderTexture by key. + * @param key Asset key of the RenderTexture you want. + * @return {object} The RenderTexture you want. + */ + getTexture: function (key) { + + if (this._textures[key]) + { + return this._textures[key]; + } + + return null; + + }, + /** * Get sound by key. * @param key Asset key of the sound you want. @@ -325,7 +381,8 @@ Phaser.Cache.prototype = { */ getSound: function (key) { - if (this._sounds[key]) { + if (this._sounds[key]) + { return this._sounds[key]; } @@ -340,7 +397,8 @@ Phaser.Cache.prototype = { */ getSoundData: function (key) { - if (this._sounds[key]) { + if (this._sounds[key]) + { return this._sounds[key].data; } @@ -355,7 +413,8 @@ Phaser.Cache.prototype = { */ isSoundDecoded: function (key) { - if (this._sounds[key]) { + if (this._sounds[key]) + { return this._sounds[key].decoded; } @@ -379,7 +438,8 @@ Phaser.Cache.prototype = { */ isSpriteSheet: function (key) { - if (this._images[key]) { + if (this._images[key]) + { return this._images[key].spriteSheet; } @@ -394,7 +454,8 @@ Phaser.Cache.prototype = { */ getText: function (key) { - if (this._text[key]) { + if (this._text[key]) + { return this._text[key].data; } @@ -463,19 +524,23 @@ Phaser.Cache.prototype = { */ destroy: function () { - for (var item in this._canvases) { + for (var item in this._canvases) + { delete this._canvases[item['key']]; } - for (var item in this._images) { + for (var item in this._images) + { delete this._images[item['key']]; } - for (var item in this._sounds) { + for (var item in this._sounds) + { delete this._sounds[item['key']]; } - for (var item in this._text) { + for (var item in this._text) + { delete this._text[item['key']]; } } diff --git a/src/tilemap/Tile.js b/src/tilemap/Tile.js new file mode 100644 index 00000000..a13cde8e --- /dev/null +++ b/src/tilemap/Tile.js @@ -0,0 +1,151 @@ +/** +* Phaser - Tile +* +* A Tile is a single representation of a tile within a Tilemap +*/ + +/** +* Tile constructor +* Create a new Tile. +* +* @param tilemap {Tilemap} the tilemap this tile belongs to. +* @param index {number} The index of this tile type in the core map data. +* @param width {number} Width of the tile. +* @param height number} Height of the tile. +*/ +Phaser.Tile = function (game, tilemap, index, width, height) { + + /** + * The virtual mass of the tile. + * @type {number} + */ + this.mass = 1.0; + + /** + * Indicating collide with any object on the left. + * @type {bool} + */ + this.collideLeft = false; + + /** + * Indicating collide with any object on the right. + * @type {bool} + */ + this.collideRight = false; + + /** + * Indicating collide with any object on the top. + * @type {bool} + */ + this.collideUp = false; + + /** + * Indicating collide with any object on the bottom. + * @type {bool} + */ + this.collideDown = false; + + /** + * Enable separation at x-axis. + * @type {bool} + */ + this.separateX = true; + + /** + * Enable separation at y-axis. + * @type {bool} + */ + this.separateY = true; + + this.game = game; + this.tilemap = tilemap; + this.index = index; + this.width = width; + this.height = height; + this.allowCollisions = Phaser.Types.NONE; + +}; + +Phaser.Tile.prototype = { + + /** + * Clean up memory. + */ + destroy: function () { + this.tilemap = null; + }, + + /** + * Set collision configs. + * @param collision {number} Bit field of flags. (see Tile.allowCollision) + * @param resetCollisions {bool} Reset collision flags before set. + * @param separateX {bool} Enable seprate at x-axis. + * @param separateY {bool} Enable seprate at y-axis. + */ + setCollision: function (collision, resetCollisions, separateX, separateY) { + + if (resetCollisions) + { + this.resetCollision(); + } + + this.separateX = separateX; + this.separateY = separateY; + this.allowCollisions = collision; + + if (collision & Phaser.Types.ANY) + { + this.collideLeft = true; + this.collideRight = true; + this.collideUp = true; + this.collideDown = true; + return; + } + + if (collision & Phaser.Types.LEFT || collision & Phaser.Types.WALL) + { + this.collideLeft = true; + } + + if (collision & Phaser.Types.RIGHT || collision & Phaser.Types.WALL) + { + this.collideRight = true; + } + + if (collision & Phaser.Types.UP || collision & Phaser.Types.CEILING) + { + this.collideUp = true; + } + + if (collision & Phaser.Types.DOWN || collision & Phaser.Types.CEILING) + { + this.collideDown = true; + } + + }, + + /** + * Reset collision status flags. + */ + resetCollision: function () { + + this.allowCollisions = Phaser.Types.NONE; + this.collideLeft = false; + this.collideRight = false; + this.collideUp = false; + this.collideDown = false; + + }, + + /** + * Returns a string representation of this object. + * @method toString + * @return {string} a string representation of the object. + **/ + toString: function () { + + return "[{Tile (index=" + this.index + " collisions=" + this.allowCollisions + " width=" + this.width + " height=" + this.height + ")}]"; + + } + +}; \ No newline at end of file diff --git a/src/tilemap/Tilemap.js b/src/tilemap/Tilemap.js new file mode 100644 index 00000000..9af1e386 --- /dev/null +++ b/src/tilemap/Tilemap.js @@ -0,0 +1,425 @@ +/** +* Phaser - Tilemap +* +* This GameObject allows for the display of a tilemap within the game world. Tile maps consist of an image, tile data and a size. +* Internally it creates a TilemapLayer for each layer in the tilemap. +*/ + +/** +* Tilemap constructor +* Create a new Tilemap. +* +* @param game {Phaser.Game} Current game instance. +* @param key {string} Asset key for this map. +* @param mapData {string} Data of this map. (a big 2d array, normally in csv) +* @param format {number} Format of this map data, available: Tilemap.FORMAT_CSV or Tilemap.FORMAT_TILED_JSON. +* @param resizeWorld {bool} Resize the world bound automatically based on this tilemap? +* @param tileWidth {number} Width of tiles in this map. +* @param tileHeight {number} Height of tiles in this map. +*/ +Phaser.Tilemap = function (game, key, mapData, format, resizeWorld, tileWidth, tileHeight) { + + if (typeof resizeWorld === "undefined") { resizeWorld = true; } + if (typeof tileWidth === "undefined") { tileWidth = 0; } + if (typeof tileHeight === "undefined") { tileHeight = 0; } + + this.game = game; + this.group = null; + this.name = ''; + + /** + * z order value of the object. + */ + this.z = -1; + + /** + * Render iteration counter + */ + this.renderOrderID = 0; + + /** + * Tilemap collision callback. + * @type {function} + */ + this.collisionCallback = null; + + this.exists = true; + this.visible = true; + + // this.texture = new Phaser.Display.Texture(this); + // this.transform = new Phaser.Components.TransformManager(this); + + this.tiles = []; + this.layers = []; + this.mapFormat = format; + + switch (format) + { + case Phaser.Tilemap.FORMAT_CSV: + this.parseCSV(game.cache.getText(mapData), key, tileWidth, tileHeight); + break; + + case Phaser.Tilemap.FORMAT_TILED_JSON: + this.parseTiledJSON(game.cache.getText(mapData), key); + break; + } + + if (this.currentLayer && resizeWorld) + { + this.game.world.setSize(this.currentLayer.widthInPixels, this.currentLayer.heightInPixels, true); + } + +}; + +Phaser.Tilemap.FORMAT_CSV = 0; +Phaser.Tilemap.FORMAT_TILED_JSON = 1; + +Phaser.Tilemap.prototype = { + + /** + * Parset csv map data and generate tiles. + * @param data {string} CSV map data. + * @param key {string} Asset key for tileset image. + * @param tileWidth {number} Width of its tile. + * @param tileHeight {number} Height of its tile. + */ + parseCSV: function (data, key, tileWidth, tileHeight) { + + var layer = new Phaser.TilemapLayer(this, 0, key, Phaser.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"); + + for (var i = 0; i < rows.length; i++) + { + var column = rows[i].split(","); + + if (column.length > 0) + { + layer.addColumn(column); + } + } + + layer.updateBounds(); + + var tileQuantity = layer.parseTileOffsets(); + + this.currentLayer = layer; + this.collisionLayer = layer; + this.layers.push(layer); + + this.generateTiles(tileQuantity); + + }, + + /** + * Parse JSON map data and generate tiles. + * @param data {string} JSON map data. + * @param key {string} Asset key for tileset image. + */ + 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, i, key, Phaser.Tilemap.FORMAT_TILED_JSON, json.layers[i].name, json.tilewidth, json.tileheight); + + // Check it's a data layer + if (!json.layers[i].data) + { + continue; + } + + 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++) + { + if (c == 0) + { + row = []; + } + + row.push(json.layers[i].data[t]); + c++; + + if (c == json.layers[i].width) + { + layer.addColumn(row); + c = 0; + } + } + + layer.updateBounds(); + + var tileQuantity = layer.parseTileOffsets(); + + this.currentLayer = layer; + this.collisionLayer = layer; + this.layers.push(layer); + } + + this.generateTiles(tileQuantity); + + }, + + /** + * Create tiles of given quantity. + * @param qty {number} Quentity of tiles to be generated. + */ + 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)); + } + + }, + + /** + * Set callback to be called when this tilemap collides. + * @param context {object} Callback will be called with this context. + * @param callback {function} Callback function. + */ + setCollisionCallback: function (context, callback) { + + this.collisionCallbackContext = context; + this.collisionCallback = callback; + + }, + + /** + * Set collision configs of tiles in a range index. + * @param start {number} First index of tiles. + * @param end {number} Last index of tiles. + * @param collision {number} Bit field of flags. (see Tile.allowCollision) + * @param resetCollisions {bool} Reset collision flags before set. + * @param separateX {bool} Enable seprate at x-axis. + * @param separateY {bool} Enable seprate at y-axis. + */ + setCollisionRange: function (start, end, collision, resetCollisions, separateX, separateY) { + + if (typeof collision === "undefined") { collision = Phaser.Types.ANY; } + if (typeof resetCollisions === "undefined") { resetCollisions = false; } + if (typeof separateX === "undefined") { separateX = true; } + if (typeof separateY === "undefined") { separateY = true; } + + for (var i = start; i < end; i++) + { + this.tiles[i].setCollision(collision, resetCollisions, separateX, separateY); + } + + }, + + /** + * Set collision configs of tiles with given index. + * @param values {number[]} Index array which contains all tile indexes. The tiles with those indexes will be setup with rest parameters. + * @param collision {number} Bit field of flags. (see Tile.allowCollision) + * @param resetCollisions {bool} Reset collision flags before set. + * @param separateX {bool} Enable seprate at x-axis. + * @param separateY {bool} Enable seprate at y-axis. + */ + setCollisionByIndex: function (values, collision, resetCollisions, separateX, separateY) { + + if (typeof collision === "undefined") { collision = Phaser.Types.ANY; } + if (typeof resetCollisions === "undefined") { resetCollisions = false; } + if (typeof separateX === "undefined") { separateX = true; } + if (typeof separateY === "undefined") { separateY = true; } + + for (var i = 0; i < values.length; i++) + { + this.tiles[values[i]].setCollision(collision, resetCollisions, separateX, separateY); + } + + }, + + // Tile Management + + /** + * Get the tile by its index. + * @param value {number} Index of the tile you want to get. + * @return {Tile} The tile with given index. + */ + getTileByIndex: function (value) { + + if (this.tiles[value]) + { + return this.tiles[value]; + } + + return null; + + }, + + /** + * Get the tile located at specific position and layer. + * @param x {number} X position of this tile located. + * @param y {number} Y position of this tile located. + * @param [layer] {number} layer of this tile located. + * @return {Tile} The tile with specific properties. + */ + getTile: function (x, y, layer) { + + if (typeof layer === "undefined") { layer = this.currentLayer.ID; } + + return this.tiles[this.layers[layer].getTileIndex(x, y)]; + + }, + + /** + * Get the tile located at specific position (in world coordinate) and layer. (thus you give a position of a point which is within the tile) + * @param x {number} X position of the point in target tile. + * @param x {number} Y position of the point in target tile. + * @param [layer] {number} layer of this tile located. + * @return {Tile} The tile with specific properties. + */ + getTileFromWorldXY: function (x, y, layer) { + + if (typeof layer === "undefined") { layer = this.currentLayer.ID; } + + return this.tiles[this.layers[layer].getTileFromWorldXY(x, y)]; + + }, + + /** + * Gets the tile underneath the Input.x/y position + * @param layer The layer to check, defaults to 0 + * @returns {Tile} + */ + getTileFromInputXY: function (layer) { + + if (typeof layer === "undefined") { layer = this.currentLayer.ID; } + + return this.tiles[this.layers[layer].getTileFromWorldXY(this.game.input.worldX, this.game.input.worldY)]; + + }, + + /** + * Get tiles overlaps the given object. + * @param object {GameObject} Tiles you want to get that overlaps this. + * @return {array} Array with tiles information. (Each contains x, y and the tile.) + */ + getTileOverlaps: function (object) { + + return this.currentLayer.getTileOverlaps(object); + + }, + + // COLLIDE + + /** + * Check whether this tilemap collides with the given game object or group of objects. + * @param objectOrGroup {function} Target object of group you want to check. + * @param callback {function} This is called if objectOrGroup collides the tilemap. + * @param context {object} Callback will be called with this context. + * @return {bool} Return true if this collides with given object, otherwise return false. + */ + collide: function (objectOrGroup, callback, context) { + + if (typeof objectOrGroup === "undefined") { objectOrGroup = null; } + if (typeof callback === "undefined") { callback = null; } + if (typeof context === "undefined") { context = null; } + + if (callback !== null && context !== null) + { + this.collisionCallback = callback; + this.collisionCallbackContext = context; + } + + if (objectOrGroup == null) + { + objectOrGroup = this.game.world.group; + } + + // Group? + if (objectOrGroup.isGroup == false) + { + this.collideGameObject(objectOrGroup); + } + else + { + objectOrGroup.forEachAlive(this, this.collideGameObject, true); + } + + }, + + /** + * Check whether this tilemap collides with the given game object. + * @param object {GameObject} Target object you want to check. + * @return {bool} Return true if this collides with given object, otherwise return false. + */ + collideGameObject: function (object) { + + if (object.body.type == Phaser.Types.BODY_DYNAMIC && object.exists == true && object.body.allowCollisions != Phaser.Types.NONE) + { + this._tempCollisionData = this.collisionLayer.getTileOverlaps(object); + + if (this.collisionCallback !== null && this._tempCollisionData.length > 0) + { + this.collisionCallback.call(this.collisionCallbackContext, object, this._tempCollisionData); + } + + return true; + } + else + { + return false; + } + + }, + + /** + * Set a tile to a specific layer. + * @param x {number} X position of this tile. + * @param y {number} Y position of this tile. + * @param index {number} The index of this tile type in the core map data. + * @param [layer] {number} which layer you want to set the tile to. + */ + putTile: function (x, y, index, layer) { + + if (typeof layer === "undefined") { layer = this.currentLayer.ID; } + + this.layers[layer].putTile(x, y, index); + + }, + + /** + * Can be over-ridden by custom classes + */ + update: function () {}, + + destroy: function () { + + this.tiles.length = 0; + this.layers.length = 0; + + } + +}; + +Object.defineProperty(Phaser.Tilemap.prototype, "widthInPixels", { + + get: function () { + return this.currentLayer.widthInPixels; + } + +}); + +Object.defineProperty(Phaser.Tilemap.prototype, "heightInPixels", { + + get: function () { + return this.currentLayer.heightInPixels; + } + +}); diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js new file mode 100644 index 00000000..a57a1fec --- /dev/null +++ b/src/tilemap/TilemapLayer.js @@ -0,0 +1,489 @@ +/** +* Phaser - TilemapLayer +* +* A Tilemap Layer. Tiled format maps can have multiple overlapping layers. +*/ + +/** +* TilemapLayer constructor +* Create a new TilemapLayer. +* +* @param parent {Tilemap} The tilemap that contains this layer. +* @param id {number} The ID of this layer within the Tilemap array. +* @param key {string} Asset key for this map. +* @param mapFormat {number} Format of this map data, available: Tilemap.FORMAT_CSV or Tilemap.FORMAT_TILED_JSON. +* @param name {string} Name of this layer, so you can get this layer by its name. +* @param tileWidth {number} Width of tiles in this map. +* @param tileHeight {number} Height of tiles in this map. +*/ +Phaser.TilemapLayer = function (parent, id, key, mapFormat, name, tileWidth, tileHeight) { + + /** + * Controls whether update() and draw() are automatically called. + * @type {bool} + */ + this.exists = true; + + /** + * Controls whether draw() are automatically called. + * @type {bool} + */ + this.visible = true; + + /** + * How many tiles in each row. + * Read-only variable, do NOT recommend changing after the map is loaded! + * @type {number} + */ + this.widthInTiles = 0; + + /** + * How many tiles in each column. + * Read-only variable, do NOT recommend changing after the map is loaded! + * @type {number} + */ + this.heightInTiles = 0; + + /** + * Read-only variable, do NOT recommend changing after the map is loaded! + * @type {number} + */ + this.widthInPixels = 0; + + /** + * Read-only variable, do NOT recommend changing after the map is loaded! + * @type {number} + */ + this.heightInPixels = 0; + + /** + * Distance between REAL tiles to the tileset texture bound. + * @type {number} + */ + this.tileMargin = 0; + + /** + * Distance between every 2 neighbor tile in the tileset texture. + * @type {number} + */ + this.tileSpacing = 0; + this.parent = parent; + this.game = parent.game; + this.ID = id; + this.name = name; + this.mapFormat = mapFormat; + this.tileWidth = tileWidth; + this.tileHeight = tileHeight; + this.boundsInTiles = new Phaser.Rectangle(); + + // this.texture = new Phaser.Display.Texture(this); + // this.transform = new Phaser.Components.TransformManager(this); + + // if (key !== null) + // { + // this.texture.loadImage(key, false); + // } else { + // this.texture.opaque = true; + // } + + // Handy proxies + // this.alpha = this.texture.alpha; + + this.mapData = []; + this._tempTileBlock = []; + +}; + +Phaser.TilemapLayer.prototype = { + + /** + * Set a specific tile with its x and y in tiles. + * @param x {number} X position of this tile in world coordinates. + * @param y {number} Y position of this tile in world coordinates. + * @param index {number} The index of this tile type in the core map data. + */ + putTileWorldXY: function (x, y, index) { + + x = this.game.math.snapToFloor(x, this.tileWidth) / this.tileWidth; + y = this.game.math.snapToFloor(y, this.tileHeight) / this.tileHeight; + + if (y >= 0 && y < this.mapData.length) + { + if (x >= 0 && x < this.mapData[y].length) + { + this.mapData[y][x] = index; + } + } + + }, + + /** + * Set a specific tile with its x and y in tiles. + * @param x {number} X position of this tile. + * @param y {number} Y position of this tile. + * @param index {number} The index of this tile type in the core map data. + */ + putTile: function (x, y, index) { + + if (y >= 0 && y < this.mapData.length) + { + if (x >= 0 && x < this.mapData[y].length) + { + this.mapData[y][x] = index; + } + } + + }, + + /** + * Swap tiles with 2 kinds of indexes. + * @param tileA {number} First tile index. + * @param tileB {number} Second tile index. + * @param [x] {number} specify a Rectangle of tiles to operate. The x position in tiles of Rectangle's left-top corner. + * @param [y] {number} specify a Rectangle of tiles to operate. The y position in tiles of Rectangle's left-top corner. + * @param [width] {number} specify a Rectangle of tiles to operate. The width in tiles. + * @param [height] {number} specify a Rectangle of tiles to operate. The height in tiles. + */ + swapTile: function (tileA, tileB, x, y, width, height) { + + x = x || 0; + y = y || 0; + width = width || this.widthInTiles; + height = height || this.heightInTiles; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + // First sweep marking tileA as needing a new index + if (this._tempTileBlock[r].tile.index == tileA) + { + this._tempTileBlock[r].newIndex = true; + } + + // In the same pass we can swap tileB to tileA + if (this._tempTileBlock[r].tile.index == tileB) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = tileA; + } + } + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + // And now swap our newIndex tiles for tileB + if (this._tempTileBlock[r].newIndex == true) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = tileB; + } + } + + }, + + /** + * Fill a tile block with a specific tile index. + * @param index {number} Index of tiles you want to fill with. + * @param [x] {number} x position (in tiles) of block's left-top corner. + * @param [y] {number} y position (in tiles) of block's left-top corner. + * @param [width] {number} width of block. + * @param [height] {number} height of block. + */ + fillTile: function (index, x, y, width, height) { + + x = x || 0; + y = y || 0; + width = width || this.widthInTiles; + height = height || this.heightInTiles; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = index; + } + + }, + + /** + * Set random tiles to a specific tile block. + * @param tiles {number[]} Tiles with indexes in this array will be randomly set to the given block. + * @param [x] {number} x position (in tiles) of block's left-top corner. + * @param [y] {number} y position (in tiles) of block's left-top corner. + * @param [width] {number} width of block. + * @param [height] {number} height of block. + */ + randomiseTiles: function (tiles, x, y, width, height) { + + x = x || 0; + y = y || 0; + width = width || this.widthInTiles; + height = height || this.heightInTiles; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = this.game.math.getRandom(tiles); + } + + }, + + /** + * Replace one kind of tiles to another kind. + * @param tileA {number} Index of tiles you want to replace. + * @param tileB {number} Index of tiles you want to set. + * @param [x] {number} x position (in tiles) of block's left-top corner. + * @param [y] {number} y position (in tiles) of block's left-top corner. + * @param [width] {number} width of block. + * @param [height] {number} height of block. + */ + replaceTile: function (tileA, tileB, x, y, width, height) { + + x = x || 0; + y = y || 0; + width = width || this.widthInTiles; + height = height || this.heightInTiles; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + if (this._tempTileBlock[r].tile.index == tileA) + { + this.mapData[this._tempTileBlock[r].y][this._tempTileBlock[r].x] = tileB; + } + } + + }, + + /** + * Get a tile block with specific position and size.(both are in tiles) + * @param x {number} X position of block's left-top corner. + * @param y {number} Y position of block's left-top corner. + * @param width {number} Width of block. + * @param height {number} Height of block. + */ + getTileBlock: function (x, y, width, height) { + + var output = []; + + this.getTempBlock(x, y, width, height); + + for (var r = 0; r < this._tempTileBlock.length; r++) + { + output.push({ + x: this._tempTileBlock[r].x, + y: this._tempTileBlock[r].y, + tile: this._tempTileBlock[r].tile + }); + } + + return output; + + }, + + /** + * Get a tile with specific position (in world coordinate). (thus you give a position of a point which is within the tile) + * @param x {number} X position of the point in target tile. + * @param x {number} Y position of the point in target tile. + */ + getTileFromWorldXY: function (x, y) { + + x = Phaser.Math.snapToFloor(x, this.tileWidth) / this.tileWidth; + y = Phaser.Math.snapToFloor(y, this.tileHeight) / this.tileHeight; + + return this.getTileIndex(x, y); + + }, + + /** + * Get tiles overlaps the given object. + * @param object {GameObject} Tiles you want to get that overlaps this. + * @return {array} Array with tiles informations. (Each contains x, y and the tile.) + */ + getTileOverlaps: function (object) { + + // If the object is outside of the world coordinates then abort the check (tilemap has to exist within world bounds) + if (object.body.bounds.x < 0 || object.body.bounds.x > this.widthInPixels || object.body.bounds.y < 0 || object.body.bounds.bottom > this.heightInPixels) + { + return; + } + + // What tiles do we need to check against? + this._tempTileX = this.game.math.snapToFloor(object.body.bounds.x, this.tileWidth) / this.tileWidth; + this._tempTileY = this.game.math.snapToFloor(object.body.bounds.y, this.tileHeight) / this.tileHeight; + this._tempTileW = (this.game.math.snapToCeil(object.body.bounds.width, this.tileWidth) + this.tileWidth) / this.tileWidth; + this._tempTileH = (this.game.math.snapToCeil(object.body.bounds.height, this.tileHeight) + this.tileHeight) / this.tileHeight; + + // Loop through the tiles we've got and check overlaps accordingly (the results are stored in this._tempTileBlock) + this._tempBlockResults = []; + + this.getTempBlock(this._tempTileX, this._tempTileY, this._tempTileW, this._tempTileH, true); + + /* + for (var r = 0; r < this._tempTileBlock.length; r++) + { + if (this.game.world.physics.separateTile(object, this._tempTileBlock[r].x * this.tileWidth, this._tempTileBlock[r].y * this.tileHeight, this.tileWidth, this.tileHeight, this._tempTileBlock[r].tile.mass, this._tempTileBlock[r].tile.collideLeft, this._tempTileBlock[r].tile.collideRight, this._tempTileBlock[r].tile.collideUp, this._tempTileBlock[r].tile.collideDown, this._tempTileBlock[r].tile.separateX, this._tempTileBlock[r].tile.separateY) == true) + { + this._tempBlockResults.push({ x: this._tempTileBlock[r].x, y: this._tempTileBlock[r].y, tile: this._tempTileBlock[r].tile }); + } + } + */ + + return this._tempBlockResults; + + }, + + /** + * Get a tile block with its position and size. (This method does not return, it'll set result to _tempTileBlock) + * @param x {number} X position of block's left-top corner. + * @param y {number} Y position of block's left-top corner. + * @param width {number} Width of block. + * @param height {number} Height of block. + * @param collisionOnly {bool} Whethor or not ONLY return tiles which will collide (its allowCollisions value is not Collision.NONE). + */ + getTempBlock: function (x, y, width, height, collisionOnly) { + + if (typeof collisionOnly === "undefined") { collisionOnly = false; } + + if (x < 0) + { + x = 0; + } + + if (y < 0) + { + y = 0; + } + + if (width > this.widthInTiles) + { + width = this.widthInTiles; + } + + if (height > this.heightInTiles) + { + height = this.heightInTiles; + } + + this._tempTileBlock = []; + + for (var ty = y; ty < y + height; ty++) + { + for (var tx = x; tx < x + width; tx++) + { + if (collisionOnly) + { + // We only want to consider the tile for checking if you can actually collide with it + if (this.mapData[ty] && this.mapData[ty][tx] && this.parent.tiles[this.mapData[ty][tx]].allowCollisions != Phaser.Types.NONE) + { + this._tempTileBlock.push({ + x: tx, + y: ty, + tile: this.parent.tiles[this.mapData[ty][tx]] + }); + } + } + else + { + if (this.mapData[ty] && this.mapData[ty][tx]) + { + this._tempTileBlock.push({ + x: tx, + y: ty, + tile: this.parent.tiles[this.mapData[ty][tx]] + }); + } + } + } + } + }, + + /** + * Get the tile index of specific position (in tiles). + * @param x {number} X position of the tile. + * @param y {number} Y position of the tile. + * @return {number} Index of the tile at that position. Return null if there isn't a tile there. + */ + 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; + + }, + + /** + * Add a column of tiles into the layer. + * @param column {string[]/number[]} An array of tile indexes to be added. + */ + addColumn: function (column) { + + var data = []; + + for (var c = 0; c < column.length; c++) + { + data[c] = parseInt(column[c]); + } + + if (this.widthInTiles == 0) + { + this.widthInTiles = data.length; + this.widthInPixels = this.widthInTiles * this.tileWidth; + } + + this.mapData.push(data); + + this.heightInTiles++; + this.heightInPixels += this.tileHeight; + + }, + + /** + * Update boundsInTiles with widthInTiles and heightInTiles. + */ + updateBounds: function () { + + this.boundsInTiles.setTo(0, 0, this.widthInTiles, this.heightInTiles); + + }, + + /** + * Parse tile offsets from map data. + * @return {number} length of tileOffsets array. + */ + parseTileOffsets: function () { + + this.tileOffsets = []; + + var i = 0; + + if (this.mapFormat == Phaser.Tilemap.FORMAT_TILED_JSON) + { + // For some reason Tiled counts from 1 not 0 + this.tileOffsets[0] = null; + i = 1; + } + + 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 + }; + i++; + } + } + + return this.tileOffsets.length; + + } + +};