Developing an app with the Visual Studio 3D Starter Kit, part 3 of 3

Welcome back to our third and final post on using the Visual Studio 3D Starter Kit! If you read our previous posts in this series (here and here), you’ve got an app that has an animated die, and you’re ready to make the last few changes to get this app to run on Windows RT devices and Windows Phone 8.

If you haven’t read the previous posts, you may want to go through these posts and create an app – we’ll be here once you’re ready.

If you're more of a visual learner, you might prefer following Part 1 and 2 in our new Channel 9 video! In less than 30 minutes you'll go from zero to jumping dice!

Final steps for Windows RT

Since current Windows RT devices have a graphics card with D3D_FEATURE_LEVEL_9_1 and the Visual Studio Graphics tools generate shaders for graphics cards with D3D_FEATURE_LEVEL_10_0 and above, there’s one small extra step that has to be done for this app to run on Windows RT: we need to generate a version of the shaders to be compiled for the correct feature level.

To do that, open your mesh (Die.fbx) and click the cube. On the Properties tool window look for a property called Effect. Click the “+” button to the left of that property and select the (Advanced) value. Finally, click the “…” button to open the shader source for the Phong effect.

What you see now is the default shader that Visual Studio applied to this mesh, displayed in the Visual Studio Shader Designer. The Shader Designer allows you to build complex visual effects without the need to learn a new programming language. To learn more about the Shader Designer, check the documentation and walkthrough on MSDN.

What we want to do with this shader is export it to HLSL in order to be able to re-compile it for Direct3D Feature Level 9 graphics cards. The Starter Kit will automatically look for a fallback shader with the same name as the original in case the device does not support D3D Feature Level 10 or higher.

To export this shader, go to the last icon in the toolbar (Advanced) -> Export -> Export as… (see figure below) and save it as “Phong.hlsl” in your Assets folder. Then, add the file to the project by right-clicking the Assets folder on Solution Explorer -> Add -> Existing item… and selecting the file we just exported.

Finally, we need to tell the HLSL compiler that this file is a Pixel Shader. To do that, right-click “Phong.hlsl” on your Solution Explorer and choose Properties. On the Properties page, make sure the “Configuration” drop down is set to “All Configurations” and the “Platform” drop down is set to “All Platforms”, so that the changes we make are applied to all versions of our app.

Then, on the “HLSL Compiler” page, change the Shader Type property to “Pixel Shader (/ps)” and make sure to enable optimizations (set the Disable optimizations property to "No"), like the figure below:

Another change you should make before releasing the app for Windows RT is to make sure snap view and portrait mode work as expected. In this case, all we did was to make sure the camera stayed on the same orientation when we change the view, by deleting the following line on the CreateWindowSizeDependentResource() method on Game.cpp:

You can download the project at this state on CodePlex (direct download link below).

Porting it to the Windows Phone

Using the Starter Kit with support for Windows Phone, porting this app to Windows Phone 8 is a breeze. All you have to do is get the Starter Kit, replace the Game.cpp and Game.h classes by the ones you created for this app, add all your assets (in this case, Die.fbx, DieTexture.png and Phong.hlsl), and change the XAML codebehind to call RollDie() when the screen is tapped. Let’s go over this in a short step by step:

In the StarterKitPhoneComponent project, delete the Shared/Animation folder and delete all the assets from the Shared/Assets folder.

Replace the Game.cpp and Game.h files by the ones you created in this tutorial.

Add all the assets used in your game to the Shared/Assets folder in the StarterKitPhoneComponent project: Die.fbx, DieTexture.png and Phong.hlsl.

For Phong.hlsl, on the Properties page, make sure the “Configuration” drop down is set to “All configurations” and the “Platform” drop down is set to “All Platforms”. Then, on the “HLSL Compiler” page, change the Shader Type property to “Pixel Shader (/ps)” and set the Disable optimizations property to ”No”.

In Direct3DBackground.cpp/.h, remove the unused methods: ToggleHitEffect() and ChangeMaterialColor()

In Direct3DBackground.cpp, add the following to the OnPointerReleased() method:

Add sensor support to allow the dice to be rolled by shaking the device

Add sound when the dice are rolled

Use the dice roller to implement a board game or a casino simulator…

Wrapping up

In this blog series you saw how to create a 3D app for Windows 8, Windows RT and Windows Phone with the Visual Studio 3D Starter Kit, sharing all the app logic and assets between all platforms. You also learned a little bit about the Visual Studio Graphics tools, and discovered that creating a 3D app is not a mysterious task – you can start without a deep knowledge of 3D modeling, complex math and HLSL, and learn new concepts at your own pace.

We’d love to hear feedback about this walkthrough, the Visual Studio 3D Starter Kit, or what you’d like to see in the future from Visual Studio for graphics development. Leave us a note in the comments!

Very special thanks to Jennifer Leaf for co-authoring the articles and beta-testing the code. Special thanks to Golnaz Alibeigi for all the help with the video, and Bruno Sonnino and Eric Battalio for reviewing the blog posts.