Introduction

In this tutorial blog post we will discover how easy it is to implement a simple puzzle game in Windows Phone 7 using the XNA 4.0 platform. The game consists of a single image, split randomly in 15 tiles (each of them having the same dimensions). The player has to move the tiles one by one (using the “empty” tile), attempting to recreate the original image. The starting screen is

If the player touches the screen, the game begins, the tiles are randomly placed on screen.

The black tile that you can see in the bottom-right corner is the “empty” one, the one that the player can move neighboring tiles to, in his attempts to solve the puzzle.Read More »

Introduction

The Windows Phone 7 emulator that gets installed when you download and install the developer tools does not have any way to access an accelerometer. Although you can add a reference to Microsoft.Devices.Sensors, you will not get any values during application execution. Since I have a Freescale badge that comes with an accelerometer sensor (among others) that works with the Sensor and Location platform in Windows 7, I decided to create a small Windows application that could ‘send’ accelerometer values to the emulator.

The Windows application that connects to the accelerometer (AccelerometerWCF solution)

In the Windows application, first thing I had to do was add a reference to the Microsoft.WindowsAPICodePack.Sensors.dll contained in the Windows API Code Pack for Windows 7 (a beautiful library that lets you access all Windows 7 goodness from managed code). This way I was able to hook to the accelerometer, and receive data reports at regular intervals. Let’s see some code on how.

   1:          ServiceHost svc;

   2:          Accelerometer3D acc;

   3:          public MainWindow()

   4:          {

   5:              InitializeComponent();

   6:              this.Loaded += new RoutedEventHandler(MainWindow_Loaded);

   7:          }

   8:   

   9:          void MainWindow_Loaded(object sender, RoutedEventArgs e)

  10:          {

  11:              SensorList<Accelerometer3D> sl = SensorManager.GetSensorsByTypeId<Accelerometer3D>();

  12:              acc = sl[0];

  13:              acc.AutoUpdateDataReport = true;

  14:              acc.DataReportChanged +=new DataReportChangedEventHandler(acc_DataReportChanged);

  15:              svc = new ServiceHost(typeof(Accelerometer3DService), new Uri("http://localhost:10000/Accelerometer3DService/"));

  16:              svc.Open();

  17:          }

  18:   

  19:          void acc_DataReportChanged(Sensor sender, EventArgs e)

  20:          {

  21:              Accelerometer3D acc = sender as Accelerometer3D;

  22:              Report.Accelerometer3D = new CustomAccelerometer3DReport()

  23:              {

  24:                  AxisX_G = acc.CurrentAcceleration[AccelerationAxis.X],

  25:                  AxisY_G = acc.CurrentAcceleration[AccelerationAxis.Y],

  26:                  AxisZ_G = acc.CurrentAcceleration[AccelerationAxis.Z]

  27:              };

  28:          }

At the beginning, we declare an Accelerometer object. On MainWindow_Loaded we get the accelerometer sensor list (accelerometers that are attached to the current computer), and we assign the accelerometer object to the first element in the list, since we know that we have only one accelerometer attached to the computer. Then, we set the AutoUpdateDataReport to true, so the accelerometer sends a data report regularly, and then we hook to the DataReportChanged event (forget all the “svc” related lines for now).

In the event handler, we get a reference to the sender, and then set the X,Y and Z values to a static class (Report) variable of type CustomAccelerometer3DReport which will be reported to the emulator. Unsurprisingly, the class definition is the following

   1:      [DataContract]

   2:      public class CustomAccelerometer3DReport

   3:      {

   4:          [DataMember]

   5:          public float AxisX_G { get; set; }

   6:          [DataMember]

   7:          public float AxisY_G { get; set; }

   8:          [DataMember]

   9:          public float AxisZ_G { get; set; }

  10:      }

So, the question is, how to report the data to the emulator? The only way to “connect” this to the emulator is using web services, and the preferred option for that is WCF, since in this way we can use “Add Service Reference” in the Windows Phone project to create proxy objects for the service.

In the first code segment, you can see that we are creating a new ServiceHost object. This ServiceHost object is then initialized with a reference to the type of the service’s implementation and a communication Uri. As we can see in the app.config, the service is configured to use basicHttpBinding, since this is supported by Silverlight in Windows Phone 7. Implementation of the service is rather simple, too.

   1:      [ServiceBehavior(InstanceContextMode=InstanceContextMode.Single)]

   2:      public class Accelerometer3DService : IAccelerometer3DService

   3:      {

   4:          public CustomAccelerometer3DReport GetReport()

   5:          {

   6:              return Report.Accelerometer3D;

   7:          }

   8:      }

