Windows Store App Steuern mit Kinect V2 for Windows

Von Helmut+Kr%c3%a4mer Autor Feed 21. October 2014 14:44

Im Zuge der Codeweek gab es einige Veranstaltungen rund um das Thema Software / Softwareerstellung. Unter anderen gab es 2 Sessions mit mir zum Thema “Kinect for Windows V2 3D Tracking & mehr”.

Am 11. Oktober war es soweit, Andreas Jakl von Mopiusund ich durften am Gaming Hackathon eine Stunde lang ein wenig den Kinect Sensor vorstellen und anhand ein paar Beispielen demonstrieren, was man alles so anstellen kann. Unser Track wurde aufgezeichnet und steht auf Channel 9 bereits zur Verfügung!

In diesen Post möchte ich auf unser doch recht simpel gestaltendes Beispiel ein wenig näher eingehen und auch zeigen, wie einfach es ist eine Windows Store App durch den Kinect V2 Sensor steuerbar zu machen.

TickTackToe

So sieht (bzw. sollte) unser fertiges “Tic Tac Toe” Sample aus. Als Basis haben wir eine einfache “Blank” Universal App genommen:

Template

Als erstes wurde das Phone Projekt gelöscht, da wir ja nur eine Windows Store App mit unseren Sensor steuern wollen.

Step 1: 3x3 Grid anlegen, worauf wir Buttons für unsere Interaktion platzieren.

<Grid x:Name="BoardGrid"> <Grid.RowDefinitions> <RowDefinition Height="*"/> <RowDefinition Height="*"/> <RowDefinition Height="*"/> </Grid.RowDefinitions> <Grid.ColumnDefinitions> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> <ColumnDefinition Width="*"/> </Grid.ColumnDefinitions> <Button x:Name="b00" Content="" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="FieldClick"/> <Button x:Name="b01" Content="" Grid.Column="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="FieldClick"/> <Button x:Name="b02" Content="" Grid.Column="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="FieldClick"/> <Button x:Name="b10" Content="" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="FieldClick"/> <Button x:Name="b11" Content="" Grid.Column="1" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="FieldClick"/> <Button x:Name="b12" Content="" Grid.Column="2" Grid.Row="1" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="FieldClick"/> <Button x:Name="b20" Content="" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="FieldClick"/> <Button x:Name="b21" Content="" Grid.Column="1" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="FieldClick"/> <Button x:Name="b22" Content="" Grid.Column="2" Grid.Row="2" HorizontalAlignment="Stretch" VerticalAlignment="Stretch" Click="FieldClick"/> </Grid>

Die Buttons wurden nach ihrer Position am Grid benannt um später besser den Status des geklickten Feldes auswerten zu können.

Im Code-Behind (ja wir verwenden für dieses der Einfachheit halber keinen MVVM-Pattern, Code Binding etc um es einfacher zu gestalten) legen wir uns einmal ein paar notwendige Felder/Variablen an:

