ゲーム サンプルの紹介Extend the game sample

基本的なユニバーサル Windows プラットフォーム (UWP) DirectX 3D ゲームの主なコンポーネントについて説明してきました。At this point we've covered the key components of a basic Universal Windows Platform (UWP) DirectX 3D game. ビュー プロバイダーやレンダリング パイプラインなどのゲームのフレームワークをセットアップして、基本的なゲーム ループを実装することができます。You can set up the framework for a game, including the view provider and rendering pipeline, and implement a basic game loop. また、基本的なユーザー インターフェイス オーバーレイの作成、サウンドの組み込み、コントロールの実装を行うこともできます。You can also create a basic user interface overlay, incorporate sounds, and implement controls. これで独自のゲームを作成することができるはずですが、他のヘルプや情報が必要な場合は以下のリソースを参照してください。You're on your way to creating a game of your own, but if you need more help and info, check out these resources.

オーバーレイに XAML を適用Using XAML for the overlay

ここで詳しく説明していない方法の 1 つとして、オーバーレイに対し Direct2D に代わり XAML を使う方法があります。One alternative that we didn't discuss in depth is the use of XAML instead of Direct2D for the overlay. XAML には、Direct2D に比べ、ユーザー インターフェイス要素を描画するときの利点が数多くあります。XAML has many benefits over Direct2D for drawing user interface elements. 最も重要な利点は、Windows 10 の外観を DirectX ゲームに統合する作業が容易になるという点です。The most important benefit is that it makes incorporating the Windows 10 look and feel into your DirectX game more convenient. UWP アプリを定義する共通した要素、スタイル、動作の多くが XAML モデルに緊密に統合されるため、ゲーム開発者による実装作業がはるかに容易になります。Many of the common elements, styles, and behaviors that define a UWP app are tightly integrated into the XAML model, making it far less work for a game developer to implement. 作成するゲームのデザインに複雑なユーザー インターフェイスが含まれる場合は、Direct2D の代わりに XAML の使用を検討してください。If your own game design has a complicated user interface, consider using XAML instead of Direct2D.

XAML を使用して、以前に作成した Direct2D のゲーム インターフェイスに似たインターフェイスを作成できます。With XAML, we can make a game interface that looks similar to the Direct2D one made earlier.

XAMLXAML

XAML オーバーレイ

Direct2DDirect2D

D2D オーバーレイ

最終的な結果は類似していますが、Direct2D と XAML でのインターフェイスの実装には多くの相違点があります。While they have similar end results, there are a number of differences between implementing Direct2D and XAML interfaces.

機能Feature XAMLXAML Direct2DDirect2D
オーバーレイの定義Defining overlay XAML ファイル \*.xaml で定義されます。Defined in a XAML file, \*.xaml. XAML を理解すると、より複雑なオーバーレイの作成や構成は、Direct2D と比べて簡単になります。Once understanding XAML, creating and configuring more complicated overlays are made simpiler when compared to Direct2D. Direct2D プリミティブの集合として定義され、DirectWrite 文字列が手作業で配置され、Direct2D ターゲット バッファーに書き込まれます。Defined as a collection of Direct2D primitives and DirectWrite strings manually placed and written to a Direct2D target buffer.
ユーザー インターフェイス要素User interface elements XAML ユーザー インターフェイス要素は、Windows::UI::XamlWindows::UI::Xaml::Controls を含め、Windows ランタイム XAML API の一部である標準化要素から採用されます。XAML user interface elements come from standardized elements that are part of the Windows Runtime XAML APIs, including Windows::UI::Xaml and Windows::UI::Xaml::Controls. XAML ユーザー インターフェイス要素の動作を処理するコードは、コード ビハインド ファイル、Main.xaml.cpp で定義されます。The code that handles the behavior of the XAML user interface elements is defined in a codebehind file, Main.xaml.cpp. 四角形と楕円のような単純な図形を描画することができます。Simple shapes can be drawn like rectangles and ellipses.
ウィンドウのサイズ変更Window resizing ハンドルのサイズ変更やビュー状態変更イベントが自然に処理され、これに伴いオーバーレイが変形されます。Naturally handles resize and view state change events, transforming the overlay accordingly オーバーレイのコンポーネントを再描画する方法を手動で指定する必要があります。Need to manually specify how to redraw the overlay's components.

もう 1 つの大きな違いは、スワップ チェーンです。Another big difference involves the swap chain. スワップ チェーンを Windows::UI::Core::CoreWindow オブジェクトに結合する必要はありません。You don't have to attach the swap chain to a Windows::UI::Core::CoreWindow object. 代わりに、新しい SwapChainPanel オブジェクトの構築時に、XAML を統合する DirectX アプリによりスワップ チェーンが関連付けられます。Instead, a DirectX app that incorporates XAML associates a swap chain when a new SwapChainPanel object is constructed.

