Bizzy Bees XNA to DirectX/DirectXTK – Part 1

This post is part of a blog series… if you came here directly you might want to read the introduction first.

File/New Project

For the purposes of this walkthrough we’ll be creating a blank Windows Phone Direct3D app in Visual Studio.  If you want to add menus and other items you can also try the Windows Phone Direct3D with XAML App which allows you to add in XAML pages for menus etc. but I’ll leave that as an exercise for later:) Also, I would sincerely recommend that you read this guide on combining DirectX with DirectXTK by the creators of Chickens can’t fly (one of the best WP games ever made in my opinion).   

1. Download the latest version of DirectX Tool Kit from codeplex

2. In Visual Studio, Create a new Windows Phone Direct3D app and call it BizzyBees

3. In the file explorer, copy the extracted DirectXTK folder to the BizzyBees solution folder

4. In Visual Studio, right-click the solution and select Add->Existing project to add the DirectXTK_WindowsPhone8.vcxproj project to the solution.
You may notice that you have a lot of other projects here too, in fact you can use DirectXTK for a lot of different platforms like Windows 8 and XBOX and the code we are going to produce here is very similar if not the same as what you would write for other platforms.

You should now have something that looks like this:

5. Open the BizzyBees properties window by right-clicking the Bizzy Bees project and selecting Properties
The next few steps will be performed in the properties window.

6. Link the DirectXTK project: Under Common Properties/References click the Add New Reference button and select the DirectXTK_WindowsPhone8 project

7. Add the DirectXTK include files: Under Configuration Properties/C/C++/General edit Additional Include Directories and add the DirectXTK\Inc folder

8. Add the dxguid.lib:  Under Configuration Properties/Linker/Input add dxguid.lib to Additional Dependencies

9. Add the following includes to the pch.h file (precompile header).  We’ll be using items from these header files in pretty much all our classes

 #include "SpriteBatch.h"
#include "SpriteFont.h"
#include "SimpleMath.h"
#include "DirectXHelper.h"
#include "DDSTextureLoader.h"
#include <vector>

10. Build the BizzyBees Project and run it.  For now you will just see the default cube renderer but we will clean out what we don’t need and start building our game soon.

Cleaning up the project

In this project CubeRenderer is pretty much where all the action happens.  Similarly to XNA the application run goes something like this

A. CreateDeviceResources
B. CreateWindowsSizeDependentResources
C. Update
D. Render

Rinse and repeat C and D every frame until the game ends… 

In CreateWindowsSizeDependentResources we’ll be loading up all the textures, fonts etc. then every frame we will update the scene in Update and then blit draw the updated scene in Render.   Later on we will also add user interaction but this will be event based and not part of the update/render loop.

1. We won’t be needing the SimplePixelShader nor the SimpleVertexShader so remove these from the application
2. Rename CubeRenderer to BizzyBeeGame throughout the project.  We could have scrapped the cube renderer and created a new class but this way we can delete stuff instead of retyping everything.
3. Clean up BizzyBeeGame.h and BizzyBeeGame.cpp until you only have the following

 BizzyBeeGame.h

 #pragma once

#include "Direct3DBase.h"

ref class BizzyBeeGame sealed : public Direct3DBase
{
public:
    BizzyBeeGame();

    // Direct3DBase methods.
    virtual void CreateDeviceResources() override;
    virtual void CreateWindowSizeDependentResources() override;
    virtual void Render() override;
    
    // Method for updating time-dependent objects.
    void Update(float timeTotal, float timeDelta);

private:
};

BizzyBeeGame.cpp

#include "pch.h"
#include "BizzyBeeGame.h"

using namespace DirectX;
using namespace Microsoft::WRL;
using namespace Windows::Foundation;
using namespace Windows::UI::Core;

BizzyBeeGame::BizzyBeeGame()
{
}

void BizzyBeeGame::CreateDeviceResources()
{
    Direct3DBase::CreateDeviceResources();
}

void BizzyBeeGame::CreateWindowSizeDependentResources()
{
    Direct3DBase::CreateWindowSizeDependentResources();
    //TODO: Load textures and fonts and initialize the game
}

void BizzyBeeGame::Update(float timeTotal, float timeDelta)
{
    //TODO: Update the scene here
}

void BizzyBeeGame::Render()
{
    const float midnightBlue[] = { 0.098f, 0.098f, 0.439f, 1.000f };
    m_d3dContext->ClearRenderTargetView(m_renderTargetView.Get(), midnightBlue);
    m_d3dContext->ClearDepthStencilView(m_depthStencilView.Get(), D3D11_CLEAR_DEPTH, 1.0f, 0);
    m_d3dContext->OMSetRenderTargets(1, m_renderTargetView.GetAddressOf(), m_depthStencilView.Get());

    //TODO: Render the scene here
}

  

We removed all the 3D rendering and in the Render method we simply clear out the space and draw a midnightBlue background.  For all you XNA devs out there, what we have done
now is the equivalent of starting a new Windows Phone XNA app and pressed F5 to run and see the cornflowerblue background : )

In the next post we’ll generate some assets so that we have something to draw on the screen.