2

私はスプライトに関するチュートリアルに従っていました: http://www.williammalone.com/articles/create-html5-canvas-javascript-sprite-animation/ スプライトが動作していますが、スプライトが複数のアニメーションを持つのが好きです. これらのアニメーションは、このスプライトが持つべき特定の状態に依存する必要があります。

私がやりたいことは、昔の Apple ゲーム airborne で空挺部隊を作成することです。例についてはhttp://www.youtube.com/watch?v=pYujWCNUuNwをご覧ください 。彼らが地面にいるとき、彼らはしばらく何もしないで立っていて、時々歩き始めます。

ここに私のスプライトメソッドがあります:

function sprite(options) {
var that = {},
frameIndex = 0,
tickCount = 0, ticksPerFrame = options.ticksPerFrame || 0, numberOfFrames = options.numberOfFrames || 1;
that.x = options.x, that.y = options.y,
that.context = options.context;
that.width = options.width;
that.height = options.height;
that.image = options.image;

that.update = function() {
    tickCount += 1;

    if (tickCount > ticksPerFrame) {

        tickCount = 0;

        // If the current frame index is in range
        if (frameIndex < numberOfFrames - 1) {
            // Go to the next frame
            frameIndex += 1;
        } else {
            frameIndex = 0;
        }
    }
};

that.render = function() {
    // Draw the animation
    that.context.drawImage(that.image,
        frameIndex * that.width / numberOfFrames,
        0,
        that.width / numberOfFrames,
        that.height, that.x,
        that.y,
        that.width / numberOfFrames,
        that.height);
};
return that;
}

このスプライトに追加のアニメーション オプションを持たせるにはどうすればよいですか?

ありがとう

4

1 に答える 1

1

各領域を指すオフセット値を使用できます。

var offsets = [0, animation2x, animation3x, ...];

次に、オフセット配列のインデックスを表す整数値を使用してアニメーションのタイプを変更すると、次のことができます。

var animation = 1;

hat.context.drawImage(that.image,
    offsets[animation] + frameIndex * that.width / numberOfFrames,
    ....

フレーム数、サイズなどを含むオブジェクトであるオフセットに他の情報を追加する必要があるか、追加したい場合があります。

疑似例は次のようになります。

var offsets = [{offset:0, frames:12, w:100, h:100},
               {offset:1200, frames:7, w: 90, h:100},
               ...];
...

var offset = offsets[animation];

hat.context.drawImage(that.image,
    offset.offset + frameIndex * offset.w / offset.frames,
    ....

if (frameIndex > offset.frames) ...

必要に応じて、アニメーションごとに異なる画像を使用し、同じアプローチを使用しますが、代わりに、使用する画像へのポインターを使用してオブジェクトを保存します。

于 2013-10-17T07:48:16.063 に答える