Fixed daft issue in Camera and fully implemented tilemap collision.

This commit is contained in:
Richard Davey 2013-04-28 14:59:44 +01:00
parent c09cff336d
commit a3b27fbf32
15 changed files with 135 additions and 125 deletions

BIN
Docs/phaser logo sprite.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 3.6 KiB

BIN
Docs/phaserSprite.gif Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 531 B

BIN
Docs/phaser_desert.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 106 KiB

View file

@ -237,9 +237,8 @@ module Phaser {
if (Collide > 0)
{
particle.allowCollisions = Collision.ANY;
particle.elasticity = Collide;
//particle.width *= Collide;
//particle.height *= Collide;
particle.width *= Collide;
particle.height *= Collide;
//particle.centerOffsets();
}
else

View file

@ -22,6 +22,7 @@ module Phaser {
this.lifespan = 0;
this.friction = 500;
}
/**

View file

@ -97,8 +97,6 @@ module Phaser {
this.generateTiles(tileQuantity);
console.log('generate layer csv');
}
private parseTiledJSON(data: string, key: string) {
@ -136,7 +134,6 @@ module Phaser {
layer.addColumn(row);
c = 0;
}
console.log('generate layer json');
}
layer.updateBounds();

View file

@ -68,6 +68,14 @@ module Phaser {
return this.y + this.height;
}
public get halfWidth(): number {
return this.width / 2;
}
public get halfHeight(): number {
return this.height / 2;
}
/**
* Determines whether the object specified intersects (overlaps) with this Quad object.
* This method checks the x, y, width, and height properties of the specified Quad object to see if it intersects with this Quad object.

View file

@ -60,7 +60,7 @@ module Phaser {
private _fxShakeIntensity: number = 0;
private _fxShakeDuration: number = 0;
private _fxShakeComplete = null;
private _fxShakeOffset: Point = new Point(0, 0);
private _fxShakeOffset: MicroPoint = new MicroPoint(0, 0);
private _fxShakeDirection: number = 0;
private _fxShakePrevX: number = 0;
private _fxShakePrevY: number = 0;
@ -77,8 +77,8 @@ module Phaser {
public ID: number;
public worldView: Rectangle;
public totalSpritesRendered: number;
public scale: Point = new Point(1, 1);
public scroll: Point = new Point(0, 0);
public scale: MicroPoint = new MicroPoint(1, 1);
public scroll: MicroPoint = new MicroPoint(0, 0);
public bounds: Rectangle = null;
public deadzone: Rectangle = null;
@ -96,7 +96,7 @@ module Phaser {
public showShadow: bool = false;
public shadowColor: string = 'rgb(0,0,0)';
public shadowBlur: number = 10;
public shadowOffset: Point = new Point(4, 4);
public shadowOffset: MicroPoint = new MicroPoint(4, 4);
public visible: bool = true;
public alpha: number = 1;
@ -230,22 +230,18 @@ module Phaser {
var w: number = this.width / 8;
var h: number = this.height / 3;
this.deadzone = new Rectangle((this.width - w) / 2, (this.height - h) / 2 - h * 0.25, w, h);
console.log('follow 1');
break;
case Camera.STYLE_TOPDOWN:
helper = Math.max(this.width, this.height) / 4;
this.deadzone = new Rectangle((this.width - helper) / 2, (this.height - helper) / 2, helper, helper);
console.log('follow 2');
break;
case Camera.STYLE_TOPDOWN_TIGHT:
helper = Math.max(this.width, this.height) / 8;
this.deadzone = new Rectangle((this.width - helper) / 2, (this.height - helper) / 2, helper, helper);
console.log('follow 3');
break;
case Camera.STYLE_LOCKON:
default:
this.deadzone = null;
console.log('follow 4');
break;
}
@ -253,19 +249,15 @@ module Phaser {
public focusOnXY(x: number, y: number) {
console.log('focusOn', x, y);
x += (x > 0) ? 0.0000001 : -0.0000001;
y += (y > 0) ? 0.0000001 : -0.0000001;
this.scroll.x = Math.round(x - this.worldView.halfWidth);
this.scroll.y = Math.round(y - this.worldView.halfHeight);
console.log('focusOn scroll',this.scroll.x, this.scroll.y);
}
public focusOn(point: Point) {
public focusOn(point) {
point.x += (point.x > 0) ? 0.0000001 : -0.0000001;
point.y += (point.y > 0) ? 0.0000001 : -0.0000001;
@ -291,7 +283,7 @@ module Phaser {
}
this.bounds.setTo(x, y, width, height);
this.worldView.setTo(x, y, width, height);
this.scroll.setTo(0, 0);
this.update();
@ -342,7 +334,7 @@ module Phaser {
}
// Make sure we didn't go outside the camera's bounds
// Make sure we didn't go outside the cameras bounds
if (this.bounds !== null)
{
if (this.scroll.x < this.bounds.left)
@ -369,6 +361,8 @@ module Phaser {
this.worldView.x = this.scroll.x;
this.worldView.y = this.scroll.y;
//console.log(this.worldView.width, this.worldView.height);
// Input values
this.inputX = this.worldView.x + this._game.input.x;
this.inputY = this.worldView.y + this._game.input.y;
@ -610,9 +604,10 @@ module Phaser {
this.worldView.width = width;
this.worldView.height = height;
this.checkClip();
//console.log('Camera setSize', width, height);
}
public renderDebugInfo(x: number, y: number, color?: string = 'rgb(255,255,255)') {
@ -652,6 +647,12 @@ module Phaser {
}
public set width(value: number) {
if (value > this._game.stage.width)
{
value = this._game.stage.width;
}
this.worldView.width = value;
this.checkClip();
}
@ -661,6 +662,12 @@ module Phaser {
}
public set height(value: number) {
if (value > this._game.stage.height)
{
value = this._game.stage.height;
}
this.worldView.height = value;
this.checkClip();
}

View file

@ -24,6 +24,8 @@ V0.9.4
* Added Tilemap.getTile, getTileFromWorldXY, getTileFromInputXY
* Added Tilemap.setCollisionByIndex and setCollisionByRange
* Added GameObject.renderRotation boolean to control if the sprite will visually rotate or not (useful when angle needs to change but graphics don't)
* Added additional check to Camera.width/height so you cannot set them larger than the Stage size
* Added Collision.separateTile and Tilemap.collide
Requirements

View file

@ -13,9 +13,9 @@
for(var i = 0; i < 100; i++) {
myGame.createSprite(Math.random() * myGame.world.width, Math.random() * myGame.world.height, 'melon');
}
myGame.onRenderCallback = render;
}
function update() {
myGame.camera.renderDebugInfo(32, 32);
if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
myGame.camera.scroll.x -= 4;
} else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
@ -27,4 +27,7 @@
myGame.camera.scroll.y += 4;
}
}
function render() {
myGame.camera.renderDebugInfo(32, 32);
}
})();

View file

@ -25,12 +25,12 @@
myGame.createSprite(Math.random() * myGame.world.width, Math.random() * myGame.world.height, 'melon');
}
myGame.onRenderCallback = render;
}
function update() {
myGame.camera.renderDebugInfo(32, 32);
if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
{
myGame.camera.scroll.x -= 4;
@ -51,4 +51,10 @@
}
function render() {
myGame.camera.renderDebugInfo(32, 32);
}
})();

View file

@ -928,12 +928,12 @@ var Phaser;
this._fxShakeIntensity = 0;
this._fxShakeDuration = 0;
this._fxShakeComplete = null;
this._fxShakeOffset = new Phaser.Point(0, 0);
this._fxShakeOffset = new Phaser.MicroPoint(0, 0);
this._fxShakeDirection = 0;
this._fxShakePrevX = 0;
this._fxShakePrevY = 0;
this.scale = new Phaser.Point(1, 1);
this.scroll = new Phaser.Point(0, 0);
this.scale = new Phaser.MicroPoint(1, 1);
this.scroll = new Phaser.MicroPoint(0, 0);
this.bounds = null;
this.deadzone = null;
// Camera Border
@ -947,7 +947,7 @@ var Phaser;
this.showShadow = false;
this.shadowColor = 'rgb(0,0,0)';
this.shadowBlur = 10;
this.shadowOffset = new Phaser.Point(4, 4);
this.shadowOffset = new Phaser.MicroPoint(4, 4);
this.visible = true;
this.alpha = 1;
// The x/y position of the current input event in world coordinates
@ -1075,32 +1075,26 @@ var Phaser;
var w = this.width / 8;
var h = this.height / 3;
this.deadzone = new Phaser.Rectangle((this.width - w) / 2, (this.height - h) / 2 - h * 0.25, w, h);
console.log('follow 1');
break;
case Camera.STYLE_TOPDOWN:
helper = Math.max(this.width, this.height) / 4;
this.deadzone = new Phaser.Rectangle((this.width - helper) / 2, (this.height - helper) / 2, helper, helper);
console.log('follow 2');
break;
case Camera.STYLE_TOPDOWN_TIGHT:
helper = Math.max(this.width, this.height) / 8;
this.deadzone = new Phaser.Rectangle((this.width - helper) / 2, (this.height - helper) / 2, helper, helper);
console.log('follow 3');
break;
case Camera.STYLE_LOCKON:
default:
this.deadzone = null;
console.log('follow 4');
break;
}
};
Camera.prototype.focusOnXY = function (x, y) {
console.log('focusOn', x, y);
x += (x > 0) ? 0.0000001 : -0.0000001;
y += (y > 0) ? 0.0000001 : -0.0000001;
this.scroll.x = Math.round(x - this.worldView.halfWidth);
this.scroll.y = Math.round(y - this.worldView.halfHeight);
console.log('focusOn scroll', this.scroll.x, this.scroll.y);
};
Camera.prototype.focusOn = function (point) {
point.x += (point.x > 0) ? 0.0000001 : -0.0000001;
@ -1125,7 +1119,6 @@ var Phaser;
this.bounds = new Phaser.Rectangle();
}
this.bounds.setTo(x, y, width, height);
this.worldView.setTo(x, y, width, height);
this.scroll.setTo(0, 0);
this.update();
};
@ -1155,7 +1148,7 @@ var Phaser;
}
}
}
// Make sure we didn't go outside the camera's bounds
// Make sure we didn't go outside the cameras bounds
if(this.bounds !== null) {
if(this.scroll.x < this.bounds.left) {
this.scroll.x = this.bounds.left;
@ -1172,6 +1165,7 @@ var Phaser;
}
this.worldView.x = this.scroll.x;
this.worldView.y = this.scroll.y;
//console.log(this.worldView.width, this.worldView.height);
// Input values
this.inputX = this.worldView.x + this._game.input.x;
this.inputY = this.worldView.y + this._game.input.y;
@ -1340,7 +1334,8 @@ var Phaser;
this.worldView.width = width;
this.worldView.height = height;
this.checkClip();
};
//console.log('Camera setSize', width, height);
};
Camera.prototype.renderDebugInfo = function (x, y, color) {
if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
this._game.stage.context.fillStyle = color;
@ -1378,6 +1373,9 @@ var Phaser;
return this.worldView.width;
},
set: function (value) {
if(value > this._game.stage.width) {
value = this._game.stage.width;
}
this.worldView.width = value;
this.checkClip();
},
@ -1389,6 +1387,9 @@ var Phaser;
return this.worldView.height;
},
set: function (value) {
if(value > this._game.stage.height) {
value = this._game.stage.height;
}
this.worldView.height = value;
this.checkClip();
},
@ -3360,6 +3361,20 @@ var Phaser;
enumerable: true,
configurable: true
});
Object.defineProperty(Quad.prototype, "halfWidth", {
get: function () {
return this.width / 2;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Quad.prototype, "halfHeight", {
get: function () {
return this.height / 2;
},
enumerable: true,
configurable: true
});
Quad.prototype.intersects = /**
* Determines whether the object specified intersects (overlaps) with this Quad object.
* This method checks the x, y, width, and height properties of the specified Quad object to see if it intersects with this Quad object.
@ -10581,9 +10596,8 @@ var Phaser;
}
if(Collide > 0) {
particle.allowCollisions = Phaser.Collision.ANY;
particle.elasticity = Collide;
//particle.width *= Collide;
//particle.height *= Collide;
particle.width *= Collide;
particle.height *= Collide;
//particle.centerOffsets();
} else {
particle.allowCollisions = Phaser.Collision.NONE;
@ -11487,7 +11501,6 @@ var Phaser;
this.collisionLayer = layer;
this.layers.push(layer);
this.generateTiles(tileQuantity);
console.log('generate layer csv');
};
Tilemap.prototype.parseTiledJSON = function (data, key) {
// Trim any rogue whitespace from the data
@ -11511,7 +11524,6 @@ var Phaser;
layer.addColumn(row);
c = 0;
}
console.log('generate layer json');
}
layer.updateBounds();
var tileQuantity = layer.parseTileOffsets();

View file

@ -1,43 +1,19 @@
var __extends = this.__extends || function (d, b) {
function __() { this.constructor = d; }
__.prototype = b.prototype;
d.prototype = new __();
};
/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
/// <reference path="../../Phaser/Game.ts" />
var customParticle2 = (function (_super) {
__extends(customParticle2, _super);
function customParticle2(game) {
_super.call(this, game);
var s = [
'carrot',
'melon',
'eggplant',
'mushroom',
'pineapple'
];
this.loadGraphic(game.math.getRandom(s));
this.elasticity = 0.8;
}
return customParticle2;
})(Phaser.Particle);
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
function init() {
myGame.loader.addTextFile('platform', 'assets/maps/platform-test-1.json');
myGame.loader.addImageFile('tiles', 'assets/tiles/platformer_tiles.png');
myGame.loader.addImageFile('ufo', 'assets/sprites/ufo.png');
myGame.loader.addImageFile('carrot', 'assets/sprites/carrot.png');
myGame.loader.addImageFile('melon', 'assets/sprites/melon.png');
myGame.loader.addImageFile('eggplant', 'assets/sprites/eggplant.png');
myGame.loader.addImageFile('mushroom', 'assets/sprites/mushroom.png');
myGame.loader.addImageFile('pineapple', 'assets/sprites/pineapple.png');
myGame.loader.load();
}
var map;
var car;
var tile;
var emitter;
var test;
function create() {
map = myGame.createTilemap('tiles', 'platform', Phaser.Tilemap.FORMAT_TILED_JSON);
map.setCollisionRange(21, 53);
@ -51,14 +27,17 @@ var customParticle2 = (function (_super) {
]);
emitter = myGame.createEmitter(32, 80);
emitter.width = 700;
emitter.particleClass = customParticle2;
emitter.makeParticles(null, 100, 0, false, 0.7);
emitter.gravity = 100;
emitter.setRotation(0, 0);
emitter.start(false, 10, 0.05);
emitter.makeParticles('melon', 100, 0, false, 1);
emitter.gravity = 200;
emitter.bounce = 0.8;
//emitter.setRotation(0, 0);
emitter.start(false, 10, 0.1);
car = myGame.createSprite(250, 64, 'ufo');
car.renderRotation = false;
//car.renderDebug = true;
test = myGame.createSprite(200, 64, 'ufo');
test.elasticity = 1;
test.velocity.x = 50;
test.velocity.y = 100;
car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
}
function update() {
@ -74,10 +53,9 @@ var customParticle2 = (function (_super) {
} else if(myGame.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
car.velocity.y = 200;
}
// Collide the space ship with the particles
myGame.collide(car, emitter);
// Collide everything with the map
//map.collide();
map.collide(emitter);
map.collide();
// And collide everything in the game :)
myGame.collide();
}
})();

View file

@ -1,20 +1,6 @@
/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
/// <reference path="../../Phaser/Game.ts" />
class customParticle2 extends Phaser.Particle {
constructor(game:Phaser.Game) {
super(game);
var s = ['carrot', 'melon', 'eggplant', 'mushroom', 'pineapple'];
this.loadGraphic(game.math.getRandom(s));
this.elasticity = 0.8;
}
}
(function () {
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
@ -24,11 +10,7 @@ class customParticle2 extends Phaser.Particle {
myGame.loader.addTextFile('platform', 'assets/maps/platform-test-1.json');
myGame.loader.addImageFile('tiles', 'assets/tiles/platformer_tiles.png');
myGame.loader.addImageFile('ufo', 'assets/sprites/ufo.png');
myGame.loader.addImageFile('carrot', 'assets/sprites/carrot.png');
myGame.loader.addImageFile('melon', 'assets/sprites/melon.png');
myGame.loader.addImageFile('eggplant', 'assets/sprites/eggplant.png');
myGame.loader.addImageFile('mushroom', 'assets/sprites/mushroom.png');
myGame.loader.addImageFile('pineapple', 'assets/sprites/pineapple.png');
myGame.loader.load();
@ -38,6 +20,7 @@ class customParticle2 extends Phaser.Particle {
var car: Phaser.Sprite;
var tile: Phaser.Tile;
var emitter: Phaser.Emitter;
var test: Phaser.Sprite;
function create() {
@ -51,15 +34,18 @@ class customParticle2 extends Phaser.Particle {
emitter = myGame.createEmitter(32, 80);
emitter.width = 700;
emitter.particleClass = customParticle2;
emitter.makeParticles(null, 100, 0, false, 0.7);
emitter.gravity = 100;
emitter.setRotation(0,0);
emitter.start(false, 10, 0.05);
emitter.makeParticles('melon', 100, 0, false, 1);
emitter.gravity = 200;
emitter.bounce = 0.8;
emitter.start(false, 10, 0.1);
car = myGame.createSprite(250, 64, 'ufo');
car.renderRotation = false;
//car.renderDebug = true;
test = myGame.createSprite(200, 64, 'ufo');
test.elasticity = 1;
test.velocity.x = 50;
test.velocity.y = 100;
car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
@ -88,12 +74,11 @@ class customParticle2 extends Phaser.Particle {
car.velocity.y = 200;
}
// Collide the space ship with the particles
myGame.collide(car, emitter);
// Collide everything with the map
//map.collide();
map.collide(emitter);
map.collide();
// And collide everything in the game :)
myGame.collide();
}

View file

@ -928,12 +928,12 @@ var Phaser;
this._fxShakeIntensity = 0;
this._fxShakeDuration = 0;
this._fxShakeComplete = null;
this._fxShakeOffset = new Phaser.Point(0, 0);
this._fxShakeOffset = new Phaser.MicroPoint(0, 0);
this._fxShakeDirection = 0;
this._fxShakePrevX = 0;
this._fxShakePrevY = 0;
this.scale = new Phaser.Point(1, 1);
this.scroll = new Phaser.Point(0, 0);
this.scale = new Phaser.MicroPoint(1, 1);
this.scroll = new Phaser.MicroPoint(0, 0);
this.bounds = null;
this.deadzone = null;
// Camera Border
@ -947,7 +947,7 @@ var Phaser;
this.showShadow = false;
this.shadowColor = 'rgb(0,0,0)';
this.shadowBlur = 10;
this.shadowOffset = new Phaser.Point(4, 4);
this.shadowOffset = new Phaser.MicroPoint(4, 4);
this.visible = true;
this.alpha = 1;
// The x/y position of the current input event in world coordinates
@ -1075,32 +1075,26 @@ var Phaser;
var w = this.width / 8;
var h = this.height / 3;
this.deadzone = new Phaser.Rectangle((this.width - w) / 2, (this.height - h) / 2 - h * 0.25, w, h);
console.log('follow 1');
break;
case Camera.STYLE_TOPDOWN:
helper = Math.max(this.width, this.height) / 4;
this.deadzone = new Phaser.Rectangle((this.width - helper) / 2, (this.height - helper) / 2, helper, helper);
console.log('follow 2');
break;
case Camera.STYLE_TOPDOWN_TIGHT:
helper = Math.max(this.width, this.height) / 8;
this.deadzone = new Phaser.Rectangle((this.width - helper) / 2, (this.height - helper) / 2, helper, helper);
console.log('follow 3');
break;
case Camera.STYLE_LOCKON:
default:
this.deadzone = null;
console.log('follow 4');
break;
}
};
Camera.prototype.focusOnXY = function (x, y) {
console.log('focusOn', x, y);
x += (x > 0) ? 0.0000001 : -0.0000001;
y += (y > 0) ? 0.0000001 : -0.0000001;
this.scroll.x = Math.round(x - this.worldView.halfWidth);
this.scroll.y = Math.round(y - this.worldView.halfHeight);
console.log('focusOn scroll', this.scroll.x, this.scroll.y);
};
Camera.prototype.focusOn = function (point) {
point.x += (point.x > 0) ? 0.0000001 : -0.0000001;
@ -1125,7 +1119,6 @@ var Phaser;
this.bounds = new Phaser.Rectangle();
}
this.bounds.setTo(x, y, width, height);
this.worldView.setTo(x, y, width, height);
this.scroll.setTo(0, 0);
this.update();
};
@ -1155,7 +1148,7 @@ var Phaser;
}
}
}
// Make sure we didn't go outside the camera's bounds
// Make sure we didn't go outside the cameras bounds
if(this.bounds !== null) {
if(this.scroll.x < this.bounds.left) {
this.scroll.x = this.bounds.left;
@ -1172,6 +1165,7 @@ var Phaser;
}
this.worldView.x = this.scroll.x;
this.worldView.y = this.scroll.y;
//console.log(this.worldView.width, this.worldView.height);
// Input values
this.inputX = this.worldView.x + this._game.input.x;
this.inputY = this.worldView.y + this._game.input.y;
@ -1340,7 +1334,8 @@ var Phaser;
this.worldView.width = width;
this.worldView.height = height;
this.checkClip();
};
//console.log('Camera setSize', width, height);
};
Camera.prototype.renderDebugInfo = function (x, y, color) {
if (typeof color === "undefined") { color = 'rgb(255,255,255)'; }
this._game.stage.context.fillStyle = color;
@ -1378,6 +1373,9 @@ var Phaser;
return this.worldView.width;
},
set: function (value) {
if(value > this._game.stage.width) {
value = this._game.stage.width;
}
this.worldView.width = value;
this.checkClip();
},
@ -1389,6 +1387,9 @@ var Phaser;
return this.worldView.height;
},
set: function (value) {
if(value > this._game.stage.height) {
value = this._game.stage.height;
}
this.worldView.height = value;
this.checkClip();
},
@ -3360,6 +3361,20 @@ var Phaser;
enumerable: true,
configurable: true
});
Object.defineProperty(Quad.prototype, "halfWidth", {
get: function () {
return this.width / 2;
},
enumerable: true,
configurable: true
});
Object.defineProperty(Quad.prototype, "halfHeight", {
get: function () {
return this.height / 2;
},
enumerable: true,
configurable: true
});
Quad.prototype.intersects = /**
* Determines whether the object specified intersects (overlaps) with this Quad object.
* This method checks the x, y, width, and height properties of the specified Quad object to see if it intersects with this Quad object.
@ -10581,9 +10596,8 @@ var Phaser;
}
if(Collide > 0) {
particle.allowCollisions = Phaser.Collision.ANY;
particle.elasticity = Collide;
//particle.width *= Collide;
//particle.height *= Collide;
particle.width *= Collide;
particle.height *= Collide;
//particle.centerOffsets();
} else {
particle.allowCollisions = Phaser.Collision.NONE;
@ -11487,7 +11501,6 @@ var Phaser;
this.collisionLayer = layer;
this.layers.push(layer);
this.generateTiles(tileQuantity);
console.log('generate layer csv');
};
Tilemap.prototype.parseTiledJSON = function (data, key) {
// Trim any rogue whitespace from the data
@ -11511,7 +11524,6 @@ var Phaser;
layer.addColumn(row);
c = 0;
}
console.log('generate layer json');
}
layer.updateBounds();
var tileQuantity = layer.parseTileOffsets();