我如何使Kaboom.js雪碧动画重复？

Question

我正在使用Kaboom.js制作一些游戏，虽然移动玩家很容易，但我在让雪碧片动画工作上已经被困了一段时间了。我已经对它进行了某种管理，正如您在这里看到的，使用setInterval，并对值进行处理，使我的特定7步动画(从开放式游戏艺术生成的dino动画，我使用Codeshack 图像到精灵发生器制作成一个雪碧表，但我不禁认为肯定有更好的方法？)

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创建的文件格式。该方法在Replit文档中概述了他们的Mario教程。下面是链接：用卡布姆建造马里奥

本教程包含图片和其他与精灵相关的信息。如果您发现您希望为雪碧表生成JSON文件，则可以在GitHub上使用Aseprite。下面是它的工作原理：

1. 将您的雪碧表导入Aseprite。这在网格中具有相同大小的元素的工作表上效果最好。我使用.png格式。
2. 向文件信息中添加循环和标记。
3. 将sprite表导出为JSON文件。确保将下拉列表中的类型从"Hash“更改为"Array”。否则，Kaboom.js将引发错误。
4. 将雪碧表和JSON文件添加到项目中。如果循环和标记被正确地添加到Aseprite项目中，JSON文件将包含在Kaboom.js中使用动画所需的信息。

本教程中使用的Mario字符数据提供了一个很好的示例，说明了它的外观。当您打开"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 CD Man", vec2(width()/2, height()/2), () => go("level1"))
    onKeyPress("space", () => go("level1"))
})
go("begin")

loadSprite("bck", "./assets/images/bck.png")
loadSprite("ghost", "./assets/images/ghost.png")
loadSprite("diamond", "./assets/images/diamond.png")
loadSprite("star", "./assets/images/star.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")
loadSound("kling", "./assets/sounds/kling.mp3")


scene("level1",()=>{


    const score = add([
        text("Score: 0", {
            size: 28, // 48 pixels tall
            width: 320, // it'll wrap to next line when width exceeds this value
            font: "sink", // there're 4 built-in fonts: "apl386", "apl386o", "sink", and "sinko"
        },),
        pos(10, 5),
        { value: 0 },
    ])


    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(),
        z(-90),
        "wall",
    ],
    "*": () => [
        sprite("star"),
        area(),     
        scale(1),
        solid(),
        "star",
    ],
    }
    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"       
    ])

    const ghost1 = add([
        sprite('ghost'),
        origin("center"),
        pos(400,400),
        z(-90),
        body(),
        gravity(0),
        area(),
        "enemy"       
    ])
    
    dir=1
    loop(0.1,()=>{
        ghost1.move(0,dir*SPEED*10)
    })

    ghost1.onCollide("wall",()=>{
        dir=-dir
    })

    ghost1.onCollide("star",()=>{
        dir=-dir
    })

    player.onCollide("star", (star) => {
        destroy(star)
        score.value += 1
        score.text = "Score:" + score.value
        play("kling")
        if (score.value==54){
            go("begin")
        }
    })

    

    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()
    })

    let Risdown=false
    let Lisdown=false
    let Uisdown=false
    let Disdown=false

    onKeyDown("right",()=>{
        Risdown=true
        if (Lisdown==false && Uisdown==false && Disdown==false){
            player.move(SPEED, 0)
        }
            })

    onKeyDown("left", () => {
        Lisdown=true
        if (Risdown==false && Uisdown==false && Disdown==false){
          player.move(-SPEED, 0)  
        }
    })

    onKeyDown("down", () => {
        Disdown=true
        if (Lisdown==false && Risdown==false && Uisdown==false){
             player.move(0, SPEED)
        }
    })

    onKeyDown("up", () => {
        Uisdown=true
        if (Lisdown==false && Risdown==false && Disdown==false){
            player.move(0, -SPEED)
        } 
    })

    onKeyRelease("right",()=>{
        Risdown=false
    })

    onKeyRelease("left",()=>{
        Lisdown=false
    })

    onKeyRelease("up",()=>{
        Uisdown=false
    })

    onKeyRelease("down",()=>{
        Disdown=false
    })

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

    
    

    player.onCollide("enemy",(enemy)=>{
        destroy(enemy)
        shake(20)
        play("shoot")
    })

})