玩家在第三阶段与地面相撞时被卡住

Question

我正在使用Phaser3制作一款街机游戏，我试图实现的是将玩家与地面瓷砖碰撞。目前，我的玩家被卡在了上角，我不明白为什么，控制台上没有任何错误，我如何才能让玩家在不被卡的情况下正确碰撞？似乎问题出在setCollisionByExclusion方法上

这是我的主菜：

let config = {
type: Phaser.AUTO,
width: 800,
height: 500,
physics: {
default: 'arcade',
arcade: {
gravity: { y: 300 },
debug: true
}
},
scene: {
preload: preload,
create: create,
},
scale: {
mode: Phaser.Scale.FIT,
parent: 'root',
autoCenter: Phaser.Scale.CENTER_BOTH,
width: 800,
height: 600
},
};

new Phaser.Game(config)
function preload() {
this.load.image('sky', require('../assets/backgrounds/sky.png'));
this.load.image('jungle', require('../assets/backgrounds/jungle.png'));
this.load.image('ground', require('../assets/tiles/ground-transp.png'))
this.load.image('small-platform', require("../assets/tiles/small-platform-removebg-preview.png"))
this.load.image('jungle-platform', require("../assets/tiles/jungle-platform.png"))
this.load.image('large-platform', require("../assets/tiles/large-platform-removebg-preview.png"))
this.load.image('tree', require("../assets/backgrounds/treetrunk.png"))
this.load.image('plant', require("../assets/backgrounds/plant.png"))
this.load.image('plant2', require("../assets/backgrounds/plants2.png"))
this.load.image('rock', require("../assets/backgrounds/rock.png"))
this.load.spritesheet({
key: 'player',
url: require('../assets/spritesheets/dilopodo.png'),
frameConfig: {
frameWidth: 195,
frameHeight: 125,
startFrame:10,
endFrame:3
}
});
this.load.tilemapTiledJSON('Ground', require('../assets/maps/tutorial-level.json'));
}
function create () {
this.bg = this.add.image(-41, -41, 'sky');
this.bg = this.add.image('jungle');
this.add.image(67, 370, 'tree')
this.add.image(167, 370, 'plant')
this.add.image(700, 350, 'plant2')
this.add.image(300, 440, 'rock')
const map = this.make.tilemap({ key: 'Ground' })
// Creating tilesets
const groundTileSet = map.addTilesetImage('Ground', 'ground')
const platformTileset = map.addTilesetImage('small-platform', 'small-platform')
const junglePlatformTileset = map.addTilesetImage('jungle-platform', 'jungle-platform')
const largePlatformTileset = map.addTilesetImage('large-platform', 'large-platform')
let groundLayer = map.createLayer('Ground', [groundTileSet, platformTileset, junglePlatformTileset, largePlatformTileset])
groundLayer.setCollisionByExclusion([-1]);

// Creating the Player
player = this.physics.add.sprite(0,0,'player');

player.setBounce(0.2);
player.setCollideWorldBounds(true);

//Physics
this.physics.add.collider(groundLayer, player )

}

和我的地图：

{ "compressionlevel":-1,
"height":8,
"infinite":false,
"layers":[
{
"compression":"",
"data":"AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAABAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAwAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAIAAAAAAAAAAAAAAAAAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAAEAAAABAAAAAQAAAA==",
"encoding":"base64",
"height":8,
"id":1,
"name":"Ground",
"opacity":1,
"type":"tilelayer",
"visible":true,
"width":14,
"x":0,
"y":0
}, 
{
"draworder":"topdown",
"id":6,
"name":"Tree2",
"objects":[
{
"class":"",
"gid":5,
"height":179,
"id":1,
"name":"",
"rotation":0,
"visible":true,
"width":86,
"x":9,
"y":452.666666666667
}],
"opacity":1,
"type":"objectgroup",
"visible":true,
"x":0,
"y":0
}],
"nextlayerid":15,
"nextobjectid":21,
"orientation":"orthogonal",
"renderorder":"right-down",
"tiledversion":"1.9.1",
"tileheight":64,
"tilesets":[
{
"columns":1,
"firstgid":1,
"image":"../../../Downloads/ground-transp.png",
"imageheight":64,
"imagewidth":58,
"margin":0,
"name":"Ground",
"spacing":0,
"tilecount":1,
"tileheight":64,
"tilewidth":58
}, 
{
"columns":1,
"firstgid":2,
"image":"../../../Downloads/small-platform-removebg-preview.png",
"imageheight":72,
"imagewidth":153,
"margin":0,
"name":"small-platform",
"spacing":0,
"tilecount":1,
"tileheight":72,
"tilewidth":153
}, 
{
"columns":1,
"firstgid":3,
"image":"../../../Downloads/large-platform-removebg-preview.png",
"imageheight":54,
"imagewidth":244,
"margin":0,
"name":"large-platform",
"spacing":0,
"tilecount":1,
"tileheight":54,
"tilewidth":244
}, 
{
"columns":1,
"firstgid":4,
"image":"../assets/tiles/jungle-platform.png",
"imageheight":66,
"imagewidth":129,
"margin":0,
"name":"jungle-platform",
"spacing":0,
"tilecount":1,
"tileheight":66,
"tilewidth":129
}, 
{
"columns":1,
"firstgid":5,
"image":"../assets/tiles/treetrunk.png",
"imageheight":179,
"imagewidth":86,
"margin":0,
"name":"tree2",
"spacing":0,
"tilecount":1,
"tileheight":179,
"tilewidth":86
}],
"tilewidth":58,
"type":"map",
"version":"1.9",
"width":14
}

Answer 1

问题似乎是，在地图的左上角，有一个ID值为4的瓦片，由于所有瓦片id都是为冲突而定义的，除了-1之外，由于这条线groundLayer.setCollisionByExclusion([-1]);，玩家是"卡住"；在上面，因为它正在碰撞。

将4添加到阵列应该可以解决(或移除瓦片(问题

例如： groundLayer.setCollisionByExclusion([-1, 4]);

提示：如果您想调试具有冲突的tilemap，您可以使用下面的函数/代码片段(指向文档的链接(。

let graphics = this.add.graphics()
groundLayer.renderDebug(graphics, {
tileColor: new Phaser.Display.Color(0, 0, 255, 50), // Non-colliding tiles
collidingTileColor: new Phaser.Display.Color(0, 255, 0, 100), // Colliding tiles
faceColor: new Phaser.Display.Color(255, 0, 0, 100) // Colliding face edges
});