Phil Napieralski Program Manager 3109 Fundamentals DirectX What is XAML Why interop More fundamentals C Registering events Windows Store app features Making money Agenda Graphics language of choice ID: 639535
Download Presentation The PPT/PDF document "Developing a Windows Store app using C ..." is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Slide1
Developing a Windows Store app using C++ and DirectX
Phil Napieralski
Program Manager
3-109Slide2
Fundamentals (DirectX)
What is XAML? Why
interop?More fundamentals (C++)Registering eventsWindows Store app featuresMaking money
AgendaSlide3
Graphics language of choice
HTML5, JavaScript and CSS3
C# or Visual Basic .NET and XAMLImmersive 3D using DirectX 11.1
Combination of DirectX 11.1 and XAMLSlide4
Fundamentals (DirectX)Slide5
DirectX fundamentals
Set up Direct3D device and context
Use the Direct3D device structure for low-frequency operationsUse the Context structure for high-frequency operations
Set up
your
shaders
Set up the swap chainSlide6
D3D11CreateDevice(
/* … */
&device,
//
Returns the Direct3D device created.
&m_featureLevel,
// Returns feature
level of the device.
&context
// Returns the device immediate context.)
The Direct3D deviceSlide7
struct
SimpleVertex
{
XMFLOAT3
pos;
XMFLOAT3
color;
};// Create the shadersm_d3dDevice->CreateVertexShader( … );m_d3dDevice->CreatePixelShader( … );// Define the input to the vertex shaderm_d3dDevice->CreateInputLayout( … &vertexShaderByteCode, &layoutdesc, … );
ShadersSlide8
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...Slide9
Without XAML
dxgiFactory->
CreateSwapChainForCoreWindow( m_d3dDevice.Get(),
reinterpret_cast<IUnknown*>(window),
&
swapChainDesc,
nullptr
, &m_swapChain) The swap chain
With XAML (SwapChainBackgroundPanel)
dxgiFactory->
CreateSwapChain
ForComposition
(
m_d3dDevice.Get(),
&swapChainDesc,
nullptr
,
&m_swapChain
)
// Get XAML element into
ComPtr
<
ISwapChainBackgroundPanelNative
>
...
// Set its swap chain ...Slide10
What is XAML? Why interop?Slide11
In-box controls for Windows Store apps
App bar
List box
Hyperlink
Check box
Progress bar
Text box
Password
Progress ring
Tooltip
Grid
Button
FlipView
Combo box
Scroll bar
Context menu
Slider
Toggle switch
Semantic Zoom
Panning indicator
Rating
ListView
Flyout
Radio button
Clear button
Reveal button
Spell checkingSlide12
To XAML or not to XAML?
XAML interoperates nicely with DirectX in
various scenariosCombine ease of XAML for 2D, power of DirectX for 3D
Make the XAML
interop
decision up frontSlide13
Demo
Comparison: DirectX vs. XAMLSlide14
SwapChainBackgroundPanel
Example: XAML for UI/HUD, Direct3D for graphics
XAML interop scenarios
See
XAML DirectX 3D shooting game sample
on MSDNSlide15
SurfaceImageSource
Example: Use DirectX inside a XAML element
XAML interop scenarios
See
XAML SurfaceImageSource DirectX Interop Sample
on
MSDNSlide16
VirtualSurfaceImageSource
Example: Bing maps for the Windows Store
XAML interop scenarios
See
May talk by Jesse Bishop, “
Combining XAML and DirectX in
Windows Store
apps
”Slide17
More fundamentals (C++)Slide18
CoreWindow and IFrameworkView
CoreWindow
Replacement for Win32 hWndManages screen layoutProvides app input
Using event handler model
IFrameworkView
Effectively the new App Object
class
Enables
OS to initialize app, deliver core OS resources
You will implement 5
methodsSlide19
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
Uninitialize
SetWindowSlide20
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 methodsSlide21
Registering eventsSlide22
Where to register events
Initialize method
Application-wide eventsExample: Suspend and resumeSetWindow method
App window-specific events
Example: Window-size-changed and input eventsSlide23
There are many events
Suspend
ResumePointerPressedPointerMovedKeyDownKeyUp
SizeChanged
…Slide24
m_window->SizeChanged +=
ref
new
TypedEventHandler
<
CoreWindow
^,
WindowSizeChangedEventArgs
^> ( this, &Framework::OnWindowSizeChanged );
Registering the SizeChanged eventSlide25
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 eventSlide26
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) eventsSlide27
Get going quicklySlide28
Getting started
Use the Visual Studio 2012 templates for a quick start
Direct3D template for pure C++ and DirectXDirect2D template for added XAML support
Reference the samples
Need a feature? Copy and paste from the corresponding sample!
Use the documentation at
dev.windows.comSlide29
Demo
TemplatesSlide30
Windows Store app featuresSlide31
Live tiles
using
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 MSDNSlide32
Using templates for binding
tileXmlString
=
"<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 MSDNSlide33
Toast
using
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
);
Slide34
Scheduled toast
toastXml->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!Slide35
App bar and edge gestures
In C++,
EdgeGesture->Completed event fires in three cases
Swipe up from bottom (or down from top) of touch screen
Windows logo key+Z on keyboard
Right mouse button click
Draw app bar using Direct2DSlide36
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 eventSlide37
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!“);/* … */
});Slide38
Charms (Settings)
using
namespace
Windows::UI::
ApplicationSettings;
SettingsPane
::GetForCurrentView()->CommandsRequested +=
ref
new TypedEventHandler<SettingsPane^,SettingsPaneCommandsRequestedEventArgs^>( &
MyApp
::OnCommandsRequested
);Slide39
More charms (Settings)
u
sing namespace
Windows
::UI::
ApplicationSettings;
v
oid
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 ...
}Slide40
More charms (Settings)
void
Scenario
::OnAudio(
IUICommand
^
command
) {
// Draw audio settings using Direct2D ...
}Source
code from
App
Settings
Sample on MSDNSlide41
Saving data
Windows::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%\packagesSlide42
Saving to local hard drive
auto
settingsValues =
Windows::Storage::
ApplicationData
::Current-
>
LocalSettings
->Values;float m_time = safe_cast<IPropertyValue^>(
settingsValues-
>Lookup
(
“time"
)
)->
GetSingle
();
settingsValues->Insert
(
“time"
,
PropertyValue
::
CreateSingle(m_time)
);Slide43
Saving to the cloud
auto
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 BrockschmidtSlide44
Making moneySlide45
Select a time period for your trial
Let the Windows Store handle the rest
Handling trialsSlide46
Using the Windows Store API
Store API is in
Windows::
ApplicationModel
::Store
Use
CurrentApp
::LicenseInformation
to check trial information
When testing, use CurrentAppSimulatorCheck 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 2012Slide47
Demo
Marble MazeSlide48
Time to code
Get 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 templates
Live tiles
Toast
AppBar/EdgeGesture
Saving data locally and to the cloud
Features that can help you make money (for example, trials and in-app purchases)Slide49
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 moneyResourcesPlease submit session evals on the Build Windows 8 App or at http://aka.ms/BuildSessionsSlide50
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/WindowsResourcesPlease submit session evals by using the Build Windows 8 appor at http://aka.ms/BuildSessionsSlide51