Various

Arkanoid in Windows Phone 7 using XNA

dgkanatsios1 Comment

Prof. Kostas Anagnostou from Ionian University has created an excellent 6 part tutorial covering the creation of the classic Arkanoid game for the PC using XNA framework. Here are the links for the tutorial

All the tutorials are written in Greek but you can certainly use a translation platform such as Microsoft Translator to read them.

Reminder: You can download tools for creating Windows Phone applications (Silverlight) and games (XNA) for free by visiting http://developer.windowsphone.com

Given his kind permission, I decided to port the game to Windows Phone 7. I have to admit that porting was rather easy, given the fact that XNA framework has minor differences comparing PC/XBOX engine to Windows Phone. Initially, something that one has to pay attention to is the screen sizes. In Windows, the screen size (resolution) is the one the user has chosen. In Windows Phone 7, it’s 800 x 480. You can see it in the code Visual Studio creates for you

// Pre-autoscale settings.
graphics.PreferredBackBufferWidth = 480;
graphics.PreferredBackBufferHeight = 800;

The other thing I had to change in order for this to work in Windows Phone 7 was the player input. In the PC, you have the keyboard. In Windows Phone 7, you have a touch screen. One can easily “query” the touch screen for input using this simple line of code

TouchCollection tc = TouchPanel.GetState();

In this way, you get a collection of TouchLocation objects, with each one representing the point where the user touched the screen. So, we can query this collection and get information about each and every one point that the user touched the screen (hint: Windows Phone 7 devices will have capacitive 4-point multitouch screens).

We are using the following code inside the UpdateWorld method (which gets called by the Update XNA method) to determine the paddle’s movement and placement

paddleSpeed = 10;
TouchCollection tc = TouchPanel.GetState();
if (tc.Count != 0)
{
TouchLocation tl = tc[0];int distance = (int)tl.Position.X – (int)(paddle.X + paddle.Width / 2);paddleSpeed *= Math.Sign(distance);

if (Math.Sign(distance) == previousPaddleDirectionSign)
{
paddleSpeed += Math.Sign(distance) * 5;
}
previousPaddleDirectionSign = (short)Math.Sign(distance);

if (Math.Abs(distance) >= 3)
paddle.X += paddleSpeed;
}

OK, let’s decrypt it a bit. For starters, we initialize the variable paddleSpeed to 10. 10 pixels will be the minimum movement of the paddle, either left or right. Then, we get the collection of touch points, getting a reference to the first touch point (we assume that the user won’t touch the screen in more than one point. If he does, we ignore them). We declare a distance variable, which value is set to be equal to the difference between touch point’s X and the center X of the paddle (paddle.X + paddle.Width / 2). Consequently, if the user touches righter than the paddle’s center, distance will be a positive integer. Otherwise, it will be negative.

We then multiply paddleSpeed variable with the sign of the distance. The Math.Sign method returns +1 if the argument is positive, –1 if the argument is negative and 0 if the argument is, well, zero. Then, we compare the sign of the distance with a variable called previousPaddleDirectionSign (long name, I know, but trust me, it helps!). This comparison will be true if the user had been pressing in the same direction (e.g. left compared to the paddle’s center) for two or more consecutive game updates (Reminder: Windows Phone XNA Games run at 30 Frames Per Second). If this happens, then we increase paddleSpeed with 5 pixels more (Math.Sign is used again to verify correct addition, either to the positive or the negative integer range).

After that, we set the previousPaddleDirectionSign variable to Math.Sign(distance) to compare it again on the next Update call. And, finally, we set a minimum threshold of 3 pixels as to trigger movement of the paddle. We use Math.Abs which returns the absolute value of a variable to get distance’s absolute distance from the center of the paddle. And voila, the game is ready! Check for a screenshot and for the downloadable source code

image

Source Code (ArkanoidWP7 file): https://onedrive.live.com/?cid=10E568ADBB498DC8&id=10E568ADBB498DC8%211600

Stay tuned for more Windows Phone 7 tutorials!

One thought on “Arkanoid in Windows Phone 7 using XNA”

Leave a comment