Windows Phone 7 Games in Visual Basic

  • Article

I’ve been working all week in C#. Now C# is a wonderful language if you are going to use semi-colons and curly braces. It fixes almost all of the issues I have with C++ and Java. But frankly I have missed the beauty of programming in Visual Basic. So when I saw Sam Stokes’ post (You can now use Visual Basic on Windows Phone 7 to do XNA development-) I knew it was time to take a VB break. So I got the document on Visual Basic Support in XNA Game Studio (Mango) and installed the Windows Phone Developer Tools 7.1 Beta and I went to town. Well actually what I did was to convert my C# Whack Something Game into Visual Basic. Hey I had to start somewhere. I’m going to rewrite it from scratch and do it right soon. Hopefully over the Memorial Day weekend if the “honey do” list is not too long. But for now here is a step by step illustrated with some code (not great code but it works) instruction on creating your first Windows Phone 7 Game in Visual Basic. BTW Pong in VB and XNA for Windows is here.

Fire Drill Project

We will be creating a game that causes “flames” to randomly appear on your screen. By touching the flames you will put them out. But beware! More flames will appear.

Open Visual Studio and select New Project from the File menu. You should get a window that looks something like this:

clip_image002

Select Windows Phone Game (4.0) and give you project a name such as FireDrill and press the OK button.

On the Solution Explorer right click on the Content option and either select Add -> Existing Item or press Shift-Alt-a to open the file window. Browse to where the image files are and select x.png and flame.png.

clip_image004

clip_image006

You can save the flame and X image from here and use them BTW.xflame Just save them with the right file names and extension.

Now that we have the images we need it is time to start writing some code. We need several variables:

  • · Textures to identify the images
  • · Rectangles to hold the images and help with detection of touches.
  • · Flags to determine what images are being displayed
  • · Some counters to help control how often “fires” pop up.
  • · A random number variable to make things more random

Our code might look something like this:

 

 Dim aFire As Texture2D, bFire As Texture2D, xButton As Texture2D
 Dim aRec As Rectangle, bRec As Rectangle, xRec As Rectangle
 Dim aShow As [Boolean], bShow As [Boolean]
 Dim r As Random
 Dim cycleCount As Integer, howOften As Integer

This lines go in the top of the class right below the lines:

 

 Private WithEvents graphics As GraphicsDeviceManager
 Private WithEvents spriteBatch As SpriteBatch

We’ll see how these are used in a minute. But we also have to initialize there variables. We’ll set the Booleans for aShow and bShow to false so that they are not displayed right away when the program loads. We’ll use howOften to determine how many frames to show before deciding to show or not show one of the fires. The default FPS (frames per second) for a Windows Phone is about 33 frames per second so if we wait every 30th frame that will be just about a second. We’ll change that randomly as the program runs to make things less predictable.

We’ll also set the initial locations of our two flames, the X (for eXit) button and initialize our counters and random number variable. Out code will be in the Initialize method and look something like this:

 

 aRec = New Rectangle(100, 100, 47, 50)
 bRec = New Rectangle(700, 300, 47, 50)
 aShow = False
 bShow = False
 xRec = New Rectangle(0, 400, 64, 64)
 r = New Random()
 cycleCount = 0
 howOften = 30

Our images are going into what we call 2D textures and we’ll bring them in from the files in the LoadContent method. Notice that we use the same file for both flames that wiil appear.

 

 aFire = Me.Content.Load(Of Texture2D)("flame")
 bFire = Me.Content.Load(Of Texture2D)("flame")
 xButton = Me.Content.Load(Of Texture2D)("x")

We draw these textures in the Draw method – you saw that coming didn’t you? Each frame we will redraw the objects on the screen of our phone using the spriteBatch object. We will first check our Boolean flags (remember aShow and bShow) and if they are set to true they will be drawn. The X button will always be drawn of course.

 

 graphics.GraphicsDevice.Clear(Color.AliceBlue)
 spriteBatch.Begin()
 If aShow Then
     spriteBatch.Draw(aFire, aRec, Color.AliceBlue)
 End If
  
 If bShow Then
     spriteBatch.Draw(bFire, bRec, Color.AliceBlue)
 End If
 spriteBatch.Draw(xButton, xRec, Color.AliceBlue)
  
 spriteBatch.[End]()

Note that we are using the same color for the background of the screen and of the objects we are drawing on it (AliceBlue in this case) to make things look nice. For “interesting” try different colors.

Now for the real work. What we want to happen is for “flames” to appear in random places on the screen. When we touch them with our finger that will “put them out.” This means that we have to:

  • · Exit the game if the player touches the X button
  • · Make a flame disappear (by setting the show flag to false)
  • · Determine if it is time to show one or more flames
  • · Set the location of one or both flames and display them by setting the show flag to true

We check for touching the button or flames by checking touch points against the rectangles that define the locations of the objects. The status of the TouchPanel tells us where it was touched.

Our code may look something like this:

 

 For Each t As TouchLocation In touches
     Dim touchRec As New Rectangle(CInt(t.Position.X), CInt(t.Position.Y), 1, 1)
  
     If touchRec.Intersects(xRec) Then
         Me.[Exit]()
     End If
     If touchRec.Intersects(aRec) AndAlso aShow Then
         aShow = False
     End If
     If touchRec.Intersects(bRec) AndAlso bShow Then
         bShow = False
     End If
 Next

We’ll count the cycles and if enough have passed (according to HowOften) we will select one or both of the flames to appear using a set of if statements. If it is “time” we will use the random number variable to select a location for the flame(s) to appear, set the show flag to true, reset our cycle counter and pick a new random number of cycles before checking again. Our code might look like the following:

 Dim shouldShow As Integer = r.[Next](1, 100)
 cycleCount += 1
 If cycleCount > howOften Then
     If shouldShow < 60 Then
         aShow = True
         aRec.X = r.[Next](100, 700)
         aRec.Y = r.[Next](10, 400)
     End If
     If shouldShow > 50 Then
         bShow = True
         bRec.X = r.[Next](100, 700)
         bRec.Y = r.[Next](10, 400)
     End If
     howOften = r.[Next](33, 100)
     cycleCount = 0
 End If

If you don’t have a Windows Phone yet make sure the deployment is set for the emulator.

clip_image007

If everything works you should see something like this:

clip_image009

The emulator uses mouse clicks to emulate touches unless you have a touch screen on your computer.

What next?

Well some things are obvious:

  • · More flames
  • · Score keeping
  • · Losing or winning
  • · Code clean up – shouldn’t there be classes here?

You get the idea. What can you do from this basic outline?

clip_image010

Visit the App Hub at https://create.msdn.com/en-US for more Windows Phone development resources.

© 2010 Microsoft Corporation. All rights reserved. This document and its contents are provided AS IS without warranty of any kind, and should not be interpreted as an offer or commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information presented. The information in this document represents the current view of Microsoft on the content.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED, OR STATUTORY, AS TO THE INFORMATION IN THIS DOCUMENT.