PhaserJS 碰撞 tilemap 不工作
PhaserJS collision tilemap not working
我有一张图块地图,其中只有 1 层正确地与玩家发生碰撞。通过所有示例,但我似乎无法让它在多层上工作。
我有 1 个 tilemap,其中包含总共 13 个层的所有 json 数据,但对于示例,我只包含 3 个。
我希望玩家与不同的层发生碰撞并有不同的回调,例如不能穿过,如果在范围内则不能捡起物品等,但都使用 1 spritemap/tilemap。
var game = new Phaser.Game(1200, 780, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
this.load.tilemap('main_map', 'img here', null, Phaser.Tilemap.TILED_JSON);
this.load.image('sprite_map', 'img here');
this.load.image('player_image', 'img here');
}
var map;
var tileset;
var bLayer;
var wLayer;
var player;
var sLayer;
var cursors;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
// initiallize the tilemap
map = game.add.tilemap('main_map');
map.addTilesetImage('otherNew', 'sprite_map');
//draw the layers
bLayer = map.createLayer(0);
wLayer = map.createLayer(1);
sLayer = map.createLayer(2);
wLayer.resizeWorld();
player = game.add.sprite(600, 600, 'player_image');
game.physics.arcade.enable(player);
player.body.collideWorldBounds = true; // works
//game camera and movment keys here
}
function update() {
game.physics.arcade.collide(player, wLayer); // DOES NOT WORK
game.physics.arcade.collide(player, sLayer); // THIS WORKS
map.setCollision(1, true, wLayer); // DOES NOT WORK
map.setCollision(2, true, sLayer); // THIS WORKS
//movement here already works so didn't include
}
我认为您的 wLayer.resizeWorld();
函数使您的瓦片地图的 width/height 成为世界的大小。看起来这是 wLayer 和 sLayer 之间的唯一区别。
在 Phaser 中设置 width/height 不会自动调整碰撞大小 body。为此,请使用 setSize
函数。
要查看当前 body,请使用 Phaser 的 debug
方法
this.game.debug.body(someSprite, 'rgba(255,0,0,0.5)');
答案是每一层都有自己的一组图块地图,并且由于我使用 spritesheet 生成每一层,这些层有一些需要设置的值。我没有耐心去检查我需要什么实际的碰撞层,但是因为我已经将它们全部拆分成单独的逻辑层,所以我只是将每个层设置在 0 到 100 之间。
// In the create section
map.setCollisionBetween(0, 100,true, wLayer,true);
map.setCollisionBetween(0, 100,true, sLayer,true);
我有一张图块地图,其中只有 1 层正确地与玩家发生碰撞。通过所有示例,但我似乎无法让它在多层上工作。
我有 1 个 tilemap,其中包含总共 13 个层的所有 json 数据,但对于示例,我只包含 3 个。
我希望玩家与不同的层发生碰撞并有不同的回调,例如不能穿过,如果在范围内则不能捡起物品等,但都使用 1 spritemap/tilemap。
var game = new Phaser.Game(1200, 780, Phaser.CANVAS, 'phaser-example', { preload: preload, create: create, update: update, render: render });
function preload() {
this.load.tilemap('main_map', 'img here', null, Phaser.Tilemap.TILED_JSON);
this.load.image('sprite_map', 'img here');
this.load.image('player_image', 'img here');
}
var map;
var tileset;
var bLayer;
var wLayer;
var player;
var sLayer;
var cursors;
function create() {
game.physics.startSystem(Phaser.Physics.ARCADE);
// initiallize the tilemap
map = game.add.tilemap('main_map');
map.addTilesetImage('otherNew', 'sprite_map');
//draw the layers
bLayer = map.createLayer(0);
wLayer = map.createLayer(1);
sLayer = map.createLayer(2);
wLayer.resizeWorld();
player = game.add.sprite(600, 600, 'player_image');
game.physics.arcade.enable(player);
player.body.collideWorldBounds = true; // works
//game camera and movment keys here
}
function update() {
game.physics.arcade.collide(player, wLayer); // DOES NOT WORK
game.physics.arcade.collide(player, sLayer); // THIS WORKS
map.setCollision(1, true, wLayer); // DOES NOT WORK
map.setCollision(2, true, sLayer); // THIS WORKS
//movement here already works so didn't include
}
我认为您的 wLayer.resizeWorld();
函数使您的瓦片地图的 width/height 成为世界的大小。看起来这是 wLayer 和 sLayer 之间的唯一区别。
在 Phaser 中设置 width/height 不会自动调整碰撞大小 body。为此,请使用 setSize
函数。
要查看当前 body,请使用 Phaser 的 debug
方法
this.game.debug.body(someSprite, 'rgba(255,0,0,0.5)');
答案是每一层都有自己的一组图块地图,并且由于我使用 spritesheet 生成每一层,这些层有一些需要设置的值。我没有耐心去检查我需要什么实际的碰撞层,但是因为我已经将它们全部拆分成单独的逻辑层,所以我只是将每个层设置在 0 到 100 之间。
// In the create section
map.setCollisionBetween(0, 100,true, wLayer,true);
map.setCollisionBetween(0, 100,true, sLayer,true);