如何在Phaser中实现Tiled添加的树木碰撞与玩家的碰撞检测？

已设置的Tiled碰撞层 #

1. 预加载地图与资源 #

先在Phaser的preload阶段加载Tiled地图文件、对应图集和玩家精灵：

function preload() {
    // 加载Tiled导出的JSON地图
    this.load.tilemapTiledJSON('forestMap', 'assets/maps/forest.json');
    // 加载地图使用的瓦片图集
    this.load.spritesheet('tiles', 'assets/tiles/forest_tiles.png', { frameWidth: 32, frameHeight: 32 });
    // 加载玩家精灵图
    this.load.spritesheet('player', 'assets/sprites/player.png', { frameWidth: 32, frameHeight: 48 });
}

2. 初始化地图、碰撞层与玩家 #

在create阶段解析地图，启用碰撞层的碰撞属性，再建立玩家与碰撞层的交互：

function create() {
    // 创建地图实例
    const map = this.make.tilemap({ key: 'forestMap' });
    // 将图集关联到地图
    const tileset = map.addTilesetImage('forest_tiles', 'tiles');
    
    // 创建地面层（如果有）
    map.createLayer('ground', tileset, 0, 0);
    // 获取Tiled中设置的碰撞层（替换为你实际的图层名称）
    const collisionLayer = map.createLayer('collision', tileset, 0, 0);

    // 启用碰撞：根据Tiled中设置的属性标记可碰撞瓦片
    // 如果你是给瓦片勾选了"碰撞"选项，用setCollisionBetween指定瓦片ID范围
    // 如果你是用自定义属性（比如collides: true），用下面的方法
    collisionLayer.setCollisionByProperty({ collides: true });

    // 创建玩家并启用物理体
    this.player = this.physics.add.sprite(100, 100, 'player');
    this.player.setCollideWorldBounds(true); // 限制玩家不超出地图边界

    // 建立玩家与碰撞层的碰撞交互
    this.physics.add.collider(this.player, collisionLayer);
}

3. 添加玩家移动控制（可选） #

如果需要玩家可移动，在update阶段添加输入逻辑，碰撞会自动生效：

function update() {
    const cursors = this.input.keyboard.createCursorKeys();
    const moveSpeed = 160;

    this.player.setVelocity(0);

    if (cursors.left.isDown) {
        this.player.setVelocityX(-moveSpeed);
    } else if (cursors.right.isDown) {
        this.player.setVelocityX(moveSpeed);
    }

    if (cursors.up.isDown) {
        this.player.setVelocityY(-moveSpeed);
    } else if (cursors.down.isDown) {
        this.player.setVelocityY(moveSpeed);
    }
}

关键注意事项 #

• 确保Tiled中碰撞层的瓦片正确设置碰撞属性：要么直接勾选瓦片的“碰撞”选项，要么添加collides: true的自定义属性。
• 代码中的图层名称必须和Tiled中的图层名完全一致，否则无法找到碰撞层。
• 确保项目启用了Phaser的Arcade物理系统（默认启用），其他物理系统的碰撞逻辑会有差异。

内容的提问来源于stack exchange，提问作者Mohsin Uddin Abir