From Android or iOS: Bringing your OpenGL ES game to the Windows StorePhil Napieralski, Doug Erickson, Richard McKinneyProgram Manager, Senior Content Developer, CTO Halfbrick3-189

Getting started

Bringing OpenGL ES 2.0 to DirectX

Case Study by Halfbrick

Agenda slide

Getting started

Choosing your languageWindows Store games

C++ and DirectX supportUse C# with DirectX through third-party

librariesOptionally combine with XAML for UI

Similar to AXML on Android or UIKit on iOSCan have separate view frameworks

XAML + DirectX for menu screenPure DirectX for in-game graphics screen

DEMO: Getting started with Visual Studio

Doug Erickson

Bringing OpenGL ES 2.0 to DirectX

OpenGL ES 2.0Retains a few fixed-function artifactsVendor-specific, can be extendedLanguage-specific API implementations (C, Objective-C, Java)Targets mobile platforms only

Direct3DVendor agnostic, no extensionsTargets all current Windows platformsMS-only

Most of your effort is spent understanding the Windows Runtime and Windows platform programming conventions.

Overall: Not so different!

Same scene, different perspectives

More detailed hardware resource APIsDXGI and Direct3D allow for more low-level configuration

and resource tweakingAPI abstraction level

APIs are expressed as “interfaces” and “resources” Graphics device is represented as an abstracted interface

Code and programming model changesReview and use the VS 2013 DirectX templatesUse IAsyncOperation::Completed event or PPL “task”GLSL->HLSL

What do I have to worry about?

OpenGL ES 2.0/Direct3D and DirectX graphics interfaces

Create an EGLDisplay and

EGLSurfaceGet an

EGLContext;Create and attach

shaders to program; populate buffers

Draw the graphics to the EGLSurface with EGLContext!

Obtain a swap chain from DXGI and attach

it to a CoreWindow

Get an ID3D11Device and

ID3D11DeviceContext

Create shaders and buffers with

ID3D11Device; set on ID3D11DeviceContext

Draw the graphics to a back buffer with

ID3D11DeviceContext!

OpenGL ES 2.0:- Get an EGLDisplay- Select an EGLConfig- Get an EGLSurface- Get an EGLContext; associate it with EGLSurface for rendering

Direct3D call flow: - Acquire the CoreWindow from the app object- Call D3D11CreateDevice to create a D3D device and device context- Get a DXGI factory from D3D device to create a swap chain for the CoreWindow- Get back buffer from swap chain and provide to D3D device as render target

Short form: Use the Visual Studio 2013 Preview templates!

EGL to DXGIRead the docs here:

Compare EGL to DXGI and Direct3D

ID3D11Device2Obtains and manages GPU resourcessee: glCreateShader, glBufferData, glGenBuffers,

glTexImage2D, etcNo concept of shader programs! (see

ID3D11DeviceContext2)

ID3D11DeviceContext2Configures and manages your rendering pipelinePerforms the rendering commandsConfigures shaders directly with resources from

ID3D11Device APIssee: glAttachShader, glGetUniform*, glDrawElements

Get things from ID3D11Device to use when configuring ID3D11DeviceContext

Porting to a Direct3D 11 framework

Resource: an object used by the GPU, such as a texture, vertex buffer, index buffer, or constant buffer. Subresource: a part of a larger structured resource, for instance a single mipmap out of a 2D texture, or a single face of a cubemap.

View: a way for the GPU to interpret the resource.

Resources

OpenGL ES 2.0 Direct3D

uniform constant buffer (cbuffer) field

attribute ID3D11Buffer as vertex/index buffer

buffer object ID3D11Resource child type (ID3D11Buffer, ID3D11Texture2D, etc.)

back buffer ID3D11Texture2D used by render target and supplied to swap chain (surface resource)

resource

subresource

subresource

ID3D11Resource

D3D11_SUBRESOURCE_DATA

D3D11_SUBRESOURCE_DATA

ID3D11Texture2D

MIP Level 0

MIP Level 1

OpenGL ES 2.0:glGetUniformLocationglUniform* (e.g. glUniformMatrix4fv, glUniform4fv…)Shader: declare with uniform keyword

Direct3D 11:CD3D11_BUFFER_DESC with

D3D11_BIND_CONSTANT_BUFFERID3D11Device::CreateBuffer()1 struct for CPU code; 1 cbuffer for shader code (see left)Shader: declare with cbuffer keyword (and register)Update on context with:

ID3D11DeviceContext->UpdateSubresource()supply buffer and buffer data

cbuffers:- Must be 16-byte (4 float)

aligned, so use DxMath types

- Use for your transformation matrices!

- Should only be updated when the data changes

C++ codestruct TRANSFORMS{ XMFLOAT4x4 modelView; XMFLOAT4x4 modelViewProj; XMFLOAT4x4 inverseModelView;}HLSL codecbuffer Transforms : register(b0){ matrix ModelView; matrix ModelViewProj; matrix InverseModelView;}

UniformsConstant buffers

OpenGL ES 2.0:Map loc to GLSL attrib name with glGetAttribLocationLast: glVertexAttribPointer/glEnableVertexAttribArrayIndex: pass list (or buffer) to glDrawElements()

