2

このJSFiddleでわかるように：http：//jsfiddle.net/EychPixels/pABPv/1/ 、表示領域が一緒に移動するまで矢印キーを使用して文字を移動すると、文字は1タイル前後に移動するように見えます。 1タイル。キャラクターでビューエリアをアニメートするようにこれを修正する方法はありますか？jQueryで使用した文字をアニメーション化するため.animateに、ビュー領域で同じことを行うことは可能ですか？もしそうなら、私のコードを使用してこの例を見ることができますか？

質問に答えるためにさらに詳細が必要な場合は、質問してください。

4

1 に答える 1

1

now現在のコードの場合、ビューポートもアニメーション化する必要がある場合、抵抗が最も少ないパス（つまり、変更する必要のあるコードを少なくする方法）は、アニメーション中に描画関数に渡すことです。次に、@ jimjimmy1995の提案に従うことができます（変更を元に戻し、player.x反対のworld.x変更を行います）。

このフィドルは大まかな例を示しています（「下」キーの場合のみ）。詳細：

  1. アニメーション中にビューポートが移動するかどうかを決定します。

       var move = Math.round(playerY+1) - Math.floor(0.5 * vHeight) > vY;

  2. now関数をに渡しますdraw（ビューポートが移動する場合のみ）：

            step: function(now) {
           playerY = now;
            draw(move ? now-start : 0);
        }

  3. ビューポートとプレーヤーのdraw位置を調整します。

    function draw(now) {
    if ( !now )
        now = 0;
    ...
            theY = (y-now) * 32;
    ...
    context.fillRect((playerX-vX)*32, (playerY-vY-now)*32, 32, 32);

  4. 空白スペースを補うために、「余分な」タイルを描画します（例では実装されていません）。

  5. アニメーションが終了したら、now == 0（例では実装されていません）を使用して再度描画します。

まだいくつかの不具合がありますが、将来の改善のベースとして役立つはずです。

于 2013-03-03T02:02:46.947 に答える