Question

你可以看到，当动画Hardpunch可以在播放特定帧时更改字符宽度时，当卷轴位于最后一帧时，精灵动画无法正确渲染？就像你看到我的spritesheet不包含静态宽度和高度所以它对我来说有点混乱

代码：

// initialize the sprite
Crafty.sprite("http://i.imgur.com/bkYVEe5.png", {
    Ryu: [0, 0, plrw, plrh]
});

// initialize the component
Crafty.c("RyuAnimation", {
    init: function () {
        this.requires("SpriteAnimation,Keyboard")
        .addComponent("Ryu")
        .reel('idle', 300, [
            [0, 0],
            [plrw * 1, 0],
            [plrw * 2, 0],
            [plrw * 3, 0]
        ])
        .reel('punch', 300, [
            [plrw + 12, plrh],
            [plrw * 2 + 15, plrh]
        ])
        .reel('Hardpunch', 300, [
            [plrw * 3 - 25, plrh],
            [plrw * 4 + 32, plrh],
            [(plrw + 19) * 5 - 38, plrh]
        ]); //
        this.animate("idle", -1);

    }

    // creating the player 
    plr1 = Crafty.e("2D,Canvas,RyuAnimation")
    .attr({
    x: 15,
    y: ch - 100
})
.start(3);
this.bind('KeyDown', function () {
    if (this.isDown('A')) {
        if (!this.isPlaying("Hardpunch")) {
            this.pauseAnimation().animate("Hardpunch", 1);
        }
    } else {
        this.stop();
    }

});

我读到了处理具有不同宽度和高度的复杂精灵表，所有答案都是关于为所有精灵创建大小均匀的框，如下例所示：https://gamedev.stackexchange.com/questions/48225/how-do-i-support-animation-with-frames-of-different-sizes但我实际上无法理解其中的含义通过那个，我怎么做，他们没有提供一个例子。什么是evenly sized boxes？

Answer 1

尺寸均匀的盒子意味着每个框架的尺寸必须均匀。在您的情况下，每个帧都有不同的宽度。手动指定每个帧的宽度很难，事实上我不知道如何在craftyjs中这样做。你最好的解决方案是切割所有框架，并将它们放在带有填充物的大小均匀的盒子中。查看此链接以进行相关讨论。 https://groups.google.com/forum/#!topic/craftyjs/eN9KTAxieSI

使用Crafty.js播放卷轴时更改精灵宽度

1 个答案: