Animation

美人のアニメーション


Sprite Object Class を使って「パラパラアニメーション」をします。
Windows 8.1 以降では動かないようなのでダウンロード出来なくなっています。
DirectX9 のアニメーションなどを参照して下さい。
美人のアニメーション

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

プロジェクトの作成

  1. Sprite Class を使うと簡単に画像を切り分けることが出来ます。
    ここでは Sprite Class を使って、美人の画像を切り分けて「パラパラアニメーション」をします。
    「パラパラアニメーション」とは安っぽい言い方ですが、連続した画像を次々に切り替えて動きを表現する方法です。
    授業中に教科書の端に連続した線画を書いて、パラパラめくると線画が動いて見える遊びをした覚えがあるでしょう? (^_^;)
    これが映画やテレビの原理で、画像を工夫すれば本格的なアニメーションが楽しめます。
  2. それでは「パラパラアニメーション」のプログラムを作成してみましょう。
    DX2D App をダウンロードして下さい。
  3. Sprite Class をダウンロードしてプロジェクトに加えます。
  4. "Bijin.jpg" をフォルダに格納してプロジェクトに加えます。
  5. ページの先頭から「美人のアニメーション」をダウンロードして下さい。
    Main.h と Main.cpp が格納されているので、上書きします。
    このファイルが DX2DApp にレンダリングループを組み込むサンプルコードです。
  6. コンパイル&実行すると美人のアニメーションが描画されます。

プロジェクトの説明

  1. 「美人のアニメーション」に格納されている Main.h と Main.cpp は、DX2D App にレンダリングループを組み込んだサンプルです。
    Main.h で Constructor と Sprite Class を定義しています。
    また、レンダリングループに関係する領域を定義します。
        internal:
            Main();
            Sprite^ sprite;
      
            bool        m_windowClosed;
            bool        m_windowVisible;
            float       m_elapsedTime;
        
  2. Main.cpp の Constructor からメンバオブジェクトの Constructor を呼び出します。
    Main::Main() :
        m_windowClosed(false),
        m_windowVisible(true),
        m_elapsedTime(0.0f)
    {
    }
    
  3. CreateDeviceResources() で Sprite Class を生成して画像をロードします。
    "Bijin.jpg" は 96*96 の Sprite が2行4列に並んでいます。
    void Main::CreateDeviceResources()
    {
        DirectXBase::CreateDeviceResources();
    
        sprite = ref new Sprite(m_d2dContext, m_wicFactory);
        sprite->Load(L"Bijin.jpg",96,96);
    }
    
  4. Run() にレンダリングループを組み込みます。
    レンダリングループのプロジェクトは Direct 3D のプロジェクト を参考にして下さい。
    void Main::Run()
    {
        while (!m_windowClosed)
        {
            if (m_windowVisible)
            {
                m_window->Dispatcher->ProcessEvents(CoreProcessEventsOption::ProcessAllIfPresent);
                Render();
                Present();
            }
            else
            {
                m_window->Dispatcher->ProcessEvents(CoreProcessEventsOption::ProcessOneAndAllPending);
            }
        }
    }
    
  5. Render() で Sprite を切り替えながら描画します。
    num が Sprite の番号で、m_elapsedTime を使って計算します。
    sprite->Draw(num, 120, 80); で Sprite を描画します。
    void Main::Render()
    {
        m_d2dContext->BeginDraw();
    
        m_d2dContext->Clear(D2D1::ColorF(D2D1::ColorF::CornflowerBlue));
    
        int num= (int)m_elapsedTime % 8;
        sprite->Draw(num, 120, 80);
    
        if (m_elapsedTime >= AnimationDuration)
        {   m_elapsedTime = 0.0f;  }
        else
        {   m_elapsedTime += 0.05f;  }
    
        HRESULT hr = m_d2dContext->EndDraw();
        if (hr != D2DERR_RECREATE_TARGET)
        {   DX::ThrowIfFailed(hr);
        }
    }
    
  6. コンパイル&実行して、美人の「パラパラアニメーション」が楽しめたでしょうか? (^_^;)
    このプログラムが、私の Windows8 Direct2D の目標の一つでした。
    DX2D Bitmap Rotate の L"girl.gif" を利用して、少女の髪が風になびくアニメーションを作成して下さい。
    L"girl.gif" は背景に透明色が設定された「透過GIF」形式の画像です。

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