2D画像をアニメーションさせる

2D画像の描画座標

2D画像を描画するときは、Drawメソッドで描画座標を指定しています。

 

この場合、左上からx軸が10px、y軸が75pxずれた位置に描画されます。

38

 

 

2Dアニメーションとは

2Dで描画している画像がスラスラと移動するアニメーション、これは画像の「移動」と「描画」を高速に繰り返し行うことで実現できます。

40

 

市販の2Dゲームが動いて見えるのも、同じ仕組で実現されています。

ゲームを実行するマシンのスペックが高ければ、フレームレート(1秒間に描画する回数)を上げることができ、より動きが滑らかになります。

 

2Dテクスチャを動かす

2Dテクスチャを動かすには左上からの座標情報を定義しなければいけません。

MonoGameでは、2次元ベクトルをあらわすVector2クラスがあるのでこれを使って2Dテクスチャの描画位置を定義します。

GameクラスのメンバーにVector2型のメンバーを追加します。

 

Initializeメソッドでは座標の初期化をおこないます。

今回は初期座標は(0,0)としました。

 

Updateメソッドでは座標の更新を行います。

今回はx座標を0.5ずつプラス、y座標を0.3ずつプラスします。

Updateメソッドは高速に何度もよばれるのでこれで座標が徐々に更新されます。

 

DrawメソッドではDraw関数の第二引数でvector2型の座標を渡してテクスチャの描画位置を決定します。

 

デバッグしてみると2Dテクスチャが左上から右下へとアニメーションします。

68

 

コード全体はこんな感じ

 

サンプルコード

SampleGameMono_2_2DAnimation.zip

 

目次