게임 샘플 확장Extend the game sample

지금까지 기본적인 UWP(유니버설 Windows 플랫폼) 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

이 문서에서 자세히 다루지는 않았지만, 오버레이에서 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. 가장 중요 한 장점은 편리한 DirectX 게임에 Windows 10 모양과 느낌을 통합 하기가 어렵다는 것입니다.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 대상 버퍼에 수동으로 배치되고 기록되는 Direct2D 원형 및 DirectWrite 문자열 컬렉션으로 정의됩니다.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.

또 다른 큰 차이점은 스왑 체인과 관련이 있습니다.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 개체는 시작 시 앱 단일 항목에서 생성된 현재 창 개체의 콘텐츠 속성으로 설정됩니다.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.