アニメーション その5

アニメーション　その4で方向キーによるアニメーションパターンの変更ができるようになりました。

今度は同じ位置に表示するのではなく画像を移動させるプログラムを作成していきます。
画像を移動させるために必要となるデータには、画像を表示させている場所情報となる座標があります。
今まではDrawImage(img,0,0,…）というように（0,0）座標を画像表示位置としていました。
これをプログラムにより変化させれば移動アニメーションができるわけです。

今回利用している画像の大きさは32×32ですから、（0,0）だった座標を（32,0）とすれば右に1コマ移動できます。
しかし、この考えを利用してプログラムを作成すると、一瞬で隣のコマに移動してしまいます。
そこで、スムーズに移動するためのプログラムを考えていくわけです。
ここでも参考となるのが簡単レシピのインベーダーゲーム。
エイリアンが一定速度で移動するプログラムを参考にしていくと隣のコマへスムーズに移動するアニメーションを作成することができます。
一定速度で移動させるための考え方はシンプルです。
画像を表示している座標に移動速度と経過時間を掛けた値を加えるだけです。
つまり、X座標を1秒間に32ピクセル移動させていくのであれば、X座標=32ピクセル*経過時間とすればいいわけです。
経過時間はPaintメソッドが実行されて、Invalidateメソッドにより再描画されたときの時間を利用します。
これでコンピュータの性能によるPaintメソッドの実行回数のズレも調整できます。
コンピュータの性能によっては1回のPaintメソッドで1ピクセルずつ移動するかもしれませんし、2ピクセルずつ移動するかもしれません。
ですが、どちらも1秒間で移動するのは32ピクセルとなります。
この方法を使うことによってコンピュータの性能を気にせず1秒間に32ピクセル移動させることができます。

ということで、今回は秒速32ピクセルで右に移動するプログラムを作成していきます。

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

　　Dim img As Bitmap = New Bitmap(My.Resources.anime6) 'スプライト画像
　　Dim imgRect(,) As Rectangle '画像矩形配列
　　Dim iNo As Integer '表示画像インデックス
　　Dim direct As Direction 'キャラクターの向いている方向
　　Dim swatch As Stopwatch = New Stopwatch( ) 'ストップウォッチ
　　Dim lastTime As Double '前回実行時の時間
　　Dim loc As PointF '画像の場所座標
　　Dim vel As PointF '画像の移動速度･･･ベクトル

　　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( )

　　　　lastTime = 0.0
　　　　loc = New PointF(0, 0)
　　　　vel = New PointF(32, 0)
　　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メソッドを実行した瞬間の時間
　　　　Dim elapsedTime As Double = nowTime - lastTime '経過時間
　　　　lastTime = nowTime

　　　　'画像切り替え処理
　　　　iNo = CInt(Fix((nowTime * 2) Mod 4.0F))
　　　　loc.X += vel.X * CSng(elapsedTime) 'X座標の移動

　　　　'画像描画処理
　　　　g.DrawImage(img, loc.X, loc.Y, 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
　　　　（省略）
　　End Sub
End Class

ちなみに、今回のプログラムでは1秒間に32ピクセル移動するように作成しています。
これではちょっと遅いなぁと思うのであれば1秒間に64ピクセルにするとよいでしょう。

カーソルキーを押しても右にしか移動しないのではキャラクター移動になりませんから、次回はカーソルキーを押すと移動する方向を変更するプログラムを作っていきます。