3

私が基本的にやろうとしているのは、このアニメーションhttp://jsfiddle.net/TLYZS/6/を私のbox2dプロジェクトで作成することですが、各フレームの描画ロジックで問題が発生しています。これはこれまでの結果です: http:/ /jsfiddle.net/H8e9m/6/ ボディ描画機能を修正してアニメーションを機能させるにはどうすればよいですか? ご覧のとおり、アニメーション スプライトの最初のフレームしか描画できず、最初の jsfiddle で表示されるまったく同じアニメーションを作成する方法が見つかりません。ここでは、キャラクターがアイドル モードになっていることがわかります。

これは描画機能であり、おそらく問題はここにあります

 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をチェックしてこれまでの進行状況を確認し、この問題を解決するにはどうすればよいか教えてください

4

1 に答える 1

2

私は最終的に私の問題を見つけました:

  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/

于 2014-04-09T07:13:56.600 に答える