The most important thing to notice here is that the service is instantiated as a Singleton, so that only one instance of a service object is active, at a given point in time. The GetReport method returns a copy of the Report.Accelerometed3D property, an object that contains the X,Y and Z values. We’re ready!

The Windows Phone 7 Silverlight application (AccelerometerTest solution)

I created a very simple Windows Phone 7 Silverlight application that basically has 3 textboxes, which get updated at a regular time interval with the accelerometer’s values. I also used “Add Service Reference” to create the proxy objects to have the Windows Phone 7 application properly communicate with the Windows application hosting the service. Because I cannot “add an event” to the web service, I decided to create a timer (using the StoryBoard object), which gets updated every 200 milliseconds. At each update, it updates the 3 textblocks on the screen with the X, Y and Z values coming from the accelerometer. Full source code, so you can reuse it in your projects:

   1:          Accelerometer3DServiceClient client;

   2:          Storyboard timer;

   3:   

   4:          // Constructor

   5:          public MainPage()

   6:          {

   7:              InitializeComponent();

   8:              this.Loaded += new RoutedEventHandler(MainPage_Loaded);

   9:          }

  10:   

  11:          void MainPage_Loaded(object sender, RoutedEventArgs e)

  12:          {

  13:              client = new Accelerometer3DServiceClient();

  14:              client.GetReportCompleted += new EventHandler<GetReportCompletedEventArgs>(client_GetReportCompleted);

  15:   

  16:              timer = new Storyboard();

  17:              timer.Duration = TimeSpan.FromMilliseconds(200);

  18:   

  19:              timer.Completed += new EventHandler(timer_Completed);            

  20:              timer.Begin();

  21:          }

  22:   

  23:          void client_GetReportCompleted(object sender, GetReportCompletedEventArgs e)

  24:          {

  25:              textBlock1.Text = e.Result.AxisX_G.ToString();

  26:              textBlock2.Text = e.Result.AxisY_G.ToString();

  27:              textBlock3.Text = e.Result.AxisZ_G.ToString();

  28:          }

  29:   

  30:          void timer_Completed(object sender, EventArgs e)

  31:          {

  32:              client.GetReportAsync();

  33:              timer.Begin();

  34:          }

Some important things to notice: First of all, I decided to use StoryBoard over DispatcherTimer for various reasons, some of them you can check here. I set the StoryBoard to a 200 milliseconds interval, and I “Begin” it again each time it “Completes”. Moreover, each time the Completed event is fired, I download (asynchronously) the accelerometer values from the web service, which then are shown to the three textblocks on the User Interface. Finally, for the sake of the argument, check a screenshot of the applications and the accelerometer running:

Download full source code here: http://cid-10e568adbb498dc8.office.live.com/self.aspx/Windows%20Phone%20Source%20Code/EmulatingAccelerometerWP7.zip

 Introduction

Continuing my adventure in XNA after porting Arkanoid for Windows Phone 7, I’ve been busy during the last days in an attempt to re-create the famous Windows Mobile 6.x game called “Bubble Breaker” for Windows Phone 7. This is a great game to spend your time, and I find it highly addictive. I had two choices to implement it; either Silverlight or XNA. I chose XNA for this example, but I promise to also create a Silverlight version! If you don’t want to read more and want to get your hands dirty playing with the source code, check here: http://sdrv.ms/XK7D9g

Game Description

The game is rather simple. There are some balls on screen, using different colors. User can touch one ball, and if one or more of its ‘neighbours’ (vertically or horizontally, *not* diagonally) are the same color, they get ‘selected’. The process is repeated, recursively, for the selected balls (having, of course, the same color) until there are no neighboring balls with the same color as the originally selected. The selected balls all get a new (in our example, white) color, and the user can re-select them, to make them disappear. If there are blank positions vertically or horizontally, the game moves the remaining balls either down or right (imagine having a ‘gravity’ system pulling objects both from the bottom and from the right side). Score is easily calculated by the formula

score = score + (number of ellipses removed) * (number of ellipses removed – 1)

