Phaser JS中如何正确设置spritesheet精灵表的角色帧

你的显示异常由3个核心配置错误导致，按以下步骤修改即可：

核心错误点 #

• 资源key不统一：加载精灵图时硬编码key为dude-1，但创建精灵、生成动画时使用的key是this.charSelect，二者不匹配时Phaser无法正确关联精灵图资源，直接导致帧切割错位。
• 重复绑定物理体：this.physics.add.sprite创建的对象本身已自带物理体，后续再调用this.physics.add.existing(this.player)会重复绑定物理体，引发渲染位置偏移、碰撞逻辑和渲染位置不同步。
• 锚点和碰撞盒偏移参数不合理：setOrigin(1,1)会将精灵锚点设置在右下角，配合你写的setOffset(20,0)，会让实际渲染的精灵位置和碰撞位置错位；如果frameWidth/frameHeight和实际精灵图单帧尺寸不匹配，会直接出现帧切割错乱、显示半幅角色的问题。

修正后代码 #

精灵图加载部分 #

// 保证加载时的key和后续使用的this.charSelect值完全一致
this.load.spritesheet(this.charSelect, `../src/assets/Character/ch-1.png`, {
    // 打开本地精灵图实测单帧尺寸：总宽度除以横向排列的总帧数（你的动画用到0-10共11帧）得到frameWidth，总高度就是frameHeight
    frameWidth: 72,
    frameHeight: 92,
    // 如果帧与帧之间有透明间距、整张图边缘有留白，补充spacing、margin参数，无留白可省略
});

核心逻辑部分 #

// 新手做平台跳跃优先用(0.5,1)锚点，即锚点在角色脚底中心，对齐地面更方便
this.player = this.physics.add.sprite(100, -500, this.charSelect).setOrigin(0.5, 1);
    
this.player.body.setGravityY(1700);
this.player.setBounce(0.1);

// 删除重复绑定物理体的代码，直接操作已有物理体设置碰撞尺寸
// offset参数根据实际渲染调整，保证碰撞盒和角色模型对齐
this.player.body.setSize(15, 90).setOffset(28, 2)

// 动画配置如果和精灵图帧排列对应可保留
this.anims.create({
    key: "left",
    frames: this.anims.generateFrameNumbers(this.charSelect, { start: 6, end: 10 }),
    frameRate: 10,
    repeat: -1,
});

this.anims.create({
    key: "turn",
    frames: [{ key: this.charSelect, frame: 5 }],
    frameRate: 10,
});

this.anims.create({
    key: "right",
    frames: this.anims.generateFrameNumbers(this.charSelect, { start: 0, end: 4 }),
    frameRate: 10,
    repeat: -1,
});
cursors = this.input.keyboard.createCursorKeys();

this.physics.add.collider(this.player, this.platformGroup);
this.player.body.setCollideWorldBounds(true);
this.physics.world.setBounds(0, 0, config.width - 10, config.height, true, true, false, true);

调试技巧 #

• 开启物理调试：在游戏初始化配置中给arcade物理层加debug: true参数，运行时会显示绿色碰撞盒，可直观看到碰撞盒和角色渲染的位置差，快速调整setSize和setOffset参数。
• 单独测试静态帧：先只播放turn对应的第5帧，如果这时候都无法显示完整的站立角色，直接回去重新测量精灵图的单帧宽高，不要硬填数值。

内容的提问来源于stack exchange，提问作者Arslan Arshad