spBatch で画像を切り出す

spriteBatch で画像を切り出して描画します。
画像を拡大/縮小して描画することも出来ます。

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

プログラムの説明

  1. spriteBatch.Draw() には、幾つかのパラメータの設定方法があり、画像を切り出したり、拡大/縮小して描画することが出来ます。
    myTexture には、0〜9の数字を並べた画像(ページ先頭の画像を参考にして下さい)が設定されているものとします。
    数字1文字のサイズは「幅=60, 高さ=90」になっています。
        Texture2D   myTexture;     // 描画に使用するテクスチャ
        
  2. LoadContent() で画像をロードします。
    number.png が画像ファイルの名前です。
        // TODO: use this.Content to load your game content here
        myTexture = Texture2D.FromFile(graphics.GraphicsDevice, "c:\\data\\test\\number.png");
        
  3. 0〜9の数字の画像全体を、そのまま座標 50, 20 から描画するコードです。
    spriteBatch.Draw(myTexture, new Vector2(50, 20), Color.White);
  4. 数字の2の画像を切り出して、座標 50, 120 から描画するコードです。
    spriteBatch.Draw(myTexture, new Vector2(50,120), new Rectangle(120,0,60,90), Color.White);
    パラメータ 説明
    new Vector2(50,120) 画像を描画する座標です
    new Rectangle(120,0,60,90)数字が格納されている矩形領域です
    数字1文字の幅は 60 なので、X座標 120 は数字の2の座標です。
    60,90 は数字1文字の幅と高さです。
  5. 数字の3を幅を二倍に広げて描画してみましょう。
    spriteBatch.Draw(myTexture, new Rectangle(0,220,120,90), new Rectangle(180,0,60,90), Color.White);
    パラメータ 説明
    new Rectangle(0,220,120,90) 数字を描画する矩形領域です
    new Rectangle(180,0,60,90) 数字が格納されている矩形領域です
    数字が格納されている矩形領域の座標は 180,0 で、数字画像の幅が 60 なので、数字の3を示します。
    数字を描画する矩形領域は、幅=120,高さ=90 ですが、数字のサイズは、幅=60,高さ=90 なので幅が2倍になります。

【NOTE】

  1. Vector2 は二次元座標(XY座標)を設定するクラスで、X と Y の領域が定義されています。
        public float X;
        public float Y;
        
  2. Rectangle は矩形(くけい)領域を設定するクラスで、X と Y と Height(高さ) と Width(幅) の領域が定義されています。
        public int X;
        public int Y;
        public int Height;
        public int Width;
        
  3. 数字の画像を使ったスコアの表示は Score を表示 を参照して下さい。

超初心者の方のために全ソースコードを掲載します。 (^_^;)
全ソースコード

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

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