読者です 読者をやめる 読者になる 読者になる

がりらぼ

WindowsRuntimeの応援ブログ

MonoGameWindowsRuntimeゲームプログラミング入門vol4:2D画像をアニメーションさせる

2D画像の描画座標

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

//描画する
spriteBatch.Draw(texture,new Vector2(10,75),Color.White);

 

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

38

 

 

2Dアニメーションとは

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

40

 

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

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

 

2Dテクスチャを動かす

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

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

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

//2Dテクスチャの座標
Vector2 position;

 

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

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

protected override void Initialize()
{
    position =new Vector2(0,0);

    base.Initialize();
}

 

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

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

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

protected override void Update(GameTime gameTime)
{
    position.X += 0.5f;
    position.Y += 0.3f;

    base.Update(gameTime);
}

 

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

protected override void Draw(GameTime gameTime)
{
    GraphicsDevice.Clear(Color.CornflowerBlue);

    spriteBatch.Begin();

    //描画する
    spriteBatch.Draw(texture,position,Color.White);

    spriteBatch.End();

    base.Draw(gameTime);
}

 

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

68

 

コード全体はこんな感じ

public class Game1 : Game
{
    GraphicsDeviceManager graphics;
    SpriteBatch spriteBatch;

    //表示する2Dテクスチャ
    Texture2D texture;

    //2Dテクスチャの座標
    Vector2 position;
    public Game1()
    {
        graphics = new GraphicsDeviceManager(this);
        Content.RootDirectory = "Content";
    }


    protected override void Initialize()
    {
        position =new Vector2(0,0);

        base.Initialize();
    }


    protected override void LoadContent()
    {

        spriteBatch = new SpriteBatch(GraphicsDevice);
        //画像ファイルを読み込む
        texture = Content.Load<Texture2D>("icon.png");

    }

    protected override void UnloadContent()
    {
        //読み込んだ画像を破棄する
        texture.Dispose();
    }


    protected override void Update(GameTime gameTime)
    {
        position.X += 0.5f;
        position.Y += 0.3f;

        base.Update(gameTime);
    }


    protected override void Draw(GameTime gameTime)
    {
        GraphicsDevice.Clear(Color.CornflowerBlue);

        spriteBatch.Begin();

        //描画する
        spriteBatch.Draw(texture,position,Color.White);

        spriteBatch.End();

        base.Draw(gameTime);
    }
}

 

サンプルコード

SampleGameMono_2_2DAnimation.zip

 

2D画像をアニメーションさせる | garicchi.com

目次