次のスニペットは、DirectXPage.xaml ファイルで SwapChainPanel の XAML を宣言する方法を示しています。The following snippet show how to declare XAML for the SwapChainPanel in the DirectXPage.xaml file.

<Page
    x:Class="Simple3DGameXaml.DirectXPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:Simple3DGameXaml"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d">


    <SwapChainPanel x:Name="DXSwapChainPanel">

    <!-- ... XAML user controls and elements -->

    </SwapChainPanel>
</Page>

SwapChainPanel オブジェクトは、アプリ シングルトンによる起動時に作成された現在のウィンドウ オブジェクトの Content プロパティとして設定されます。The SwapChainPanel object is set as the Content property of the current window object created at launch by the app singleton.

void App::OnLaunched(_In_ LaunchActivatedEventArgs^ /* args */)
{
    m_mainPage = ref new DirectXPage();

    Window::Current->Content = m_mainPage;
    // Bring the application to the foreground so that it's visible
    Window::Current->Activate();
}

XAML で定義された SwapChainPanel パネル インスタンスに、設定済みのスワップ チェーンを結合するには、下層にある固有の ISwapChainPanelNative インターフェイス実装に対するポインターを取得し、これに ISwapChainPanelNative::SetSwapChain を呼び出して、設定済みのスワップ チェーンを渡す必要があります。To attach the configured swap chain to the SwapChainPanel instance defined by your XAML, you must obtain a pointer to the underlying native ISwapChainPanelNative interface implementation and call ISwapChainPanelNative::SetSwapChain on it, passing it your configured swap chain.

DX::DeviceResources::CreateWindowSizeDependentResources の次のスニペットは、DirectX/XAML の相互運用機能でこの処理を行う場合の詳細を示しています。The following snippet from DX::DeviceResources::CreateWindowSizeDependentResources details this for DirectX/XAML interop:

        ComPtr<IDXGIDevice3> dxgiDevice;
        DX::ThrowIfFailed(
            m_d3dDevice.As(&dxgiDevice)
            );

        ComPtr<IDXGIAdapter> dxgiAdapter;
        DX::ThrowIfFailed(
            dxgiDevice->GetAdapter(&dxgiAdapter)
            );

        ComPtr<IDXGIFactory2> dxgiFactory;
        DX::ThrowIfFailed(
            dxgiAdapter->GetParent(IID_PPV_ARGS(&dxgiFactory))
            );

        // When using XAML interop, the swap chain must be created for composition.
        DX::ThrowIfFailed(
            dxgiFactory->CreateSwapChainForComposition(
                m_d3dDevice.Get(),
                &swapChainDesc,
                nullptr,
                &m_swapChain
                )
            );

        // Associate swap chain with SwapChainPanel
        // UI changes will need to be dispatched back to the UI thread
        m_swapChainPanel->Dispatcher->RunAsync(CoreDispatcherPriority::High, ref new DispatchedHandler([=]()
        {
            // Get backing native interface for SwapChainPanel
            ComPtr<ISwapChainPanelNative> panelNative;
            DX::ThrowIfFailed(
                reinterpret_cast<IUnknown*>(m_swapChainPanel)->QueryInterface(IID_PPV_ARGS(&panelNative))
                );
            DX::ThrowIfFailed(
                panelNative->SetSwapChain(m_swapChain.Get())
                );
        }, CallbackContext::Any));

        // Ensure that DXGI does not queue more than one frame at a time. This both reduces latency and
        // ensures that the application will only render after each VSync, minimizing power consumption.
        DX::ThrowIfFailed(
            dxgiDevice->SetMaximumFrameLatency(1)
            );
    }

このプロセスについて詳しくは、DirectX と XAML の相互運用機能に関するトピックをご覧ください。For more info about this process, see DirectX and XAML interop.

サンプルSample

このゲームのオーバーレイに XAML を使ったバージョンをダウンロードするには、「Direct3D シューティング ゲームのサンプル (XAML)」を参照してください。To download the version of this game that uses XAML for the overlay, go to the Direct3D shooting game sample (XAML).

その他のトピックに示すゲーム サンプルのバージョンとは異なり、XAML のバージョンでは App.cppGameInfoOverlay.cpp の代わりに、App.xaml.cppDirectXPage.xaml.cpp の各ファイルでフレームワークを定義しています。Unlike the version of the game sample discussed in the rest of these topics, the XAML version defines its framework in the App.xaml.cpp and DirectXPage.xaml.cpp files, instead of App.cpp and GameInfoOverlay.cpp, respectively.