Windows Phone Resources
On Tuesday, March 6th from 10:00 AM to 5:30 PM, Microsoft will be holding a session at the Game Developers Conference to introduce developers to the future of games and entertainment. They'll be doing deep dives on Xbox LIVE and Windows 8, where you can learn about how you can take advantage of Microsoft's vision for connected entertainment.
The primary audience for this Developer Day is professional developers who build games and entertainment applications for Xbox 360 and Kinect, Windows 8, Windows Phone, and the web. Developers will learn about the new Windows 8 Metro style application platform and new Xbox LIVE services that deliver breakthrough entertainment experiences across all of Microsoft's entertainment platforms.
This represents a huge opportunity for game and entertainment application developers to take advantage of the connections being built between the Xbox 360, Windows 8, Windows Phone, and the web. You can get more information about the Microsoft Developer Day by going to the GDC Tutorials page.
Starting today, students and faculty with access to the MSDN Academic Alliance will see a few new products available through their system. The most notable of these products in Windows 7 Professional edition, over two months before it’s available to the general public. I’ve been running Windows 7 since it was first made available in the public beta, and have been very impressed by it’s overall quality, including it’s speed and stability. I currently have four machines running Windows 7, my two work laptops, which are running the RTM Enterprise edition, and two netbooks, running the Release Candidate. I plan to pick up a copy of the RTM for my netbooks when general availability drops on October 22nd, but even the Release candidate is better than any Operating System I’ve run before (and yes, I have run multiple non-Windows OSes).
Also up on the MSDN AA page is Expression Studio 3. This includes Blend, Design, Web, and Encoder, all of which contain huge improvements from the previous versions. It’s hard to believe that the entire product sweet has been around for less than two years, seeing the quality of the releases. Some things to take a look at inside of Expression Studio 3 are behaviors in Blend (building games in Silverlight just became a lot easier), and the screen recording tool in Encoder. Encoder also supports AVCHD natively now, though you have to have a licensed version to do so. There’s also a preset in there for encoding for the Zune HD, which I have been waiting for patiently since I first heard about it.
If you don’t have access to MSDN AA, and you are a student or faculty member in a department that focuses on Science, Technology, Engineering, Math, or Design, let me know. I should be able to hook you up with the people to make it happen. And if you have MSDN AA, but you don’t see Windows 7 or Expression Studio 3, check with your administrator, or drop me a comment,and we’ll get that fixed, too. Just imagine rolling up to a buddies house and showing him the Silverlight game you built on your Windows 7 laptop. You know you want this. Go make it happen.
When you start with a new project in XNA, you get some starter code templated out to begin writing your game. In this article, I’m going to walk through what you get. I will be using Visual Studio 2010 Express for Windows Phone, and creating a Windows Phone Game project type. This article is the first in a series that will lead to the creation of the TriangleShooter game I mentioned before.
As you can see, the default solution contains two projects. The first project contains the code for your game, and is named whatever you select when you first create the project. In this case, I’ve named the project TriangleShooter, to go along with my game idea. The other project is named as the first project appended with Content, so in my case, TriangleShooterContent, and is a location to place all of your content including graphics, models, audio and video.
In the primary project, you’ll notice three graphics files. The Background.png file is the image that will be shown on the main page of the phone when you have pinned your application. The GameThumbnail.png will be displayed on the list of all applications installed on the phone to the right of the main page. The Game.ico is an icon used only for Games for Windows, and is not used for Windows Phone or Xbox.
Program.cs contains the entry point for your project. It’s actually not used in Windows Phone projects, just Windows and Xbox.
Game1.cs is where we will spend the rest of our time in this article. It gives you everything you need to get started with building a game. Let’s walk through the functions that come standard in a new project.
The constructor sets up your graphics object, which you will be using to access information about your viewport, orientation, set your game to full screen, and so on.
The initialize method is used for initializing any variables you have created for your game. My recommendation is to create a function that you will call that resets everything back to their initial values for a new game, which will allow you to just call that function on game reset, saving you from having to write code twice.
LoadContent allows you to bring anything over from the Content project. Typical examples include graphics files like PNGs that will come over as Texture2D, WAVs that come over as SoundEffect, and MP3s that will come over as Song (though you can use them for SoundEffect as well). If you are doing 3D development, you’ll also see files that represent models like X. You can also create custom pipeline projects. I’ll go through one of those in a future article I am working on around sprite sheet animations.
The spriteBatch that it is initializing is used when drawing 2D graphics and text onto the screen. We’ll be using this a lot.
The UnloadContent method is used for any special loading you did outside of the scope of the LoadContent method. I have actually never put anything into this method.
Update is the first of two methods, the other being Draw, that will be called over and over in your loop, alternating between the two. Update is where you will handle all of your user input, AI routines, anything that changes stuff around. When processing is taking longer than the 1/30th of a second that it should, Update will be called over Draw, which makes sense because if nothing gets updated, the Draw routine shouldn’t be any different than the last time it was drawn.
The code inside the block by default checks to see if the user is pressing the back button, and exiting the game if it is. The fact that it is written as if you are pulling state from the first player’s gamepad is actually a really cool thing about using XNA for multiple platforms. That one block of code works for Xbox, Windows, and Phone.
Draw is where you want to put everything that gets displayed on the screen. For a 2D game, you’re going to make a lot of calls to methods in the spriteBatch we initialized earlier.
The default code simply clears the screen with a beautiful Cornflower Blue. You can actually run the game now, and you’ll get a windows that looks like this:
I call it the Blue Screen of Life, because you know that everything is working.
Next up, I’ll walk through everything we need to get some basic gameplay.
Continuing on last week’s article, this week I’ll be showing you an updated way of handling movement using multi-touch. I’ll be starting with the code base from last week, so you can go ahead and get started by downloading that from my SkyDrive share.
At the end of last week, we had a triangle that was being drawn based on a Vector2 called position. position was being updated based on the TouchPanel state. This means that wherever you touch, that’s where the triangle goes. For some games, this is what we want. But what if you wanted to build a game where you had to navigate through a maze. You start on one side, touch the exit, and bang, you win. Instead, you might want to move towards the touch point. That’s what we’ll be doing here.
To begin, we need to calculate the difference between where we are now, and where we want to be. To do this, we just subtract the current position from the touch position. Let’s create a new variable in Update called direction, and set it equal to the difference. If we added position and direction, of course, we get the touch position, so changing the update we had to the following will give you the same results we saw earlier.
We don’t want to move directly to the new location, though, just in that direction. To do this, you can normalize the vector, which means that you create a new vector that points in the same direction as the original, but has a length of one. Once you’ve done that, we get the behavior we wanted.
You’ll notice, though, that you move very slowly. To increase the rate of movement, you can multiply the normalized vector.
If you have a multi-touch capable computer, or if you have a Windows Phone, you can see that putting more than a single finger on the screen makes the triangle move towards both of them. Ideally, we’ll want to set up a primary touch point, and only move towards that. Luckily, touch points are identified uniquely with an int called Id. If we set up an int to track it, let’s call it movementId, we can determine whether a touch point is it, and only move if it is.
We’ll define movementId up with the other variables:
And then modify Update down below. We’ll set the movementId on Pressed, and reset it on Released. If we didn’t reset it on Released, it would work once, then never again. It’s actually interesting to debug and check movementId each time you press on the touch panel. Each time, it increments by one. I’ve also added some code in here to prevent the wiggle you might see as the triangle jumps back and forth over the touch location. Here’s the updated code:
Now only the first finger down will cause movement.
You’ll notice that the triangle still just points in one direction though. That’s easy enough to address. The SpriteBatch Draw method has an overload that includes an argument of type float called rotation. If we set one of those up, we can pass that over. We’ll start by setting up a variable called rotation:
Then modify Update to get the rotation. We have a Vector2 we called direction, which gives us an X and a Y we can use to find an angle. If you look back at your time in trigonometry, you can remember SOH CAH TOA, Some Old Hippy Caught Another Hippy Tripping On Acid, Sine Opposite Hypotenuse, Cosine Adjacent Hypotenuse, Tangent Opposite Adjacent. Since we have X and Y, Adjacent and Opposite, we want to use Tangent. So tan(theta) = y/x, that means theta = arctan(y/x). We have to be careful here for two reasons. First of all, if X is zero, that’s division by zero, and that’s a problem. Second of all, there is a well known problem in finding out the origin quadrant of the original angle, basically, this means you don’t know the sign. I was given a solution to this when I was giving a presentation at one of the Windows Phone launch events in the Atan2 method. It basically handles all of that for you. So with that in mind, the Update code becomes:
And finally, we have to modify the Draw function to make use of the new rotation information. The arguments it asks for are:
And we’re good to go. Next week, I’ll show how collision works.
Download the latest version of the source code
The new release of Expression Blend 3 comes with a great new feature called SketchFlow. SketchFlow allows you to rapidly create a prototype of your application that can be used to get buy-in from clients, and to get feedback on the design of the system without worrying on the details like which fonts you chose and the exact shade of blue your logo should be. One of the tools in the arsenal of SketchFlow is the Sketch Styles, formerly known as wiggly controls. The Sketch Styles give a real back of the napkin feel to your application, and really convey the idea of the fact that what you’re showing them is not complete. It helps to avoid those moments where you show your client your design, and get the response, “Looks great, let’s ship it.”
When I first saw SketchFlow, I fell in love with the sketch styles. I wanted to use them in the Silverlight applications I was already working on, and had taken beyond the prototype stage. If you look in the User Guide inside of Blend, you can see an entry that shows you how to convert a SketchFlow application into a production project, but if you’re just interested in getting the Sketch Styles into your application, it is possible. For this example, I’ll be using a Silverlight application in the full version of Expression Blend 3. The process was a bit more difficult with the Release Candidate, but you should have upgraded by now anyway.
The first step in getting Sketch Styles into your Silverlight application is to open a new Silverlight 3 SketchFlow Application, and the Silverlight 3 application you want to add the Sketch Styles to. If you don’t have an application you’re already working on, you can just start a new Silverlight 3 Application + Website.
In the SketchFlow application, you’ll need to copy over the Fonts directory with the three fonts contained within, and the SketchStyles.xaml file. You’ll also need to add references to the Microsoft.Expression.Prototyping.SketchControls.dll and System.Windows.Controls.dll. By default they’ll be in your C:\Program Files\Microsoft SDKs\Expression\Blend 3\Prototyping\Libraries\Silverlight and C:\Program Files\Microsoft SDKs\Silverlight\v3.0\Libraries\Client directories, respectfully.
Once you’ve got those over, you’re done! Have fun with your Sketch Style enabled Silverlight application.