DirectX 11:Create a struct for your vertex data (use DirectXMath types!)Create two arrays: 1 for vertices; 1 for indicesCreate an input layout with ID3D11Device::CreateInputLayout()

+ specify your non-SV semantics! (more later)Call ID3D11Device->CreateBuffer()

HLSL: create shader input structs (with semantics!) that matchMAKE SURE ORDER AND SEMANTICS IN LAYOUT MATCH HLSL

STRUCT

- OpenGL – RH coords- D3D – ambidextrous - Use DirectXMath matrix functions!

C++ codestruct VERTEXDATA{ XMFLOAT4: pos; XMFLOAT4: normal; XMFLOAT2: uv;}

HLSL codestruct VertexShaderInput{ float4 pos: POSITION0; float4 normal: NORMAL0; float2 uv: TEXCOORD0;}

Attributes->Vertex Buffers w/ Input Layout

Texture APIs:OpenGL ES 2.0:

glGenTextures, glBindTexture, glTexImage2D, glCompressedTexImage2D, glTexParameter*,

DirectX 11: D3D11_TEXTURE2D_DESC ID3D11Device::CreateTexture2D

->ID3D11Texture2D* do the same for ID3D11SamplerState *

D3D11_SHADER_RESOURCE_VIEW_DESCID3D11Device::CreateShaderResourceView

->ID3D11ShaderResourceView

GLSL: sampler2d type, texture2d to readHLSL: Texture2D type, Texture2D + SamplerState

to read- use t and s registers!

TexturesTexture compression formats:OpenGL ES 2.0:

ETC (PVRTC for iOS)

DirectX 11: DDS w/ BC* (see feature level)Need to convert from original

assets!

--HLSL declaration:

Texture2D SimpleTexture : register(t0);SamplerState SimpleSampler : register(s0);

Texture2D NormalTexture : register(t1);SamplerState NormalSampler : register(s1);

OpenGL ES 2.0:Compiled at runtimeUses “shader program”

DirectX 11:Compiled as .CSO files at compile

timeNew for 8.1! Link shader at run-timeNo concept of high-level “shader

program”

Input Assembly:ID3D11DeviceContext::IASetVertexBuffersID3D11DeviceContext::IASetIndexBuffers

Vertex Shader:ID3D11DeviceContext::VSSetShader()

ID3D11DeviceContext::VSSetConstantBuffers()

Pixel Shader/Fragment Shader:ID3D11DeviceContext::PSSetShader()

ID3D11DeviceContext::PSSetConstantBuffers()

ID3D11DeviceContext::PSSetShaderResources()

NOTE:Make sure you specify the register slot when setting buffers and resources!

Shaders

All input/output between stages must have a semanticMap value passed from one stage to another, interpolated, etc.No specific meaning to GPU (unless SV_)Example

normal: MYCOOLNORMAL0;uv: MYAMAZINGTEXCOORD0;

“SV” semantics are like GL intrinsicsBehavior depends on shader stageModified by GPU (rasterization)Examples:

position : SV_POSITION;

Use shader analysis tools / count instructions

GLSLHLSLGL Intrinsic->SV Semantic examples:

gl_Position = SV_Positiongl_FragColor = SV_Targetgl_FragData[n] = SV_Target[n]

Registers! - b[0-n] for buffers - t[0-n] for textures - s[0-n] for samplers

MSDN: Port your OpenGL ES 2.0 game to DirectX 11

MSDN: DirectX graphics and gaming portal

MSDN: Developing games portal

Further guidance

Demo: A quick look at porting OGLES2!

Richard McKinneyCTO – Halfbrick Studios

Porting to Windows 8Build 2013

Windows Store ecosystemGeneral tips and tricksPerformance hints

Agenda

Windows Store app ecosystemMuch like Android, there’s a wide range of devices you should try to support for Windows Store apps (anything that runs Windows 8). Luckily there’s only one marketplace.

You can have a 1 GHz netbook with 1 gig of RAM running your game and your users still expect it to run well. Try to hit as many targets as you can.

Target a wide range of devices when testing, from the more power efficient netbooks and Surface RT tablets to higher spec x86 tablets and a beefy desktop PC.

Windows Store app ecosystemYou should have profiling code that runs at startup to fine tune performance to the system it’s run on (if needed).

You don’t generally see complex graphics options menus in iOS and Android games. Determine what works best by profiling and maybe allow for some overrides for graphically intensive titles.

When we ported our games, there was no support for consumable In-app purchases on the Windows Store. You can get around this by designing your IAP system around 24 hour expiring durables, or having multiples of the same item.

Store certification tips (or why you’ll fail cert)The certification processes for Windows Store apps are pretty intense. They do a huge amount of checks that other stores don’t do.

Run the Windows App Certification Kit (WACK) tool on your game periodically. Fix up any failures it reports as soon as you can. This is step 1 when you submit, so you’ll find lots of potential problems early.

The WACK tool doesn’t scale correctly across devices. Run it regularly on your lowest spec device.

You must have a privacy policy in your game or you’ll fail certification.