public sealed partial class MainPage : Page { private FieldValues _playerTurn; private FieldValues[,] _board; private enum FieldValues { Empty, X, O, }

Wobei _playerTurn den jeweiligen Spieler (X / O) beinhaltet und im _board wir die jeweilige Farbe gesetzt.

Um auch das Spielbrett zu initialisieren definieren wir ResetGame():

private void ResetGame() { _playerTurn = FieldValues.X; _board = new FieldValues[3, 3]; var boardGrid = BoardGrid; foreach (var fieldObj in boardGrid.Children) { var fieldBtn = fieldObj as Button; if (fieldBtn != null) { fieldBtn.Background = new SolidColorBrush(Colors.Black); } } }

Hier setzen wir, dass der Spieler “X” beginnt, initialisieren wir das Spielbrett und setzen uns die Farbe Schwarz in die jeweiligen Felder.

Jetzt brauchen wir noch die Aktion, die beim Drücken auf das jeweilige Feld das Feld in der Spielerfarbe einfärbt und auch den Spieler “wechselt” (von Spieler “X” auf Spieler “O”):

private async void FieldClick(object sender, RoutedEventArgs e) { var btn = (Button) sender; var btnName = btn.Name; var row = int.Parse(btnName.Substring(1, 1)); var col = int.Parse(btnName.Substring(2, 1)); SetField(row, col); SetFieldColor(row, col, btn); await CheckWinner(); }
Aus dem Button-Namen ermitteln wir uns die Row und Column und setzen auch die Farbe und den jeweiligen Spieler:
private void SetFieldColor(int row, int col, Button btn) { var fieldValue = _board[row, col]; Color fieldColor; switch (fieldValue) { case FieldValues.Empty: fieldColor = Colors.Black; break; case FieldValues.X: fieldColor = Colors.Red; break; case FieldValues.O: fieldColor = Colors.Blue; break; } btn.Background = new SolidColorBrush(fieldColor); }

Hat der Spieler “X” gedrückt wir das Feld Rot, war der Spieler “O” dran wird es blau. Um den Gewinner feststellen zu können müssen wir noch am jeweiligen Feld festlegen, wer nun gedrückt hat:

private void SetField(int row, int col) { if (_board[row, col] == FieldValues.Empty) { _board[row, col] = _playerTurn; if (_playerTurn == FieldValues.X) { _playerTurn = FieldValues.O; } else { _playerTurn = FieldValues.X; } } }

Gleichzeitig wechseln wir den Spieler.

Nun noch den Gewinner ermitteln und fertig ist das “Tic Tac Toe” Spiel:

private async Task CheckWinner() { var winner = FieldValues.Empty; // Check rows for (int row = 0; row < 3; row++) { if (_board[row, 0] == _board[row, 1] && _board[row, 1] == _board[row, 2]) { winner = _board[row, 0]; break; } } // Check columns for (int col = 0; col < 3; col++) { if (_board[0, col] == _board[1, col] && _board[1, col] == _board[2, col]) { winner = _board[0, col]; break; } } // Check diagonals if (_board[0, 0] == _board[1, 1] && _board[1, 1] == _board[2, 2]) { winner = _board[1, 1]; } if (_board[0, 2] == _board[1, 1] && _board[1, 1] == _board[2, 0]) { winner = _board[1, 1]; } // Check winner if (winner != FieldValues.Empty) { var winnerDlg = new MessageDialog("Winner: " + winner); await winnerDlg.ShowAsync(); ResetGame(); } // Check for tie - all field taken var isTie = true; foreach (var curField in _board) { if (curField == FieldValues.Empty) { isTie = false; break; } } if (isTie) { var winnerDlg = new MessageDialog("Tie! Play again."); await winnerDlg.ShowAsync(); ResetGame(); } } }

Hier werden einfach die Rows, Columns und die Diagonale ausgewertet.

Nun wird es spannend, wir wollen nun unser simples “Tic Tac Toe” mit Gesten steuerbar machen.

Wir brauchen dazu:

  1. Einen Kinect for Windows V2 Sensor
  2. Kinect for Windows SDK 2.0 derzeit noch in Public Preview
  3. Einen halbwegs leistungsstarken Rechner (i7, USB 3.0, 4GB Ram)

Nach installation des SDK’s den Sensor einfach anstecken und testen ob alles geklappt hat.

Jetzt müssen wir einfach die Referenzen hinzufügen:

Referenzes

Im Manifest müssen wir Zugriff auf die Webcam und Micro erlauben, sonst kann der Sensor aus der App heraus nicht angesprochen werden:Manifest

 

Jetzt fehlen nur noch ein paar Zeilen Code in der App.Xaml.Cs und unser Projekt kann nun auch per Geste gesteuert werden:

// Initialize Kinect KinectRegion = new KinectRegion {Content = rootFrame}; Window.Current.Content = KinectRegion; // Ensure the current window is active Window.Current.Activate();

Fertig !  -  die komplette Lösung könnt ihr hierherunterladen!

Wie Ihr seht ist für reine Gestensteuerung die eigentliche App der viel größere Aufwand als die Implementierung der Kinect. Um Bodypoints auslesen zu können, 3D tracken etc. ist natürlich etwas mehr Implementierungsaufwand notwendig, mehr dazu in einen der folgenden Posts Zwinkerndes Smiley

Bei Fragen tweet me.


Ich bin seit 1992 in der IT Branche als Developer tätig, und habe im laufe der Jahre neben Technologie Wissen auch jede Menge Prozesswissen aus dem Bankenbereich und Industriebereich ansammeln können. Dies ermöglicht es mir neue Technologien auf konkrete Anwendungsbeispiele zu übertragen. Im Tieto’s Future Office Team– dass sich hauptsächlich mit dem „Neuen Arbeiten“ beschäftigt, bin ich als Mobility Evangelist tätig, und habe die Aufgabe neueste Technologien zu evaluieren und für unsere Kunden einsetzbar zu machen. Unter anderem testen wir auch den Einsatz von Kinect und Google Glass für unsere Kunden.

Das ist ein Gastbeitrag. Die Meinung des Autors muss sich nicht mit jener von Microsoft decken. Durch den Artikel ergeben sich keinerlei Handlungsempfehlungen. Microsoft übernimmt keine Gewähr für die Richtigkeit oder Vollständigkeit der Angaben.

Add comment

  Country flag

biuquote
  • Comment
  • Preview
Loading

Datenschutzhinweis: Sie stimmen durch "Kommentar speichern" der Speicherung Ihrer Angaben durch Microsoft Österreich für die Beantwortung der Anfrage zu. Sie erhalten dadurch keine unerwünschten Werbezusendungen. Ihre Emailadresse wird auf Ihren Wunsch dazu verwendet Sie über neue Kommentare zu informieren.

Microsoft respektiert den Datenschutz. Datenschutz & Cookies


 
    Build2016
    Developer Events

Aktuelle Downloads

Azure Free Trial
 
Visual Studio Downloads
 
Windows Azure Free Trial
Instagram
CodeFest.at on Facebook

Datenschutz & Cookies · Nutzungsbedingungen · Impressum · Markenzeichen
© 2013 Microsoft. Alle Rechte vorbehalten · BlogEngine.NET 2.7.0.0 · Diese Website wird für Microsoft von atwork gehostet.
powered by atwork