プログラミングガイド/グラフィック/2Dグラフィック/How to: スプライトのアニメーション - ニュース速報XNA360

スプライトのアニメーション

この文章では、スプライトをアニメーションさせるクラスを作る方法を示します。

この作例のソースコードにおいてロードされるテクスチャは、同じ大きさの画像がいくつか一続きに繋がった画像とします。この作例では、テクスチャのサイズは256x64で、４フレームからなります。

アニメーションするスプライトを表示する

1. How to: スプライトを描画する.のステップ１からステップ３までを行います。
2. ゲームのコンストラクタで、AnimatedTextureクラスのインスタンスを作成します。

private AnimatedTexture SpriteTexture;
public Game1()
{
    ...
    SpriteTexture = new AnimatedTexture();
}

3. アニメーションさせる画像が描かれたテクスチャを一枚もしくは複数毎読み込みます。この例ではAnimatedTextureは一枚のテクスチャを読み込み、それをアニメーションのフレーム（コマ）に分割します。一秒間に何フレーム表示させるかを、一番最後の引数で指定します。ここでは、4フレームを２fps(frames per second)で表示します。

private Viewport viewport;
private Vector2 shipPos;
private SpriteBatch ForegroundBatch;
protected override void LoadGraphicsContent( bool loadAllContent )
{
    if (loadAllContent)
    {
        // TODO: Load any ResourceManagementMode.Automatic content
        ForegroundBatch = new SpriteBatch( graphics.GraphicsDevice );

        // "ship" is the name of the sprite asset in the project
        SpriteTexture.Load( graphics.GraphicsDevice, content, "ship", 4, 2 );
        viewport = graphics.GraphicsDevice.Viewport;
        shipPos = new Vector2( viewport.Width / 2, viewport.Height / 2 );
    }

    // TODO: Load any ResourceManagementMode.Manual content
}

4. Update関数内でアニメーションのどのフレームを表示するかを指定します。

protected override void Update( GameTime gameTime )
{
    ...

    // TODO: Add your update logic here
    float elapsed = (float)gameTime.ElapsedGameTime.TotalSeconds;

    // TODO: Add your game logic here
    SpriteTexture.UpdateFrame( elapsed );
    base.Update( gameTime );
}

ここで、AnimatedTextureクラスのメンバ関数UpdateFrameに経過時間が渡されます。

// class AnimatedTexture
public void UpdateFrame( float elapsed )
{
    if (Paused)
        return;
    TotalElapsed += elapsed;
    if (TotalElapsed > TimePerFrame)
    {
        Frame++;
        // Keep the Frame between 0 and the total frames, minus one
        Frame = Frame % (framecount - 1);
        TotalElapsed -= TimePerFrame;
    }
}

5. Draw関数で、AnimatedTextureオブジェクトのDrawを呼びます。

protected override void Draw( GameTime gameTime )
{
    graphics.GraphicsDevice.Clear( Color.CornflowerBlue );

    // TODO: Add your drawing code here
    ForegroundBatch.Begin();
    SpriteTexture.DrawFrame( ForegroundBatch, shipPos );
    ForegroundBatch.End();

    base.Draw( gameTime );
}

AnimatedTextureは、アニメーションで表示したい部分を含むテクスチャの矩形の領域のスプライトを描画します。
AnimatedTexture will draw the sprite using the subrectangle of the texture that contains the desired animation.

// class AnimatedTexture
public void DrawFrame( SpriteBatch Batch, Vector2 screenpos )
{
    DrawFrame( Batch, Frame, screenpos );
}
public void DrawFrame( SpriteBatch Batch, int Frame, Vector2 screenpos )
{
    int FrameWidth = myTexture.Width / framecount;
    Rectangle sourcerect = new Rectangle( FrameWidth * Frame, 0,
        FrameWidth, myTexture.Height );
    Batch.Draw( myTexture, screenpos, sourcerect, Color.White );
}

public class AnimatedTexture
{
    private int framecount;
    private Texture2D myTexture;
    private float TimePerFrame;
    private int Frame;
    private float TotalElapsed;
    private bool Paused;

    public void Load( GraphicsDevice device, ContentManager content, string asset, int FrameCount, int FramesPerSec )
    {
        framecount = FrameCount;
        //myTexture = Texture2D.FromFile( device, filename );
        myTexture = content.Load<Texture2D>( asset );
        TimePerFrame = (float)1 / FramesPerSec;
        Frame = 0;
        TotalElapsed = 0;
        Paused = false;
    }

    // class AnimatedTexture
    public void UpdateFrame( float elapsed )
    {
        if (Paused)
            return;
        TotalElapsed += elapsed;
        if (TotalElapsed > TimePerFrame)
        {
            Frame++;
            // Keep the Frame between 0 and the total frames, minus one
            Frame = Frame % (framecount - 1);
            TotalElapsed -= TimePerFrame;
        }
    }

    // class AnimatedTexture
    public void DrawFrame( SpriteBatch Batch, Vector2 screenpos )
    {
        DrawFrame( Batch, Frame, screenpos );
    }
    public void DrawFrame( SpriteBatch Batch, int Frame, Vector2 screenpos )
    {
        int FrameWidth = myTexture.Width / framecount;
        Rectangle sourcerect = new Rectangle( FrameWidth * Frame, 0,
            FrameWidth, myTexture.Height );
        Batch.Draw( myTexture, screenpos, sourcerect, Color.White );
    }

    public bool IsPaused
    {
        get { return Paused; }
    }
    public void Reset()
    {
        Frame = 0;
        TotalElapsed = 0f;
    }
    public void Stop()
    {
        Pause();
        Reset();
    }
    public void Play()
    {
        Paused = false;
    }
    public void Pause()
    {
        Paused = true;
    }

} 

See Also

Tasks
How to: スプライトを描画する

Concepts
2Dグラフィック概要?

Reference
SpriteBatch
Draw
Texture2D