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

カスタム クラスを使用してテクスチャーのスプライトをアニメーション表示する方法を説明します。

この例で読み込むテクスチャーは、サイズが 256×64 ピクセルのテクスチャー内に同じサイズの 4 つのフレームを含み、サンプルに含まれる AnimatedTexture という名前のクラスを使用することを前提としています。

完全なサンプル コード

このトピックのコードは、ここで説明するアニメーション手法を実際に示したものです。このトピックの完全なサンプル コードをダウンロードできます。ダウンロード内容には、完全なソース コードと、このサンプルに必要な追加のサポート ファイルが含まれます。

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

アニメーション スプライトを描画するには

  1. ゲームのコンストラクターで、AnimatedTexture クラスのインスタンスを作成します。

    この例では、(0,0) をテクスチャーの原点とし、さらに、回転なし、スケール 2、深度 0.5 を指定します。

            private AnimatedTexture SpriteTexture;
            private const float Rotation = 0;
            private const float Scale = 2.0f;
            private const float Depth = 0.5f;
            public Game1()
            {
                ...
                SpriteTexture = new AnimatedTexture(Vector2.Zero,
                    Rotation, Scale, Depth);
    #if ZUNE
                // Frame rate is 30 fps by default for Zune.
                TargetElapsedTime = TimeSpan.FromSeconds(1 / 30.0);
    #endif
            }
    
  2. アニメーション用の画像に提供する、1 つ以上のテクスチャーを読み込みます。

    この例で、AnimatedTexture クラスは単一のテクスチャーを読み込み、それをアニメーションのフレームに分割します。最後のパラメーターを使用して、毎秒のフレーム数を決定します。この例では、2 フレーム/秒 (fps) で 4 フレームを描画します。

    private Viewport viewport;
    private Vector2 shipPos;
    private const int Frames = 4;
    private const int FramesPerSec = 2;
    protected override void LoadContent()
    {
        // Create a new SpriteBatch, which can be used to draw textures.
        spriteBatch = new SpriteBatch(GraphicsDevice);
    
        // "shipanimated" is the name of the sprite asset in the project.
        SpriteTexture.Load(Content, "shipanimated", Frames, FramesPerSec);
        viewport = graphics.GraphicsDevice.Viewport;
        shipPos = new Vector2(viewport.Width / 2, viewport.Height / 2);
    }
    
  3. ゲームの Update メソッドで、表示するアニメーションのフレームを決定します。

    protected override void Update(GameTime gameTime)
    {
        ...
        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;
            TotalElapsed -= TimePerFrame;
        }
    }
    
  4. ゲームの Draw メソッドを使用して、AnimatedTexture オブジェクトで SpriteBatch.Draw を呼び出します。

    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);
    
        // TODO: Add your drawing code here
        spriteBatch.Begin();
        SpriteTexture.DrawFrame(spriteBatch, shipPos);
        spriteBatch.End();
    
        base.Draw(gameTime);
    }
    

    AnimatedTexture により、目的のアニメーション画像が含まれる矩形のテクスチャーを使用してスプライトが描画されます。

    // 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,
            Rotation, Origin, Scale, SpriteEffects.None, Depth);
    }
    

コミュニティの追加

追加
表示: