Developing a Windows Store app using C++ and DirectXPhil NapieralskiProgram Manager3-109

Fundamentals (DirectX)What is XAML? Why interop?More fundamentals (C++)Registering eventsWindows Store app featuresMaking money

Agenda

Graphics language of choice

HTML5, JavaScript and CSS3

C# or Visual Basic .NET and XAML

Immersive 3D using DirectX 11.1

Combination of DirectX 11.1 and XAML

Fundamentals (DirectX)

DirectX fundamentalsSet up Direct3D device and contextUse the Direct3D device structure for low-frequency operationsUse the Context structure for high-frequency operations

Set up your shaders

Set up the swap chain

D3D11CreateDevice( /* … */ &device, // Returns the Direct3D device created. &m_featureLevel, // Returns feature level of the device. &context // Returns the device immediate context.)

The Direct3D device

struct SimpleVertex {

XMFLOAT3 pos;

XMFLOAT3 color;

};

// Create the shaders

m_d3dDevice->CreateVertexShader( … );

m_d3dDevice->CreatePixelShader( … );

// Define the input to the vertex shader

m_d3dDevice->CreateInputLayout( … &vertexShaderByteCode, &layoutdesc, … );

Shaders

Without XAML

dxgiFactory->CreateSwapChainForCoreWindow(

m_d3dDevice.Get(),

reinterpret_cast<IUnknown*>(window),

&swapChainDesc,

nullptr,

&m_swapChain

)  

The swap chain

With XAML (SwapChainBackgroundPanel)

dxgiFactory->CreateSwapChainForComposition(

m_d3dDevice.Get(),                  

&swapChainDesc,                  

nullptr,         

&m_swapChain                  

) 

// Get XAML element into ComPtr<ISwapChainBackgroundPanelNative>

// Set its swap chain...

Without XAML

dxgiFactory->CreateSwapChainForCoreWindow(

m_d3dDevice.Get(),

reinterpret_cast<IUnknown*>(window),

&swapChainDesc,

nullptr,

&m_swapChain

)  

The swap chain

With XAML (SwapChainBackgroundPanel)

dxgiFactory->CreateSwapChainForComposition(

m_d3dDevice.Get(),                  

&swapChainDesc,                  

nullptr,         

&m_swapChain                  

)

// Get XAML element into ComPtr<ISwapChainBackgroundPanelNative> ...

// Set its swap chain ...

What is XAML? Why interop?

In-box controls for Windows Store apps

App bar

List box

Hyperlink

Check boxProgress bar

Text box

Password

Progress ring

Tooltip

GridButton

FlipView

Combo box

Scroll bar

Context menu

Slider

Toggle switch

Semantic Zoom

Panning indicator

Rating

ListView

Flyout

Radio button

Clear button

Reveal button

Spell checking

To XAML or not to XAML?

XAML interoperates nicely with DirectX in various scenarios

Combine ease of XAML for 2D, power of DirectX for 3D

Make the XAML interop decision up front

Demo

Comparison: DirectX vs. XAML

SwapChainBackgroundPanelExample: XAML for UI/HUD, Direct3D for graphics

XAML interop scenarios

See XAML DirectX 3D shooting game sample on MSDN

SurfaceImageSourceExample: Use DirectX inside a XAML element

XAML interop scenarios

See XAML SurfaceImageSource DirectX Interop Sample on MSDN

VirtualSurfaceImageSourceExample: Bing maps for the Windows Store

XAML interop scenarios

See May talk by Jesse Bishop, “Combining XAML and DirectX in Windows Store apps”

More fundamentals (C++)

CoreWindow and IFrameworkViewCoreWindowReplacement for Win32 hWndManages screen layoutProvides app inputUsing event handler model

IFrameworkViewEffectively the new App Object classEnables OS to initialize app, deliver core OS resourcesYou will implement 5 methods

IFrameworkView methods

Called on application launch

Register application events here

OS assigns CoreWindow to your app

Register window events here

Parameter tells us from where the app was launched

Put your rendering loop in here

3 seconds to get here to start handling events

Rarely executed

Generally leave empty

Initialize Load Run UninitializeSetWindow

ref class MyFrameworkView : public IFrameworkView{public:     // IFrameworkView Methods    virtual void Initialize(CoreApplicationView^ applicationView);    virtual void SetWindow(CoreWindow^ window);    virtual void Load(String^ entryPoint);    virtual void Run();    virtual void Uninitialize();

// ... 

Required IFrameworkView methods

Registering events

Where to register eventsInitialize methodApplication-wide eventsExample: Suspend and resume

SetWindow methodApp window-specific eventsExample: Window-size-changed and input events

There are many eventsSuspendResumePointerPressedPointerMovedKeyDownKeyUpSizeChanged…

m_window->SizeChanged += ref new

TypedEventHandler<CoreWindow^,WindowSizeChangedEventArgs^> (

this,

&Framework::OnWindowSizeChanged

);

Registering the SizeChanged event

void Framework::OnWindowSizeChanged(CoreWindow^ sender, WindowSizeChangedEventArgs^ args)

{

using Windows::UI::ViewManagement;if(ApplicationView::Value == ApplicationViewState::Snapped) {

/* snapped specific code */}/* respond to new window size … */

}

// See Snap sample on MSDN

The SizeChanged event

CoreApplication::Suspending += ref new EventHandler<SuspendingEventArgs^>(this, &Framework::OnSuspending);

CoreApplication::Resuming += ref new EventHandler<Platform::Object^>(this, &Framework::OnResuming);

// ...

void Framework::OnSuspending(Platform::Object^ sender, SuspendingEventArgs^ args) { // Save app state here}

void Framework::OnResuming(Platform::Object^ sender, Platform::Object^ args) { // Restore app state here}

Process Lifetime Management (PLM) events

Get going quickly

Getting startedUse the Visual Studio 2012 templates for a quick startDirect3D template for pure C++ and DirectXDirect2D template for added XAML support

Reference the samplesNeed a feature? Copy and paste from the corresponding sample!

Use the documentation at dev.windows.com

Demo

Templates

Windows Store app features

Live tilesusing namespace Windows::UI::Notifications;using namespace Windows::Data::Xml::Dom;

auto tileXml = ref new XmlDocument();tileXml->LoadXml("<tile>"…"</tile>");

TileUpdateManager::CreateTileUpdaterForApplication()->Update(ref new TileNotification(tileXml)

);

See App tiles and badges sample on MSDN

Using templates for bindingtileXmlString = "<tile>"+ "<visual>”+ "<binding template=‘TileWideText03'>"+ "<text id='1'>My first tile notification!</text>"+ "</binding>"+ "</visual>"+ "</tile>";

// See Build 3-101, “Alive with activity” by Kraig Brockschmidt

See App tiles and badges sample on MSDN

Toastusing namespace Windows::UI::Notifications;using namespace Windows::Data::Xml::Dom;

auto toastXml = ref new XmlDocument();auto toastXmlString = "<toast>”…”</toast>";toastXml->LoadXml(toastXmlString);

auto toast = ref new ToastNotification(toastXml);

ToastNotificationManager::CreateToastNotifier()->Show(toast);

Scheduled toasttoastXml->LoadXml(toastXmlString);

auto toast = ref new ToastNotification(toastXml);

auto cal = ref new Windows::Globalization::Calendar();cal->SetToNow();cal->AddSeconds(7);ToastNotificationManager::CreateToastNotifier()->AddToSchedule(ref new ScheduledToastNotification(toastXml,cal->GetDateTime()));

// Remember to declare toast in your app manifest!

App bar and edge gesturesIn C++, EdgeGesture->Completed event fires in three casesSwipe up from bottom (or down from top) of touch screenWindows logo key+Z on keyboardRight mouse button click

Draw app bar using Direct2D

using namespace Windows::UI::Input;

EdgeGesture::GetForCurrentView()->Completed += ref new

TypedEventHandler<EdgeGesture^, EdgeGestureEventArgs^>(

this, &InputController::OnCompleted

);

void InputController::OnCompleted(EdgeGesture^,EdgeGestureEventArgs^){

// Check device orientation and draw app bar…

}

The edge gesture event

Charms (Share)using namespace Windows::ApplicationModel::DataTransfer;DataTransferManager::GetForCurrentView()->DataRequested += ref new TypedEventHandler<DataTransferManager^,DataRequestedEventArgs^>( &App::onShare );

void App::onShare(DataTransferManager^ sender, DataRequestedEventArgs^ args){auto requestData = args->Request->Data;requestData->Properties->Title = "High Score";requestData->Properties->Description = “My High Score";requestData->SetText(“I just got a new high score!“);

/* … */});

Charms (Settings)using namespace Windows::UI::ApplicationSettings;SettingsPane::GetForCurrentView()->CommandsRequested += ref new TypedEventHandler<SettingsPane^,SettingsPaneCommandsRequestedEventArgs^>(

&MyApp::OnCommandsRequested );

More charms (Settings)using namespace Windows::UI::ApplicationSettings;void MyApp::OnCommandsRequested(SettingsPane^ settingsPane, SettingsPaneCommandsRequestedEventArgs^ args){ UICommandInvokedHandler^ handler = ref new UICommandInvokedHandler(this, &Scenario::onAudio);

SettingsCommand^ audioCommand = ref new SettingsCommand("audioPage", "audio", handler);

// Make it visible args->Request->ApplicationCommands->Append(audioCommand);

// Add additional settings ...}

More charms (Settings)void Scenario::OnAudio(IUICommand^ command) { // Draw audio settings using Direct2D ...}

Source code from App Settings Sample on MSDN

Saving dataWindows::Storage::ApplicationData for app data

Use File I/O or cloud services for big data

If the app crashes, don’t load this data!

Data physically at %localappdata%\packages

Saving to local hard driveauto settingsValues = Windows::Storage::ApplicationData::Current->LocalSettings->Values;float m_time = safe_cast<IPropertyValue^>(

settingsValues->Lookup(“time") )->GetSingle();settingsValues->Insert(“time", PropertyValue::CreateSingle(m_time));

Saving to the cloudauto settingsValues = Windows::Storage::ApplicationData::Current->RoamingSettings->Values;float m_time = safe_cast<IPropertyValue^>(

settingsValues->Lookup(“time") )->GetSingle();settingsValues->Insert(“time", PropertyValue::CreateSingle(m_time));

// See Build 3-126, “The Story of State” by Kraig Brockschmidt

Making money

Select a time period for your trial

Let the Windows Store handle the rest

Handling trials

Using the Windows Store APIStore API is in Windows::ApplicationModel::Store

Use CurrentApp::LicenseInformation to check trial information

When testing, use CurrentAppSimulator

Check out the following resources for more information:Build 3-121, “Making money with your app on the Windows Store” by Drew Robbins“Monetization Strategies for Windows 8 Games” by Shai Hinitz from GDC 2012

Demo

Marble Maze

Time to codeGet Windows RTM trial and Visual Studio 2012 from dev.windows.com

Get going quickly with the templates

Understand where the fundamentals fit in

Try adding Windows Store features to the templatesLive tilesToastAppBar/EdgeGestureSaving data locally and to the cloudFeatures that can help you make money (for example, trials and in-app purchases)

Previous talks“Combining XAML and DirectX in Windows Store apps” by Jesse Bishop“Monetization Strategies for Windows 8 Games” by Shai Hinitz

Other resources at //BuildCheck out the graphics talks (Build 3-112 and 3-113)Build 3-101 for more info about live tiles and toastBuild 3-126 for more info about app stateBuild 3-121 for more info about how to make money

Resources

Please submit session evals on the Build Windows 8 App or at http://aka.ms/BuildSessions

• Develop: http://msdn.microsoft.com/en-US/windows/apps/br229512

• Design: http://design.windows.com/

• Samples: http://code.msdn.microsoft.com/windowsapps/Windows-8-Modern-Style-App-Samples

• Videos: http://channel9.msdn.com/Windows

Resources

Please submit session evals by using the Build Windows 8 appor at http://aka.ms/BuildSessions

© 2012 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.