Sprite を切り出す

大きな画像から Sprite を切り出して描画します。
今回使った画像は「幅=128,高さ=216」の Sprite が横に7枚並んだ透過 GIF の画像です。

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

プロジェクトの設定

  1. 次のファイルを格納して下さい。
    /**********************************************/
    /*★ Sprite を切り出して描画する    前田 稔 ★*/
    /**********************************************/
    using System;
    using System.Drawing;
    using System.Windows.Forms;
    
    public class MyForm : Form
    {
        public MyForm()
        {   Text = "Sprite を表示する";
            BackColor = SystemColors.AppWorkspace;
            Width  = 960;
            Height = 400;
            Paint += new PaintEventHandler(MyHandler);
        }
    
        private void MyHandler(object sender, PaintEventArgs e)
        {
            Graphics g = e.Graphics;
            try
            {    //g.DrawImage(new Bitmap("c:\\data\\test\\girl.gif"), new PointF(10F,50F));
                 //g.DrawImage(new Bitmap("c:\\data\\test\\girl.gif"),0,100);
                 //g.DrawImage(new Bitmap("c:\\data\\test\\girl.gif"),new Point(20,150));
                 //g.DrawImage(new Bitmap("c:\\data\\test\\girl.gif"),new Rectangle(100,50,600,80));
                 //g.DrawImage(new Bitmap("c:\\data\\test\\girl.gif"),new Rectangle(20,50,128,216),new Rectangle(0,0,128,216),GraphicsUnit.Pixel);
                 g.DrawImage(new Bitmap("c:\\data\\test\\girl.gif"),new Rectangle(200,50,128,216),new Rectangle(512,0,128,216),GraphicsUnit.Pixel);
            }
            catch
            {   MessageBox.Show("イメージが取得できません","Error");
                Application.Exit();
                return;
            }
        }
    }
    
    class image01
    {
        public static void Main()
        {   MyForm mf = new MyForm();
            Application.Run(mf);
        }
    }
    
  2. 画像全体が描画出来るようにウインドウサイズを広げています。
    MyHandler() で From にイメージを表示します。
    DrawImage() でファイルから画像を入力して描画します。
  3. 画像ファイルの取得に失敗したときは、直ちにプログラムを終了します。
    プログラムの終了は マウスのクリックで終了確認 を参照して下さい。
  4. 五枚目の Sprite を描画してみました。
    g.DrawImage(new Bitmap("c:\\data\\girl.gif"),new Rectangle(200,50,128,216),new Rectangle(512,0,128,216),GraphicsUnit.Pixel);
  5. DrawImage のパラメータの説明です。
    パラメータ 説明
    new Bitmap("c:\\data\\girl.gif") 描画する画像ファイル名
    new Rectangle(200,50,128,216) 受取側(Form)の左上座標と幅と高さ
    new Rectangle(512,0,128,216) 送り側(Image)の左上座標と幅と高さ
    GraphicsUnit.Pixel パラメータの数値はピクセル単位で指定
  6. 画像ファイルは .EXE と同じフォルダーに格納するか、フルパスで指定して下さい。
    画像ファイルは BMP に限らず、GIF, JPG, TIF, PNG なども使えます。

【演習】

DrawImage() で画像を切り出す方法を学んで下さい。
  1. まずページ先頭のように画像全体を描画してみます。
    g.DrawImage(new Bitmap("c:\\data\\girl.gif"), new PointF(10F,50F));
    PointF は float 型ですが、int 型を使うことも出来ます。
    g.DrawImage(new Bitmap("c:\\data\\girl.gif"),new Point(20,150));
    Object(new) を使わないで、直接座標を指定することも出来ます。
    g.DrawImage(new Bitmap("c:\\data\\girl.gif"),0,100);
    受取側(描画されるウインドウ領域)を矩形で設定してみました。
    元の画像とサイズが合いませんが、受取側に合わせて画像が伸縮されます。
    g.DrawImage(new Bitmap("c:\\data\\girl.gif"),new Rectangle(100,50,600,80));
  2. 一枚目の Sprite を切り出して描画します。
    g.DrawImage(new Bitmap("c:\\data\\girl.gif"),new Rectangle(20,50,128,216),new Rectangle(0,0,128,216),GraphicsUnit.Pixel);
    五枚目の Sprite を切り出して描画します。
    g.DrawImage(new Bitmap("c:\\data\\girl.gif"),new Rectangle(200,50,128,216),new Rectangle(512,0,128,216),GraphicsUnit.Pixel);
  3. ここで説明した以外にも、様々なパラメータの指定方法があります。
    DrawImage() を右クリックして、メソッドの形式定義を調べて下さい。
  4. 画像を切り分けてアニメーションするプログラムは 美人のアニメーション を参照して下さい。

超初心者のプログラム入門(C# Frame Work)