回転アニメーション

回転アニメーション

Sprite Class に画像の回転を追加して、回転アニメーションをします。

前田稔(Maeda Minoru)の超初心者のプログラム入門

画像の回転を追加

  1. Sprite Object Class に画像を回転するメンバー関数を追加します。
    画像の回転は DX2D Bitmap Rotate で説明しています。
    ただそのまま組み込んだのでは、画像の左上を中心に回転するので、表示される座標が大きく「ふらつき」ます。
    そこで、画像の真ん中を中心に回転するように補正します。
  2. 画像を回転して描画するメンバー関数の宣言です。
    wp, hp は描画する座標で、rot が回転角度(度数)です。
    void Draw(int wp, int hp, float rot);
  3. 画像の真ん中を中心に回転するように補正した関数です。
    void Sprite::Draw(int wp, int hp, float rot)
    {
        D2D1_RECT_F destRect = D2D1::RectF(
            fWidth / 2, fHeight / 2,
            3 * fWidth / 2, 3 * fHeight / 2 );
    
        D2D1::Matrix4x4F matrix =
            D2D1::Matrix4x4F::Translation(-fWidth, -fHeight, 0.0f) *
            D2D1::Matrix4x4F::RotationZ(rot) *
            //D2D1::Matrix4x4F::RotationY(rot) *
            D2D1::Matrix4x4F::PerspectiveProjection(fWidth/ 2) *
            D2D1::Matrix4x4F::Translation(fWidth/2+(float)wp, fHeight/2+(float)hp, 0.0f);
    
        d2dContext->DrawBitmap(
            bitmapPerspective.Get(),
            &destRect,
            1.0f,
            D2D1_INTERPOLATION_MODE_LINEAR,
            nullptr,
            &matrix
            );
    }
    

回転アニメーション

  1. それでは回転関数を使って、画像を回転するアニメーションのプログラムを作成してみましょう。
    DX2D App をダウンロードして下さい。
    Sprite Class をダウンロードしてプロジェクトに加えます。
    Sprite Class に、画像を回転するメンバー関数を追加します。
    Animation をダウンロードして、レンダリングループを組み込んだ DX2D App を作成します。
    回転に使う適当な画像(L"ffx2s.jpg")をフォルダに格納してプロジェクトに加えます。
  2. Main.cpp の修正です。
    CreateDeviceResources() で Sprite Class を生成して画像をロードします。
    sprite->Load() で画像をロードします。
    void Main::CreateDeviceResources()
    {
        DirectXBase::CreateDeviceResources();
    
        sprite = ref new Sprite(m_d2dContext, m_wicFactory);
        sprite->Load(L"ffx2s.jpg");
    }
    
  3. Render() 関数で画像を描画します。
    m_elapsedTime が回転角度です。
    AnimationDuration の値は 360.0f で、一周すると元に戻ります。
    void Main::Render()
    {
        m_d2dContext->BeginDraw();
    
        m_d2dContext->Clear(D2D1::ColorF(D2D1::ColorF::Black));
    
        sprite->Draw(400, 240, m_elapsedTime);
    
        if (m_elapsedTime >= AnimationDuration)
        {   m_elapsedTime = 0.0f;  }
        else
        {   m_elapsedTime += 1.0f;  }
    
        HRESULT hr = m_d2dContext->EndDraw();
        if (hr != D2DERR_RECREATE_TARGET)
        {   DX::ThrowIfFailed(hr);
        }
    }
    
  4. 画像を回転する関数の回転軸を変更してみて下さい。
    【修正前】
    D2D1::Matrix4x4F::RotationZ(rot) *
    【修正後】
    D2D1::Matrix4x4F::RotationY(rot) *
    二次元座標の回転はZ軸なのですが、Windows8 では三次元で回転計算しているので面白い現象が起こります。
    どうなるかは、自分で確かめて下さい。 \(^o^)/
    当然ながら、Y軸で回転できるならX軸でも回転できるはずです。

超初心者のプログラム入門(DirectX Store)