샘플 게임 확장Extend the sample game


이 항목은 DirectX 자습서 시리즈 를 사용 하 여 단순 유니버설 Windows 플랫폼 (UWP) 게임 만들기 의 일부입니다.This topic is part of the Create a simple Universal Windows Platform (UWP) game with DirectX tutorial series. 해당 링크의 항목은 계열의 컨텍스트를 설정 합니다.The topic at that link sets the context for the series.

이 시점에서 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. 가장 중요 한 혜택은 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.


XAML 오버레이


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에 비해 더 복잡 한 오버레이를 만들고 구성 하는 것이 simpiler 됩니다.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:: 컨트롤을 포함 하 여 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 사용자 인터페이스 요소의 동작을 처리 하는 코드는 코드 숨김 파일인 .xaml에 정의 되어 있습니다.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. 대신, XAML을 통합 하는 DirectX 앱은 새 SwapChainPanel 개체가 생성 될 때 스왑 체인을 연결 합니다.Instead, a DirectX app that incorporates XAML associates a swap chain when a new SwapChainPanel object is constructed.

다음 코드 조각에서는 Directxpage 파일에서 SwapChainPanel 에 대 한 xaml을 선언 하는 방법을 보여 줍니다.The following snippet show how to declare XAML for the SwapChainPanel in the DirectXPage.xaml file.

    <SwapChainPanel x:Name="DXSwapChainPanel">

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


SwapChainPanel 개체는 시작 시 응용 프로그램 singleton에 의해 생성 된 현재 창 개체의 콘텐츠 속성으로 설정 됩니다.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

구성 된 스왑 체인을 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::D eviceresources:: CreateWindowSizeDependentResources 의 다음 코드 조각은 DIRECTX/XAML interop에 대해이 정보를 자세히 설명 합니다.The following snippet from DX::DeviceResources::CreateWindowSizeDependentResources details this for DirectX/XAML interop:

        ComPtr<IDXGIDevice3> dxgiDevice;

        ComPtr<IDXGIAdapter> dxgiAdapter;

        ComPtr<IDXGIFactory2> dxgiFactory;

        // When using XAML interop, the swap chain must be created for composition.

        // 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;
        }, 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.

이 프로세스에 대 한 자세한 내용은 DirectX 및 XAML interop를 참조 하세요.For more info about this process, see DirectX and XAML interop.


오버레이에 대해 XAML을 사용 하는이 게임의 버전을 다운로드 하려면 Direct3D 해결 샘플 게임 (XAML)로 이동 합니다.To download the version of this game that uses XAML for the overlay, go to the Direct3D shooting sample game (XAML).

이러한 항목의 나머지 부분에서 설명 하는 샘플 게임의 버전과 달리 XAML 버전은 각각 app.configGameInfoOverlay대신 app.xaml directxpage 파일에 프레임 워크를 정의 합니다.Unlike the version of the sample game 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.