Desarrollo del reto 3

Añadiendo otras funcionalidades

Una vez hecho el reconocimiento de dar la patada identificado con las dos posturas, hemos decidido añadir otras funcionalidades para mejorar la experiencia del usuario, nuestra primera medida será añadir un botón a cierta distancia encima del usuario, que al pulsarlo se inicie la aplicación y a su vez, empiece a sonar una canción. Para crear dicho botón, añadimos la textura del Ying-Yang, como mencionamos anteriormente:

ImageBrush yinyangBrush = new ImageBrush(new BitmapImage(new Uri(@"PATH IMAGEN")));

Así, creamos un pincel (Objeto Brush) con la imagen del Ying-Yang, ahora tenemos que dibujarla, para ello previamente creamos una variable Tipo Point en la que vamos a definir la ubicación del objeto, para ello utilizaremos de referencia la posición de la cabeza del body, y la distanciamos 35 unidades en el eje Y para que se pose sobre el usuario:

Point posEsferaMusica = new Point(jointPoints[JointType.Head].X, (jointPoints[JointType.Head].Y) - 35.0);

Y la dibujamos en esta posición, encima de la cabeza del body a 35 unidades de distancia:

dc.DrawEllipse(yinyangBrush, null, posEsferaMusica, 20, 20);

Una vez creada la esfera, toca darle funcionalidad. En este caso le vamos a otorgar que sea el botón de Start de la aplicación y que al pulsarlo se lance la música y comiencen las siguientes fases, pero para ello necesitamos cargar las siguientes librerías y variables:

using System.Media; //Librería Música

private SoundPlayer kungfu = new SoundPlayer(@"PATH MUSICA.wav");

Una vez añadido esto, solo nos queda implementar dicha funcionalidad, para ello hay que crear un método que nos detecte cuando estamos tocando la esfera implementada anteriormente:

private bool PosturaStart(){}

Esta función devuelve true cuando el Joint de la mano izquierda o derecha se encuentra exactamente a la misma altura que la esfera, es decir, la toca.

De este modo queda definida la funcionalidad de la esfera. Ahora solo nos queda la interacción con el usuario y ordenar secuencialmente las acciones. Queda de esta manera:

Figura 3.

Interacción con el usuario:

Necesitamos guiar al usuario para conseguir que represente las posturas,  decidimos interactuar con el usuario por medio de imágenes y algo de texto, para hacerlo más intuitivo y fácil. En primer lugar pensamos en utilizar XAML añadiendo imágenes y habilitando y deshabilitando la visibilidad de estas para cambiarlas cuando sea necesario para las diferentes fases. Como se puede ver en la Figura 4, tenemos una serie de imágenes preparadas con figuras y textos que ofrecen unas instrucciones que permiten al usuario pasar por las diferentes fases.

Figura 4.

El método que estábamos utilizando con las imágenes XAML no nos pareció el mejor y una vez que aprendimos a crear Brushes con texturas, decidimos utilizar varios Rectangles con las imágenes de las fases como texturas.

Fases de la aplicación:

La aplicación se compone de cuatro fases:

• Fase 1: Se muestra la imagen inicial en la que se pide al usuario que toque el Yin Yang para comenzar. Al tocar el YinYang empieza a sonar la música y comenzará la fase 2.
• Fase 2: Se pide al usuario que imite la postura de Karate Kid como hace la figura de ejemplo. Aquí entra en acción la función de la postura mirando que la rodilla esté a la altura de la cadera. Al hacer la primera postura con la pierna izquierda comienza la fase 3.
• Fase 3: Se pide al usuario hacer la segunda postura, en este caso con la pierna derecha. Hacer esta postura dará comienzo a la fase 4.
• Fase 4: Fase final de la aplicación en la que se invita al usuario a hacer un saludo como indica la figura de referencia. Este saludo parará la música y finalizará la aplicación.

Para el pase de fases hemos contabilizado el tiempo en que se estaba en una postura, esto se hace para que no se acepte la postura al mover partes del cuerpo por error. El tiempo en que se debe estar en una postura viene dado por el número de frames que han pasado desde que se tomó dicha postura, nosotros hemos puesto que las posturas esten entre 30 y 40 frames pues la Kinect 2 recibe 30 fps.

Una vez hecho esto, ya tenemos definida entera nuestra aplicación, el repositorio es: Proyecto Github