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.
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:
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.
You can save the flame and X image from here and use them BTW. 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:
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.
If aShow Then
spriteBatch.Draw(aFire, aRec, Color.AliceBlue)
If bShow Then
spriteBatch.Draw(bFire, bRec, Color.AliceBlue)
spriteBatch.Draw(xButton, xRec, Color.AliceBlue)
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:
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
If touchRec.Intersects(aRec) AndAlso aShow Then
aShow = False
If touchRec.Intersects(bRec) AndAlso bShow Then
bShow = False
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)
If shouldShow > 50 Then
bShow = True
bRec.X = r.[Next](100, 700)
bRec.Y = r.[Next](10, 400)
howOften = r.[Next](33, 100)
cycleCount = 0
If you don’t have a Windows Phone yet make sure the deployment is set for the emulator.
If everything works you should see something like this:
The emulator uses mouse clicks to emulate touches unless you have a touch screen on your computer.
Well some things are obvious:
You get the idea. What can you do from this basic outline?
Visit the App Hub at http://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.
Thanks for the tip. I need something to liven up my VB class. I think we will try this!
Is it possible to do this with VB 2010 Express edition?
The Windows Phone Developer Tools 7.1 Beta installed a special version of Visual Studio Express which supports both VB and C#. You can get it from www.microsoft.com/.../details.aspx