Question

我想要做的基本上是在我的box2d项目中制作这个动画http://jsfiddle.net/TLYZS/6/，但是我在每帧的绘图逻辑上遇到了一些麻烦这是迄今为止的结果：http://jsfiddle.net/H8e9m/6/ 如何修复身体绘制功能以使动画工作？你可以看到我只能绘制动画精灵的第一帧，我找不到一种方法来制作完全相同的动画显示在第一个jsfiddle，你可以看到角色处于他的空闲模式。任何帮助赞赏< / p>

这是绘图功能，可能问题就在这里

 if (this.details.frame != null) {
            console.log("NotNull");
            context.drawImage(this.details.image, this.details.frame.x, this.details.frame.y, this.details.frame.width, this.details.frame.height, 
                             -this.details.width / 2, -this.details.height / 2,
                              this.details.width, this.details.height);

这是动画变量和更新功能

        var KenIdle = new Animation(10, [
        { x: 50 * 0, y: 0 * 100, width: 50, height: 100 },
        { x: 50 * 1, y: 0 * 100, width: 50, height: 100 },
        { x: 50 * 2, y: 0 * 100, width: 50, height: 100 },
        { x: 50 * 3, y: 0 * 100, width: 50, height: 100 },
        ]);

        function update(dt) {
            KenBody.details.frame = KenIdle.draw(dt);
        }

请检查我的jsfiddle以查看到目前为止的进展并告诉我，我该如何解决这个问题

Answer 1

我终于找到了问题：

  var KenIdle = new Animation(10000, [
                    { x: 50 * 0, y: 0 * 100, width: 50, height: 100 },
                    { x: 50 * 1, y: 0 * 100, width: 50, height: 100 },
                    { x: 50 * 2, y: 0 * 100, width: 50, height: 100 },
                    { x: 50 * 3, y: 0 * 100, width: 50, height: 100 },
                    ]);

经过的时间或dt如此之小我无法看到动画移动，所以我做得很大并且现在正在工作http://jsfiddle.net/H8e9m/7/

使用box2dweb绘制精灵动画

1 个答案: