mirror of
https://github.com/wassname/phaser.git
synced 2026-07-16 01:20:13 +08:00
Collision commands in and working. Updated sci-fly example. Multiple layers rendering. Mixed tile size on one layer rendering, but collision is grid bound.
This commit is contained in:
photonstorm
@@ -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);
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
@@ -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;
|
||||
|
||||
+81
-5
@@ -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)
|
||||
{
|
||||
|
||||
+58
-62
@@ -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;
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user