アニメーション その4

アニメーション　その3で1枚の画像から一部分だけを表示する方法を紹介しました。

今回は、キャラクターのスプライトを前後左右で表示させることをやっていきます。
まず、今回使用する画像は以下のようなやつです。

ドット絵でも書けるならそれを使いたいんですが、ドット絵は描いたことがないので文字だけ。

今回の画像1枚には向きとアニメーションパターンが含まれています。
これを分割して2次元配列に保存しておきます。

最初は前を向いているところからスタートし、方向キーが入力されたらその方向の画像を表示するようにしていきます。
ということは、現在どの方向を向いているのかを記録しておく変数が必要になります。
また、前後左右の情報は列挙型として管理した方がすっきりとしますので列挙型を用意しておきます。
その列挙型の値は2次元配列のインデックスとして利用していきますから、0から3までの値を割り当てておきます。

ということで、コードにいってみましょう。

Public Class Form1
　　Enum Direction
　　　　down = 0 '前向き
　　　　up = 1 '後ろ向き
　　　　left = 2 '左向き
　　　　right = 3 '右向き
　　End Enum

　　Dim img As Bitmap = New Bitmap("c:\anime6.bmp") 'スプライト画像
　　Dim imgRect( , ) As Rectangle '画像矩形配列
　　Dim iNo As Integer '表示画像インデックス
　　Dim swatch As Stopwatch = New Stopwatch( ) 'ストップウォッチ
　　Dim direct As Direction 'キャラクターの向いている方向

　　Public Sub New( )
　　　　（省略）
　　End Sub

　　Sub Init( )
　　　　imgRect = New Rectangle(3, 3) { }
　　　　For y As Integer = 0 To imgRect.GetUpperBound(0) '行･･･前、後、左、右
　　　　　　For x As Integer = 0 To imgRect.GetUpperBound(1) '列･･･１，２，３，４
　　　　　　　　imgRect(y, x) = New Rectangle(x * 32, y * 32, 32, 32)
　　　　　　Next
　　　　Next
　　　　iNo = 0
　　　　direct = Direction.down '前向き
　　　　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(direct, iNo), GraphicsUnit.Pixel)

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

　　Private Sub Form1_KeyDown(ByVal sender As Object, ByVal e As System.Windows.Forms.KeyEventArgs) Handles Me.KeyDown
　　　　Select Case e.KeyCode
　　　　　　Case Keys.Up
　　　　　　　　direct = Direction.up
　　　　　　Case Keys.Down
　　　　　　　　direct = Direction.down
　　　　　　Case Keys.Left
　　　　　　　　direct = Direction.left
　　　　　　Case Keys.Right
　　　　　　　　direct = Direction.right
　　　　End Select
　　End Sub
End Class

今回の画像は32×32のスプライトが16個集まったものになっています。
行方向がキャラクターの向いている方向、列方向がアニメーションパターンをあらわしています。
これをRectangle構造体に保存していく繰り返しが今回のポイントでしょうか。
行と列の順番を間違えてしまうと、アニメーションのパターンがおかしくなります。

現在向いている方向と現在のアニメーションパターン番号を
g.DrawImage(img, 0, 0, imgRect(direct, iNo), GraphicsUnit.Pixel)
のように組み合わせればキャラクターアニメーションはできあがりです。
このときも配列のインデックス番号を間違わないようにしておきましょう。

以上でその場での方向変更＆足踏みアニメーションはできあがりです。
あとは、移動アニメーションですかね。