diff --git a/examples/tilemaps/sci fly.js b/examples/tilemaps/sci fly.js index cf6c92d5..e16ea2f4 100644 --- a/examples/tilemaps/sci fly.js +++ b/examples/tilemaps/sci fly.js @@ -1,52 +1,35 @@ -var game = new Phaser.Game(800, 600, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render }); +var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); function preload() { game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON); - game.load.tileset('tiles', 'assets/maps/cybernoid.png', 16, 16); + game.load.image('tiles', 'assets/maps/cybernoid.png', 16, 16); game.load.image('phaser', 'assets/sprites/phaser-ship.png'); - game.load.image('diamond', 'assets/sprites/chunk.png'); + game.load.image('chunk', 'assets/sprites/chunk.png'); } var map; -var tileset; var layer; var cursors; -var overlap; var sprite; var emitter; function create() { - game.stage.backgroundColor = '#3d3d3d'; - // A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere). // You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer. map = game.add.tilemap('level3'); - // A Tileset is a single image containing a strip of tiles. Each tile is broken down into its own Phaser.Tile object on import. - // You can set properties on the Tile objects, such as collision, n-way movement and meta data. - // A Tilemap uses a Tileset to render. The indexes in the map corresponding to the Tileset indexes. - // This way multiple levels can share the same single Tileset without requiring one each. - tileset = game.add.tileset('tiles'); - + map.addTilesetImage('CybernoidMap3BG_bank.png', 'tiles'); + + layer = map.createLayer(0); + // Basically this sets EVERY SINGLE tile to fully collide on all faces - tileset.setCollisionRange(0, tileset.total - 1, true, true, true, true); + map.setCollisionByExclusion([7, 32, 35, 36, 47]); - // And this turns off collision on the only tile we don't want collision on :) - tileset.setCollision(6, false, false, false, false); - tileset.setCollision(31, false, false, false, false); - tileset.setCollision(34, false, false, false, false); - tileset.setCollision(35, false, false, false, false); - tileset.setCollision(46, false, false, false, false); - - // A TilemapLayer consists of an x,y coordinate (position), a width and height, a Tileset and a Tilemap which it uses for map data. - // The x/y coordinates are in World space and you can place the tilemap layer anywhere in the world. - // The width/height is the rendered size of the layer in pixels, not the size of the map data itself. - - layer = game.add.tilemapLayer(0, 0, 800, 600, tileset, map, 0); + // layer.debug = true; layer.resizeWorld(); @@ -61,7 +44,7 @@ function create() { emitter = game.add.emitter(0, 0, 200); - emitter.makeParticles('diamond'); + emitter.makeParticles('chunk'); emitter.minRotation = 0; emitter.maxRotation = 0; emitter.gravity = 5; @@ -108,13 +91,3 @@ function update() { } } - - -function render() { - - game.debug.renderSpriteBounds(sprite); - - // game.debug.renderSpriteInfo(sprite, 32, 32); - // game.debug.renderSpriteCoords(sprite, 32, 32); - -} \ No newline at end of file diff --git a/examples/wip/sci-fly2.js b/examples/wip/sci-fly2.js new file mode 100644 index 00000000..e16ea2f4 --- /dev/null +++ b/examples/wip/sci-fly2.js @@ -0,0 +1,93 @@ + +var game = new Phaser.Game(800, 600, Phaser.AUTO, 'phaser-example', { preload: preload, create: create, update: update }); + +function preload() { + + game.load.tilemap('level3', 'assets/maps/cybernoid.json', null, Phaser.Tilemap.TILED_JSON); + game.load.image('tiles', 'assets/maps/cybernoid.png', 16, 16); + game.load.image('phaser', 'assets/sprites/phaser-ship.png'); + game.load.image('chunk', 'assets/sprites/chunk.png'); + +} + +var map; +var layer; +var cursors; +var sprite; +var emitter; + +function create() { + + // A Tilemap object just holds the data needed to describe the map (i.e. the json exported from Tiled, or the CSV exported from elsewhere). + // You can add your own data or manipulate the data (swap tiles around, etc) but in order to display it you need to create a TilemapLayer. + map = game.add.tilemap('level3'); + + map.addTilesetImage('CybernoidMap3BG_bank.png', 'tiles'); + + layer = map.createLayer(0); + + // Basically this sets EVERY SINGLE tile to fully collide on all faces + map.setCollisionByExclusion([7, 32, 35, 36, 47]); + + // layer.debug = true; + + layer.resizeWorld(); + + sprite = game.add.sprite(450, 80, 'phaser'); + sprite.anchor.setTo(0.5, 0.5); + sprite.angle = 5; + + game.camera.follow(sprite); + // game.camera.deadzone = new Phaser.Rectangle(160, 160, layer.renderWidth-320, layer.renderHeight-320); + + cursors = game.input.keyboard.createCursorKeys(); + + emitter = game.add.emitter(0, 0, 200); + + emitter.makeParticles('chunk'); + emitter.minRotation = 0; + emitter.maxRotation = 0; + emitter.gravity = 5; + emitter.bounce.setTo(0.5, 0.5); + + game.input.onDown.add(particleBurst, this); + +} + +function particleBurst() { + + emitter.x = game.input.worldX; + emitter.y = game.input.worldY; + emitter.start(true, 4000, null, 10); + +} + +function update() { + + game.physics.collide(sprite, layer); + game.physics.collide(emitter, layer); + + sprite.body.velocity.x = 0; + sprite.body.velocity.y = 0; + + if (cursors.up.isDown) + { + sprite.body.velocity.y = -150; + } + else if (cursors.down.isDown) + { + sprite.body.velocity.y = 150; + } + + if (cursors.left.isDown) + { + sprite.body.velocity.x = -150; + sprite.scale.x = -1; + } + else if (cursors.right.isDown) + { + sprite.body.velocity.x = 150; + sprite.scale.x = 1; + } + +} diff --git a/examples/wip/tilemap.js b/examples/wip/tilemap.js index c6798086..4ef15bd5 100644 --- a/examples/wip/tilemap.js +++ b/examples/wip/tilemap.js @@ -41,21 +41,24 @@ function create() { map.addTilesetImage('walls_1x2'); map.addTilesetImage('tiles2'); - map.setCollisionByIndexRange(1, 12); - map.setCollisionByIndex(100, 'Tile Layer 3'); + map.setCollisionBetween(1, 12); + // mario tiles // map.setCollisionByIndex(15); // map.setCollisionByIndex(40); // map.setCollisionByIndexRange(14, 16); // map.setCollisionByIndexRange(20, 25); // map.setCollisionByIndexRange(27, 29); - layer2 = map.createLayer('Tile Layer 2'); - layer = map.createLayer('Tile Layer 1'); layer3 = map.createLayer('Tile Layer 3'); + layer3.scrollFactorX = 0.5; + + layer2 = map.createLayer('Tile Layer 2'); + layer2.alpha = 0.5; + + layer = map.createLayer('Tile Layer 1'); // layer.debug = true; - layer3.debug = true; layer.resizeWorld(); @@ -128,8 +131,7 @@ function update() { layer.scrollY += 4; } */ - // game.physics.collide(sprite, layer); - game.physics.collide(sprite, layer3); + game.physics.collide(sprite, layer); sprite.body.velocity.x = 0; sprite.body.velocity.y = 0; diff --git a/src/tilemap/Tilemap.js b/src/tilemap/Tilemap.js index 98c34405..90c64a9d 100644 --- a/src/tilemap/Tilemap.js +++ b/src/tilemap/Tilemap.js @@ -183,6 +183,20 @@ Phaser.Tilemap.prototype = { }, + // Region? Remove tile from map data? + createSpritesFromTiles: function (layer, tileIndex, key, frame, group) { + + if (typeof group === 'undefined') { group = this.game.world; } + + }, + + createGroup: function (layer, parent) { + + // Creates a Group based on an objectgroup, with one Sprite per gid entry, using the tilemap image + frame number + // Will only work if image is loaded as spritesheet + + }, + /** * Creates a new TilemapLayer object. By default TilemapLayers are fixed to the camera. * @@ -195,6 +209,8 @@ Phaser.Tilemap.prototype = { */ createLayer: function (layer, width, height, group) { + // Add Buffer support for the left of the canvas + if (typeof width === 'undefined') { width = this.game.width; } if (typeof height === 'undefined') { height = this.game.height; } if (typeof group === 'undefined') { group = this.game.world; } @@ -290,15 +306,75 @@ Phaser.Tilemap.prototype = { }, + // TODO - set collision in an area, REMOVE collision + /** - * Sets collision values on a range of tiles in the set. + * Sets collision on all tiles in the given layer, except for the IDs of those in the given array. * - * @method Phaser.Tileset#setCollisionByIndexRange - * @param {number} start - The first index of the tile on the layer. - * @param {number} stop - The last index of the tile on the layer. + * @method Phaser.Tileset#setCollisionByExclusion + * @param {array} indexes - An array of the tile IDs to not be counted for collision. * @param {number|string|Phaser.TilemapLayer} layer - The layer to operate on. If not given will default to this.currentLayer. */ - setCollisionByIndexRange: function (start, stop, layer) { + setCollisionByExclusion: function (indexes, layer) { + + if (typeof layer === 'undefined') + { + layer = this.currentLayer; + } + + // Collide everything, except the IDs given in the indexes array + for (var i = 0, len = this.tiles.length; i < len; i++) + { + if (indexes.indexOf(i) === -1) + { + this.setCollisionByIndex(i, layer, false); + } + } + + // Now re-calculate interesting faces + this.calculateFaces(layer); + + }, + + /** + * Sets collision the given tile index, or array of tiles indexes. + * + * @method Phaser.Tileset#setCollision + * @param {number|array} indexes - Either a single tile index, or an array of tile IDs to be checked for collision. + * @param {number|string|Phaser.TilemapLayer} layer - The layer to operate on. If not given will default to this.currentLayer. + */ + setCollision: function (indexes, layer) { + + if (typeof layer === 'undefined') + { + layer = this.currentLayer; + } + + if (typeof indexes === 'number') + { + return this.setCollisionByIndex(indexes, layer); + } + + // Collide all of the IDs given in the indexes array + for (var i = 0, len = indexes.length; i < len; i++) + { + this.setCollisionByIndex(i, layer, false); + } + + // Now re-calculate interesting faces + this.calculateFaces(layer); + + }, + + /** + * Sets collision on a range of tiles. + * + * @method Phaser.Tileset#setCollisionBetween + * @param {number} start - The first index of the tile to be set for collision. + * @param {number} stop - The last index of the tile to be set for collision. + * @param {number|string|Phaser.TilemapLayer} layer - The layer to operate on. If not given will default to this.currentLayer. + */ + setCollisionBetween: function (start, stop, layer) { if (start > stop) { diff --git a/src/tilemap/TilemapLayer.js b/src/tilemap/TilemapLayer.js index 6183d85c..ab11e245 100644 --- a/src/tilemap/TilemapLayer.js +++ b/src/tilemap/TilemapLayer.js @@ -477,10 +477,10 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides } // Convert the pixel values into tile coordinates - this._tx = this.game.math.snapToFloor(x, this.map.tileWidth) / this.map.tileWidth; - this._ty = this.game.math.snapToFloor(y, this.map.tileHeight) / this.map.tileHeight; - this._tw = (this.game.math.snapToCeil(width, this.map.tileWidth) + this.map.tileWidth) / this.map.tileWidth; - this._th = (this.game.math.snapToCeil(height, this.map.tileHeight) + this.map.tileHeight) / this.map.tileHeight; + this._tx = this.game.math.snapToFloor(x, this._cw) / this._cw; + this._ty = this.game.math.snapToFloor(y, this._ch) / this._ch; + this._tw = (this.game.math.snapToCeil(width, this._cw) + this._cw) / this._cw; + this._th = (this.game.math.snapToCeil(height, this._ch) + this._ch) / this._ch; // This should apply the layer x/y here this._results.length = 0; @@ -500,14 +500,14 @@ Phaser.TilemapLayer.prototype.getTiles = function (x, y, width, height, collides if (collides === false || (collides && _tile.collides)) { // convert tile coordinates back to camera space for return - var _wx = this._unfixX(wx * this.map.tileWidth) / this.map.tileWidth; - var _wy = this._unfixY(wy * this.map.tileHeight) / this.map.tileHeight; + var _wx = this._unfixX(wx * this._cw) / this._cw; + var _wy = this._unfixY(wy * this._ch) / this._ch; this._results.push({ - x: _wx * this.map.tileWidth, - y: _wy * this.map.tileHeight, - right: (_wx * this.map.tileWidth) + this.map.tileWidth, - bottom: (_wy * this.map.tileHeight) + this.map.tileHeight, + x: _wx * this._cw, + y: _wy * this._ch, + right: (_wx * this._cw) + this._cw, + bottom: (_wy * this._ch) + this._ch, tile: _tile }); } @@ -687,7 +687,7 @@ Phaser.TilemapLayer.prototype.updateMax = function () { this.dirty = true; - console.log('updateMax', this._maxX, this._maxY, 'px', this.layer.widthInPixels, this.layer.heightInPixels, 'rwh', this.layer.width, this.layer.height); + // console.log('updateMax', this._maxX, this._maxY, 'px', this.layer.widthInPixels, this.layer.heightInPixels, 'rwh', this.layer.width, this.layer.height); } @@ -824,8 +824,6 @@ Phaser.TilemapLayer.prototype.renderDebug = function () { this.context.strokeStyle = this.debugColor; this.context.fillStyle = this.debugFillColor; - var set; - for (var y = this._startY, lenY = this._startY + this._maxY; y < lenY; y++) { this._column = this.layer.data[y]; @@ -836,13 +834,11 @@ Phaser.TilemapLayer.prototype.renderDebug = function () { if (tile && (tile.faceTop || tile.faceBottom || tile.faceLeft || tile.faceRight)) { - set = this.map.tilesets[this.map.tiles[tile.index][2]] - this._tx = Math.floor(this._tx); if (this.debugFill) { - this.context.fillRect(this._tx, this._ty, set.tileWidth, set.tileHeight); + this.context.fillRect(this._tx, this._ty, this._cw, this._ch); } this.context.beginPath(); @@ -850,25 +846,25 @@ Phaser.TilemapLayer.prototype.renderDebug = function () { if (tile.faceTop) { this.context.moveTo(this._tx, this._ty); - this.context.lineTo(this._tx + set.tileWidth, this._ty); + this.context.lineTo(this._tx + this._cw, this._ty); } if (tile.faceBottom) { - this.context.moveTo(this._tx, this._ty + set.tileHeight); - this.context.lineTo(this._tx + set.tileWidth, this._ty + set.tileHeight); + this.context.moveTo(this._tx, this._ty + this._ch); + this.context.lineTo(this._tx + this._cw, this._ty + this._ch); } if (tile.faceLeft) { this.context.moveTo(this._tx, this._ty); - this.context.lineTo(this._tx, this._ty + set.tileHeight); + this.context.lineTo(this._tx, this._ty + this._ch); } if (tile.faceRight) { - this.context.moveTo(this._tx + set.tileWidth, this._ty); - this.context.lineTo(this._tx + set.tileWidth, this._ty + set.tileHeight); + this.context.moveTo(this._tx + this._cw, this._ty); + this.context.lineTo(this._tx + this._cw, this._ty + this._ch); } this.context.stroke(); @@ -885,46 +881,6 @@ Phaser.TilemapLayer.prototype.renderDebug = function () { } -/** -* Returns the absolute delta x value. -* @method Phaser.TilemapLayer#deltaAbsX -* @memberof Phaser.TilemapLayer -* @return {number} Absolute delta X value -*/ -// Phaser.TilemapLayer.prototype.deltaAbsX = function () { -// return (this.deltaX() > 0 ? this.deltaX() : -this.deltaX()); -// } - -/** -* Returns the absolute delta y value. -* @method Phaser.TilemapLayer#deltaAbsY -* @memberof Phaser.TilemapLayer -* @return {number} Absolute delta Y value -*/ -// Phaser.TilemapLayer.prototype.deltaAbsY = function () { -// return (this.deltaY() > 0 ? this.deltaY() : -this.deltaY()); -// } - -/** -* Returns the delta x value. -* @method Phaser.TilemapLayer#deltaX -* @memberof Phaser.TilemapLayer -* @return {number} Delta X value -*/ -// Phaser.TilemapLayer.prototype.deltaX = function () { -// return this._dx - this._prevX; -// } - -/** -* Returns the delta y value. -* @method Phaser.TilemapLayer#deltaY -* @memberof Phaser.TilemapLayer -* @return {number} Delta Y value -*/ -// Phaser.TilemapLayer.prototype.deltaY = function () { -// return this._dy - this._prevY; -// } - /** * @name Phaser.TilemapLayer#scrollX * @property {number} scrollX - Scrolls the map horizontally or returns the current x position. @@ -1006,3 +962,43 @@ Object.defineProperty(Phaser.TilemapLayer.prototype, "scrollY", { } }); + +/** +* @name Phaser.TilemapLayer#collisionWidth +* @property {number} collisionWidth - The width of the collision tiles. +*/ +Object.defineProperty(Phaser.TilemapLayer.prototype, "collisionWidth", { + + get: function () { + return this._cw; + }, + + set: function (value) { + + this._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._ch; + }, + + set: function (value) { + + this._ch = value; + + this.dirty = true; + + } + +});