Posts
  • File → New Project

    Sketch Styles without SketchFlow

    • 1 Comments

    SketchStyles

    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.

    Prototype and Application 

    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.

    Required Files and References

    Once you’ve got those over, you’re done! Have fun with your Sketch Style enabled Silverlight application.

  • File → New Project

    Microsoft Kinect Presentation at FDG 2010

    • 3 Comments

    stickerKinectConsole

    I just got out of a presentation on the Kinect (formerly Project Natal) at the Foundations of Digital Games 2010 conference in Monterey, California. This is the second time I’ve seen the Kinect in action, and it’s come a long way. The demonstration started with an overview of the platform, including the traditional camera, depth sensor and microphone array. They showed a visualization software showing what the camera saw and how it mapped that into a game ready skeleton, and then onto the in-game avatar.

    They showed three of the launch titles: Kinect Adventures, Kinect Joyride, and Kinectimals.

    In Kinect Adventures, they showed three minigames: a rafting game, an obstacle course, and a modified and improved version of the Ricochet game showed off in a few venues. The main concept they were showing off was that the games had intuitive controls. They showed some videos they had where they filmed themselves making actions that they thought should be used to control the game, and determined how fun the game would be. They also spoke on the idea of the drop in/drop out mechanic, and how it they encourage multiple players without the need to return to a menu or interrupt their game.

    Kinect Joyride showcased natural gestures. The presenter brought up the idea of everyone understanding the movements related to driving a car. They then went on to talk about how during the development of the game, they found that there were certain gestures that naturally emerged, like leaning into a turn, and how they implemented these in game as gestures that controlled drifting or stunts to give the player extra points.

    boxanimalsThe last game that they showed was by far the cutest. It’s also the game that I think would get the most play at my house, as I’m sure that my daughter would end up spending a good amount of time playing with her virtual pet cat. They showed an RPG element in teaching your pet tricks like jumping, standing on their hind legs, and playing dead. This skill then translated into an obstacle course, where your actions were translated into the actions of the Kinectimal.

    One common thread between all of the games was that the interaction to the game was both natural, and very active. I’ve played a lot with the Wii, and even games like Wii Fit didn’t get me moving at much as the Kinect demo showcased. I’m really looking forward to the launch in November.

    One downside, though, was that someone asked a question about the availability of using the Kinect through XNA. The answer given was that the current access to the Kinect for developers is through the full development kit. I’m hoping that we’ll see XNA developer access once the Kinect launches, as that will give me an even stronger reason to pick one up.

  • File → New Project

    Using Multi-Touch for Movement (TriangleShooter)

    • 2 Comments

    Welcome to the second post in the series building TriangleShooter. In this post, I will be going over drawing a sprite to the screen, then moving it around using multi-touch. In the last post, I described what you got from File –> New Project, so we didn’t have any code as such as our starting point. This means that we’ll be starting from a new project named TriangleShooter. To make this happen, open “Microsoft Visual Studio 2010 Express for Windows Phone” from the start menu and selecting File –> New Project. From the New Project dialog that comes up, choose XNA Game Studio 4.0, pick Windows Phone Game (4.0), change the name at the bottom of the dialog to TriangleShooter and click OK.

    image

    This will get you the solution we went over last time, including two projects, TriangleShooter and TriangleShooterContent. We need to add a graphic that we will draw to the screen, so we’ll start by adding that into the Content project. I’ve added the Triangle graphic to SkyDrive, so you can grab that now. Once you’ve got that, we’ll add it into the project by right clicking on the content project, and choosing Add –> Existing Item…

    image

    Navigate to wherever you extracted the Triangle.png file, select it, and click Add. It should pop up under the Content Project. You can also drag and drop into the content folder if you prefer that. At this point, let’s take a look at some of the properties of the newly added Triangle.png file. To do this, right click on the file in the solution explorer and select properties. This should pop up the properties window beneath the solution explorer.

    image

    By default, a few things are set here based on the file type. The most important one to look at is the Asset Name. That is how you will refer to the file in code when we load it. Also important are the Content Importer and Processor. These determine how the file will be treated inside of the application. In this case, it is being handled by the Texture pipeline, but you could make use of a custom importer and processor, something I’ll take a look at in a future post.

    So now that we’ve got the file included in the content project, we’ll need to draw it. To begin with, we’ll create a variable to store the texture. The type will be Texture2D, and we’ll name it triangle. Place the following code inside of the Game1 class beneath the SpriteBatch declaration, so it looks like this:

    Adding a variable for triangle
    1. public class Game1 : Microsoft.Xna.Framework.Game
    2. {
    3.     GraphicsDeviceManager graphics;
    4.     SpriteBatch spriteBatch;
    5.  
    6.     Texture2D triangle;

    Next, we need to load this content into the variable. Since we’re loading content, we’ll use the LoadContent method. Inside of LoadContent, we need to make use of the templated Content.Load method, bringing over a Texture2D with an asset name of Triangle, and put that into triangle.

    Loading triangle
    1. protected override void LoadContent()
    2. {
    3.     // Create a new SpriteBatch, which can be used to draw textures.
    4.     spriteBatch = new SpriteBatch(GraphicsDevice);
    5.  
    6.     triangle = Content.Load<Texture2D>("Triangle");
    7. }

    Finally, we’ll need to draw it. Naturally, we’ll do this in the Draw method. We’ll make use of the SpriteBatch, which allows you to queue up a bunch of draw commands for efficiency. It does this by requiring a call to Begin at the beginning, and End when you’re done. Between those calls come all of your drawing code. The SpriteBatch’s Draw function is highly overloaded. We’ll use the overload that takes a Texture2D, a Vector2, and a Color. The Texture2D is what you want to draw, the Vector2 is where you want the top left corner of the graphic to be, and the Color is a tint applied to the graphic. In this case, we’ll draw the triangle, draw it in the top left of the display, and tint it white, which won’t change the color.

    Drawing the Triangle
    1. protected override void Draw(GameTime gameTime)
    2. {
    3.     GraphicsDevice.Clear(Color.CornflowerBlue);
    4.  
    5.     spriteBatch.Begin();
    6.     spriteBatch.Draw(triangle, Vector2.Zero, Color.White);
    7.     spriteBatch.End();
    8.  
    9.     base.Draw(gameTime);
    10. }

    If you run the code now, this is what you’ll see:

    image

    Looks good! There are a couple of changes we should make before going any further, though. First of all, I want this application to be full screen. To do this, I’ll add a line of code to the constructor, telling it that I want the graphics to be displayed in full screen mode.

    Switching to Full Screen
    1. public Game1()
    2. {
    3.     graphics = new GraphicsDeviceManager(this);
    4.     Content.RootDirectory = "Content";
    5.  
    6.     graphics.IsFullScreen = true;
    7.  
    8.     // Frame rate is 30 fps by default for Windows Phone.
    9.     TargetElapsedTime = TimeSpan.FromTicks(333333);
    10. }

    Secondly, let’s change the background color to black. It adds a more spacey feel to the game. We’ll just change the line of code that clears the screen down in the Draw method to clear using Color.Black instead of Color.CornflowerBlue.

    Clearing the Screen with Black
    1. protected override void Draw(GameTime gameTime)
    2. {
    3.     GraphicsDevice.Clear(Color.Black);

    Now when you run the program, it looks a bit better:

    image

    For the last bit of this post, I’ll show you how to make the Triangle move around using multi-touch. We’ll start by adding another variable to the class to track position, called position. It will be of type Vector2, to hold the top left of the graphic. We’ll put it directly after the declaration of the triangle, like so:

    Adding the position Variable
    1. Texture2D triangle;
    2. Vector2 position;

    We then need to give it a default value. Since we’re not actually loading it from anywhere, it won’t go into LoadContent, instead it goes into the Initialize method.

    Initializing position
    1. protected override void Initialize()
    2. {
    3.     position = Vector2.Zero;
    4.  
    5.     base.Initialize();
    6. }

    Then, we modify the line of code that draws the triangle to make use of position, replacing Vector2.Zero with position.

    Using position in Draw
    1. spriteBatch.Begin();
    2. spriteBatch.Draw(triangle, position, Color.White);
    3. spriteBatch.End();

    If we run now, we get the same behavior as we did before. This makes sense, because we’re not actually updating the position anywhere. To update the variable, we’ll want to add some code into the Update method. Specifically, we’ll go through the active touch points and set position to their position. In the next post, I’ll go into a method of finding out which touch point is the primary (first) touch point, and only updating using it, but for now, we’ll just update it using whatever touch point gets there. To do this, we’ll just loop through each of the touch points using a foreach loop and set the position, as so:

    Updating the position
    1. protected override void Update(GameTime gameTime)
    2. {
    3.     // Allows the game to exit
    4.     if (GamePad.GetState(PlayerIndex.One).Buttons.Back == ButtonState.Pressed)
    5.         this.Exit();
    6.  
    7.     foreach (TouchLocation tl in TouchPanel.GetState())
    8.     {
    9.         position = tl.Position;
    10.     }
    11.  
    12.     base.Update(gameTime);
    13. }

    And that’s it! Run the program, and you can move the triangle around with your finger (or mouse, in the emulator). If you have a multitouch display or a Windows Phone 7, you can see what happens when you put more than one finger on the screen. Essentially, it updates to each of the touch points, which means whichever was the last one down will be where the triangle goes.

    image

    Download the completed source code

  • File → New Project

    Basic Tombstoning with IsolatedStorage

    • 0 Comments

    I was talking with my good buddy Sam Stokes today about a group of students he is working with who are having some trouble with

    saving the state of their applications. He was looking for a way to show them an example on a single page, just to get the concept across. As we often do, we loaded up a screen sharing session and created a new project to build a sample out.

    To start with, we wanted to be able to show that the state was being saved, so we dropped a couple of controls onto the page.

    MainPageUI

    We added event handlers for the OnNavigatedTo, and OnNavigatedFrom events. When we navigate to the page, we'll check to see if anything was saved and load the values. When we navigate away, we'll save everything to IsolatedStorage.

    Saving and Loading State
    1. public void SaveStateToIsolatedStorage()
    2. {
    3.     IsolatedStorageSettings isolatedStore = IsolatedStorageSettings.ApplicationSettings;
    4.  
    5.     isolatedStore.Remove("textBox1");
    6.     isolatedStore.Add("textBox1", textBox1.Text);
    7.  
    8.     isolatedStore.Remove("checkBox1");
    9.     isolatedStore.Add("checkBox1", checkBox1.IsChecked.ToString());
    10.  
    11.     isolatedStore.Save();
    12. }
    13.  
    14. public void LoadStateFromIsolatedStorage()
    15. {
    16.     IsolatedStorageSettings isolatedStore = IsolatedStorageSettings.ApplicationSettings;
    17.  
    18.     if (isolatedStore.Contains("textBox1"))
    19.     {
    20.         textBox1.Text = (string)isolatedStore["textBox1"];
    21.     }
    22.  
    23.     if (isolatedStore.Contains("checkBox1"))
    24.     {
    25.         bool isChecked = false;
    26.         if (bool.TryParse((string)isolatedStore["checkBox1"], out isChecked))
    27.         {
    28.             checkBox1.IsChecked = isChecked;
    29.         }
    30.     }
    31. }

    Y

     

    If you want to take a look at the project in action, you can download the source code.

    After we got the project up and going, I was inspired to build another project that shows how to use the application events to support Fast Application Switching. I'll post more on that next.

  • File → New Project

    Basic Collision (TriangleShooter)

    • 0 Comments

    Continuing from last week, in this article I’ll be walking through some basic collision. Again, I’ll be starting with the code base from last week, so you can go and grab that over at my SkyDrive share.

    To get started, we’ll need something to collide with. I’ve created some enemies for use with the game, which you can download from SkyDrive. I’ll start with Enemy-6.png, the one that looks like this:

    Enemy-6

    To do this, add it into the TriangleShooterContent project by right-clicking the project in the Solution Explorer and choosing Add –> Existing Item, and selecting Enemy-6.png. We’ll then need to create a variable to hold the texture, and a variable to track it’s position. In a later article, we’ll add some basic AI to control it, but for now, it will be static.

    Variable Declaration
    1. Texture2D triangle;
    2. Vector2 position;
    3. float rotation;
    4.  
    5. Texture2D enemy;
    6. Vector2 enemyPosition;

    Initialize Position
    1. protected override void Initialize()
    2. {
    3.     position = Vector2.Zero;
    4.     enemyPosition = new Vector2(600f, 200f);
    5.  
    6.     base.Initialize();
    7. }

     

    Loading Content
    1. protected override void LoadContent()
    2. {
    3.     // Create a new SpriteBatch, which can be used to draw textures.
    4.     spriteBatch = new SpriteBatch(GraphicsDevice);
    5.  
    6.     triangle = Content.Load<Texture2D>("Triangle");
    7.     enemy = Content.Load<Texture2D>("Enemy-6");
    8. }

    We’ll also need to add a line to the Draw method to display the enemy.

    Drawing the Enemy
    1. protected override void Draw(GameTime gameTime)
    2. {
    3.     GraphicsDevice.Clear(Color.Black);
    4.  
    5.     spriteBatch.Begin();
    6.     spriteBatch.Draw(triangle, position, null, Color.White, rotation, new Vector2(0, triangle.Height / 2), 1f, SpriteEffects.None, 0f);
    7.     spriteBatch.Draw(enemy, enemyPosition, Color.White);
    8.     spriteBatch.End();
    9.  
    10.     base.Draw(gameTime);
    11. }

    If we run the application, we now can see that there is an enemy with which we can collide.

    image

    But how can we tell if the collision has happened? How about we change the color of the triangle to red? To do this, we’ll have to add a variable to track the color, and set it to red when the collision happens.

    Adding a Color Variable
    1. Texture2D triangle;
    2. Vector2 position;
    3. float rotation;
    4. Color triangleColor;

    Initializing the Color
    1. protected override void Initialize()
    2. {
    3.     position = Vector2.Zero;
    4.     enemyPosition = new Vector2(600f, 200f);
    5.     triangleColor = Color.White;
    6.  
    7.     base.Initialize();
    8. }

    Drawing Including the Color
    1. protected override void Draw(GameTime gameTime)
    2. {
    3.     GraphicsDevice.Clear(Color.Black);
    4.  
    5.     spriteBatch.Begin();
    6.     spriteBatch.Draw(triangle, position, null, triangleColor, rotation, new Vector2(0, triangle.Height / 2), 1f, SpriteEffects.None, 0f);
    7.     spriteBatch.Draw(enemy, enemyPosition, Color.White);
    8.     spriteBatch.End();
    9.  
    10.     base.Draw(gameTime);
    11. }

    Now we’re ready for the collision. We’ll take care of it in the Update method. To check for collision, we have a few options. The easiest would be either rectangle intersection or testing a rectangle to see if it contains a point. In this case, I’ll be using the Rectangle.Contains. The Contains method takes a Point, while our position is a Vector2, so we’ll have to do a bit of casting. We’ll also have to construct a rectangle from the position and texture we have in order to find out if it contains the point. The lines that need to be added into the Update method are as follows:

    Checking Collision by Contains
    1. if (new Rectangle((int)enemyPosition.X, (int)enemyPosition.Y, enemy.Width, enemy.Height).Contains((int)position.X, (int)position.Y))
    2. {
    3.     triangleColor = Color.Red;
    4. }

    And now, when we run the application and run into the enemy, we get the following:

    image

    Next week, we’ll break everything out into classes, and maybe even add some AI to the enemies.

    Download the latest version of the source code,

Page 2 of 8 (37 items) 12345»