which is the same formula used in the original Windows Mobile game. If there are no more ellipses that can be selected for removal (i.e. there are no ‘neighboring’ ellipses carrying the same color), the game is over. User can also reset the game by touching the bottom of the game area.

Screenshot:

Read More »

Όσοι ασχολείστε με ανάπτυξη εφαρμογών για το iPhone σίγουρα θα έχετε δει το tutorial για την κατασκευή του MoveMe (http://developer.apple.com/iphone/library/referencelibrary/GettingStarted/Creating_an_iPhone_App/index.html). Πρόκειται για μια πολύ απλή εφαρμογή, με ένα rectangle στην οθόνη, το οποίο μπορούμε να το κάνουμε drag σε όλο το μήκος και πλάτος της οθόνης του κινητού και με το που το αφήσουμε, αυτό επιστρέφει στην αρχική του θέση με ένα μικρό animation της κίνησης. Ας δούμε εδώ πως μπορούμε να το φτιάξουμε σε Silverlight για Windows Phone 7 με τη χρήση του εργαλείου Expression Blend 4 for Windows Phone Beta (hint: μπορείτε να κατεβάσετε δωρεάν όλα τα beta development tools για Windows Phone 7 από εδώ).

Αρχικά, ανοίγουμε το Expression Blend 4 for Windows Phone Beta και επιλέγουμε να δημιουργήσουμε ένα νέο Silverlight project, δίνοντας του ένα όνομα της επιλογής μας.

Με το που δημιουργηθεί το project, μας εμφανίζεται μια οθόνη, στην οποία μπορούμε να σχεδιάσουμε το γραφικό περιβάλλον της εφαρμογής μας. Αυτό που θα κάνουμε αρχικά είναι να δημιουργήσουμε ένα νέο rectangle στην εφαρμογή μας.

Στο μενού εργαλείων στα αριστερά κάνουμε κλικ στο rectangle.

Οπότε, μπορούμε πλέον στην οθόνη του “κινητού” να σχεδιάσουμε ένα καινούριο Rectangle, χρησιμοποιώντας το ποντίκι μας για να δώσουμε το πλάτος και το μήκος που επιθυμούμε.

Μπορούμε να πάμε στο μενού εργαλείων properties στα δεξιά του Blend και να μεταβάλλουμε διάφορα χαρακτηριστικά του καινούριου μας Rectangle. Στο παράδειγμά μας, πείραξαμε το Rectangle και του δώσαμε ένα ντεγκραντέ (gradient) background, με πράσινο-μπλε χρώμα.

Το πρώτο πράγμα που θα κάνουμε θα είναι να τροποποιήσουμε το Rectangle ώστε να είναι draggable, να μπορούμε δηλαδή να το μετακινήσουμε με τα δάχτυλά μας στη συσκευή μας, ή με το ποντίκι αν δουλεύουμε με τον emulator. Αν θέλαμε να δώσουμε αυτή τη λειτουργία με κώδικα, τότε θα έπρεπε να ακολουθήσουμε τα εξής (ψευδο)βήματα

• Να φτιάξουμε μια μεταβλητή isBeingDragged τύπου boolean
• Να κάνουμε handle το event MouseDown (ή TouchDown κ.λ.π.), και εκεί set την isBeingDragged σε true
• Να κάνουμε handle το event MouseMove. Εκεί, αν και μόνο αν (if συνθήκη) η isBeingDragged είναι ίση με true, να μεταβάλλουμε το x και το y (ή το margin κ.λ.π.) του rectangle, κατά ένα ποσό σχετικό με την τιμή του mouse.X και mouse.Y
• Να κάνουμε handle το event MouseUp. Εκεί κάνουμε set την isBeingDragged σε false ώστε να μην εκτελείται ο κώδικας στην if συνθήκη της MouseMove.

(Παρέλειψα εσκεμένα να αναφερθώ στις Control.CaptureMouse() και Control.ReleaseMouseCapture() για να μην αγχώσω/μπερδέψω τον αρχάριο αναγνώστη :) )