Store certification tipsCreate your game on the Windows Store dashboard early on. You’ll see that there’s a huge number of fields to fill out, so go through each section and make sure you are prepared to answer those questions.

Be prepared to translate everything on the Description page for every language your app manifest declares you support. We’ve failed cert before due to non-localized screenshots.

Judiciously use the notes to testers fields. I never delete old notes and put the new notes up top. Heck, I even put my phone number in there (sadly they’ve never called).

Windows Phone 8If you’re looking to support Windows Phone 8 alongside Windows 8, you need to look at the differences between them early on. They’re not as similar as the documentation suggests.

If you’re just starting out now, you may want to start with Windows Phone 8 because lots of things that work on the phone work on Windows 8, but not vice-versa.

For Windows Phone 8, test on a low spec Lumia 520/620 early. They’re quite popular, but have much lower memory. You don’t want to have to opt out of these devices at the last minute.

Live tiles for user retentionLive tiles are the best time investment in terms of platform specific features. Make sure you create an engaging live tile to draw users back into your game.

Our tiles in Fruit Ninja and Jetpack Joyride are drawn in game with render to texture for dynamic content custom to your progress. We save those textures out and reference them in the tile notifications, trying to entice players back into the game for just one more run.

Tips, tricks and adviceYou MUST supply shaders that are built for Shader Model 4 Level 9_1 at minimum. Failure to do this causes your game not to run on low- end devices. Go as high as you want, but start there!

Make sure your game supports multiple aspect ratios. If you’re porting from Android/iOS+iPad, you likely already do. You’ll definitely need to expect 4:3 and 16:9 at least. Optimize your layouts for them.

Prefer using IAsyncOperation::Completed over PPL tasks. The samples all make it look easy, but you’ll actually want proper error checking!  We rewrote several things that used PPL tasks over time.

Tips, tricks and adviceDevelop a set of conversion routines from Platform::String to your more convenient string types early on.  You should only be using them inside the Windows 8 platform code.

Windows Store apps are highly multithreaded just by the nature of the asynchronous models. You’ll likely run into something that must be done on the main thread though. Store off your UI thread dispatcher at the very start of your IFrameworkView derivative’s Run() method, and then anything you supply to RunAsync() on it will be on your main thread.

Where’s my UI thread?// Save off the thread dispatcher in your IFrameWorkView's Run method:m_uiThreadDispatcher = CoreWindow::GetForCurrentThread()->Dispatcher;

// Use that dispatcher to run code asynchronously on the main thread:m_uiThreadDispatcher->RunAsync(Windows::UI::Core::CoreDispatcherPriority::Normal, ref new Windows::UI::Core::DispatchedHandler([=](){

// I'm on the UI thread!}));

Performance tipsBe careful about how often you query for device orientation if not using OrientationChanged events. It’s expensive and should only be done at intervals.

Prefer using DXGI_FORMAT_B8G8R8A8 over RGBA. The low spec devices won’t support RGBA and convert it at load time. For us, this was at least 500ms for nothing. For you it could be much more.

You need a splash screen animating while your game is initializing. You have almost no time to respond before the WACK tool fails you for being unresponsive. Either thread or chunk up initialization steps.

Performance hintsSome devices are extremely fill rate limited. You may need to scale your frame buffers dynamically based on your profiling results.

Test on multiple GPUs from the beginning! We made the mistake of reusing vertex buffers several times in a frame, calling DiscardResource on them. This worked perfectly until we found just before submitting that there were a few GPUs that still stalled the pipeline and knocked our performance down to < 1fps.

Always turn off touch visualizations!// This prevents a CPU spike every time the screen's touched

Windows::UI::Input::PointerVisualizationSettings::GetForCurrentView()->IsContactFeedbackEnabled = false;

Resourcesdev.windows.comPorting OpenGL ES 2.0 to DirectX11.1/Windows Store

Windows Phone 8 differences

XAML DirectX 3D Shooting Game Sample

What?• Are you interested

in having an impact on the future user experiences in Visual Studio? Come help us shape the future.

Give us your feedback!!When & Where?• Schedule a time

with us vsdr@microsoft.com

• Room 254 South

Moscone, West Mezzanine Level

Why?• Your input and

feedback will influence future Microsoft Visual Studio tools

Other related talks Title Session IDBuilding games for Windows 2-047What’s new in Direct3D 11.2 3-062Massive virtual textures for games: Direct3D Tiled Resources 4-063DirectX graphics debugging tools 3-141Bringing PC desktop games to the Windows Store 3-190Tales from the trenches: Developing “The Harvest” and “Gunpowder” with Unity 3-044Accelerating Windows Store Game development with middleware 2-187Bringing Halo: Spartan Assault to Windows tablets and mobile devices 2-049From Android or iOS: Bringing your OpenGL ES Game to the Windows Store 3-189Cutting edge games on Windows tablets 3-043Play together! Leaderboards with Windows Azure and multiplayer with Wi-Fi direct 3-051Innovations in high performance 2D graphics with DirectX 3-191

Evaluate this session

Scan this QR code to evaluate this session and be automatically entered in a drawing to win a prize!

© 2013 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.