如何使 Kaboom.js Sprite 动画重复？

Question

我正在使用 Kaboom.js 制作一些游戏，虽然移动玩家很容易，但我在让 sprite sheet 动画正常工作方面遇到了一段时间。正如您在此处的代码中看到的那样，我已经对其进行了管理，使用 setInterval 并弄乱了值以制作我的特定 7 步动画（来自Open Game Art 的恐龙动画，我使用Codeshack image to sprite generator 但我不禁想到一定有更好的方法？

kaboom({
  global: true,
  width: 320,
  height: 240,
  scale: 2,
  debug: true,
  clearColor: [0, 0, 1, 1],
});

loadRoot("img/");
loadSprite("dino", "spritesheet.png", {
  sliceX: 8,
  sliceY: 1,
  anims: {
    idle: { from: 1, to: 1 },
    run: { from: 1, to: 7 },
  },
});

const player = add([
  sprite("dino", {
    animSpeed: 2,
    frame: 1,
  }),
  pos(width() * 0.5, height() * 0.5),
  origin("center"),
  scale(1),
]);


let myInterval;

function animateR() {
  myInterval = setInterval(() => {
    player.play("run");
    player.move(1000, 0);
  }, 100);
}
function animateL() {
  myInterval = setInterval(() => {
    player.play("run");
    player.move(-1000, 0);
  }, 100);
}

keyPress("right", () => {
  player.scale.x = 1;
  animateR();
});

keyPress("left", () => {
  player.scale.x = -1;
  animateL();
});

keyDown("x", () => {
  player.move(0, -10);
});

keyRelease("left", () => {
  clearInterval(myInterval);
});

keyRelease("right", () => {
  clearInterval(myInterval);
});

Answer 1

还有另一种方法可以集成 JSON 和 Aseprite 创建的文件格式。该方法在他们的 Mario 教程中的 Replit 文档中进行了概述。链接在这里： Build Mario with Kaboom

本教程包含图片，还包含其他与精灵相关的信息。 Aseprite 可以在 GitHub 上找到，如果你想为 sprite 表生成 JSON 文件。以下是它的工作原理：

1. 将您的精灵表导入 Aseprite。这在网格中具有相同大小元素的工作表上效果最佳。我使用 .png 格式。
2. 在文件信息中添加循环和标签。
3. 将精灵表导出为 JSON 文件。请务必在下拉列表中将类型从“Hash”更改为“Array”。否则 Kaboom.js 会抛出错误。
4. 将精灵表和 JSON 文件添加到项目中。如果循环和标签已正确添加到 Aseprite 项目，JSON 文件将包含您在 Kaboom.js 中使用动画所需的信息。

本教程中使用的马里奥角色数据提供了一个很好的例子来说明它的外观。当您打开包含在“Mario”的资产包中的 .ase 文件时，您可以在时间线中看到标签。 （您可能需要在设置中打开时间线。）

Answer 2

//License: MIT, free software, Mgr. Jan Hrubos, kaboom.js example
// Init with some options (check out #KaboomOpt for full options list)
kaboom({
    width: 800,
    height: 600,
    font: "sinko",
    global:true,
    background: [ 0, 0, 255, ],
    canvas: document.querySelector("#mycanvas"),
    debug:true
})


scene("begin",()=>{
    function addButton(txt, p, f) {

        const btn = add([
            text(txt,{size:48}),
            pos(p),
            area(),
            scale(1),
            origin("center"),
        ])
    
        btn.onClick(f)
    
        btn.onUpdate(() => {
            if (btn.isHovering()) {
                const t = time() * 10
                btn.color = rgb(
                    wave(0, 255, t),
                    wave(0, 255, t + 2),
                    wave(0, 255, t + 4),
                )
                btn.scale = vec2(1.2)
            } else {
                btn.scale = vec2(1)
                btn.color = rgb()
            }
        })
    
    }
    
    addButton("Start Pacman", vec2(width()/2, height()/2), () => go("level1"))
    onKeyPress("space", () => go("level1"))
})
go("begin")

loadSprite("bck", "./assets/images/bck.png")
loadSprite("wall", "./assets/images/wall.png")
loadSprite('pacman', './assets/images/pacmanMap.png', {
    sliceX: 8,
    sliceY: 1,
    anims: {
        runRight: { from: 0, to: 1 },
        runLeft: { from: 2, to: 3 },
        runDown: { from: 4, to: 5 },
        runUp: { from: 6, to: 7 }
    }
})

//loadSound("shoot", "./assets/sounds/shoot.mp3")


scene("level1",()=>{

    const SPEED=80

    const bck2 = add([
        sprite("bck"),
        origin("center"),
        pos(width()/2,height()/2),
        z(-100),       
    ])

    const map = [[
        // Design the level layout with symbols
        "====================",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "=                  =",
        "====================",
    ]]

    const levelCfg={
    // The size of each grid
    width: 40,
    height: 30,
    "=": () => [
        sprite("wall"),
        area(),     
        scale(0.5),
        solid(),
        "wall",
    ],
    }
    const level1 = addLevel(map[0],levelCfg)
    
    const player = add([
        sprite('pacman', {
            animSpeed: 1,
            frame: 0
        }),
        origin("center"),
        pos(100,100),
        z(-90),
        body(),
        gravity(0),
        area(),
        "player"       
    ])

    let myInterval;
    const intervalTime=300

    function animateR() {
        clearInterval(myInterval)
    myInterval = setInterval(() => {
        player.play("runRight");
    }, intervalTime);
    }

    function animateL() {
        clearInterval(myInterval)
        myInterval = setInterval(() => {
            player.play("runLeft");
        }, intervalTime);
        }

    function animateD() {
            clearInterval(myInterval)
            myInterval = setInterval(() => {
                player.play("runDown");
            }, intervalTime);
        }

    function animateU() {
            clearInterval(myInterval)
            myInterval = setInterval(() => {
            player.play("runUp");
            }, intervalTime);
        }

    onKeyPress("right", () => {
        animateR()
    })

    onKeyPress("left", () => {
        animateL()
    })

    onKeyPress("down", () => {
        animateD()
    })

    onKeyPress("up", () => {
        animateU()
    })

    onKeyDown("right",()=>{
        player.move(SPEED, 0)
    })

    onKeyDown("left", () => {
        player.move(-SPEED, 0)
    })

    onKeyDown("down", () => {
        player.move(0, SPEED)
    })

    onKeyDown("up", () => {
        player.move(0, -SPEED)
    })

    onKeyDown("space", () => {
        clearInterval(myInterval)
    })
    
    onKeyPress("f", (c) => {
        fullscreen(!isFullscreen())
    })

    
    
/*
    player.onCollide("enemies",()=>{
        shake(20)
    })
*/
    

    


})