More tilemap tweaks.

This commit is contained in:
photonstorm 2013-10-14 19:37:44 +01:00
parent 6147e07a5f
commit dd695e066f
7 changed files with 1203 additions and 678 deletions

File diff suppressed because it is too large Load diff

View file

Before

Width:  |  Height:  |  Size: 4.7 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

View file

@ -23,8 +23,29 @@
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.
var map = new Phaser.Tilemap(game, 'level3');
var tileset = game.cache.getTileset('tiles');
// 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.
// This one gives tileset as a string, the other an object
// layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, 'tiles', map, 0);
layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400, tileset, map, 0);
// To set tiles for collision you need to modify the Tileset, which is a property of the layer
// Collision is based on the layer.x/y value
// layer.sprite.anchor.setTo(0.5, 0.5);
game.world.add(layer.sprite);
// This is a bit nuts, ought to find a way to automate it, but it looks cool :)
map.debugMap = [ '#000000',
'#e40058', '#e40058', '#e40058', '#80d010', '#bcbcbc', '#e40058', '#000000', '#0070ec', '#bcbcbc', '#bcbcbc', '#bcbcbc',
@ -39,15 +60,6 @@
// map.dump();
// layer = new Phaser.TilemapLayer(game, 0, 0, 640, 400);
layer = new Phaser.TilemapLayer(game, 0, 0, 320, 200);
layer.updateTileset('tiles');
layer.updateMapData(map, 0);
// layer.sprite.anchor.setTo(0.5, 0.5);
game.world.add(layer.sprite);
// layer.sprite.scale.setTo(2, 2);
// Works a treat :)
@ -55,6 +67,9 @@
// game.add.sprite(0, 200, layer.texture, layer.frame);
// game.add.sprite(320, 200, layer.texture, layer.frame);
// game.world.setBounds(0, 0, 2000, 2000);
// game.camera.x = 400;
cursors = game.input.keyboard.createCursorKeys();
}

View file

@ -303,8 +303,21 @@ Phaser.Keyboard.prototype = {
this._hotkeys[event.keyCode].processKeyUp(event);
}
if (this._keys[event.keyCode])
{
this._keys[event.keyCode].isDown = false;
this._keys[event.keyCode].timeUp = this.game.time.now;
}
else
{
// Not used this key before, so register it
this._keys[event.keyCode] = {
isDown: false,
timeDown: this.game.time.now,
timeUp: this.game.time.now,
duration: 0
};
}
},

View file

