アニメーション その3

アニメーション　その2で画像の切り替えを時間を基に行うように作成しました。
時間を基にっていうのは、Paintメソッドを何回実行しても1秒なら1秒にっていう意味です。

実際のRPGゲームなどではキャラクターのアニメーションは上下左右の4パターンそれぞれに4種類のアニメーションを用意しています。
つまり、画像ファイルは16必要になるわけです。
これらをバラバラに管理していくのは非効率です。
実際のC++などで作られているゲームのサンプルをみても16も画像を用意したりしていません。
では、どうやって管理するのか。
それは全画像を1枚にまとめて管理するわけです。

4つの画像を1枚にまとめてしまえば、1枚の画像だけを読み込めばいいことになります。
32×32の画像４つを１つにまとめると128×32の画像1枚ができあがります。
これを表示するときに一部分だけを取り出せばいいわけです。

問題はどうやって、1枚の画像から一部分を切り出すかです。
答えは簡単。
DrawImageメソッドのパラメータに描画したい座標情報を指定するだけでいいんです。
とういことで、コードいってみましょう。

Public Class Form1
　　Dim img As Bitmap = New Bitmap("c:\anime5.bmp") 'スプライト画像
　　Dim imgRect( ) As Rectangle '画像矩形配列
　　Dim iNo As Integer '表示画像インデックス
　　Dim swatch As Stopwatch = New Stopwatch( ) 'ストップウォッチ

　　Public Sub New( )
　　　　（省略）
　　End Sub

　　Sub Init( )
　　　　imgRect = New Rectangle(3) { }
　　　　For i As Integer = 0 To imgRect.GetUpperBound(0)
　　　　　　imgRect(i) = New Rectangle(i * 32, 0, 32, 32)
　　　　Next
　　　　iNo = 0
　　　　swatch.Reset( )
　　　　swatch.Start( )
　　End Sub

　　Private Sub Form1_Paint(ByVal sender As Object, ByVal e As System.Windows.Forms.PaintEventArgs) Handles Me.Paint
　　　　Dim g As Graphics = e.Graphics
　　　　Dim nowTime As Double = swatch.ElapsedMilliseconds / 1000.0 'Paintメソッドを実行した瞬間の時間

　　　　'画像切り替え処理
　　　　iNo = CInt(Fix((nowTime * 2) Mod 4.0F))

　　　　'画像描画処理
　　　　g.DrawImage(img, 0, 0, imgRect(iNo), GraphicsUnit.Pixel)

　　　　Me.Invalidate( ) '強制再描画
　　End Sub
End Class

Rectangle構造体は矩形の開始座標X、開始座標Y、幅、高さを指定します。
今回の画像は128×32で4種類ありますから、(0,0,32,32)、(32,0,32,32)、(64,0,32,32)、(96,0,32,32)という4つの矩形を作ればよいということになります。
その矩形を作っているのがInit独自メソッドです。
今までは4つの画像を配列に保存していましたが、配列に保存するのは画像ではなく矩形になるところがポイントです。
画像を切り取って配列に保存するわけではないってことですね。

で、画像を描画するときはDrawImageメソッドの引数に矩形を指定するわけです。
DrawImageメソッドは色々な引数の指定パターンを持つメソッドです。
そのパターンのひとつに今回使用したパターンがあります。
それが、DrawImage（画像ファイル,表示座標X,表示座標Y,矩形,単位）になります。
表示座標X、Yはフォームに表示する位置座標を指します。画像ファイルのX、Y座標ではありません。
矩形は画像ファイルのどの部分を表すかを指定するものになります。
単位は画像ファイルですからPixelを指定します。

これでスプライト画像の切り抜きはできあがりです。
今回は1行4列の画像ファイルで説明をしましたが、4行4列になっても同じようにできます。