1

Github Game Off にhttp://craftyjs.com/を使用していますが、アニメーションに問題があります。アニメーションを初めて開始するとき (メイン シーンでプレーヤー エンティティを初期化するとき) に動作します。しかし、CustomControls コンポーネントを介してアニメーションを設定すると、アニメーションの最初のフレームしか再生されません。

問題は CustomControls コンポーネントにあると思われるので、そのコードは次のとおりです: https://gist.github.com/3992392

クローンしてテストする場合のすべてのコードは次のとおりです: https://github.com/RylandAlmanza/dragons-suck

何が問題なのか知っている人がいたら教えてください。ありがとう！

編集:これは、動きとアニメーションであるべきものを除いてすべてが取り除かれた最小限のjsfiddleの例です: http://jsfiddle.net/x7FDF/

var SPRITE_SIZE = 32;
Crafty.init();
Crafty.canvas.init();
Crafty.sprite(SPRITE_SIZE, "http://i.imgur.com/9sN9V.png", {
    player_east_1: [0, 0],
    player_east_2: [1, 0],
    player_east_3: [2, 0],
    player_west_1: [0, 1],
    player_west_2: [1, 1],
    player_west_3: [2, 1],
    player_south_1: [0, 2],
    player_south_2: [1, 2],
    player_south_3: [2, 2],
    player_north_1: [0, 3],
    player_north_2: [1, 3],
    player_north_3: [2, 3]
});

Crafty.scene("loading", function() {
    Crafty.background("#000");
    Crafty.e("2D, DOM, Text")
    .attr({
        w: 100,
        h: 20,
        x: 150,
        y: 120
    })
    .text("Loading")
    .css({"text-align": "center"});
    Crafty.load(["http://i.imgur.com/9sN9V.png"], function() {
        Crafty.scene("main");
    });
});

Crafty.scene("main", function() {
    Crafty.background("#000");

    var player = Crafty.e("2D, DOM, SpriteAnimation, player_east_1, Collision, TileCollision, CustomControls")
    .attr({
        x: 0,
        y: 0,
        x_velocity: 0,
        y_velocity: 0,
        w: SPRITE_SIZE,
        h: SPRITE_SIZE
    })
    .animate("stand_east", 0, 0, 0)
    .animate("stand_west", 0, 1, 0)
    .animate("stand_south", 0, 2, 0)
    .animate("stand_north", 0, 3, 0)
    .animate("walk_east", [[0, 0], [1, 0], [0, 0], [2, 0]])
    .animate("walk_west", [[0, 1], [1, 1], [0, 1], [2, 1]])
    .animate("walk_south", [[0, 2], [1, 2], [0, 2], [2, 2]])
    .animate("walk_north", [[0, 3], [1, 3], [0, 3], [2, 3]])
    .animate("stand_east", 45, -1)
    .CustomControls();
});


Crafty.c("CustomControls", {
    CustomControls: function() {
        this.bind("EnterFrame", function() {
            var up = Crafty.keydown[Crafty.keys.UP_ARROW];
            var down = Crafty.keydown[Crafty.keys.DOWN_ARROW];
            var left = Crafty.keydown[Crafty.keys.LEFT_ARROW];
            var right = Crafty.keydown[Crafty.keys.RIGHT_ARROW];
            if (up) {
                this.y_velocity = -2;
                if (!this.isPlaying("walk_north")) {
                    this.stop().animate("walk_north", 45, -1);
                }
            }
            if (down) {
                this.y_velocity = 2;
                if (!this.isPlaying("walk_south")) {
                    this.stop().animate("walk_south", 45, -1);
                }
            }
            if (left) {
                this.x_velocity = -2;
                if (!this.isPlaying("walk_west")) {
                    this.stop().animate("walk_west", 45, -1);
                }
            }
            if (right) {
                this.x_velocity = 2;
                if (!this.isPlaying("walk_east")) {
                    this.stop().animate("walk_east", 45, -1);
                }
            }
            if (!left && !right) {
                this.x_velocity = 0;
                this.stop();
            }
            if (!up && !down) {
                this.y_velocity = 0;
                this.stop();
            }
            this.x += this.x_velocity;
            this.y += this.y_velocity;
        });
    }
});

Crafty.scene("loading");​
4

1 に答える 1

2

最後に、次のものがあり"enterFrame"ます。

if (!left && !right) {
    this.x_velocity = 0;
    this.stop();
}
if (!up && !down) {
    this.y_velocity = 0;
    this.stop();
}

したがって、アニメーションは常に停止し、次のフレームで最初から再開されます。たとえば、プレーヤーが下に移動している場合、(!left && !right)true と評価され、アニメーションが停止します。

1 つの解決策は、 4 つの方向がすべて false の場合にのみアニメーションを停止することです。

if (!left && !right) {
    this.x_velocity = 0;
}
if (!up && !down) {
    this.y_velocity = 0;
}
if (!(up | down | left | right)) {
    this.stop();
}
于 2012-11-02T14:08:06.650 に答える