mirror of
https://github.com/wassname/phaser.git
synced 2026-08-14 12:40:17 +08:00
Large Tilemap collision overhaul. Proper callback support, optimised collision checks and lots more.
This commit is contained in:
@@ -152,6 +152,10 @@
|
||||
<TypeScriptCompile Include="tilemap\small map.ts" />
|
||||
<TypeScriptCompile Include="tilemap\get tile.ts" />
|
||||
<TypeScriptCompile Include="tilemap\collision.ts" />
|
||||
<TypeScriptCompile Include="tilemap\collide with tile.ts" />
|
||||
<Content Include="tilemap\collide with tile.js">
|
||||
<DependentUpon>collide with tile.ts</DependentUpon>
|
||||
</Content>
|
||||
<Content Include="tilemap\collision.js">
|
||||
<DependentUpon>collision.ts</DependentUpon>
|
||||
</Content>
|
||||
|
||||
@@ -3,26 +3,27 @@
|
||||
(function () {
|
||||
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
|
||||
function init() {
|
||||
// Just set the world to be the size of the image we're loading in
|
||||
myGame.world.setSize(1216, 896);
|
||||
myGame.loader.addImageFile('backdrop', 'assets/pics/ninja-masters2.png');
|
||||
myGame.loader.load();
|
||||
}
|
||||
var mirror;
|
||||
var cam;
|
||||
function create() {
|
||||
// What we need is a camera 800x400 pixels in size, the mirror effect will sit below it.
|
||||
// What we need is a camera 800x400 pixels in size as the mirror effect will be 200px tall and sit below it.
|
||||
// So we resize our default camera to 400px
|
||||
myGame.camera.height = 400;
|
||||
// Because it's our default camera we need to tell it to disable clipping, otherwise we'll never see the mirror effect
|
||||
// Because it's our default camera we need to tell it to disable clipping, otherwise we'll never see the mirror effect render.
|
||||
myGame.camera.disableClipping = true;
|
||||
// Add our effect to the camera
|
||||
mirror = myGame.camera.fx.add(Phaser.FX.Camera.Mirror);
|
||||
// The first 2 parameters are the x and y coordinates we're going to display the mirror effect in STAGE coordinates
|
||||
// The next is the rectangular region of the Camera that we'll create the effect from (in this case the whole camera)
|
||||
// Finally we set the fill color that is put over the top of the mirror effect
|
||||
// The first 2 parameters are the x and y coordinates of where to display the effect. They are in STAGE coordinates, not World.
|
||||
// The next is a Quad making up the rectangular region of the Camera that we'll create the effect from (in this case the whole camera).
|
||||
// Finally we set the fill color that is put over the top of the mirror effect.
|
||||
mirror.start(0, 400, new Phaser.Quad(0, 0, 800, 400), 'rgba(0, 0, 100, 0.7)');
|
||||
mirror.flipX = true;
|
||||
mirror.flipY = true;
|
||||
// Experiment with variations on these to see the different mirror effects that can be achieved.
|
||||
//mirror.flipX = true;
|
||||
//mirror.flipY = true;
|
||||
myGame.createSprite(0, 0, 'backdrop');
|
||||
}
|
||||
function update() {
|
||||
|
||||
@@ -20,19 +20,19 @@
|
||||
|
||||
function create() {
|
||||
|
||||
// What we need is a camera 800x400 pixels in size, the mirror effect will sit below it.
|
||||
// What we need is a camera 800x400 pixels in size as the mirror effect will be 200px tall and sit below it.
|
||||
// So we resize our default camera to 400px
|
||||
myGame.camera.height = 400;
|
||||
|
||||
// Because it's our default camera we need to tell it to disable clipping, otherwise we'll never see the mirror effect
|
||||
// Because it's our default camera we need to tell it to disable clipping, otherwise we'll never see the mirror effect render.
|
||||
myGame.camera.disableClipping = true;
|
||||
|
||||
// Add our effect to the camera
|
||||
mirror = <Phaser.FX.Camera.Mirror> myGame.camera.fx.add(Phaser.FX.Camera.Mirror);
|
||||
|
||||
// The first 2 parameters are the x and y coordinates we're going to display the mirror effect in STAGE coordinates
|
||||
// The next is the rectangular region of the Camera that we'll create the effect from (in this case the whole camera)
|
||||
// Finally we set the fill color that is put over the top of the mirror effect
|
||||
// The first 2 parameters are the x and y coordinates of where to display the effect. They are in STAGE coordinates, not World.
|
||||
// The next is a Quad making up the rectangular region of the Camera that we'll create the effect from (in this case the whole camera).
|
||||
// Finally we set the fill color that is put over the top of the mirror effect.
|
||||
mirror.start(0, 400, new Phaser.Quad(0, 0, 800, 400), 'rgba(0, 0, 100, 0.7)');
|
||||
|
||||
// Experiment with variations on these to see the different mirror effects that can be achieved.
|
||||
|
||||
+89
-55
@@ -4827,9 +4827,9 @@ var Phaser;
|
||||
* @param tile The Tile to separate
|
||||
* @returns {boolean} Whether the objects in fact touched and were separated
|
||||
*/
|
||||
function separateTile(object, x, y, width, height, mass, collideLeft, collideRight, collideUp, collideDown) {
|
||||
var separatedX = Collision.separateTileX(object, x, y, width, height, mass, collideLeft, collideRight);
|
||||
var separatedY = Collision.separateTileY(object, x, y, width, height, mass, collideUp, collideDown);
|
||||
function separateTile(object, x, y, width, height, mass, collideLeft, collideRight, collideUp, collideDown, separateX, separateY) {
|
||||
var separatedX = Collision.separateTileX(object, x, y, width, height, mass, collideLeft, collideRight, separateX);
|
||||
var separatedY = Collision.separateTileY(object, x, y, width, height, mass, collideUp, collideDown, separateY);
|
||||
return separatedX || separatedY;
|
||||
};
|
||||
Collision.separateTileX = /**
|
||||
@@ -4838,7 +4838,7 @@ var Phaser;
|
||||
* @param tile The Tile to separate
|
||||
* @returns {boolean} Whether the objects in fact touched and were separated along the X axis.
|
||||
*/
|
||||
function separateTileX(object, x, y, width, height, mass, collideLeft, collideRight) {
|
||||
function separateTileX(object, x, y, width, height, mass, collideLeft, collideRight, separate) {
|
||||
// Can't separate two immovable objects (tiles are always immovable)
|
||||
if(object.immovable) {
|
||||
return false;
|
||||
@@ -4872,8 +4872,10 @@ var Phaser;
|
||||
}
|
||||
// Then adjust their positions and velocities accordingly (if there was any overlap)
|
||||
if(overlap != 0) {
|
||||
object.x = object.x - overlap;
|
||||
object.velocity.x = -(object.velocity.x * object.elasticity);
|
||||
if(separate == true) {
|
||||
object.x = object.x - overlap;
|
||||
object.velocity.x = -(object.velocity.x * object.elasticity);
|
||||
}
|
||||
Collision.TILE_OVERLAP = true;
|
||||
return true;
|
||||
} else {
|
||||
@@ -4886,7 +4888,7 @@ var Phaser;
|
||||
* @param tile The second GameObject to separate
|
||||
* @returns {boolean} Whether the objects in fact touched and were separated along the Y axis.
|
||||
*/
|
||||
function separateTileY(object, x, y, width, height, mass, collideUp, collideDown) {
|
||||
function separateTileY(object, x, y, width, height, mass, collideUp, collideDown, separate) {
|
||||
// Can't separate two immovable objects (tiles are always immovable)
|
||||
if(object.immovable) {
|
||||
return false;
|
||||
@@ -4921,8 +4923,10 @@ var Phaser;
|
||||
// TODO - with super low velocities you get lots of stuttering, set some kind of base minimum here
|
||||
// Then adjust their positions and velocities accordingly (if there was any overlap)
|
||||
if(overlap != 0) {
|
||||
object.y = object.y - overlap;
|
||||
object.velocity.y = -(object.velocity.y * object.elasticity);
|
||||
if(separate == true) {
|
||||
object.y = object.y - overlap;
|
||||
object.velocity.y = -(object.velocity.y * object.elasticity);
|
||||
}
|
||||
Collision.TILE_OVERLAP = true;
|
||||
return true;
|
||||
} else {
|
||||
@@ -6341,40 +6345,40 @@ var Phaser;
|
||||
Group.prototype.remove = /**
|
||||
* Removes an object from the group.
|
||||
*
|
||||
* @param Object The <code>Basic</code> you want to remove.
|
||||
* @param Splice Whether the object should be cut from the array entirely or not.
|
||||
* @param object The <code>Basic</code> you want to remove.
|
||||
* @param splice Whether the object should be cut from the array entirely or not.
|
||||
*
|
||||
* @return The removed object.
|
||||
*/
|
||||
function (Object, Splice) {
|
||||
if (typeof Splice === "undefined") { Splice = false; }
|
||||
var index = this.members.indexOf(Object);
|
||||
function (object, splice) {
|
||||
if (typeof splice === "undefined") { splice = false; }
|
||||
var index = this.members.indexOf(object);
|
||||
if((index < 0) || (index >= this.members.length)) {
|
||||
return null;
|
||||
}
|
||||
if(Splice) {
|
||||
if(splice) {
|
||||
this.members.splice(index, 1);
|
||||
this.length--;
|
||||
} else {
|
||||
this.members[index] = null;
|
||||
}
|
||||
return Object;
|
||||
return object;
|
||||
};
|
||||
Group.prototype.replace = /**
|
||||
* Replaces an existing <code>Basic</code> with a new one.
|
||||
*
|
||||
* @param OldObject The object you want to replace.
|
||||
* @param NewObject The new object you want to use instead.
|
||||
* @param oldObject The object you want to replace.
|
||||
* @param newObject The new object you want to use instead.
|
||||
*
|
||||
* @return The new object.
|
||||
*/
|
||||
function (OldObject, NewObject) {
|
||||
var index = this.members.indexOf(OldObject);
|
||||
function (oldObject, newObject) {
|
||||
var index = this.members.indexOf(oldObject);
|
||||
if((index < 0) || (index >= this.members.length)) {
|
||||
return null;
|
||||
}
|
||||
this.members[index] = NewObject;
|
||||
return NewObject;
|
||||
this.members[index] = newObject;
|
||||
return newObject;
|
||||
};
|
||||
Group.prototype.sort = /**
|
||||
* Call this function to sort the group according to a particular value and order.
|
||||
@@ -6383,14 +6387,14 @@ var Phaser;
|
||||
* <code>State.update()</code> override. To sort all existing objects after
|
||||
* a big explosion or bomb attack, you might call <code>myGroup.sort("exists",Group.DESCENDING)</code>.
|
||||
*
|
||||
* @param Index The <code>string</code> name of the member variable you want to sort on. Default value is "y".
|
||||
* @param Order A <code>Group</code> constant that defines the sort order. Possible values are <code>Group.ASCENDING</code> and <code>Group.DESCENDING</code>. Default value is <code>Group.ASCENDING</code>.
|
||||
* @param index The <code>string</code> name of the member variable you want to sort on. Default value is "y".
|
||||
* @param order A <code>Group</code> constant that defines the sort order. Possible values are <code>Group.ASCENDING</code> and <code>Group.DESCENDING</code>. Default value is <code>Group.ASCENDING</code>.
|
||||
*/
|
||||
function (Index, Order) {
|
||||
if (typeof Index === "undefined") { Index = "y"; }
|
||||
if (typeof Order === "undefined") { Order = Group.ASCENDING; }
|
||||
this._sortIndex = Index;
|
||||
this._sortOrder = Order;
|
||||
function (index, order) {
|
||||
if (typeof index === "undefined") { index = "y"; }
|
||||
if (typeof order === "undefined") { order = Group.ASCENDING; }
|
||||
this._sortIndex = index;
|
||||
this._sortOrder = order;
|
||||
this.members.sort(this.sortHandler);
|
||||
};
|
||||
Group.prototype.setAll = /**
|
||||
@@ -11151,6 +11155,7 @@ var Phaser;
|
||||
this.boundsInTiles = new Phaser.Rectangle();
|
||||
//this.scrollFactor = new MicroPoint(1, 1);
|
||||
this.mapData = [];
|
||||
this._tempTileBlock = [];
|
||||
this._texture = this._game.cache.getImage(key);
|
||||
}
|
||||
TilemapLayer.prototype.getTileFromWorldXY = function (x, y) {
|
||||
@@ -11168,15 +11173,19 @@ var Phaser;
|
||||
this._tempTileY = this._game.math.snapToFloor(object.bounds.y, this.tileHeight) / this.tileHeight;
|
||||
this._tempTileW = (this._game.math.snapToCeil(object.bounds.width, this.tileWidth) + this.tileWidth) / this.tileWidth;
|
||||
this._tempTileH = (this._game.math.snapToCeil(object.bounds.height, this.tileHeight) + this.tileHeight) / this.tileHeight;
|
||||
// Loop through the tiles we've got and check overlaps accordingly
|
||||
var tiles = this.getTileBlock(this._tempTileX, this._tempTileY, this._tempTileW, this._tempTileH);
|
||||
// Loop through the tiles we've got and check overlaps accordingly (the results are stored in this._tempTileBlock)
|
||||
this.getTileBlock(this._tempTileX, this._tempTileY, this._tempTileW, this._tempTileH);
|
||||
Phaser.Collision.TILE_OVERLAP = false;
|
||||
for(var r = 0; r < tiles.length; r++) {
|
||||
if(tiles[r].tile.allowCollisions != Phaser.Collision.NONE) {
|
||||
Phaser.Collision.separateTile(object, tiles[r].x * this.tileWidth, tiles[r].y * this.tileHeight, this.tileWidth, this.tileHeight, tiles[r].tile.mass, tiles[r].tile.collideLeft, tiles[r].tile.collideRight, tiles[r].tile.collideUp, tiles[r].tile.collideDown);
|
||||
for(var r = 0; r < this._tempTileBlock.length; r++) {
|
||||
if(Phaser.Collision.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 Phaser.Collision.TILE_OVERLAP;
|
||||
return this._tempBlockResults;
|
||||
};
|
||||
TilemapLayer.prototype.getTileBlock = function (x, y, width, height) {
|
||||
if(x < 0) {
|
||||
@@ -11191,11 +11200,13 @@ var Phaser;
|
||||
if(height > this.heightInTiles) {
|
||||
height = this.heightInTiles;
|
||||
}
|
||||
var output = [];
|
||||
this._tempTileBlock = [];
|
||||
this._tempBlockResults = [];
|
||||
for(var ty = y; ty < y + height; ty++) {
|
||||
for(var tx = x; tx < x + width; tx++) {
|
||||
if(this.mapData[ty] && this.mapData[ty][tx]) {
|
||||
output.push({
|
||||
// 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.Collision.NONE) {
|
||||
this._tempTileBlock.push({
|
||||
x: tx,
|
||||
y: ty,
|
||||
tile: this._parent.tiles[this.mapData[ty][tx]]
|
||||
@@ -11203,7 +11214,6 @@ var Phaser;
|
||||
}
|
||||
}
|
||||
}
|
||||
return output;
|
||||
};
|
||||
TilemapLayer.prototype.getTileIndex = function (x, y) {
|
||||
if(y >= 0 && y < this.mapData.length) {
|
||||
@@ -11350,6 +11360,8 @@ var Phaser;
|
||||
this.collideRight = false;
|
||||
this.collideUp = false;
|
||||
this.collideDown = false;
|
||||
this.separateX = true;
|
||||
this.separateY = true;
|
||||
this._game = game;
|
||||
this.tilemap = tilemap;
|
||||
this.index = index;
|
||||
@@ -11363,10 +11375,12 @@ var Phaser;
|
||||
function () {
|
||||
this.tilemap = null;
|
||||
};
|
||||
Tile.prototype.setCollision = function (collision, resetCollisions) {
|
||||
Tile.prototype.setCollision = function (collision, resetCollisions, separateX, separateY) {
|
||||
if(resetCollisions) {
|
||||
this.resetCollision();
|
||||
}
|
||||
this.separateX = separateX;
|
||||
this.separateY = separateY;
|
||||
this.allowCollisions = collision;
|
||||
if(collision & Phaser.Collision.ANY) {
|
||||
this.collideLeft = true;
|
||||
@@ -11426,6 +11440,7 @@ var Phaser;
|
||||
if (typeof tileWidth === "undefined") { tileWidth = 0; }
|
||||
if (typeof tileHeight === "undefined") { tileHeight = 0; }
|
||||
_super.call(this, game);
|
||||
this.collisionCallback = null;
|
||||
this.isGroup = false;
|
||||
this.tiles = [];
|
||||
this.layers = [];
|
||||
@@ -11522,23 +11537,37 @@ var Phaser;
|
||||
enumerable: true,
|
||||
configurable: true
|
||||
});
|
||||
Tilemap.prototype.setCollisionRange = // Tile Collision
|
||||
function (start, end, collision, resetCollisions) {
|
||||
Tilemap.prototype.setCollisionCallback = // Tile Collision
|
||||
function (context, callback) {
|
||||
this.collisionCallbackContext = context;
|
||||
this.collisionCallback = callback;
|
||||
};
|
||||
Tilemap.prototype.setCollisionRange = function (start, end, collision, resetCollisions, separateX, separateY) {
|
||||
if (typeof collision === "undefined") { collision = Phaser.Collision.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);
|
||||
this.tiles[i].setCollision(collision, resetCollisions, separateX, separateY);
|
||||
}
|
||||
};
|
||||
Tilemap.prototype.setCollisionByIndex = function (values, collision, resetCollisions) {
|
||||
Tilemap.prototype.setCollisionByIndex = function (values, collision, resetCollisions, separateX, separateY) {
|
||||
if (typeof collision === "undefined") { collision = Phaser.Collision.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);
|
||||
this.tiles[values[i]].setCollision(collision, resetCollisions, separateX, separateY);
|
||||
}
|
||||
};
|
||||
Tilemap.prototype.getTile = // Tile Management
|
||||
function (x, y, layer) {
|
||||
Tilemap.prototype.getTileByIndex = // Tile Management
|
||||
function (value) {
|
||||
if(this.tiles[value]) {
|
||||
return this.tiles[value];
|
||||
}
|
||||
return null;
|
||||
};
|
||||
Tilemap.prototype.getTile = function (x, y, layer) {
|
||||
if (typeof layer === "undefined") { layer = 0; }
|
||||
return this.tiles[this.layers[layer].getTileIndex(x, y)];
|
||||
};
|
||||
@@ -11554,26 +11583,31 @@ var Phaser;
|
||||
return this.currentLayer.getTileOverlaps(object);
|
||||
};
|
||||
Tilemap.prototype.collide = // COLLIDE
|
||||
function (objectOrGroup, callback) {
|
||||
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) {
|
||||
return this.collideGameObject(objectOrGroup);
|
||||
this.collideGameObject(objectOrGroup);
|
||||
} else {
|
||||
objectOrGroup.forEachAlive(this, this.collideGameObject, true);
|
||||
}
|
||||
return true;
|
||||
};
|
||||
Tilemap.prototype.collideGameObject = function (object) {
|
||||
if(object == this) {
|
||||
return false;
|
||||
}
|
||||
if(object.immovable == false && object.exists == true && object.allowCollisions != Phaser.Collision.NONE) {
|
||||
return this.collisionLayer.getTileOverlaps(object);
|
||||
if(object !== this && object.immovable == false && object.exists == true && object.allowCollisions != Phaser.Collision.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;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,64 @@
|
||||
/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
|
||||
/// <reference path="../../Phaser/system/Tile.ts" />
|
||||
/// <reference path="../../Phaser/Game.ts" />
|
||||
/// <reference path="../../build/phaser-fx.d.ts" />
|
||||
(function () {
|
||||
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
|
||||
function init() {
|
||||
myGame.loader.addTextFile('desert', 'assets/maps/desert.json');
|
||||
myGame.loader.addImageFile('tiles', 'assets/tiles/tmw_desert_spacing.png');
|
||||
myGame.loader.addImageFile('car', 'assets/sprites/car90.png');
|
||||
myGame.loader.load();
|
||||
}
|
||||
var map;
|
||||
var car;
|
||||
var tile;
|
||||
var flash;
|
||||
function create() {
|
||||
map = myGame.createTilemap('tiles', 'desert', Phaser.Tilemap.FORMAT_TILED_JSON);
|
||||
// When the car collides with the cactus tile we'll flash the screen red briefly,
|
||||
// but it won't stop the car (the separateX/Y values are set to false)
|
||||
map.setCollisionByIndex([
|
||||
31
|
||||
], Phaser.Collision.ANY, true, false, false);
|
||||
// When the car collides with the sign post tile we'll stop the car moving (separation is set to true)
|
||||
map.setCollisionByIndex([
|
||||
46
|
||||
], Phaser.Collision.ANY, true, true, true);
|
||||
// This is the callback that will be called every time map.collide() returns true
|
||||
map.collisionCallback = collide;
|
||||
// This is the context in which the callback is called (usually 'this' if you want to be able to access local vars)
|
||||
map.collisionCallbackContext = this;
|
||||
car = myGame.createSprite(250, 200, 'car');
|
||||
car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
|
||||
myGame.camera.follow(car);
|
||||
flash = myGame.camera.fx.add(Phaser.FX.Camera.Flash);
|
||||
}
|
||||
function update() {
|
||||
// Collide the car object with the tilemap
|
||||
// It's important to do this BEFORE you adjust the object velocity (below) otherwise it can jitter around a lot
|
||||
map.collide(car);
|
||||
car.velocity.x = 0;
|
||||
car.velocity.y = 0;
|
||||
car.angularVelocity = 0;
|
||||
if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
|
||||
car.angularVelocity = -200;
|
||||
} else if(myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT)) {
|
||||
car.angularVelocity = 200;
|
||||
}
|
||||
if(myGame.input.keyboard.isDown(Phaser.Keyboard.UP)) {
|
||||
car.velocity.copyFrom(myGame.motion.velocityFromAngle(car.angle, 300));
|
||||
}
|
||||
}
|
||||
function collide(object, collisionData) {
|
||||
// collisionData is an array containing all of the tiles the object overlapped with (can be more than 1)
|
||||
for(var i = 0; i < collisionData.length; i++) {
|
||||
if(collisionData[i].tile.index == 31) {
|
||||
console.log('you hit a cactus!');
|
||||
flash.start(0xff0000, 1);
|
||||
} else if(collisionData[i].tile.index == 31) {
|
||||
console.log('you hit a sign post!');
|
||||
}
|
||||
}
|
||||
}
|
||||
})();
|
||||
@@ -0,0 +1,95 @@
|
||||
/// <reference path="../../Phaser/gameobjects/Tilemap.ts" />
|
||||
/// <reference path="../../Phaser/system/Tile.ts" />
|
||||
/// <reference path="../../Phaser/Game.ts" />
|
||||
/// <reference path="../../build/phaser-fx.d.ts" />
|
||||
|
||||
(function () {
|
||||
|
||||
var myGame = new Phaser.Game(this, 'game', 800, 600, init, create, update);
|
||||
|
||||
function init() {
|
||||
|
||||
myGame.loader.addTextFile('desert', 'assets/maps/desert.json');
|
||||
myGame.loader.addImageFile('tiles', 'assets/tiles/tmw_desert_spacing.png');
|
||||
myGame.loader.addImageFile('car', 'assets/sprites/car90.png');
|
||||
|
||||
myGame.loader.load();
|
||||
|
||||
}
|
||||
|
||||
var map: Phaser.Tilemap;
|
||||
var car: Phaser.Sprite;
|
||||
var tile: Phaser.Tile;
|
||||
var flash: Phaser.FX.Camera.Flash;
|
||||
|
||||
function create() {
|
||||
|
||||
map = myGame.createTilemap('tiles', 'desert', Phaser.Tilemap.FORMAT_TILED_JSON);
|
||||
|
||||
// When the car collides with the cactus tile we'll flash the screen red briefly,
|
||||
// but it won't stop the car (the separateX/Y values are set to false)
|
||||
map.setCollisionByIndex([31], Phaser.Collision.ANY, true, false, false);
|
||||
|
||||
// When the car collides with the sign post tile we'll stop the car moving (separation is set to true)
|
||||
map.setCollisionByIndex([46], Phaser.Collision.ANY, true, true, true);
|
||||
|
||||
// This is the callback that will be called every time map.collide() returns true
|
||||
map.collisionCallback = collide;
|
||||
|
||||
// This is the context in which the callback is called (usually 'this' if you want to be able to access local vars)
|
||||
map.collisionCallbackContext = this;
|
||||
|
||||
car = myGame.createSprite(250, 200, 'car');
|
||||
car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
|
||||
|
||||
myGame.camera.follow(car);
|
||||
|
||||
flash = <Phaser.FX.Camera.Flash> myGame.camera.fx.add(Phaser.FX.Camera.Flash);
|
||||
|
||||
}
|
||||
|
||||
function update() {
|
||||
|
||||
// Collide the car object with the tilemap
|
||||
// It's important to do this BEFORE you adjust the object velocity (below) otherwise it can jitter around a lot
|
||||
map.collide(car);
|
||||
|
||||
car.velocity.x = 0;
|
||||
car.velocity.y = 0;
|
||||
car.angularVelocity = 0;
|
||||
|
||||
if (myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT))
|
||||
{
|
||||
car.angularVelocity = -200;
|
||||
}
|
||||
else if (myGame.input.keyboard.isDown(Phaser.Keyboard.RIGHT))
|
||||
{
|
||||
car.angularVelocity = 200;
|
||||
}
|
||||
|
||||
if (myGame.input.keyboard.isDown(Phaser.Keyboard.UP))
|
||||
{
|
||||
car.velocity.copyFrom(myGame.motion.velocityFromAngle(car.angle, 300));
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function collide(object, collisionData) {
|
||||
|
||||
// collisionData is an array containing all of the tiles the object overlapped with (can be more than 1)
|
||||
for (var i = 0; i < collisionData.length; i++)
|
||||
{
|
||||
if (collisionData[i].tile.index == 31)
|
||||
{
|
||||
console.log('you hit a cactus!');
|
||||
flash.start(0xff0000, 1);
|
||||
}
|
||||
else if (collisionData[i].tile.index == 31)
|
||||
{
|
||||
console.log('you hit a sign post!');
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
@@ -41,6 +41,10 @@
|
||||
car.setBounds(0, 0, map.widthInPixels - 32, map.heightInPixels - 32);
|
||||
}
|
||||
function update() {
|
||||
// Collide everything with the map
|
||||
map.collide();
|
||||
// And collide everything in the game :)
|
||||
myGame.collide();
|
||||
car.velocity.x = 0;
|
||||
car.velocity.y = 0;
|
||||
if(myGame.input.keyboard.isDown(Phaser.Keyboard.LEFT)) {
|
||||
@@ -53,9 +57,5 @@
|
||||
} else if(myGame.input.keyboard.isDown(Phaser.Keyboard.DOWN)) {
|
||||
car.velocity.y = 200;
|
||||
}
|
||||
// Collide everything with the map
|
||||
map.collide();
|
||||
// And collide everything in the game :)
|
||||
myGame.collide();
|
||||
}
|
||||
})();
|
||||
|
||||
@@ -54,6 +54,12 @@
|
||||
|
||||
function update() {
|
||||
|
||||
// Collide everything with the map
|
||||
map.collide();
|
||||
|
||||
// And collide everything in the game :)
|
||||
myGame.collide();
|
||||
|
||||
car.velocity.x = 0;
|
||||
car.velocity.y = 0;
|
||||
|
||||
@@ -75,12 +81,6 @@
|
||||
car.velocity.y = 200;
|
||||
}
|
||||
|
||||
// Collide everything with the map
|
||||
map.collide();
|
||||
|
||||
// And collide everything in the game :)
|
||||
myGame.collide();
|
||||
|
||||
}
|
||||
|
||||
})();
|
||||
|
||||
Reference in New Issue
Block a user