Five months ago we highlighted the Visual Studio 3D Starter Kit, Getting started with C++/3D/WinStore Game Dev with the "Visual Studio 3D Starter Kit." Today we're going to highlight parts one and two of a three part series on developing a Windows 8 app with it...
As we promised a few weeks ago, welcome to the first post in a series where we’ll explore a full end-to-end app developed with the Visual Studio 3D Starter Kit. During this series we’ll develop a 3D dice roller that allows you to roll a 6-sided die by tapping or clicking it. In the process of rolling a number, the die will jump and flip in the air. This app will also work on Windows 8’s snap view, so that users can still roll dice while working on other apps. Finally, we’ll show you how to make this app compatible with Windows RT devices and port it to Windows Phone.
This first post will cover the basics of creating the app to the point where we can render the die to the screen and apply a texture. We’ll also review the Visual Studio Graphics tools, which are included in Visual Studio Professional or greater. If you only have Visual Studio Express 2012 for Windows 8, don’t worry, you’ll still be able to use this walkthrough.
The hardest part about learning Direct3D development is the need to learn many new concepts, such as coding HLSL shaders and how to convert meshes into runtime formats. There are many Visual Studio tools make this process much easier, letting you focus on your app logic instead of dealing with all those new concepts. And whenever you’re ready you can add more advanced features to your app without having to start over. Throughout this series, we’ve provided a number of links to additional documentation about DirectX features that we use, so you may want to follow these links to explore more about DirectX and graphics programming.
Let’s stop talking and start designing our app!
The demo app: a dice roller
Dice are used for a variety of board games and gambling. Making a simple dice roller app is an easy task in any programming language - a random number generator is only one line of code in many languages. But how can we make this app more interesting?
Starting with a clean slate
The first step to use the Visual Studio 3D Starter Kit is to download and open it. You can get the full Starter Kit from https://aka.ms/vs3dkit. We have also prepared a special version of the Starter Kit (Windows Store only) for this tutorial that starts with a completely blank screen with no 3D models, so we can explore how to create our own assets. You can get that version on CodePlex (direct download link on the tile below). This changeset also shows what has to be changed to remove all the content from the Starter Kit.
Note for Visual Studio Express users: You can download the assets used in this project by clicking the tile below. Just add them to your project at the appropriate points in the walkthrough below.
If you run this app, you’ll see the Starter Kit’s teapot splash screen, followed by an empty gray screen. Don’t worry, we’ll fill it up soon…
Let it roll, baby, roll
In order to make anything move in a graphics application, the steps are always the same:
- Set some state (e.g. a Boolean flag) to indicate that an animation should be running. This is also a good time to save the starting position and time of the animation if needed.
- In the Update method (called on every frame before rendering), calculate the object’s position/rotation/scaling (in 3D speak, transforms) using the time between the beginning of the animation and the current frame time. You must also make sure that when the animation ends the state is correctly updated to stop the animation.
- In the Render method, make sure that the transforms are correctly applied to each object.
In our case we will add a new method called RollDie() that will set the state and save the starting time. We will use this method to calculate each die roll result, but for now let’s just execute an animation that rotates the die from 1 to 6.
To create this animation we will need a set of variables to keep track of the cube’s transforms, as well as the animation time. We will create one Boolean value to signal that animation is running, one float to store the animation time, and three vectors to store the initial, final and current rotations of the cube. These vectors should be of type XMFLOAT3, to store the Yaw, Pitch and Roll rotations (see figure below).
So this completes our app functionality. It’s definitely a more useful and interesting version of the classic random number generator. You can download this version on CodePlex (direct download link on the tile below).
We only have a few more steps to finish in order to make this app run on Windows RT and Windows Phone as well! We’ll cover these steps in our third and last blog post. Stay tuned!
Keep an eye on the Visual C++ Team Blog for the final part...