Use the Microsoft Visual Studio 2013 DirectX templates

[ This article is for Windows 8.x and Windows Phone 8.x developers writing Windows Runtime apps. If you’re developing for Windows 10, see the latest documentation ]

The easiest way to get started creating a new Windows Store Microsoft DirectX game is to use a DirectX app template like the one provided with Microsoft Visual Studio 2013.

To create a new DirectX project, perform these steps in Visual Studio 2013:

  1. Go to FILE > New and select Project (or press Ctrl+Shift+N).
  2. Under Templates, select Visual C++.
  3. Scroll down the center pane and select DirectX app.

Choose a name for your game project and OK.

A quick review of the DirectX app template

The DirectX app template can be compiled and deployed right out of the box. When running, it displays a vertex-shaded cube spinning about its longitudinal axis, with a cornflower blue background and a frame counter in the lower-right corner.

The template follows the rules of C++ aggregation, with very little inheritance (except for the framework view and device-notification interface). The main project class (<Your Project Name>Main) contains instances of the principal component classes:

  • DeviceResources, which defines the graphics hardware resources and behaviors. A shared pointer to an instance of this class is held by the App class, the main project class, and the renderer.
  • Sample3DSceneRenderer, which performs the rendering of the spinning cube.
  • SampleFpsOverlay, which defines the simple HUD to display the current frames per second counter.
  • StepTimer, which defines a common high-resolution timer.

The App class implements the view provider, which conforms to the methods in IFrameworkView and holds an instance of the main project class. These methods serve as entry points for your modifications:

  • Initialize: Hooks up the basic Process Lifetime Management (PLM) events and initializes the shared DeviceResources instance.

  • SetWindow: Hooks up the core UI events and hands a reference to the app's CoreWindow to the shared DeviceResources instance.

  • Load: Creates a new instance of <Your Project Name>Main with the configured DeviceResources instance. This is also a good place to load previously saved app states.

  • Run: Starts your main game loop! The template creates a loop and calls the main app class's Update and Render methods. Before that, it tells the event dispatcher to process all events currently pending in the event queue, ensuring that your callbacks are invoked.

    void App::Run()
        while (!m_windowClosed)
            if (m_windowVisible)
                if (m_main->Render())

With this set of behaviors in mind, let's review the files included with the template.

Files in the project root Description
App.h/App.cpp Declares and implements the DirectX view provider code for your app. For more details about this code, read How to set up your app to display a view.
<Your Project Name>Main.h/<Your Project Name>Main.cpp Declares and implements the main app object for your app. This object is instantiated in App.cpp, in the Load() method of the view provider. The class for this object defines methods for updating your game data and rendering the current scene.
pch.h/pch.cpp Includes the common external header files for your app. Update pch.h when you add external references.


The Common directory in the project contains code files universal to DirectX apps. These code files contain the core framework implementation and don't need extensive modification if you're just starting out. In fact, if you're completely new to DirectX, you can just leave them as they are!

Files in \Common Description
DeviceResources.h/DeviceResources.cpp Declares and implements the DeviceResources class, which contains all of the core Direct3D graphics pipeline components, and the methods used to configure, create, and update them. Specifically, this includes the ID3D11Device and ID3D11DeviceContext instances for the app, which represent the graphics resources and the rendering pipeline, respectively.
DirectXHelper.h Contains global methods for asynchronous file read and DIP-to-pixel conversion.
StepTimer.h Provides the declaration (and implementation) of a high-resolution timer class useful for game apps.


The Content directory contains files that you'll modify extensively or replace altogether. They merely provide very basic behaviors to help you understand how the template is structured; they do not exercise Direct3D significantly. As you build familiarity with the template, go ahead and replace this code with your own.

Files in \Content Description
Sample3DSceneRenderer.h/Sample3DSceneRenderer.cpp Declares and implements the rendering code for the spinning cube, from constructing the vertex buffer and populating the constant buffers to executing the shaders. It also loads and creates the shaders for the scene and attaches them to the rendering pipeline. You can use this class as a guide to create your own scene-rendering code, because it implements the minimum level of functionality.
SampleFpsTextRenderer.h/SampleFpsTextRenderer.cpp Declares and implements the code for the 2D overlay that displays the frame counter.
SamplePixelShader.hlsl Implements a simple pass-through pixel shader. (It takes the interpolated vertex coordinates from the vertex shader stage and returns them as an RGB color value.)
SampleVertexShader.hlsl Implements a simple vertex shader that transforms the vertex coordinates to projection space using the matrices provided in the constant buffers.
ShaderStructures.h Declares the constant buffer structures. It's a good practice to declare them in a separate header so you can manage them conveniently.


The DirectX-XAML interop app template

There is an additional DirectX app template, listed as DirectX app (XAML), which draws the scene into a XAML control (specifically a SwapChainPanel control). It also implements XAML text-display controls and pointer-interaction event handlers. This template does not use a custom view provider; instead, it uses the XAML composition framework and element tree. It also attaches the swap chain using IDxgiFactory::CreateSwapChainForComposition instead of IDxgiFactory::CreateSwapChainForCoreWindow.

The vast majority of the code pages and classes in the XAML template are the same as they are in the basic DirectX app template.

More details

For more details about the classes in this template, see the other topics in this section.

In this section

Topic Description

Work with the DirectX app template's device resources

Understand the role of the Microsoft DirectX Graphics Infrastructure (DXGI) in your Windows Store DirectX game. DXGI is a set of APIs used to configure and manage low-level graphics and graphics adapter resources. Without it, you'd have no way to draw your game's graphics to a window.

Understand the DirectX app template's rendering pipeline

Previously, you looked at how the DirectX app template acquired a window and way to draw into it in Work with the DirectX app template's device resources. Now, you learn how the template builds the graphics pipeline, and where you can hook into it.

Work with shaders and shader resources

It's time to learn how to work with shaders and shader resources in developing your DirectX game for Windows 8.