Μπορείτε να δείτε ότι η λογική είναι αρκετά straightforward, αλλά παρόλα αυτά απαιτεί από εμάς να γράψουμε αρκετό κώδικα. Το Blend με τις διευκολύνσεις που προσφέρει μας γλιτώνει από αυτό τον κόπο. Αυτές οι διευκολύνσεις λέγονται behaviors, και μας παρέχουν ενσωματωμένη λειτουργικότητα την οποία μπορούμε να δώσουμε στα αντικείμενά μας. Πηγαίνουμε λοιπόν στο παράθυρο εργαλείων Assets και επιλέγουμε το μενού Behaviors.

Κάνοντας κλικ στο behaviors, βλέπουμε διάφορες επιλογές. Η επιλογή (το behavior) που μας ενδιαφέρει (όπως ίσως μαντέψατε!) είναι η MouseDragElementBehavior.

Κάνουμε κλικ σε αυτό το behavior και το μεταφέρουμε στο μίνι παράθυρο Objects and Timeline, ακριβώς πάνω στο Rectangle που έχουμε δημιουργήσει (μπορούμε εναλλακτικά να το μεταφέρουμε επάνω στο rectangle που βρίσκεται στην οθόνη εργασίας μας, το αποτέλεσμα θα είναι ακριβώς το ίδιο).

Ας τρέξουμε τώρα την εφαρμογή μας για να δούμε τι κατασκευάσαμε μέχρι στιγμής. Για να την εκτελέσουμε, μπορούμε είτε να πατήσουμε το πλήκτρο F5, είτε να πατήσουμε στο μενού πάνω την επιλογή Project –> Run Project. Αφού περιμένουμε λιγάκι, θα εμφανιστεί ο emulator ενός Windows Phone 7 κινητού, και μετά από λίγο και η εφαρμογή μας.

Δοκιμάστε να κάνετε κλικ πάνω στο rectangle και να το σύρετε πάνω στην οθόνη. Θα δείτε ότι το rectangle ακολουθεί το δείκτη του ποντικιού (όσο φυσικά κρατάτε το αριστερό κουμπί του ποντικιού κρατημένο!). Παρόμοια θα ήταν η συμπεριφορά της εφαρμογής αν την εκτελούσατε σε μια συσκευή, θα μπορούσατε να κουνήσετε το rectangle χρησιμοποιώντας το δάκτυλό σας. Παρατηρούμε ότι το rectangle, μετά την μετακίνησή του παραμένει στη θέση που το αφήσαμε.

Ας περάσουμε τώρα στο πιο tricky κομμάτι της εφαρμογής. Θέλουμε ο χρήστης να κάνει κλικ στο rectangle, να το μετακινεί και όταν αφήνει το πλήκτρο του ποντικιού το rectangle να επιστρέφει στην αρχική του θέση, με ένα animation κατά τη διάρκεια της μετακίνησης. Για να το πετύχουμε αυτό, θα δημιουργήσουμε πρώτα το animation όπου το rectangle επιστρέφει στην αρχική του θέση.

Για να το πετύχουμε αυτό, καλό θα ήταν να “γυρίσουμε” το Blend σε Animation Workspace, από το Design Workspace που είναι το default και είμαστε τώρα. Για να το κάνουμε αυτό, είτε πατάμε το πλήκτρο F6, είτε επιλέγουμε από το πάνω μενού Windows –> Workplaces –> Animation. Αφού το κάνουμε αυτό, θα επιλέξουμε να δημιουργήσουμε ένα καινούριο Storyboard (ένα Storyboard μπορεί να περιέχει ένα ή περισσότερα animations). Για να δημιουργήσουμε ένα καινούριο animation, επιλέγουμε το κουμπί +, στο μίνι παράθυρο “Objects and timeline”.

Αφού πατήσουμε το +, το Blend μας δίνει την επιλογή να δώσουμε στο καινούριο Storyboard μας ένα όνομα της επιλογής μας.

Αφού δώσουμε όνομα στο Storyboard, το Blend δημιουργεί ένα κόκκινο περίγραμμα γύρω από την επιφάνεια σχεδίασης, πράγμα που σημαίνει ότι καταγράφει οποιαδήποτε αλλαγή κάνουμε στις ιδιότητες των αντικειμένων (χρώμα background, margins, size, περιστροφή, και ό,τι άλλο μπορείτε να φανταστείτε). Για να κατασκευάσουμε το animation μας, πρέπει να σκεφτούμε δύο πράγματα

• το τι θα κάνουμε animate
• το πόσο χρόνο θα διαρκεί

