SpriteBatch でアニメーション

XNA の SpriteBatch を使ってアニメーションを行います。
Image Class を使ったアニメーションは Image Class でアニメーション を参照して下さい。

前田稔(Maeda Minoru)の超初心者のプログラム入門

プロジェクトの設定

  1. メニューから [ファイル][新規作成][プロジェクト] で新しいプロジェクト GirlAnime を作成して下さい。
    Game1.cs を編集して、Sprite を切り替えてアニメーションするプログラムを作成します。
    class Game1 の最初の方で、次の領域を宣言して下さい。
        public class Game1 : Microsoft.Xna.Framework.Game
        {
            GraphicsDeviceManager graphics;
            SpriteBatch spriteBatch;
    
            Texture2D   texture;     // 描画に使用するテクスチャ
            TextureCreationParameters txtpara;  //テクスチャのパラメータ
        
  2. LoadContent() メソッドに texture を生成するコードを追加します。
    txtpara に黒を透明色にするパラメータを設定します。
    896 は画像の幅(128*7)で、216 は画像の高さです。
            protected override void LoadContent()
            {
                // Create a new SpriteBatch, which can be used to draw textures.
                spriteBatch = new SpriteBatch(GraphicsDevice);
    
                // TODO: use this.Content to load your game content here
                txtpara = new TextureCreationParameters(896, 216, 0, 0, SurfaceFormat.Unknown, 
                              TextureUsage.None, new Color(0, 0, 0), FilterOptions.None, FilterOptions.None);
                texture = Texture2D.FromFile(graphics.GraphicsDevice, "c:\\data\\test\\girl.bmp", txtpara);
            }
        
  3. Draw() メソッドに画像を描画するコードを追加します。
    XNA ではコンシューマゲームと同様に例え同じ画面でも毎回画面をクリアして再描画しなければなりません。
    TotalGameTime.Milliseconds で現在時刻(ミリ秒)を所得して、描画する Sprite の番号を決めています。
            protected override void Draw(GameTime gameTime)
            {
                graphics.GraphicsDevice.Clear(Color.CornflowerBlue);
    
                // TODO: Add your drawing code here
                spriteBatch.Begin(SpriteBlendMode.AlphaBlend);
                int sp_no = (int)((gameTime.TotalGameTime.Milliseconds / 200) % 7);
                spriteBatch.Draw(texture, new Vector2(0, 0), new Rectangle(sp_no * 128, 0, 128, 216), Color.White);
                spriteBatch.End();
    
                base.Draw(gameTime);
            }
        
  4. メニューの [デバッグ] から [デバッグ開始] または [デバッグなしで開始] を選択すればコンパイルされ、エラーが無ければ実行されます。

【演習】

  1. このプログラムは girl.bmp の画像(128*216*7枚) を使うことを前提にしています。
    他の画像でもアニメーションできるようにプログラムして下さい。
    そのためには画像ファイル名と横方向と縦方向の Sprite の枚数が必要になります。
    下記の領域を修正すれば、他の画像でもアニメーション出来るようにプログラムを修正して下さい。
        const string  ImgFile = "c:\\data\\test\\girl.bmp";
        const int   WNum = 7;           //横方向の Sprite 枚数
        const int   HNum = 1;           //縦方向の Sprite 枚数
        

【NOTE】

透明色の設定は C# DirectX と XNA とでは異なるようです。
  1. C# DirectX の時には、次のようにコーディングしていました。
  2. XNA では、次のようにコーディングしています。
  3. 透明色を設定した PNG 画像を使えば TextureCreationParameters を設定しなくても透明になるので試して下さい。
    PNG 画像はサイズも小さく、こちらの方が実用的かも知れません。
        protected override void LoadContent()
        {
            // Create a new SpriteBatch, which can be used to draw textures.
            spriteBatch = new SpriteBatch(GraphicsDevice);
    
            // TODO: use this.Content to load your game content here
            //※追加するコード
            texture = Texture2D.FromFile(graphics.GraphicsDevice, "c:\\data\\test\\girl.png");
    

前田稔(Maeda Minoru)の超初心者のプログラム入門

超初心者のプログラム入門(XNA(C#) game program)