为什么 phaser.js 显示整个 sprite-sheet 而不是它的单个帧？

如何解决为什么 phaser.js 显示整个 sprite-sheet 而不是它的单个帧？

我目前在加载 Phaser.js 精灵表时遇到问题。主要问题是我通过“预加载”方法加载了一个精灵表，并在“创建”方法中初始化了精灵的动画，但是精灵表的多个帧显示在屏幕上而不是一个。 （请参阅 This Example)。精灵确实出现在屏幕上，并且其动画正常工作，但是其他帧的顶部和底部也显示在预期精灵的上方和下方。我最初的想法是问题可能是在预加载方法中，但我仔细检查了精灵动画的文档，但我没有看到可能导致此特定问题的原因。我的下一个怀疑可能是精灵表的帧高度/宽度参数，但我无法解决整个问题。我还发布了 this project here 的 Github 链接，以防万一您想查看完整代码。知道是什么导致精灵表以这种特殊方式加载和动画吗？请参阅下面的预加载方法：

    class StartScene extends Phaser.Scene{
    constructor(){
        super({ key: 'StartScene' })
    }
    
    preload(){
        // preloads the main menu sprite
        this.load.spritesheet('startSprite','./assets/sprites/AdmiralMainMenuSpriteSheetv2.png',{
            frameWidth: 512,frameHeight: 384
        });

        //preloads main menu battleship
        this.load.spritesheet('battleshipMenu','./assets/sprites/battleshipSprite-Sheet1.png',{
            frameWidth: 600,frameheight: 300
        });

见下同类StartScene的create方法：

    create(){
        //Sets the gamestate to active.
        gameStateMenu.active = true;

        //initiates the battleship sprite
        gameStateMenu.battleshipMenu = this.add.sprite(500,350,'battleshipMenu');

        //initiates the start sprite used for the Main Menu Screen. Syntax (X,Y,'spriteKey')
        gameStateMenu.startSprite = this.add.sprite(210,580,'startSprite');
  

        // create all animations below
        //These animations will be manipulated in the create() method. 
        this.anims.create({
            key: 'battleshipMenuIdle',frames: this.anims.generateFrameNumbers(
                'battleshipMenu',{
                    start: 0,end: 8
                }),frameRate: 2,repeat: -1
        });

        // this creates the idle animation
        this.anims.create({
            key: 'idle',frames: this.anims.generateFrameNumbers(
                'startSprite',end: 13
                }),frameRate: 5,repeat: -1
        });

    }