@ -65,6 +65,9 @@ Phaser.Physics.Arcade.Body = function (sprite) {
this.overlapX = 0;
this.overlapY = 0;
this.hullX = new Phaser.Rectangle();
this.hullY = new Phaser.Rectangle();
// If a body is overlapping with another body, but neither of them are moving (maybe they spawned on-top of each other?) this is set to true
this.embedded = false;
@ -105,8 +108,6 @@ Phaser.Physics.Arcade.Body.prototype = {
this.embedded = false;
// this.preX = (this.sprite.localTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
// this.preY = (this.sprite.localTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
this.preX = (this.sprite.worldTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
this.preY = (this.sprite.worldTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
this.preRotation = this.sprite.angle;
@ -123,6 +124,8 @@ Phaser.Physics.Arcade.Body.prototype = {
{
this.checkWorldBounds();
}
this.updateHulls();
}
if (this.skipQuadTree == false && this.allowCollision.none == false && this.sprite.visible && this.sprite.alive)
@ -174,6 +177,13 @@ Phaser.Physics.Arcade.Body.prototype = {
},
updateHulls: function () {
this.hullX.setTo(this.x, this.preY, this.width, this.height);
this.hullY.setTo(this.preX, this.y, this.width, this.height);
},
checkWorldBounds: function () {
if (this.x < this.game.world.bounds.x)
@ -223,21 +233,16 @@ Phaser.Physics.Arcade.Body.prototype = {
this.angularVelocity = 0;
this.angularAcceleration = 0;
// this.preX = (this.sprite.localTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
// this.preY = (this.sprite.localTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
this.preX = (this.sprite.worldTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
this.preY = (this.sprite.worldTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
this.preRotation = this.sprite.angle;
// this.x = (this.sprite.localTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
// this.y = (this.sprite.localTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
this.x = (this.sprite.worldTransform[2] - (this.sprite.anchor.x * this.width)) + this.offset.x;
this.y = (this.sprite.worldTransform[5] - (this.sprite.anchor.y * this.height)) + this.offset.y;
this.rotation = this.sprite.angle;
this.x = this.preX;
this.y = this.preY;
this.rotation = this.preRotation;
},
// Basically Math.abs
deltaAbsX: function () {
return (this.deltaX() > 0 ? this.deltaX() : -this.deltaX());
},

View file

@ -125,17 +125,8 @@ Phaser.Tile.prototype = {
* @param {boolean} separateX - Separate at x-axis.
* @param {boolean} separateY - Separate at y-axis.
*/
setCollision: function (left, right, up, down, reset, separateX, separateY) {
setCollision: function (left, right, up, down) {
if (reset)
{
this.resetCollision();
}
this.separateX = separateX;
this.separateY = separateY;
this.collideNone = true;
this.collideLeft = left;
this.collideRight = right;
this.collideUp = up;
@ -145,6 +136,10 @@ Phaser.Tile.prototype = {
{
this.collideNone = false;
}
else
{
this.collideNone = true;
}
},

View file

@ -1,5 +1,5 @@
Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData, tileset) {
// Maybe should extend Sprite?
Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, tileset, tilemap, layer) {
/**
* @property {Phaser.Game} game - Description.
@ -38,6 +38,7 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
*/
this.sprite = new Phaser.Sprite(this.game, x, y, this.texture, this.frame);
/**
* @property {Description} tileset - Description.
*/
@ -136,8 +137,8 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
*/
this._startY = 0;
this.tilemap;
this.layer;
this.tilemap = null;
this.layer = null;
this._x = 0;
this._y = 0;
@ -145,26 +146,48 @@ Phaser.TilemapLayer = function (game, x, y, renderWidth, renderHeight, mapData,
this._prevY = 0;
this.dirty = true;
if (tileset instanceof Phaser.Tileset || typeof tileset === 'string')
{
this.updateTileset(tileset);
}
if (tilemap instanceof Phaser.Tilemap)
{
this.updateMapData(tilemap, layer);
}
};
Phaser.TilemapLayer.prototype = {
updateMapData: function (tilemap, layerID) {
updateTileset: function (tileset) {
this.tilemap = tilemap;
this.layer = this.tilemap.layers[layerID];
if (tileset instanceof Phaser.Tileset)
{
this.tileset = tileset;
}
else if (typeof tileset === 'string')
{
this.tileset = this.game.cache.getTileset('tiles');;
}
this.tileWidth = this.tileset.tileWidth;
this.tileHeight = this.tileset.tileHeight;
this.updateMax();
},
updateTileset: function (tileset) {
updateMapData: function (tilemap, layer) {
this.tileset = this.game.cache.getTileset(tileset);
this.tileWidth = this.tileset.tileWidth;
this.tileHeight = this.tileset.tileHeight;
if (typeof layer === 'undefined')
{
layer = 0;
}
this.tilemap = tilemap;
this.layer = this.tilemap.layers[layer];
this.updateMax();
},
updateMax: function () {
@ -188,11 +211,13 @@ Phaser.TilemapLayer.prototype = {
this.heightInPixels = this.layer.height * this.tileHeight;
}
this.dirty = true;
},
render: function () {
if (this.visible == false || this.dirty == false)
if (!this.dirty || !this.tileset || !this.tilemap || !this.sprite.visible)
{
return;
}
@ -230,8 +255,8 @@ Phaser.TilemapLayer.prototype = {
tile.y,
this.tileWidth,
this.tileHeight,
this._tx,
this._ty,
Math.floor(this._tx),
Math.floor(this._ty),
this.tileWidth,
this.tileHeight
);