Συγκεκριμένα, τόσο στο Silverlight (web, phone) όσο και στο WPF, ένα animation σημαίνει μετατροπή μιας ιδιότητας από μία τιμή σε κάποια άλλη, για ένα πεπερασμένο χρονικό διάστημα. Στην περίπτωσή μας θέλουμε μια χρονική διάρκεια έστω δύο δευτερολέπτων, και μετατροπή της τοποθεσίας του rectangle από την οποιαδήποτε στην αρχική. Το οποιαδήποτε υποδηλώνει την τοποθεσία που θα το αφήσει ο χρήστης μετά το drag. Οπότε, αρχικά, μετακινούμε τον δείκτη χρόνου του storyboard στα δύο δευτερόλεπτα.

Στη συνέχεια, επιλέγουμε το rectangle χρησιμοποιώντας το selection tool από τα tools στα αριστερά του blend (μπορείτε να χρησιμοποιήσετε και το keyboard shortcut V για να επιλέξετε το selection tool). Αυτό που θέλουμε να επιτύχουμε είναι να κάνουμε record τα ανάλογα properties του rectangle, έτσι ώστε το animation να ξέρει πού θα μεταφέρει το rectangle στο χρονικό διάστημα των δύο δευτερολέπτων. Τα properties αυτά είναι το TranslateX και το TranslateY και τα βρίσκουμε στο υπομενού Transform του μίνι παραθύρου Properties. Κάνοντας κλικ στο δεξί τετραγωνάκι που βρίσκεται δεξιά τους μπορούμε να επιλέξουμε την επιλογή Record Current Value. Αμέσως θα δούμε το τετραγωνάκι να αλλάζει από σκούρο γκρι χρώμα σε άσπρο, πράγμα που σημαίνει ότι έχουν “κλειδώσει” οι τρέχουσες τιμές.

Μπορούμε να το επιβεβαιώσουμε και από το objects and timeline panel, κάνοντας expand τα περιεχόμενα στοιχεία του rectangle.

Αφού τελειώσαμε με τη δημιουργία του animation, μπορούμε να πατήσουμε το F6 ώστε να ξαναγυρίσουμε στο Designer Workspace. Επίσης, μπορούμε να επιλέξουμε να σταματήσει το “recording” για τη δημιουργία του storyboard, κάνοντας κλικ στο κόκκινο κουμπάκι που δείχνει η παρακάτω εικόνα.

Για να τελειώσουμε την εφαρμογή μας, πρέπει να επιλέξουμε να ενεργοποιείται το animation μόλις ο χρήστης αφήσει το rectangle. Αυτό μπορούμε πολύ απλά να το επιτύχουμε με ένα ακόμα behavior. Αν πλοηγηθούμε στα behaviors, θα δούμε ένα με όνομα ControlStoryBoardAction.

Το παίρνουμε και το κάνουμε drag drop πάνω στο rectangle, στο objects and timeline μίνι παράθυρο.

Εν συνεχεία, ενώ το ControlStoryboardAction που δημιουργήσαμε παραμένει επιλεγμένο, μπορούμε να πειράξουμε τα properties του.

Σκεφθείτε, πότε θέλουμε να εκτελείται το animation; Όταν αφήνουμε το rectangle. Το ανάλογο event για την περίπτωσή μας είναι το MouseLeftButtonUp. Τι θέλουμε να γίνεται όταν γίνει raise το event; Να ξεκινάει το Storyboard μας. Οπότε αφήνουμε το Play. Ποιο Storyboard θέλουμε να εκτελείται; Φυσικά, το Storyboard που δημιουργήσαμε πριν λίγο.

Και ναι, μόλις τελειώσαμε! Μπορείτε να πατήσετε το F5 ή το Project –> Run Project για να δείτε την εφαρμογή σας εν δράσει!

Μπορείτε να κατεβάσετε τον κώδικα για την παρούσα εφαρμογή από εδώ. Stay tuned για περισσότερα tutorials για Windows Phone 7!

Σας προσκαλούμε στους τελικούς του φοιτητικού διαγωνισμού καινοτομίας "Imagine Cup" την Τρίτη 4 Μαΐου, στις 12:30 μμ, στo Κέντρο Καινοτομίας της Microsoft (Λεωφ. Βασ. Σοφίας 103, Αθήνα).