Phaser.js Wind精灵表动画失效及显示异常问题求助

问题1：无法创建并循环播放精灵表动画 #

你的Wind精灵表为8列1行、单帧32x32像素，需严格按照帧配置创建并启动动画：

1. 在preload阶段正确加载精灵表：

this.load.spritesheet('wind', 'assets/wind.png', {
    frameWidth: 32,
    frameHeight: 32,
    endFrame: 7 // 8帧的索引范围是0-7
});

2. 在create阶段定义并触发循环动画：

// 创建精灵实例
const windSprite = this.add.sprite(x, y, 'wind');

// 注册动画配置
this.anims.create({
    key: 'windLoop',
    frames: this.anims.generateFrameNumbers('wind', { start: 0, end: 7 }),
    frameRate: 12, // 可根据需求调整动画速度
    repeat: -1 // -1代表无限循环
});

// 启动动画
windSprite.play('windLoop');

排查要点：

• 确认精灵表文件路径无误
• frameWidth/frameHeight必须与单帧实际像素一致
• 动画创建后必须调用play()方法触发播放

问题2：mapData放置时显示整张精灵表 #

这是因为Tilemap未正确解析精灵表的帧结构，需在关联tileset时明确帧尺寸：

1. 创建tileset时绑定精灵表并指定帧参数：

const windTileset = map.addTilesetImage('wind_tileset', 'wind', 32, 32);
// 第三、四个参数为瓦片宽高，必须与精灵表单帧尺寸匹配

2. 若需动态动画而非静态瓦片，需遍历图层替换为带动画的精灵：

const windLayer = map.createLayer('wind_layer', windTileset);

windLayer.forEachTile(tile => {
    if (tile.index !== -1) {
        // 按瓦片位置创建精灵
        const animatedWind = this.add.sprite(tile.getCenterX(), tile.getCenterY(), 'wind');
        // 绑定并播放动画
        animatedWind.play('windLoop');
        // 移除原静态瓦片
        tile.remove();
    }
});

额外注意：确保mapData中设置的瓦片尺寸与精灵表单帧尺寸完全一致，否则会出现渲染错位。

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