March, 2011

  • File → New Project

    Building a Language Learning Game (QuizGame)


    This week we’ll be starting a new game for the Windows Phone. We’ll be using Silverlight this time around, and building a language learning game. The idea behind the game is to make use of a database of words and meanings, pick a word, and give four possible definitions. I actually originally built the first version of this game in XNA, and when I redid it in Silverlight, the implementation ended up being much easier. This week, we’ll start with a new Silverlight project, and walk through what that gives you. We’ll also look at a source of graphics we’ll be using for the game.

    To begin with, load up Visual Studio 2010 Express for Windows Phone, and choose File –> New Project, and under the Silverlight for Windows Phone templates, choose Windows Phone Application. In the Name field, type QuizGame, then click OK. You’ll get a new solution containing a single project with a few files. The basic structure a Silverlight application is a set of XAML files, containing markup that defines the user interface, and .cs files with code behind. In the MainPage.xaml file, you’ll get a visual desginer with a few elements in it. The layout is done through a Grid element containing a StackPanel with two TextBlocks. When you run the application, the emulator will pop up and display the application, looking something like the following:


    The numbers on the right of the page is a frame rate counter. You can turn it on or off using the following line in the App.xaml.cs file’s constructor.

    Enabling the Frame Rate
    1. Application.Current.Host.Settings.EnableFrameRateCounter = true;

    The other important files in the project are the ApplicationIcon.png file, the icon that will appear in the list of apps on the phone, Background.png, the image to display when your application is "pinned" to the Start screen, and SplashScreenImage.jpg, the splash screen that will be displayed when you launch the application.

    We’ll be getting deeper into the XAML next week when we lay out the user interface. This week, we’ll finish off by looking at the source of images we’ll be using. There’s a great resource over at where an artist occasionally posts sets of graphics like the one we will be using. The post in question is Danc's Miraculously Flexible Game Prototyping Tiles.

    Here’s an example of the type of graphics we’ll be using.

    Character Cat GirlCharacter Princess GirlSpeechBubble

    StarGem GreenGem OrangeHeart

    See you next week, when we’ll set up the game interface.

  • File → New Project

    Using the Accelerometer (TriangleShooter)


    This week, we’ll be using the accelerometer to move the player around. For those of you without a device, this one is going to be a bit tricky, as the emulator has no support for the accelerometer at this time. To do this, we’ll put in a check to see whether we are running on a device or an emulator, and use the accelerometer if it’s the device, and multi-touch if it’s the emulator. To begin, grab the latest version of the code from the SkyDrive share.

    In order to use the accelerometer, we’ll need to add an assembly reference to Microsoft.Devices.Sensors, and to test if the game is running on the emulator or a device, we add a reference to Microsoft.Phone. To add the reference, right-click on the references folder in the TriangleShooter project, choose Add Reference, and choose the two references from the list. Additionally, the following Using statement will need to be added for easy access to the Accelerometer:

    Assembly for Accelerometer
    1. using Microsoft.Devices.Sensors;

    We’ll create a variable for the Acceleromter called accelerometer:

    Accelerometer Variable
    1. Accelerometer accelerometer;

    We’ll check to see if we are running on the device, and if so, initialize the variable, set up a method that will handle the accelerometer, and start the monitoring.

    Initializing the Accelerometer
    1. if (Microsoft.Devices.Environment.DeviceType == Microsoft.Devices.DeviceType.Device)
    2. {
    3.     accelerometer = new Accelerometer();
    4.     accelerometer.ReadingChanged += new EventHandler<AccelerometerReadingEventArgs>(accelerometer_ReadingChanged);
    5.     try
    6.     {
    7.         accelerometer.Start();
    8.     }
    9.     catch (AccelerometerFailedException)
    10.     {
    11.     }
    12. }

    The method monitoring the reading changed event will update the position and rotation similar to the method we used around multi-touch.

    Accelerometer ReadingChanged
    1. void accelerometer_ReadingChanged(object sender, AccelerometerReadingEventArgs e)
    2. {
    3.     if (!isPlayerDead && player != null)
    4.     {
    5.         Vector2 direction = new Vector2(Math.Max(-.5f, Math.Min(.5f, (float)-e.Y)), Math.Max(-.5f, Math.Min(.5f, (float)-e.X)));
    7.         player.Rotation = (float)(Math.Atan2(direction.Y, direction.X));
    9.         player.Position += direction * player.Speed;
    11.         player.Position = new Vector2(Math.Min(Math.Max(player.Position.X, 0), 800), Math.Min(Math.Max(player.Position.Y, 0), 480));
    12.     }
    13. }

    If you make only these changes, the accelerometer will work, but the player won’t move around, because we never actually set the player speed. We can update the player initialization to the following to make that happen.

    Player Initialization
    1. player = new Player() { Avatar = txPlayer, Position = new Vector2(100f, 240f), Rotation = 0f, Speed = 15f };

    Finally, we’ll update the UpdatePlayer method to check if the game is running on the emulator, and use the multi-touch if it is.

    1. private void UpdatePlayer()
    2. {
    3.     if (Microsoft.Devices.Environment.DeviceType == Microsoft.Devices.DeviceType.Emulator)
    4.     {
    5.         foreach (TouchLocation tl in TouchPanel.GetState())
    6.         {
    7.             if (tl.State == TouchLocationState.Pressed)
    8.             {
    9.                 if (movementId == 0)
    10.                 {
    11.                     movementId = tl.Id;
    12.                 }
    13.             }
    15.             if (tl.Id == movementId)
    16.             {
    17.                 Vector2 direction = tl.Position - player.Position;
    19.                 if (direction.LengthSquared() > 100)
    20.                 {
    21.                     direction.Normalize();
    23.                     player.Rotation = (float)(Math.Atan2(direction.Y, direction.X));
    25.                     player.Position += direction * 10;
    26.                 }
    27.             }
    29.             if (tl.State == TouchLocationState.Released)
    30.             {
    31.                 if (tl.Id == movementId)
    32.                 {
    33.                     movementId = 0;
    34.                 }
    35.             }
    36.         }
    37.     }
    38. }

    Now we run with multi-touch on the emulator, and the accelerometer on the device.

    At this point, we’re pretty complete as far as the game goes. There are a few things we can do to clean up the code, and to improve the gameplay, and I will post updates as I continue with the project, but next week, we’ll be introducing a new project, so stay tuned.

    Download the latest version of the source code.

Page 1 of 1 (2 items)