P5.JS 动画 GIF 在渲染时显示所有帧

Question

这是我提交的第一个问题。所以请放轻松！

我使用 p5.js 制作了一个非常简单的跑步/跳跃游戏。

游戏：https://simongowing1.github.io/the-art-collector-game/
代码：https://github.com/simongowing1/the-art-collector-game

最初“播放器”是静态的，但我只是添加了一个动画 gif（由两个图像组成），使其看起来像是在行走。

当我在浏览器中检查时，gif 的两层同时显示，所以效果不起作用。

我认为这与图像的渲染有关。在检查了堆栈上的其他一些解决方案后，我尝试了“createImage()”和“createImg()”而不是简单的“loadimage()”，但这两种方法都导致站点中的其他元素消失。

谁有想法？提前致谢。

我从下面的“game.js”文件中粘贴了我的代码以供参考

class Game {
constructor() {
    this.backgroundImage;
    this.tokenImage;
    

}
setup() {
    this.background = new Background();
    this.player = new Player();
    this.tokens = [];
    this.obstacles = [];
}

preload() {
    this.backgroundImage = [
        { src:loadImage('assets/empty_gallery_long.jpg'), x: 0, speed: 1.5}
    ]
    this.playerImage = loadImage('assets/Player1-walking-front.gif');
    this.playerImageBk = loadImage('assets/Player1-walking-back.gif');
    this.tokenImage1 = loadImage('assets/token1.png');
    this.tokenImage2 = loadImage('assets/token2.png');
    this.tokenImage3 = loadImage('assets/token3.png');
    this.obstacleImage = loadImage('assets/Obstacle1.png');
    this.backgroundMusic = createAudio('assets/01 Windowlicker.mp3');
    this.jumpSound = createAudio('assets/jump.mp3');
    this.saleSound = createAudio('assets/Sale.m4a');
    this.breakingSound = createAudio('assets/breaking.m4a')
}

gamelogic() {
    if (counter === remainingTime) {}
}

draw() {
    clear(); 
    this.background.draw();
    //console.log('hello')
    if (frameCount === 10 || frameCount % 500 === 0) {
        this.tokens.push(new Token(this.tokenImage1))
        //console.log('now');
    }

    this.tokens.forEach(function (token) {
        token.draw();
    })

    this.tokens = this.tokens.filter(
        (token) => {
            if (token.collision(this.player))
            {
                console.log('got it!');
                return false
            } else if (token.x < 0 - token.width) {
                return false
            } else {
                return true
            }
        })

        this.player.draw();

        if (frameCount === 300 || frameCount % 1200 === 0) {
            this.obstacles.push(new Obstacle(this.obstacleImage))
            //console.log('now');
        }

        this.obstacles.forEach(function (obstacle) {
            obstacle.draw();
        })

        
        this.obstacles = this.obstacles.filter(
            (obstacle) => {
                if (obstacle.collision(this.player))
                {
                   // console.log('CRASH');
                    return false

                } else {
                    return true
                }
            })

Answer 1

使用 ezgif 等免费在线编辑器将该 gif 拆分为帧 然后按 player1、player2 等顺序命名所有帧 并编写这样的代码：-

this.playerImage = loadAnimation('player1', 'player2', 'player3');